diff --git a/client/package.json b/client/package.json
index 2bcf2b031..50cd42ccb 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,7 @@
     "test:watch": "jest --config jest.config.cjs --watch"
   },
   "dependencies": {
+    "@mcp-ui/client": "^1.1.0",
     "@modelcontextprotocol/sdk": "^1.11.0",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.3",
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index aa67bfcff..09526d5dd 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -18,6 +18,7 @@ import { Loader2, Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
+import { HtmlResource } from "@mcp-ui/client";
 
 const ToolsTab = ({
   tools,
@@ -82,32 +83,38 @@ const ToolsTab = ({
               <span className="text-green-600 font-semibold">Success</span>
             )}
           </h4>
-          {structuredResult.content.map((item, index) => (
-            <div key={index} className="mb-2">
-              {item.type === "text" && (
-                <JsonView data={item.text} isError={isError} />
-              )}
-              {item.type === "image" && (
-                <img
-                  src={`data:${item.mimeType};base64,${item.data}`}
-                  alt="Tool result image"
-                  className="max-w-full h-auto"
-                />
-              )}
-              {item.type === "resource" &&
-                (item.resource?.mimeType?.startsWith("audio/") ? (
-                  <audio
-                    controls
-                    src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
-                    className="w-full"
-                  >
-                    <p>Your browser does not support audio playback</p>
-                  </audio>
-                ) : (
-                  <JsonView data={item.resource} />
-                ))}
-            </div>
-          ))}
+          {Array.isArray(structuredResult?.content) &&
+            structuredResult.content.map((item, index) => (
+              <div key={index} className="mb-2">
+                {item.type === "text" && (
+                  <JsonView data={item.text} isError={isError} />
+                )}
+                {item.type === "image" && (
+                  <img
+                    src={`data:${item.mimeType};base64,${item.data}`}
+                    alt="Tool result image"
+                    className="max-w-full h-auto"
+                  />
+                )}
+                {item.type === "resource" &&
+                  (item.resource?.mimeType === "text/html" ? (
+                    <HtmlResource
+                      resource={item.resource}
+                      style={{ minHeight: "500px" }}
+                    />
+                  ) : item.resource?.mimeType?.startsWith("audio/") ? (
+                    <audio
+                      controls
+                      src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
+                      className="w-full"
+                    >
+                      <p>Your browser does not support audio playback</p>
+                    </audio>
+                  ) : (
+                    <JsonView data={item.resource} />
+                  ))}
+              </div>
+            ))}
         </>
       );
     } else if ("toolResult" in toolResult) {
diff --git a/package-lock.json b/package-lock.json
index 92e89f74b..51a787004 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,6 +66,7 @@
       "version": "0.12.0",
       "license": "MIT",
       "dependencies": {
+        "@mcp-ui/client": "^1.1.0",
         "@modelcontextprotocol/sdk": "^1.11.0",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-dialog": "^1.1.3",
@@ -1991,6 +1992,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mcp-ui/client": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mcp-ui/client/-/client-1.1.0.tgz",
+      "integrity": "sha512-/jGfyFpOwQP9Dj8luaIOvHJEehS6OCS51UccBFiLD2JbAwOn0+/v/6Uqt+QHun7/wBgX3AGLllKO0kU7EqorLg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@modelcontextprotocol/sdk": "*",
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/@modelcontextprotocol/inspector-cli": {
       "resolved": "cli",
       "link": true
@@ -8407,15 +8418,6 @@
         "node": "20 || >=22"
       }
     },
-    "node_modules/path-to-regexp": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
-      "integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",