diff --git a/client/jest.config.cjs b/client/jest.config.cjs
index 9b793eae6..704852961 100644
--- a/client/jest.config.cjs
+++ b/client/jest.config.cjs
@@ -13,8 +13,15 @@ module.exports = {
         tsconfig: "tsconfig.jest.json",
       },
     ],
+    "^.+\\.m?js$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.jest.json",
+      },
+    ],
   },
   extensionsToTreatAsEsm: [".ts", ".tsx"],
+  transformIgnorePatterns: ["node_modules/(?!(@modelcontextprotocol)/)"],
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
   // Exclude directories and files that don't need to be tested
   testPathIgnorePatterns: [
diff --git a/client/package.json b/client/package.json
index 1feec2122..1ac32027c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,8 @@
     "cleanup:e2e": "node e2e/global-teardown.js"
   },
   "dependencies": {
+    "@mcp-ui/client": "^6.0.0",
+    "@modelcontextprotocol/ext-apps": "^1.0.0",
     "@modelcontextprotocol/sdk": "^1.25.2",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.3",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 39fc2812a..5a69495b6 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -51,6 +51,7 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import {
+  AppWindow,
   Bell,
   Files,
   FolderTree,
@@ -75,6 +76,7 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import TasksTab from "./components/TasksTab";
+import AppsTab from "./components/AppsTab";
 import { InspectorConfig } from "./lib/configurationTypes";
 import {
   getMCPProxyAddress,
@@ -126,6 +128,9 @@ const App = () => {
   const [resourceContentMap, setResourceContentMap] = useState<
     Record<string, string>
   >({});
+  const [fetchingResources, setFetchingResources] = useState<Set<string>>(
+    new Set(),
+  );
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [promptContent, setPromptContent] = useState<string>("");
   const [tools, setTools] = useState<Tool[]>([]);
@@ -308,11 +313,13 @@ const App = () => {
       ...(serverCapabilities?.prompts ? ["prompts"] : []),
       ...(serverCapabilities?.tools ? ["tools"] : []),
       ...(serverCapabilities?.tasks ? ["tasks"] : []),
+      "apps",
       "ping",
       "sampling",
       "elicitations",
       "roots",
       "auth",
+      "metadata",
     ];
 
     if (!validTabs.includes(originatingTab)) return;
@@ -440,11 +447,13 @@ const App = () => {
         ...(serverCapabilities?.prompts ? ["prompts"] : []),
         ...(serverCapabilities?.tools ? ["tools"] : []),
         ...(serverCapabilities?.tasks ? ["tasks"] : []),
+        "apps",
         "ping",
         "sampling",
         "elicitations",
         "roots",
         "auth",
+        "metadata",
       ];
 
       const isValidTab = validTabs.includes(hash);
@@ -473,6 +482,13 @@ const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mcpClient, activeTab]);
 
+  useEffect(() => {
+    if (mcpClient && activeTab === "apps" && serverCapabilities?.tools) {
+      void listTools();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mcpClient, activeTab, serverCapabilities?.tools]);
+
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
   }, [command]);
@@ -757,11 +773,13 @@ const App = () => {
             ...(serverCapabilities?.prompts ? ["prompts"] : []),
             ...(serverCapabilities?.tools ? ["tools"] : []),
             ...(serverCapabilities?.tasks ? ["tasks"] : []),
+            "apps",
             "ping",
             "sampling",
             "elicitations",
             "roots",
             "auth",
+            "metadata",
           ];
 
           if (validTabs.includes(originatingTab)) {
@@ -851,22 +869,48 @@ const App = () => {
   };
 
   const readResource = async (uri: string) => {
+    if (fetchingResources.has(uri) || resourceContentMap[uri]) {
+      return;
+    }
+
+    console.log("[App] Reading resource:", uri);
+    setFetchingResources((prev) => new Set(prev).add(uri));
     lastToolCallOriginTabRef.current = currentTabRef.current;
 
-    const response = await sendMCPRequest(
-      {
-        method: "resources/read" as const,
-        params: { uri },
-      },
-      ReadResourceResultSchema,
-      "resources",
-    );
-    const content = JSON.stringify(response, null, 2);
-    setResourceContent(content);
-    setResourceContentMap((prev) => ({
-      ...prev,
-      [uri]: content,
-    }));
+    try {
+      const response = await sendMCPRequest(
+        {
+          method: "resources/read" as const,
+          params: { uri },
+        },
+        ReadResourceResultSchema,
+        "resources",
+      );
+      console.log("[App] Resource read response:", {
+        uri,
+        responseLength: JSON.stringify(response).length,
+        hasContents: !!(response as { contents?: unknown[] }).contents,
+      });
+      const content = JSON.stringify(response, null, 2);
+      setResourceContent(content);
+      setResourceContentMap((prev) => ({
+        ...prev,
+        [uri]: content,
+      }));
+    } catch (error) {
+      console.error(`[App] Failed to read resource ${uri}:`, error);
+      const errorString = (error as Error).message ?? String(error);
+      setResourceContentMap((prev) => ({
+        ...prev,
+        [uri]: JSON.stringify({ error: errorString }),
+      }));
+    } finally {
+      setFetchingResources((prev) => {
+        const next = new Set(prev);
+        next.delete(uri);
+        return next;
+      });
+    }
   };
 
   const subscribeToResource = async (uri: string) => {
@@ -1308,6 +1352,10 @@ const App = () => {
                   <ListTodo className="w-4 h-4 mr-2" />
                   Tasks
                 </TabsTrigger>
+                <TabsTrigger value="apps">
+                  <AppWindow className="w-4 h-4 mr-2" />
+                  Apps
+                </TabsTrigger>
                 <TabsTrigger value="ping">
                   <Bell className="w-4 h-4 mr-2" />
                   Ping
@@ -1497,6 +1545,19 @@ const App = () => {
                       error={errors.tasks}
                       nextCursor={nextTaskCursor}
                     />
+                    <AppsTab
+                      sandboxPath={`${getMCPProxyAddress(config)}/sandbox`}
+                      tools={tools}
+                      listTools={() => {
+                        clearError("tools");
+                        listTools();
+                      }}
+                      error={errors.tools}
+                      mcpClient={mcpClient}
+                      onNotification={(notification) => {
+                        setNotifications((prev) => [...prev, notification]);
+                      }}
+                    />
                     <ConsoleTab />
                     <PingTab
                       onPingClick={() => {
diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
new file mode 100644
index 000000000..e0c259809
--- /dev/null
+++ b/client/src/components/AppRenderer.tsx
@@ -0,0 +1,128 @@
+import { useMemo, useState } from "react";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import {
+  Tool,
+  ContentBlock,
+  ServerNotification,
+  LoggingMessageNotificationParams,
+} from "@modelcontextprotocol/sdk/types.js";
+import {
+  AppRenderer as McpUiAppRenderer,
+  type McpUiHostContext,
+  type RequestHandlerExtra,
+} from "@mcp-ui/client";
+import {
+  type McpUiMessageRequest,
+  type McpUiMessageResult,
+} from "@modelcontextprotocol/ext-apps/app-bridge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import { useToast } from "@/lib/hooks/useToast";
+
+interface AppRendererProps {
+  sandboxPath: string;
+  tool: Tool;
+  mcpClient: Client | null;
+  toolInput?: Record<string, unknown>;
+  onNotification?: (notification: ServerNotification) => void;
+}
+
+const AppRenderer = ({
+  sandboxPath,
+  tool,
+  mcpClient,
+  toolInput,
+  onNotification,
+}: AppRendererProps) => {
+  const [error, setError] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  const hostContext: McpUiHostContext = useMemo(
+    () => ({
+      theme: document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light",
+    }),
+    [],
+  );
+
+  const handleOpenLink = async ({ url }: { url: string }) => {
+    let isError = true;
+    if (url.startsWith("https://") || url.startsWith("http://")) {
+      window.open(url, "_blank");
+      isError = false;
+    }
+    return { isError };
+  };
+
+  const handleMessage = async (
+    params: McpUiMessageRequest["params"],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _extra: RequestHandlerExtra,
+  ): Promise<McpUiMessageResult> => {
+    const message = params.content
+      .filter((block): block is ContentBlock & { type: "text" } =>
+        Boolean(block.type === "text"),
+      )
+      .map((block) => block.text)
+      .join("\n");
+
+    if (message) {
+      toast({
+        description: message,
+      });
+    }
+
+    return {};
+  };
+
+  const handleLoggingMessage = (params: LoggingMessageNotificationParams) => {
+    if (onNotification) {
+      onNotification({
+        method: "notifications/message",
+        params,
+      } as ServerNotification);
+    }
+  };
+
+  if (!mcpClient) {
+    return (
+      <Alert>
+        <AlertCircle className="h-4 w-4" />
+        <AlertDescription>Waiting for MCP client...</AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {error && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <div
+        className="flex-1 border rounded overflow-hidden"
+        style={{ minHeight: "400px" }}
+      >
+        <McpUiAppRenderer
+          client={mcpClient}
+          onOpenLink={handleOpenLink}
+          onMessage={handleMessage}
+          onLoggingMessage={handleLoggingMessage}
+          toolName={tool.name}
+          hostContext={hostContext}
+          toolInput={toolInput}
+          sandbox={{
+            url: new URL(sandboxPath, window.location.origin),
+          }}
+          onError={(err) => setError(err.message)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AppRenderer;
diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
new file mode 100644
index 000000000..1943c4396
--- /dev/null
+++ b/client/src/components/AppsTab.tsx
@@ -0,0 +1,530 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import { TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  AlertCircle,
+  X,
+  Play,
+  ChevronRight,
+  Maximize2,
+  Minimize2,
+} from "lucide-react";
+import { Tool, ServerNotification } from "@modelcontextprotocol/sdk/types.js";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { getToolUiResourceUri } from "@modelcontextprotocol/ext-apps/app-bridge";
+import AppRenderer from "./AppRenderer";
+import ListPane from "./ListPane";
+import IconDisplay, { WithIcons } from "./IconDisplay";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm";
+import { JsonSchemaType, JsonValue } from "@/utils/jsonUtils";
+import {
+  generateDefaultValue,
+  isPropertyRequired,
+  normalizeUnionType,
+  resolveRef,
+} from "@/utils/schemaUtils";
+
+interface AppsTabProps {
+  sandboxPath: string;
+  tools: Tool[];
+  listTools: () => void;
+  error: string | null;
+  mcpClient: Client | null;
+  onNotification?: (notification: ServerNotification) => void;
+}
+
+// Type guard to check if a tool has UI metadata
+const hasUIMetadata = (tool: Tool): boolean => {
+  return !!getToolUiResourceUri(tool);
+};
+
+const AppsTab = ({
+  sandboxPath,
+  tools,
+  listTools,
+  error,
+  mcpClient,
+  onNotification,
+}: AppsTabProps) => {
+  const [appTools, setAppTools] = useState<Tool[]>([]);
+  const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
+  const [params, setParams] = useState<Record<string, unknown>>({});
+  const [isAppOpen, setIsAppOpen] = useState(false);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [hasValidationErrors, setHasValidationErrors] = useState(false);
+  const formRefs = useRef<Record<string, DynamicJsonFormRef | null>>({});
+
+  // Function to check if any form has validation errors
+  const checkValidationErrors = useCallback(() => {
+    const errors = Object.values(formRefs.current).some(
+      (ref) => ref && !ref.validateJson().isValid,
+    );
+    setHasValidationErrors(errors);
+    return errors;
+  }, []);
+
+  // Filter tools that have UI metadata
+  useEffect(() => {
+    const filtered = tools.filter(hasUIMetadata);
+    console.log("[AppsTab] Filtered app tools:", {
+      totalTools: tools.length,
+      appTools: filtered.length,
+      appToolNames: filtered.map((t) => t.name),
+    });
+    setAppTools(filtered);
+
+    // If current selected tool is no longer available, reset selection
+    if (selectedTool && !filtered.find((t) => t.name === selectedTool.name)) {
+      setSelectedTool(null);
+      setIsAppOpen(false);
+    }
+  }, [tools, selectedTool]);
+
+  useEffect(() => {
+    if (selectedTool) {
+      const initialParams = Object.entries(
+        selectedTool.inputSchema.properties ?? [],
+      ).map(([key, value]) => {
+        // First resolve any $ref references
+        const resolvedValue = resolveRef(
+          value as JsonSchemaType,
+          selectedTool.inputSchema as JsonSchemaType,
+        );
+        return [
+          key,
+          generateDefaultValue(
+            resolvedValue,
+            key,
+            selectedTool.inputSchema as JsonSchemaType,
+          ),
+        ];
+      });
+      setParams(Object.fromEntries(initialParams));
+      setHasValidationErrors(false);
+      formRefs.current = {};
+    } else {
+      setParams({});
+      setIsAppOpen(false);
+    }
+  }, [selectedTool]);
+
+  const handleRefresh = useCallback(() => {
+    listTools();
+  }, [listTools]);
+
+  const handleCloseApp = useCallback(() => {
+    setIsAppOpen(false);
+  }, []);
+
+  const handleOpenApp = useCallback(() => {
+    if (!checkValidationErrors()) {
+      setIsAppOpen(true);
+    }
+  }, [checkValidationErrors]);
+
+  const handleSelectTool = useCallback((tool: Tool) => {
+    setSelectedTool(tool);
+    const hasFields =
+      tool.inputSchema.properties &&
+      Object.keys(tool.inputSchema.properties).length > 0;
+    setIsAppOpen(!hasFields);
+  }, []);
+
+  const handleDeselectTool = useCallback(() => {
+    setSelectedTool(null);
+    setIsAppOpen(false);
+    setIsMaximized(false);
+  }, []);
+
+  return (
+    <TabsContent value="apps" className="space-y-4">
+      <div
+        className={
+          isMaximized
+            ? "grid grid-cols-1 gap-4"
+            : "grid grid-cols-1 md:grid-cols-2 gap-4"
+        }
+      >
+        {!isMaximized && (
+          <ListPane
+            items={appTools}
+            listItems={handleRefresh}
+            setSelectedItem={handleSelectTool}
+            renderItem={(tool) => {
+              return (
+                <div className="flex items-start w-full gap-2">
+                  <div className="flex-shrink-0 mt-1">
+                    <IconDisplay icons={(tool as WithIcons).icons} size="sm" />
+                  </div>
+                  <div className="flex flex-col flex-1 min-w-0">
+                    <span className="truncate font-semibold">{tool.name}</span>
+                    {tool.description && (
+                      <span className="text-sm text-gray-500 text-left line-clamp-2">
+                        {tool.description}
+                      </span>
+                    )}
+                  </div>
+                  <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400 mt-1" />
+                </div>
+              );
+            }}
+            title="MCP Apps"
+            buttonText="Refresh Apps"
+          />
+        )}
+
+        <div className="bg-card border border-border rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200 dark:border-border">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {selectedTool && (
+                  <IconDisplay
+                    icons={(selectedTool as WithIcons).icons}
+                    size="md"
+                  />
+                )}
+                <h3 className="font-semibold">
+                  {selectedTool ? selectedTool.name : "Select an app"}
+                </h3>
+              </div>
+              <div className="flex items-center gap-2">
+                {selectedTool && isAppOpen && (
+                  <Button
+                    onClick={() => setIsMaximized(!isMaximized)}
+                    variant="ghost"
+                    size="sm"
+                    aria-label={isMaximized ? "Minimize" : "Maximize"}
+                  >
+                    {isMaximized ? (
+                      <Minimize2 className="w-4 h-4" />
+                    ) : (
+                      <Maximize2 className="w-4 h-4" />
+                    )}
+                  </Button>
+                )}
+                {selectedTool && (
+                  <Button
+                    onClick={handleDeselectTool}
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Close app"
+                  >
+                    <X className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="p-4">
+            {error && (
+              <Alert variant="destructive" className="mb-4">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {selectedTool ? (
+              (() => {
+                const hasFields =
+                  selectedTool.inputSchema.properties &&
+                  Object.keys(selectedTool.inputSchema.properties).length > 0;
+
+                return (
+                  <div className="space-y-4">
+                    {!isAppOpen ? (
+                      <div className="space-y-4">
+                        {selectedTool.description && (
+                          <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">
+                            {selectedTool.description}
+                          </p>
+                        )}
+
+                        <div className="space-y-4 border rounded-lg p-4 bg-muted/30">
+                          <h4 className="font-medium text-sm">App Input</h4>
+                          {Object.entries(
+                            selectedTool.inputSchema.properties ?? [],
+                          ).map(([key, value]) => {
+                            // First resolve any $ref references
+                            const resolvedValue = resolveRef(
+                              value as JsonSchemaType,
+                              selectedTool.inputSchema as JsonSchemaType,
+                            );
+                            const prop = normalizeUnionType(resolvedValue);
+                            const inputSchema =
+                              selectedTool.inputSchema as JsonSchemaType;
+                            const required = isPropertyRequired(
+                              key,
+                              inputSchema,
+                            );
+
+                            return (
+                              <div key={key} className="space-y-2">
+                                <div className="flex justify-between">
+                                  <Label
+                                    htmlFor={key}
+                                    className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                                  >
+                                    {key}
+                                    {required && (
+                                      <span className="text-red-500 ml-1">
+                                        *
+                                      </span>
+                                    )}
+                                  </Label>
+                                  {prop.nullable ? (
+                                    <div className="flex items-center space-x-2">
+                                      <Checkbox
+                                        id={`${key}-null`}
+                                        checked={params[key] === null}
+                                        onCheckedChange={(checked: boolean) =>
+                                          setParams({
+                                            ...params,
+                                            [key]: checked
+                                              ? null
+                                              : prop.type === "array"
+                                                ? undefined
+                                                : prop.default !== null
+                                                  ? prop.default
+                                                  : prop.type === "boolean"
+                                                    ? false
+                                                    : prop.type === "string"
+                                                      ? ""
+                                                      : undefined,
+                                          })
+                                        }
+                                      />
+                                      <label
+                                        htmlFor={`${key}-null`}
+                                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                                      >
+                                        null
+                                      </label>
+                                    </div>
+                                  ) : null}
+                                </div>
+
+                                <div
+                                  className={`${prop.nullable && params[key] === null ? "pointer-events-none opacity-50" : ""}`}
+                                >
+                                  {prop.type === "boolean" ? (
+                                    <div className="flex items-center space-x-2">
+                                      <Checkbox
+                                        id={key}
+                                        checked={!!params[key]}
+                                        onCheckedChange={(checked: boolean) =>
+                                          setParams({
+                                            ...params,
+                                            [key]: checked,
+                                          })
+                                        }
+                                      />
+                                      <label
+                                        htmlFor={key}
+                                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                                      >
+                                        {prop.description ||
+                                          "Toggle this option"}
+                                      </label>
+                                    </div>
+                                  ) : prop.type === "string" && prop.enum ? (
+                                    <Select
+                                      value={
+                                        params[key] === undefined
+                                          ? ""
+                                          : String(params[key])
+                                      }
+                                      onValueChange={(value) => {
+                                        setParams({
+                                          ...params,
+                                          [key]:
+                                            value === "" ? undefined : value,
+                                        });
+                                      }}
+                                    >
+                                      <SelectTrigger id={key}>
+                                        <SelectValue
+                                          placeholder={
+                                            prop.description ||
+                                            "Select an option"
+                                          }
+                                        />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {prop.enum.map((option) => (
+                                          <SelectItem
+                                            key={option}
+                                            value={option}
+                                          >
+                                            {option}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  ) : prop.type === "string" ? (
+                                    <Textarea
+                                      id={key}
+                                      placeholder={prop.description}
+                                      value={
+                                        params[key] === undefined
+                                          ? ""
+                                          : String(params[key])
+                                      }
+                                      onChange={(e) => {
+                                        setParams({
+                                          ...params,
+                                          [key]:
+                                            e.target.value === ""
+                                              ? undefined
+                                              : e.target.value,
+                                        });
+                                      }}
+                                    />
+                                  ) : prop.type === "object" ||
+                                    prop.type === "array" ? (
+                                    <DynamicJsonForm
+                                      ref={(ref) =>
+                                        (formRefs.current[key] = ref)
+                                      }
+                                      schema={{
+                                        type: prop.type,
+                                        properties: prop.properties,
+                                        description: prop.description,
+                                        items: prop.items,
+                                      }}
+                                      value={
+                                        (params[key] as JsonValue) ??
+                                        generateDefaultValue(prop)
+                                      }
+                                      onChange={(newValue: JsonValue) => {
+                                        setParams({
+                                          ...params,
+                                          [key]: newValue,
+                                        });
+                                        setTimeout(checkValidationErrors, 100);
+                                      }}
+                                    />
+                                  ) : prop.type === "number" ||
+                                    prop.type === "integer" ? (
+                                    <Input
+                                      type="number"
+                                      id={key}
+                                      placeholder={prop.description}
+                                      value={
+                                        params[key] === undefined
+                                          ? ""
+                                          : String(params[key])
+                                      }
+                                      onChange={(e) => {
+                                        const value = e.target.value;
+                                        if (value === "") {
+                                          setParams({
+                                            ...params,
+                                            [key]: undefined,
+                                          });
+                                        } else {
+                                          const num = Number(value);
+                                          setParams({
+                                            ...params,
+                                            [key]: isNaN(num) ? value : num,
+                                          });
+                                        }
+                                      }}
+                                    />
+                                  ) : (
+                                    <DynamicJsonForm
+                                      ref={(ref) =>
+                                        (formRefs.current[key] = ref)
+                                      }
+                                      schema={{
+                                        type: prop.type,
+                                        properties: prop.properties,
+                                        description: prop.description,
+                                        items: prop.items,
+                                      }}
+                                      value={params[key] as JsonValue}
+                                      onChange={(newValue: JsonValue) => {
+                                        setParams({
+                                          ...params,
+                                          [key]: newValue,
+                                        });
+                                        setTimeout(checkValidationErrors, 100);
+                                      }}
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                            );
+                          })}
+
+                          <Button
+                            onClick={handleOpenApp}
+                            className="w-full"
+                            disabled={hasValidationErrors}
+                          >
+                            <Play className="w-4 h-4 mr-2" />
+                            Open App
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        {hasFields && (
+                          <div className="flex justify-end">
+                            <Button
+                              onClick={handleCloseApp}
+                              variant="outline"
+                              size="sm"
+                            >
+                              Back to Input
+                            </Button>
+                          </div>
+                        )}
+                        <div className="h-[600px]">
+                          <AppRenderer
+                            sandboxPath={sandboxPath}
+                            tool={selectedTool}
+                            mcpClient={mcpClient}
+                            toolInput={params}
+                            onNotification={onNotification}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })()
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12 text-muted-foreground space-y-4">
+                <AlertCircle className="w-12 h-12 opacity-20" />
+                <p>Select an app from the list to get started</p>
+                {appTools.length === 0 && (
+                  <p className="text-xs text-center max-w-[200px]">
+                    No MCP Apps available. Apps are tools that include a{" "}
+                    <code className="bg-muted px-1 rounded">
+                      _meta.ui.resourceUri
+                    </code>
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </TabsContent>
+  );
+};
+
+export default AppsTab;
diff --git a/client/src/components/ListPane.tsx b/client/src/components/ListPane.tsx
index 8cc2c1fe7..e88aadb5a 100644
--- a/client/src/components/ListPane.tsx
+++ b/client/src/components/ListPane.tsx
@@ -6,7 +6,7 @@ import { useState, useMemo, useRef } from "react";
 type ListPaneProps<T> = {
   items: T[];
   listItems: () => void;
-  clearItems: () => void;
+  clearItems?: () => void;
   setSelectedItem: (item: T) => void;
   renderItem: (item: T) => React.ReactNode;
   title: string;
@@ -101,14 +101,16 @@ const ListPane = <T extends object>({
         >
           {buttonText}
         </Button>
-        <Button
-          variant="outline"
-          className="w-full mb-4"
-          onClick={clearItems}
-          disabled={items.length === 0}
-        >
-          Clear
-        </Button>
+        {clearItems && (
+          <Button
+            variant="outline"
+            className="w-full mb-4"
+            onClick={clearItems}
+            disabled={items.length === 0}
+          >
+            Clear
+          </Button>
+        )}
         <div className="space-y-2 overflow-y-auto max-h-96">
           {filteredItems.map((item, index) => (
             <div
diff --git a/client/src/components/__tests__/AppRenderer.test.tsx b/client/src/components/__tests__/AppRenderer.test.tsx
new file mode 100644
index 000000000..beb57e1ab
--- /dev/null
+++ b/client/src/components/__tests__/AppRenderer.test.tsx
@@ -0,0 +1,115 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, jest, beforeEach } from "@jest/globals";
+import AppRenderer from "../AppRenderer";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { RequestHandlerExtra } from "@mcp-ui/client";
+import { McpUiMessageResult } from "@modelcontextprotocol/ext-apps";
+
+// Mock the ext-apps module
+jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => ({
+  getToolUiResourceUri: (tool: Tool) => {
+    const meta = (tool as Tool & { _meta?: { ui?: { resourceUri?: string } } })
+      ._meta;
+    return meta?.ui?.resourceUri || null;
+  },
+}));
+
+// Mock toast hook
+const mockToast = jest.fn();
+jest.mock("@/lib/hooks/useToast", () => ({
+  useToast: () => ({
+    toast: mockToast,
+  }),
+}));
+
+// Mock @mcp-ui/client
+jest.mock("@mcp-ui/client", () => ({
+  AppRenderer: ({
+    toolName,
+    onMessage,
+  }: {
+    toolName: string;
+    onMessage?: (
+      params: { role: "user"; content: { type: "text"; text: string }[] },
+      extra: RequestHandlerExtra,
+    ) => Promise<McpUiMessageResult>;
+  }) => (
+    <div data-testid="mcp-ui-app-renderer">
+      <div data-testid="tool-name">{toolName}</div>
+      <button
+        data-testid="trigger-message"
+        onClick={() =>
+          onMessage?.(
+            { role: "user", content: [{ type: "text", text: "Test message" }] },
+            {} as RequestHandlerExtra,
+          )
+        }
+      >
+        Trigger Message
+      </button>
+    </div>
+  ),
+}));
+
+describe("AppRenderer", () => {
+  const mockTool: Tool = {
+    name: "testApp",
+    description: "Test app with UI",
+    inputSchema: {
+      type: "object" as const,
+      properties: {},
+    },
+    _meta: {
+      ui: {
+        resourceUri: "ui://test-app",
+      },
+    },
+  } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+  const mockMcpClient = {
+    request: jest.fn(),
+    getServerCapabilities: jest.fn().mockReturnValue({}),
+    setNotificationHandler: jest.fn(),
+  } as unknown as Client;
+
+  const defaultProps = {
+    sandboxPath: "/sandbox",
+    tool: mockTool,
+    mcpClient: mockMcpClient,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should display waiting state when mcpClient is null", () => {
+    render(<AppRenderer {...defaultProps} mcpClient={null} />);
+    expect(screen.getByText(/Waiting for MCP client/i)).toBeInTheDocument();
+  });
+
+  it("should render McpUiAppRenderer when client is ready", () => {
+    render(<AppRenderer {...defaultProps} />);
+
+    expect(screen.getByTestId("mcp-ui-app-renderer")).toBeInTheDocument();
+    expect(screen.getByTestId("tool-name")).toHaveTextContent("testApp");
+  });
+
+  it("should set minimum height on container", () => {
+    render(<AppRenderer {...defaultProps} />);
+
+    const container = screen.getByTestId("mcp-ui-app-renderer").parentElement;
+    expect(container).toHaveStyle({ minHeight: "400px" });
+  });
+
+  it("should show toast when onMessage is triggered", () => {
+    render(<AppRenderer {...defaultProps} />);
+
+    fireEvent.click(screen.getByTestId("trigger-message"));
+
+    expect(mockToast).toHaveBeenCalledWith({
+      description: "Test message",
+    });
+  });
+});
diff --git a/client/src/components/__tests__/AppsTab.test.tsx b/client/src/components/__tests__/AppsTab.test.tsx
new file mode 100644
index 000000000..27868fcad
--- /dev/null
+++ b/client/src/components/__tests__/AppsTab.test.tsx
@@ -0,0 +1,481 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, jest, beforeEach } from "@jest/globals";
+import AppsTab from "../AppsTab";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Tabs } from "../ui/tabs";
+
+// Mock AppRenderer component
+jest.mock("../AppRenderer", () => {
+  return function MockAppRenderer({
+    tool,
+    toolInput,
+  }: {
+    tool: Tool;
+    toolInput?: Record<string, unknown>;
+  }) {
+    return (
+      <div data-testid="app-renderer">
+        <div>Tool: {tool.name}</div>
+        <div data-testid="tool-input">{JSON.stringify(toolInput)}</div>
+      </div>
+    );
+  };
+});
+
+describe("AppsTab", () => {
+  const mockAppTool: Tool = {
+    name: "weatherApp",
+    description: "Weather app with UI",
+    inputSchema: {
+      type: "object" as const,
+      properties: {},
+    },
+    _meta: {
+      ui: {
+        resourceUri: "ui://weather-app",
+      },
+    },
+  } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+  const mockRegularTool: Tool = {
+    name: "regularTool",
+    description: "Regular tool without UI",
+    inputSchema: {
+      type: "object" as const,
+      properties: {},
+    },
+  };
+
+  const defaultProps = {
+    tools: [],
+    listTools: jest.fn(),
+    error: null,
+    mcpClient: null,
+  };
+
+  const renderAppsTab = (props = {}) => {
+    return render(
+      <Tabs defaultValue="apps">
+        <AppsTab {...defaultProps} {...props} />
+      </Tabs>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should display message when no apps are available", () => {
+    renderAppsTab();
+
+    expect(screen.getByText(/No MCP Apps available/i)).toBeInTheDocument();
+    expect(screen.getByText(/_meta\.ui\.resourceUri/)).toBeInTheDocument();
+  });
+
+  it("should filter and display only tools with UI metadata", () => {
+    renderAppsTab({
+      tools: [mockAppTool, mockRegularTool],
+    });
+
+    // Should show the app tool
+    expect(screen.getByText("weatherApp")).toBeInTheDocument();
+    expect(screen.getByText("Weather app with UI")).toBeInTheDocument();
+
+    // Should not show the regular tool
+    expect(screen.queryByText("regularTool")).not.toBeInTheDocument();
+  });
+
+  it("should display multiple app tools in a grid", () => {
+    const mockAppTool2: Tool = {
+      name: "calendarApp",
+      description: "Calendar app with UI",
+      inputSchema: {
+        type: "object" as const,
+        properties: {},
+      },
+      _meta: {
+        ui: {
+          resourceUri: "ui://calendar-app",
+        },
+      },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [mockAppTool, mockAppTool2],
+    });
+
+    expect(screen.getByText("weatherApp")).toBeInTheDocument();
+    expect(screen.getByText("calendarApp")).toBeInTheDocument();
+  });
+
+  it("should call listTools when refresh button is clicked", () => {
+    const mockListTools = jest.fn();
+    renderAppsTab({
+      tools: [mockAppTool],
+      listTools: mockListTools,
+    });
+
+    const refreshButton = screen.getByRole("button", { name: /refresh/i });
+    fireEvent.click(refreshButton);
+
+    expect(mockListTools).toHaveBeenCalledTimes(1);
+  });
+
+  it("should display error message when error prop is provided", () => {
+    const errorMessage = "Failed to fetch tools";
+    renderAppsTab({
+      error: errorMessage,
+    });
+
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it("should open app renderer when an app card is clicked and Open App button is clicked if fields exist", () => {
+    const toolWithFields: Tool = {
+      name: "fieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          field1: { type: "string" },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithFields],
+    });
+
+    const appCard = screen.getByText("fieldsApp").closest("div");
+    expect(appCard).toBeTruthy();
+    fireEvent.click(appCard!);
+
+    // Should see the input form now, not the renderer yet
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+    expect(screen.getByText("App Input")).toBeInTheDocument();
+
+    // Click Open App button
+    const openAppButton = screen.getByRole("button", { name: /open app/i });
+    fireEvent.click(openAppButton);
+
+    // AppRenderer should be rendered
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+    expect(screen.getByText("Tool: fieldsApp")).toBeInTheDocument();
+  });
+
+  it("should close app renderer when close button is clicked", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    // Open the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    // Close the app (Deselect tool)
+    const closeButton = screen.getByRole("button", { name: /close app/i });
+    fireEvent.click(closeButton);
+
+    // AppRenderer should be removed
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+  });
+
+  it("should handle tool without description", () => {
+    const toolWithoutDescription: Tool = {
+      name: "noDescriptionApp",
+      inputSchema: {
+        type: "object" as const,
+        properties: {},
+      },
+      _meta: {
+        ui: {
+          resourceUri: "ui://no-description-app",
+        },
+      },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithoutDescription],
+    });
+
+    expect(screen.getByText("noDescriptionApp")).toBeInTheDocument();
+  });
+
+  it("should reset selected tool when tools list changes and selected tool is removed", () => {
+    const { rerender } = renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    // Select the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    // Update tools list to remove the selected tool
+    rerender(
+      <Tabs defaultValue="apps">
+        <AppsTab {...defaultProps} tools={[]} />
+      </Tabs>,
+    );
+
+    // AppRenderer should be removed
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+  });
+
+  it("should maintain selected tool when tools list updates but includes the same tool", () => {
+    const { rerender } = renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    // Select the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    // Update tools list with the same tool
+    rerender(
+      <Tabs defaultValue="apps">
+        <AppsTab {...defaultProps} tools={[mockAppTool]} />
+      </Tabs>,
+    );
+
+    // AppRenderer should still be rendered
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+  });
+
+  it("should maximize and minimize the app window", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    // Select the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
+
+    // Now Maximize button should be visible
+    expect(
+      screen.getByRole("button", { name: /maximize/i }),
+    ).toBeInTheDocument();
+
+    // Initially, ListPane should be visible
+    expect(screen.getByText("MCP Apps")).toBeInTheDocument();
+
+    // Click Maximize
+    const maximizeButton = screen.getByRole("button", { name: /maximize/i });
+    fireEvent.click(maximizeButton);
+
+    // ListPane should be hidden
+    expect(screen.queryByText("MCP Apps")).not.toBeInTheDocument();
+
+    // Click Minimize
+    const minimizeButton = screen.getByRole("button", { name: /minimize/i });
+    fireEvent.click(minimizeButton);
+
+    // ListPane should be visible again
+    expect(screen.getByText("MCP Apps")).toBeInTheDocument();
+  });
+
+  it("should reset maximized state when app is closed", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    // Select the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
+
+    // Maximize
+    fireEvent.click(screen.getByRole("button", { name: /maximize/i }));
+    expect(screen.queryByText("MCP Apps")).not.toBeInTheDocument();
+
+    // Close app (deselect tool)
+    fireEvent.click(screen.getByRole("button", { name: /close app/i }));
+
+    // ListPane should be visible again
+    expect(screen.getByText("MCP Apps")).toBeInTheDocument();
+  });
+
+  it("should display app cards in the list", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    const appItem = screen.getByText("weatherApp").closest("div");
+    expect(appItem).toBeTruthy();
+  });
+
+  it("should handle empty resourceContentMap", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    // Open the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
+
+    // AppRenderer should still be rendered
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+  });
+
+  it("should handle various input types and pass them to AppRenderer", () => {
+    const toolWithComplexSchema: Tool = {
+      name: "complexApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          text: { type: "string" },
+          toggle: { type: "boolean" },
+          number: { type: "number" },
+          choice: { type: "string", enum: ["a", "b"] },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://complex" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithComplexSchema],
+    });
+
+    fireEvent.click(screen.getByText("complexApp"));
+
+    // Fill the form
+    fireEvent.change(screen.getByLabelText("text"), {
+      target: { value: "hello" },
+    });
+    // Checkboxes are often rendered with a label next to them, let's look for the text
+    const toggleLabel = screen.getByText(/Toggle this option/i);
+    fireEvent.click(toggleLabel);
+    fireEvent.change(screen.getByLabelText("number"), {
+      target: { value: "42" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    const toolInput = JSON.parse(
+      screen.getByTestId("tool-input").textContent || "{}",
+    );
+    expect(toolInput.text).toBe("hello");
+    expect(toolInput.toggle).toBe(true);
+    expect(toolInput.number).toBe(42);
+  });
+
+  it("should handle nullable fields", () => {
+    const toolWithNullable: Tool = {
+      name: "nullableApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          nullableField: { type: ["string", "null"] },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://nullable" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithNullable],
+    });
+
+    fireEvent.click(screen.getByText("nullableApp"));
+
+    // Check the 'null' checkbox
+    const nullCheckbox = screen.getByLabelText("null");
+    fireEvent.click(nullCheckbox);
+
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    const toolInput = JSON.parse(
+      screen.getByTestId("tool-input").textContent || "{}",
+    );
+    expect(toolInput.nullableField).toBe(null);
+  });
+
+  it("should allow going back to input form from app renderer", () => {
+    const toolWithFields: Tool = {
+      name: "fieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          field1: { type: "string" },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithFields],
+    });
+
+    fireEvent.click(screen.getByText("fieldsApp"));
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    const backButton = screen.queryByRole("button", { name: /back to input/i });
+    expect(backButton).toBeInTheDocument();
+  });
+
+  it("should skip input form if tool has no input fields", () => {
+    const toolNoFields: Tool = {
+      name: "noFieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {},
+      },
+      _meta: { ui: { resourceUri: "ui://no-fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolNoFields],
+    });
+
+    fireEvent.click(screen.getByText("noFieldsApp"));
+
+    // Should see the renderer immediately
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+    expect(screen.getByText("Tool: noFieldsApp")).toBeInTheDocument();
+
+    // Should NOT see the back button
+    expect(
+      screen.queryByRole("button", { name: /back to input/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should allow going back to input form from app renderer if fields exist", () => {
+    const toolWithFields: Tool = {
+      name: "fieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          field1: { type: "string" },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithFields],
+    });
+
+    fireEvent.click(screen.getByText("fieldsApp"));
+
+    // Should see input form first
+    expect(screen.getByText("App Input")).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    const backButton = screen.getByRole("button", { name: /back to input/i });
+    fireEvent.click(backButton);
+
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+    expect(screen.getByText("App Input")).toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/__tests__/AuthDebugger.test.tsx b/client/src/components/__tests__/AuthDebugger.test.tsx
index 5d5042ea5..b05a48981 100644
--- a/client/src/components/__tests__/AuthDebugger.test.tsx
+++ b/client/src/components/__tests__/AuthDebugger.test.tsx
@@ -8,8 +8,8 @@ import {
 import "@testing-library/jest-dom";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import AuthDebugger, { AuthDebuggerProps } from "../AuthDebugger";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { SESSION_KEYS } from "@/lib/constants";
+import { TooltipProvider } from "../ui/tooltip";
+import { SESSION_KEYS } from "../../lib/constants";
 
 const mockOAuthTokens = {
   access_token: "test_access_token",
@@ -55,7 +55,7 @@ import {
   discoverOAuthProtectedResourceMetadata,
 } from "@modelcontextprotocol/sdk/client/auth.js";
 import { OAuthMetadata } from "@modelcontextprotocol/sdk/shared/auth.js";
-import { EMPTY_DEBUGGER_STATE } from "@/lib/auth-types";
+import { EMPTY_DEBUGGER_STATE } from "../../lib/auth-types";
 
 // Mock local auth module
 jest.mock("@/lib/auth", () => ({
@@ -106,7 +106,7 @@ jest.mock("@/lib/auth", () => ({
   discoverScopes: jest.fn().mockResolvedValue("read write" as never),
 }));
 
-import { discoverScopes } from "@/lib/auth";
+import { discoverScopes } from "../../lib/auth";
 
 // Type the mocked functions properly
 const mockDiscoverAuthorizationServerMetadata =
diff --git a/client/src/components/__tests__/ListPane.test.tsx b/client/src/components/__tests__/ListPane.test.tsx
index 26b5b9a4a..e930a52a2 100644
--- a/client/src/components/__tests__/ListPane.test.tsx
+++ b/client/src/components/__tests__/ListPane.test.tsx
@@ -13,7 +13,6 @@ describe("ListPane", () => {
   const defaultProps = {
     items: mockItems,
     listItems: jest.fn(),
-    clearItems: jest.fn(),
     setSelectedItem: jest.fn(),
     renderItem: (item: (typeof mockItems)[0]) => <div>{item.name}</div>,
     title: "List tools",
@@ -36,6 +35,13 @@ describe("ListPane", () => {
       expect(
         screen.getByRole("button", { name: "Load Tools" }),
       ).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Clear" }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("should render Clear button when clearItems prop is provided", () => {
+      renderListPane({ clearItems: jest.fn() });
       expect(screen.getByRole("button", { name: "Clear" })).toBeInTheDocument();
     });
 
diff --git a/client/src/components/__tests__/ResourcesTab.test.tsx b/client/src/components/__tests__/ResourcesTab.test.tsx
index d564b02cb..355fa4d63 100644
--- a/client/src/components/__tests__/ResourcesTab.test.tsx
+++ b/client/src/components/__tests__/ResourcesTab.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { Tabs } from "@/components/ui/tabs";
+import { Tabs } from "../ui/tabs";
 import ResourcesTab from "../ResourcesTab";
 import { ResourceTemplate, Resource } from "@modelcontextprotocol/sdk/types.js";
 
diff --git a/package-lock.json b/package-lock.json
index 0055b4334..784bed129 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,6 +115,8 @@
       "version": "0.19.0",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
+        "@mcp-ui/client": "^6.0.0",
+        "@modelcontextprotocol/ext-apps": "^1.0.0",
         "@modelcontextprotocol/sdk": "^1.25.2",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-dialog": "^1.1.3",
@@ -2401,6 +2403,111 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mcp-ui/client": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@mcp-ui/client/-/client-6.0.0.tgz",
+      "integrity": "sha512-dHIQGjFOoBWBntSRUJH5YFeq7xi2rEPS0EwokeNAnMg6xrjGjvNd6vTWDHFRC04OlO/ogvM1r5+xUoo0OETaaQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@modelcontextprotocol/ext-apps": "^0.3.1",
+        "@modelcontextprotocol/sdk": "^1.24.0",
+        "@quilted/threads": "^3.1.3",
+        "@r2wc/react-to-web-component": "^2.0.4",
+        "@remote-dom/core": "^1.8.0",
+        "@remote-dom/react": "^1.2.2",
+        "zod": "^3.23.8"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
+    "node_modules/@mcp-ui/client/node_modules/@modelcontextprotocol/ext-apps": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/ext-apps/-/ext-apps-0.3.1.tgz",
+      "integrity": "sha512-Iivz2KwWK8xlRbiWwFB/C4NXqE8VJBoRCbBkJCN98ST2UbQvA6kfyebcLsypiqylJS467XOOaBcI9DeQ3t+zqA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "workspaces": [
+        "examples/*"
+      ],
+      "optionalDependencies": {
+        "@oven/bun-darwin-aarch64": "^1.2.21",
+        "@oven/bun-darwin-x64": "^1.2.21",
+        "@oven/bun-darwin-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-aarch64": "^1.2.21",
+        "@oven/bun-linux-aarch64-musl": "^1.2.21",
+        "@oven/bun-linux-x64": "^1.2.21",
+        "@oven/bun-linux-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-x64-musl": "^1.2.21",
+        "@oven/bun-linux-x64-musl-baseline": "^1.2.21",
+        "@oven/bun-windows-x64": "^1.2.21",
+        "@oven/bun-windows-x64-baseline": "^1.2.21",
+        "@rollup/rollup-darwin-arm64": "^4.53.3",
+        "@rollup/rollup-darwin-x64": "^4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "^4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "^4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "^4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "^4.53.3"
+      },
+      "peerDependencies": {
+        "@modelcontextprotocol/sdk": "^1.24.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@modelcontextprotocol/ext-apps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/ext-apps/-/ext-apps-1.0.0.tgz",
+      "integrity": "sha512-d5vGKBhWkRoa3xlKOynF8kd+sTSY2D3QSjTMCs46/ddOUOSn5e/E0SaShixFm7H7mNlj4uY0RuU0jAsPM/0qwA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "workspaces": [
+        "examples/*"
+      ],
+      "optionalDependencies": {
+        "@oven/bun-darwin-aarch64": "^1.2.21",
+        "@oven/bun-darwin-x64": "^1.2.21",
+        "@oven/bun-darwin-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-aarch64": "^1.2.21",
+        "@oven/bun-linux-aarch64-musl": "^1.2.21",
+        "@oven/bun-linux-x64": "^1.2.21",
+        "@oven/bun-linux-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-x64-musl": "^1.2.21",
+        "@oven/bun-linux-x64-musl-baseline": "^1.2.21",
+        "@oven/bun-windows-x64": "^1.2.21",
+        "@oven/bun-windows-x64-baseline": "^1.2.21",
+        "@rollup/rollup-darwin-arm64": "^4.53.3",
+        "@rollup/rollup-darwin-x64": "^4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "^4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "^4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "^4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "^4.53.3"
+      },
+      "peerDependencies": {
+        "@modelcontextprotocol/sdk": "^1.24.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@modelcontextprotocol/inspector-cli": {
       "resolved": "cli",
       "link": true
@@ -2418,6 +2525,7 @@
       "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.2.tgz",
       "integrity": "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@hono/node-server": "^1.19.7",
         "ajv": "^8.17.1",
@@ -2521,6 +2629,149 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@oven/bun-darwin-aarch64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-darwin-aarch64/-/bun-darwin-aarch64-1.3.6.tgz",
+      "integrity": "sha512-27rypIapNkYboOSylkf1tD9UW9Ado2I+P1NBL46Qz29KmOjTL6WuJ7mHDC5O66CYxlOkF5r93NPDAC3lFHYBXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oven/bun-darwin-x64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-darwin-x64/-/bun-darwin-x64-1.3.6.tgz",
+      "integrity": "sha512-I82xGzPkBxzBKgbl8DsA0RfMQCWTWjNmLjIEkW1ECiv3qK02kHGQ5FGUr/29L/SuvnGsULW4tBTRNZiMzL37nA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oven/bun-darwin-x64-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-darwin-x64-baseline/-/bun-darwin-x64-baseline-1.3.6.tgz",
+      "integrity": "sha512-nqtr+pTsHqusYpG2OZc6s+AmpWDB/FmBvstrK0y5zkti4OqnCuu7Ev2xNjS7uyb47NrAFF40pWqkpaio5XEd7w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oven/bun-linux-aarch64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-aarch64/-/bun-linux-aarch64-1.3.6.tgz",
+      "integrity": "sha512-YaQEAYjBanoOOtpqk/c5GGcfZIyxIIkQ2m1TbHjedRmJNwxzWBhGinSARFkrRIc3F8pRIGAopXKvJ/2rjN1LzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-aarch64-musl": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-aarch64-musl/-/bun-linux-aarch64-musl-1.3.6.tgz",
+      "integrity": "sha512-FR+iJt17rfFgYgpxL3M67AUwujOgjw52ZJzB9vElI5jQXNjTyOKf8eH4meSk4vjlYF3h/AjKYd6pmN0OIUlVKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64/-/bun-linux-x64-1.3.6.tgz",
+      "integrity": "sha512-egfngj0dfJ868cf30E7B+ye9KUWSebYxOG4l9YP5eWeMXCtenpenx0zdKtAn9qxJgEJym5AN6trtlk+J6x8Lig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64-baseline/-/bun-linux-x64-baseline-1.3.6.tgz",
+      "integrity": "sha512-jRmnX18ak8WzqLrex3siw0PoVKyIeI5AiCv4wJLgSs7VKfOqrPycfHIWfIX2jdn7ngqbHFPzI09VBKANZ4Pckg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64-musl": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64-musl/-/bun-linux-x64-musl-1.3.6.tgz",
+      "integrity": "sha512-YeXcJ9K6vJAt1zSkeA21J6pTe7PgDMLTHKGI3nQBiMYnYf7Ob3K+b/ChSCznrJG7No5PCPiQPg4zTgA+BOTmSA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64-musl-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64-musl-baseline/-/bun-linux-x64-musl-baseline-1.3.6.tgz",
+      "integrity": "sha512-7FjVnxnRTp/AgWqSQRT/Vt9TYmvnZ+4M+d9QOKh/Lf++wIFXFGSeAgD6bV1X/yr2UPVmZDk+xdhr2XkU7l2v3w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-windows-x64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-windows-x64/-/bun-windows-x64-1.3.6.tgz",
+      "integrity": "sha512-Sr1KwUcbB0SEpnSPO22tNJppku2khjFluEst+mTGhxHzAGQTQncNeJxDnt3F15n+p9Q+mlcorxehd68n1siikQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@oven/bun-windows-x64-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-windows-x64-baseline/-/bun-windows-x64-baseline-1.3.6.tgz",
+      "integrity": "sha512-PFUa7JL4lGoyyppeS4zqfuoXXih+gSE0XxhDMrCPVEUev0yhGNd/tbWBvcdpYnUth80owENoGjc8s5Knopv9wA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@playwright/test": {
       "version": "1.57.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
@@ -2537,6 +2788,67 @@
         "node": ">=18"
       }
     },
+    "node_modules/@preact/signals-core": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.12.2.tgz",
+      "integrity": "sha512-5Yf8h1Ke3SMHr15xl630KtwPTW4sYDFkkxS0vQ8UiQLWwZQnrF9IKaVG1mN5VcJz52EcWs2acsc/Npjha/7ysA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/@quilted/events": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@quilted/events/-/events-2.1.3.tgz",
+      "integrity": "sha512-4fHaSLND8rmZ+tce9/4FNmG5UWTRpFtM54kOekf3tLON4ZLLnYzjjldELD35efd7+lT5+E3cdkacqc56d+kCrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@preact/signals-core": "^1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@quilted/threads": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@quilted/threads/-/threads-3.3.1.tgz",
+      "integrity": "sha512-0ASnjTH+hOu1Qwzi9NnsVcsbMhWVx8pEE8SXIHknqcc/1rXAU0QlKw9ARq0W43FAdzyVeuXeXtZN27ZC0iALKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@quilted/events": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@preact/signals-core": "^1.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@preact/signals-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@r2wc/core": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@r2wc/core/-/core-1.3.0.tgz",
+      "integrity": "sha512-aPBnND92Itl+SWWbWyyxdFFF0+RqKB6dptGHEdiPB8ZvnHWHlVzOfEvbEcyUYGtB6HBdsfkVuBiaGYyBFVTzVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@r2wc/react-to-web-component": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@r2wc/react-to-web-component/-/react-to-web-component-2.1.0.tgz",
+      "integrity": "sha512-m/PzgUOEiL1HxmvfP5LgBLqB7sHeRj+d1QAeZklwS4OEI2HUU+xTpT3hhJipH5DQoFInDqDTfe0lNFFKcrqk4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@r2wc/core": "^1.3.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -3481,6 +3793,61 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@remote-dom/core": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@remote-dom/core/-/core-1.10.1.tgz",
+      "integrity": "sha512-MlbUOGuHjOrB7uOkaYkIoLUG8lDK8/H1D7MHnGkgqbG6jwjwQSlGPHhbwnD6HYWsTGpAPOP02Byd8wBt9U6TEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remote-dom/polyfill": "^1.5.1",
+        "htm": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@preact/signals-core": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@preact/signals-core": {
+          "optional": true
+        },
+        "preact": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remote-dom/polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@remote-dom/polyfill/-/polyfill-1.5.1.tgz",
+      "integrity": "sha512-eaWdIVKZpNfbqspKkRQLVxiFv/7vIw8u0FVA5oy52YANFbO/WVT0GU+PQmRt/QUSijaB36HBAqx7stjo8HGpVQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@remote-dom/react": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@remote-dom/react/-/react-1.2.2.tgz",
+      "integrity": "sha512-PkvioODONTr1M0StGDYsR4Ssf5M0Rd4+IlWVvVoK3Zrw8nr7+5mJkgNofaj/z7i8Aep78L28PCW8/WduUt4unA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remote-dom/core": "^1.7.0",
+        "@types/react": "^18.0.0",
+        "htm": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.53",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
@@ -3523,7 +3890,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3537,7 +3903,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3607,7 +3972,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3705,7 +4069,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3747,7 +4110,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3789,7 +4151,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4211,7 +4572,6 @@
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/qs": {
@@ -4232,7 +4592,6 @@
       "version": "18.3.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5877,7 +6236,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-uri-to-buffer": {
@@ -6053,9 +6411,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
+      "integrity": "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -6974,7 +7332,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/fsevents": {
@@ -7120,7 +7477,6 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -7254,15 +7610,21 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.3.tgz",
-      "integrity": "sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w==",
+      "version": "4.11.7",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.7.tgz",
+      "integrity": "sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw==",
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
     },
+    "node_modules/htm": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz",
+      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -7446,7 +7808,6 @@
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
@@ -7459,6 +7820,24 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/ip-address": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -7492,7 +7871,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -9686,7 +10064,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -10099,7 +10476,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10124,7 +10500,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -10855,6 +11230,17 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "dependencies": {
+        "resolve": "^1.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10898,7 +11284,6 @@
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
       "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.1",
@@ -11379,6 +11764,39 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "bin": {
+        "shjs": "bin/shjs"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/shx": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/shx/-/shx-0.3.4.tgz",
+      "integrity": "sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.3",
+        "shelljs": "^0.8.5"
+      },
+      "bin": {
+        "shx": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -11783,7 +12201,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -13607,7 +14024,9 @@
         "@modelcontextprotocol/sdk": "^1.25.2",
         "cors": "^2.8.5",
         "express": "^5.1.0",
+        "express-rate-limit": "^8.2.1",
         "shell-quote": "^1.8.3",
+        "shx": "^0.3.4",
         "spawn-rx": "^5.1.2",
         "ws": "^8.18.0",
         "zod": "^3.25.76"
@@ -13623,6 +14042,24 @@
         "tsx": "^4.19.0",
         "typescript": "^5.6.2"
       }
+    },
+    "server/node_modules/express-rate-limit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+      "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.0.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
     }
   }
 }
diff --git a/server/package.json b/server/package.json
index 622b889d3..231affbe1 100644
--- a/server/package.json
+++ b/server/package.json
@@ -14,7 +14,7 @@
     "build"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && shx cp -R static build",
     "start": "node build/index.js",
     "dev": "tsx watch --clear-screen=false src/index.ts",
     "dev:windows": "tsx watch --clear-screen=false src/index.ts < NUL"
@@ -32,8 +32,10 @@
     "cors": "^2.8.5",
     "express": "^5.1.0",
     "shell-quote": "^1.8.3",
+    "shx": "^0.3.4",
     "spawn-rx": "^5.1.2",
     "ws": "^8.18.0",
-    "zod": "^3.25.76"
+    "zod": "^3.25.76",
+    "express-rate-limit": "^8.2.1"
   }
 }
diff --git a/server/src/index.ts b/server/src/index.ts
index 388fdaca7..fe8b9db48 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -25,12 +25,21 @@ import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 import express from "express";
+import rateLimit from "express-rate-limit";
 import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
 import { randomUUID, randomBytes, timingSafeEqual } from "node:crypto";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import { readFileSync } from "fs";
 
 const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
 
+const sandboxRateLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // limit each IP to 100 /sandbox requests per windowMs
+});
+
 const defaultEnvironment = {
   ...getDefaultEnvironment(),
   ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
@@ -787,6 +796,22 @@ app.get("/config", originValidationMiddleware, authMiddleware, (req, res) => {
   }
 });
 
+app.get("/sandbox", sandboxRateLimiter, (req, res) => {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const filePath = join(__dirname, "..", "static", "sandbox_proxy.html");
+  let sandboxHtml;
+
+  try {
+    sandboxHtml = readFileSync(filePath, "utf-8");
+  } catch (e) {
+    sandboxHtml = "MCP Apps sandbox not loaded: " + e;
+  }
+
+  res.set("Cache-Control", "no-cache, no-store, max-age=0");
+  res.send(sandboxHtml);
+});
+
 const PORT = parseInt(
   process.env.SERVER_PORT || DEFAULT_MCP_PROXY_LISTEN_PORT,
   10,
diff --git a/server/static/sandbox_proxy.html b/server/static/sandbox_proxy.html
new file mode 100644
index 000000000..da77f0488
--- /dev/null
+++ b/server/static/sandbox_proxy.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="color-scheme" content="light dark" />
+    <!-- CSP is set via HTTP headers by serve.ts (based on ?csp= query param).
+       The inner iframe inherits this CSP since we use document.write(). -->
+    <title>MCP-UI Proxy</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100vh;
+        width: 100vw;
+        /* Transparent background allows parent page to show through */
+        background-color: transparent;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      iframe {
+        background-color: transparent;
+        border: 0px none transparent;
+        padding: 0px;
+        overflow: hidden;
+        flex-grow: 1;
+        /* Inherit color scheme from parent for consistent transparency */
+        color-scheme: inherit;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      function buildAllowAttribute(permissions) {
+        if (!permissions) return "";
+
+        const allowList = [];
+        if (permissions["camera"]) allowList.push("camera");
+        if (permissions["microphone"]) allowList.push("microphone");
+        if (permissions["geolocation"]) allowList.push("geolocation");
+        if (permissions["clipboardWrite"]) allowList.push("clipboard-write");
+
+        return allowList.join("; ");
+      }
+
+      const ALLOWED_REFERRER_PATTERN =
+        /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
+
+      if (window.self === window.top) {
+        throw new Error("This file is only to be used in an iframe sandbox.");
+      }
+
+      if (!document.referrer) {
+        throw new Error("No referrer, cannot validate embedding site.");
+      }
+
+      if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
+        throw new Error(
+          `Embedding domain not allowed in referrer ${document.referrer}. (Consider updating the validation logic to allow your domain.)`,
+        );
+      }
+
+      // Extract the expected host origin from the referrer for origin validation.
+      // This is the origin we expect all parent messages to come from.
+      const EXPECTED_HOST_ORIGIN = new URL(document.referrer).origin;
+
+      const OWN_ORIGIN = new URL(window.location.href).origin;
+
+      // Security self-test: verify iframe isolation is working correctly.
+      // This MUST throw a SecurityError -- if `window.top` is accessible, the sandbox
+      // configuration is dangerously broken and untrusted content could escape.
+      try {
+        window.top?.alert(
+          "If you see this, the sandbox is not setup securely.",
+        );
+        throw "FAIL";
+      } catch (e) {
+        if (e === "FAIL") {
+          throw new Error("The sandbox is not setup securely.");
+        }
+
+        // Expected: SecurityError confirms proper sandboxing.
+      }
+
+      // Double-iframe sandbox architecture: THIS file is the outer sandbox proxy
+      // iframe on a separate origin. It creates an inner iframe for untrusted HTML
+      // content. Per the specification, the Host and the Sandbox MUST have different
+      // origins.
+      const inner = document.createElement("iframe");
+      inner.style = "width:100%; height:100%; border:none;";
+      inner.setAttribute(
+        "sandbox",
+        "allow-scripts allow-same-origin allow-forms",
+      );
+      // Note: allow attribute is set later when receiving sandbox-resource-ready notification
+      // based on the permissions requested by the app
+      document.body.appendChild(inner);
+
+      const RESOURCE_READY_NOTIFICATION =
+        "ui/notifications/sandbox-resource-ready";
+      const PROXY_READY_NOTIFICATION = "ui/notifications/sandbox-proxy-ready";
+
+      // Message relay: This Sandbox (outer iframe) acts as a bidirectional bridge,
+      // forwarding messages between:
+      //
+      //   Host (parent window) ↔ Sandbox (outer frame) ↔ View (inner iframe)
+      //
+      // Reason: the parent window and inner iframe have different origins and can't
+      // communicate directly, so the outer iframe forwards messages in both
+      // directions to connect them.
+      //
+      // Special case: The "ui/notifications/sandbox-proxy-ready" message is
+      // intercepted here (not relayed) because the Sandbox uses it to configure and
+      // load the inner iframe with the view HTML content.
+      //
+      // Security: CSP is enforced via HTTP headers on sandbox.html (set by serve.ts
+      // based on ?csp= query param). This is tamper-proof unlike meta tags.
+
+      window.addEventListener("message", async (event) => {
+        if (event.source === window.parent) {
+          // Validate that messages from parent come from the expected host origin.
+          // This prevents malicious pages from sending messages to this sandbox.
+          if (event.origin !== EXPECTED_HOST_ORIGIN) {
+            console.error(
+              "[Sandbox] Rejecting message from unexpected origin:",
+              event.origin,
+              "expected:",
+              EXPECTED_HOST_ORIGIN,
+            );
+            return;
+          }
+
+          if (event.data && event.data.method === RESOURCE_READY_NOTIFICATION) {
+            const { html, sandbox, permissions } = event.data.params;
+            if (typeof sandbox === "string") {
+              inner.setAttribute("sandbox", sandbox);
+            }
+            // Set Permission Policy allow attribute if permissions are requested
+            const allowAttribute = buildAllowAttribute(permissions);
+            if (allowAttribute) {
+              console.log("[Sandbox] Setting allow attribute:", allowAttribute);
+              inner.setAttribute("allow", allowAttribute);
+            }
+            if (typeof html === "string") {
+              // Use document.write instead of srcdoc (which the CesiumJS Map won't work with)
+              const doc =
+                inner.contentDocument || inner.contentWindow?.document;
+              if (doc) {
+                doc.open();
+                doc.write(html);
+                doc.close();
+              } else {
+                // Fallback to srcdoc if document is not accessible
+                console.warn(
+                  "[Sandbox] document.write not available, falling back to srcdoc",
+                );
+                inner.srcdoc = html;
+              }
+            }
+          } else {
+            if (inner && inner.contentWindow) {
+              inner.contentWindow.postMessage(event.data, "*");
+            }
+          }
+        } else if (event.source === inner.contentWindow) {
+          if (event.origin !== OWN_ORIGIN) {
+            console.error(
+              "[Sandbox] Rejecting message from inner iframe with unexpected origin:",
+              event.origin,
+              "expected:",
+              OWN_ORIGIN,
+            );
+            return;
+          }
+          // Relay messages from inner frame to parent window.
+          // Use specific origin instead of "*" to prevent message interception.
+          window.parent.postMessage(event.data, EXPECTED_HOST_ORIGIN);
+        }
+      });
+
+      // Notify the Host that the Sandbox is ready to receive view HTML.
+      // Use specific origin instead of "*" to ensure only the expected host receives this.
+      window.parent.postMessage(
+        {
+          jsonrpc: "2.0",
+          method: PROXY_READY_NOTIFICATION,
+          params: {},
+        },
+        EXPECTED_HOST_ORIGIN,
+      );
+    </script>
+  </body>
+</html>