🤖 feat: MCP Apps views in the Artifacts tab (#5426)

## Summary
Implements the host side of [MCP
Apps](https://github.com/modelcontextprotocol/ext-apps)
(`io.modelcontextprotocol/ui`, spec 2026-01-26) so MCP servers can show
their `ui://` views in the Artifacts tab.

## Implementation
- The client announces the extension only while the Artifacts experiment
is on; tool `_meta.ui` (and the deprecated flat key) is kept; tools not
visible to the model are hidden from it.
- `resources/read` for `ui://` views: exact MIME type, 2 MB cap. Full
`CallToolResult`s for views are kept in a host-only side store (session
dir, capped), never sent to the model.
- One opaque-origin `srcdoc` frame (desktop-host model; SECURITY AUDIT
comment explains why no proxy frame). CSP starts from the spec default
and only grants declared https domains that are also on the CDN
allowlist with the setting on.
- JSON-RPC router (`mcpAppHost.ts`): initialize, tool input/result, size
changes, logging, `tools/call` (same server, app-visible tools, consent
strip for model-visible tools), `ui/open-link` (https, confirm),
`ui/message` (into the composer, never auto-sent); everything else
`-32601`.
- "Open in Artifacts" on MCP tool cards; views appear under **App
views** in the picker.

## Validation
Router/CSP/visibility/validation unit tests and a Storybook play test
with a fake view (handshake, tool result, consent). Dogfooded against a
local stdio MCP server fixture with a real model turn.

**Stack:** part 5 of 9 of the Artifacts stack (each PR shows only its
own layer). Everything is behind the **Artifacts** experiment (Settings
→ Experiments, off by default). The user-facing page lands in part 9
(`docs/workspaces/artifacts.mdx`).

---

_Generated with `xum` • Model: `anthropic:claude-opus-5-5` • Thinking:
`high` • Cost: `$98.34`_

<!-- mux-attribution: model=anthropic:claude-opus-5-5 thinking=high
costs=98.34 -->

Author: ThomasK33

src/browser/components/SelectPrimitive/SelectPrimitive.tsx

@@ -116,4 +116,18 @@ const SelectItem = React.forwardRef<
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem };
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("text-muted px-2 py-1 text-[11px] font-medium", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel };

src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.tsx

@@ -305,6 +305,23 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
     return () => window.removeEventListener("keydown", handler);
   }, [artifactsExperimentEnabled, isTimelineSidebarHidden, workspaceId]);
 
+  // "Open in Artifacts" on an MCP Apps tool card: while the sidebar is hidden, the dialog is
+  // the only place the view can show.
+  useEffect(() => {
+    if (!artifactsExperimentEnabled) {
+      return;
+    }
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent<{ workspaceId: string }>).detail;
+      if (detail?.workspaceId !== workspaceId || !isTimelineSidebarHidden()) {
+        return;
+      }
+      setArtifactsDialogWorkspaceId(workspaceId);
+    };
+    window.addEventListener(CUSTOM_EVENTS.OPEN_MCP_APP_VIEW, handler);
+    return () => window.removeEventListener(CUSTOM_EVENTS.OPEN_MCP_APP_VIEW, handler);
+  }, [artifactsExperimentEnabled, isTimelineSidebarHidden, workspaceId]);
+
   const isDevcontainerWorkspace = isDevcontainerRuntime(runtimeConfig);
   const isRuntimeRunning = isDevcontainerWorkspace && runtimeStatus === "running";
   // Mirrors TaskService.isLocalUnrelatedMessagingEndpoint: unrelated delivery requires local or

src/browser/features/RightSidebar/ArtifactsTab/ArtifactsPanel.stories.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, type ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { useEffect, useRef, type ReactNode } from "react";
 import { APIProvider } from "@/browser/contexts/API";
 import { updatePersistedState } from "@/browser/hooks/usePersistedState";
 import { createMockORPCClient } from "@/browser/stories/mocks/orpc";
@@ -15,6 +15,7 @@ import { getArtifactKind } from "@/common/utils/artifactKind";
 import { ArtifactsPanel } from "./ArtifactsPanel";
 import { writeArtifactSelection } from "./artifactSelection";
 import { DESKTOP_ONLY_PREVIEW_NOTICE } from "./executableFrames";
+import { openMcpAppView } from "./mcpAppViewsStore";
 
 /**
  * HTML/SVG frames mount only in the desktop app, detected by its preload bridge
@@ -520,3 +521,177 @@ export const BridgeEscapeExitsFullscreen: Story = {
     );
   },
 };
+
+// MCP Apps view (artifacts experiment): a fake server view implementing the spec handshake.
+// The frame is opaque-origin, so the play test reads progress from the heights the view
+// reports: 321px only after initialize -> initialized -> tool-input -> tool-result, then
+// 333px once its own tools/call round trip (behind the consent strip) succeeded.
+const MCP_APP_TOOL_CALL_ID = "call-weather-1";
+const MCP_APP_VIEW_HTML = `<!doctype html>
+<html>
+<head>
+<style>
+  body { font-family: system-ui, sans-serif; margin: 0; padding: 16px; color: #0f172a; }
+  h1 { font-size: 16px; margin: 0 0 8px; }
+  li { font-size: 13px; }
+</style>
+</head>
+<body>
+  <h1>Weather view</h1>
+  <ul id="log"></ul>
+  <script>
+    const seen = {};
+    let nextId = 1;
+    const pending = new Map();
+    const log = (text) => {
+      const li = document.createElement("li");
+      li.textContent = text;
+      document.getElementById("log").appendChild(li);
+    };
+    const send = (message) => window.parent.postMessage(message, "*");
+    const request = (method, params) =>
+      new Promise((resolve, reject) => {
+        const id = nextId++;
+        pending.set(id, { resolve, reject });
+        send({ jsonrpc: "2.0", id, method, params });
+      });
+    const notify = (method, params) => send({ jsonrpc: "2.0", method, params });
+    const maybeReady = () => {
+      if (!(seen.init && seen.input && seen.result) || seen.sized) return;
+      seen.sized = true;
+      notify("ui/notifications/size-changed", { width: 400, height: 321 });
+      request("tools/call", { name: "get_forecast", arguments: { city: "Berlin" } }).then(
+        (result) => {
+          log("Forecast: " + result.content[0].text);
+          notify("ui/notifications/size-changed", { width: 400, height: 333 });
+        },
+        (error) => log("tools/call failed: " + error.message)
+      );
+    };
+    window.addEventListener("message", (event) => {
+      const message = event.data;
+      if (message.id !== undefined && pending.has(message.id)) {
+        const entry = pending.get(message.id);
+        pending.delete(message.id);
+        if (message.error) entry.reject(message.error);
+        else entry.resolve(message.result);
+        return;
+      }
+      if (message.method === "ui/resource-teardown") {
+        send({ jsonrpc: "2.0", id: message.id, result: {} });
+      } else if (message.method === "ui/notifications/tool-input") {
+        seen.input = true;
+        log("Input: " + JSON.stringify(message.params.arguments));
+      } else if (message.method === "ui/notifications/tool-result") {
+        seen.result = true;
+        log("Result: " + message.params.content[0].text);
+      }
+      maybeReady();
+    });
+    request("ui/initialize", {
+      protocolVersion: "2026-01-26",
+      appInfo: { name: "weather-view", version: "1.0.0" },
+      appCapabilities: {},
+    }).then((result) => {
+      seen.init = true;
+      log("Host theme: " + result.hostContext.theme);
+      notify("ui/notifications/initialized", {});
+      maybeReady();
+    });
+  </script>
+</body>
+</html>`;
+
+/**
+ * MCP App views mount only in the desktop app (executableFrames.ts). Storybook has no preload
+ * bridge, so these stories stand one in and restore the original afterwards.
+ */
+function DesktopApiStub(props: { children: ReactNode }) {
+  const originalApiRef = useRef(window.api);
+  window.api = {
+    platform: "linux",
+    versions: { node: "20.0.0", chrome: "120.0.0", electron: "28.0.0" },
+    getIsRosetta: () => Promise.resolve(false),
+  };
+  useEffect(() => {
+    const savedApi = originalApiRef.current;
+    return () => {
+      window.api = savedApi;
+    };
+  }, []);
+  return <>{props.children}</>;
+}
+
+function renderMcpAppView() {
+  updatePersistedState(ARTIFACTS_ALLOW_CDN_SCRIPTS_KEY, true);
+  openMcpAppView(WORKSPACE_ID, {
+    toolCallId: MCP_APP_TOOL_CALL_ID,
+    serverName: "weather",
+    resourceUri: "ui://weather/view.html",
+    toolName: "show_weather",
+    label: "Show weather",
+    arguments: { city: "Berlin" },
+    cancelled: false,
+  });
+  return (
+    <APIProvider
+      client={createMockORPCClient({
+        artifacts: { listing: listingFor(FILES), files: FILES },
+        mcpApps: {
+          views: {
+            [MCP_APP_TOOL_CALL_ID]: {
+              html: MCP_APP_VIEW_HTML,
+              // jsdelivr is on the CDN allowlist; the tile host is not, so it is listed as
+              // not granted.
+              csp: { resourceDomains: ["https://cdn.jsdelivr.net", "https://tiles.example.com"] },
+              prefersBorder: null,
+              resultAvailable: true,
+              result: { content: [{ type: "text", text: "Berlin: 18°C, light rain" }] },
+              invocation: {
+                serverName: "weather",
+                toolName: "show_weather",
+                arguments: { city: "Berlin" },
+              },
+            },
+          },
+          // get_forecast is visible to the model too: the first call needs the user's consent.
+          callTool: (input) =>
+            input.consented
+              ? { status: "ok", result: { content: [{ type: "text", text: "Sunny tomorrow" }] } }
+              : { status: "consent_required" },
+        },
+      })}
+    >
+      <DesktopApiStub>
+        <div className="bg-background flex h-screen justify-end">
+          <div className="bg-sidebar border-border-light h-full w-full max-w-[440px] border-l">
+            <ArtifactsPanel workspaceId={WORKSPACE_ID} />
+          </div>
+        </div>
+      </DesktopApiStub>
+    </APIProvider>
+  );
+}
+
+const playMcpAppView = async (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement);
+  const frame = await canvas.findByTestId("mcp-app-frame");
+  await expect(frame.getAttribute("sandbox")).toBe("allow-scripts");
+  await canvas.findByText(/Not granted to this view: https:\/\/tiles\.example\.com/);
+  await waitFor(() => expect(frame.style.height).toBe("321px"), { timeout: 5000 });
+  const strip = await canvas.findByRole("alert");
+  await expect(strip.textContent).toContain("Allow get_forecast from weather?");
+  await userEvent.click(within(strip).getByRole("button", { name: "Allow" }));
+  await waitFor(() => expect(frame.style.height).toBe("333px"), { timeout: 5000 });
+};
+
+export const McpAppViewLaptop: Story = {
+  ...LAPTOP,
+  render: () => renderMcpAppView(),
+  play: ({ canvasElement }) => playMcpAppView(canvasElement),
+};
+export const McpAppViewPhone: Story = {
+  ...PHONE,
+  render: () => renderMcpAppView(),
+  play: ({ canvasElement }) => playMcpAppView(canvasElement),
+};

src/browser/features/RightSidebar/ArtifactsTab/ArtifactsPanel.test.tsx

@@ -7,6 +7,7 @@ import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { installDom } from "../../../../../tests/ui/dom";
 import { APIProvider, type APIClient } from "@/browser/contexts/API";
+import { ThemeProvider } from "@/browser/contexts/ThemeContext";
 import type {
   ArtifactEntry,
   ArtifactListing,
@@ -18,6 +19,7 @@ import {
 } from "@/common/constants/storage";
 import { ArtifactsPanel } from "./ArtifactsPanel";
 import { readArtifactSelection, writeArtifactSelection } from "./artifactSelection";
+import { closeMcpAppView, openMcpAppView } from "./mcpAppViewsStore";
 
 function entry(path: string, modifiedMs: number, kind: ArtifactEntry["kind"]): ArtifactEntry {
   return { path, kind, size: 10, modifiedMs };
@@ -74,6 +76,8 @@ describe("ArtifactsPanel", () => {
   beforeEach(() => {
     cleanupDom = installDom();
     window.localStorage.clear();
+    // Desktop mode, so app views mount their frame (executableFrames.ts).
+    window.api = { getIsRosetta: () => Promise.resolve(false) } as unknown as typeof window.api;
   });
 
   afterEach(() => {
@@ -372,4 +376,93 @@ describe("ArtifactsPanel", () => {
     const view = renderPanel();
     expect(await view.findByText(/is too large to preview/)).toBeTruthy();
   });
+
+  test("Reload re-fetches a selected app view", async () => {
+    fake = createFakeArtifactsApi(
+      { available: true, dir: "/scratch/artifacts", entries: [], truncated: false },
+      {}
+    );
+    let getViewCalls = 0;
+    fake.api.mcpApps = {
+      getView: () => {
+        getViewCalls += 1;
+        return Promise.resolve({
+          success: true as const,
+          data: {
+            html: "<p>view</p>",
+            csp: {},
+            prefersBorder: null,
+            resultAvailable: false,
+            result: null,
+            invocation: null,
+          },
+        });
+      },
+    };
+    openMcpAppView("ws-app-reload", {
+      toolCallId: "call-1",
+      serverName: "charts",
+      resourceUri: "ui://charts/view",
+      toolName: "show_chart",
+      label: "Show chart",
+      arguments: {},
+      cancelled: false,
+    });
+    try {
+      const view = render(<ArtifactsPanel workspaceId="ws-app-reload" />, {
+        wrapper: (props: { children: ReactNode }) => (
+          <ThemeProvider forcedTheme="dark">
+            <ApiWrapper>{props.children}</ApiWrapper>
+          </ThemeProvider>
+        ),
+      });
+      await view.findByTestId("mcp-app-frame");
+      expect(getViewCalls).toBe(1);
+      fireEvent.click(view.getByRole("button", { name: "Reload artifact" }));
+      await waitFor(() => expect(getViewCalls).toBe(2));
+    } finally {
+      closeMcpAppView("ws-app-reload", "call-1");
+    }
+  });
+
+  test("the remaining app views stay reachable after closing one, without a listing", async () => {
+    fake = createFakeArtifactsApi(
+      { available: true, dir: "/scratch/artifacts", entries: [], truncated: false },
+      {}
+    );
+    fake.api.artifacts = {
+      ...fake.api.artifacts,
+      list: () => Promise.resolve({ success: false as const, error: "Listing failed" }),
+    };
+    fake.api.mcpApps = {
+      getView: () => Promise.resolve({ success: false as const, error: "No view" }),
+    };
+    const ref = (toolCallId: string, label: string) => ({
+      toolCallId,
+      serverName: "charts",
+      resourceUri: "ui://charts/view",
+      toolName: "show_chart",
+      label,
+      arguments: {},
+      cancelled: false,
+    });
+    openMcpAppView("ws-app-close", ref("call-a", "First view"));
+    openMcpAppView("ws-app-close", ref("call-b", "Second view"));
+    try {
+      const view = render(<ArtifactsPanel workspaceId="ws-app-close" />, {
+        wrapper: (props: { children: ReactNode }) => (
+          <ThemeProvider forcedTheme="dark">
+            <ApiWrapper>{props.children}</ApiWrapper>
+          </ThemeProvider>
+        ),
+      });
+      // The most recently opened view is selected; close it.
+      fireEvent.click(await view.findByRole("button", { name: "Close view" }));
+      expect(await view.findByText("Listing failed")).toBeTruthy();
+      expect(view.getByRole("combobox", { name: "Artifact" })).toBeTruthy();
+    } finally {
+      closeMcpAppView("ws-app-close", "call-a");
+      closeMcpAppView("ws-app-close", "call-b");
+    }
+  });
 });