@assistant-ui/react 0.14.14 → 0.14.16

package/src/mcp-apps/McpAppsRemoteHost.ts

@@ -1,4 +1,5 @@
-import { resource, tapConst, tapRef } from "@assistant-ui/tap";
+import { useMemo, useRef } from "react";
+import { resource } from "@assistant-ui/tap";
 import type {
   McpAppResource,
   McpAppsHost,
@@ -33,27 +34,27 @@ async function postToHost(
  * params }`, using the method names expected by the assistant-ui MCP Apps
  * guide.
  */
-export const McpAppsRemoteHost = resource(
-  (options: McpAppsRemoteHostOptions): McpAppsHost => {
-    const optionsRef = tapRef(options);
-    optionsRef.current = options;
+export const McpAppsRemoteHost = resource(function McpAppsRemoteHost(
+  options: McpAppsRemoteHostOptions,
+): McpAppsHost {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
 
-    return tapConst(
-      (): McpAppsHost => ({
-        loadResource: (params) =>
-          postToHost(
-            optionsRef.current,
-            "mcp-apps/read-resource",
-            params,
-          ) as Promise<McpAppResource>,
-        callTool: (params) =>
-          postToHost(optionsRef.current, "tools/call", params),
-        readResource: (params) =>
-          postToHost(optionsRef.current, "resources/read", params),
-        listResources: (params) =>
-          postToHost(optionsRef.current, "resources/list", params),
-      }),
-      [],
-    );
-  },
-);
+  return useMemo(
+    (): McpAppsHost => ({
+      loadResource: (params) =>
+        postToHost(
+          optionsRef.current,
+          "mcp-apps/read-resource",
+          params,
+        ) as Promise<McpAppResource>,
+      callTool: (params) =>
+        postToHost(optionsRef.current, "tools/call", params),
+      readResource: (params) =>
+        postToHost(optionsRef.current, "resources/read", params),
+      listResources: (params) =>
+        postToHost(optionsRef.current, "resources/list", params),
+    }),
+    [],
+  );
+});

package/src/mcp-apps/app-frame.tsx

@@ -1,8 +1,13 @@
 "use client";
 
-import { type MutableRefObject, useEffect, useRef, useState } from "react";
-import { type RenderedFrame, SafeContentFrame } from "safe-content-frame";
+import { type MutableRefObject, useEffect, useRef } from "react";
 import { type McpAppBridge, createMcpAppBridge } from "./bridge";
+import {
+  SandboxHost,
+  type SandboxBridge,
+  type SandboxHostApi,
+  type SandboxHostFrame,
+} from "../sandbox-host/SandboxHost";
 import type {
   McpAppBridgeHandlers,
   McpAppFrameProps,
@@ -31,7 +36,7 @@ function useBridgeNotify<T>(
     }
     notify(bridgeRef.current, value);
     lastSentRef.current = value;
-    // oxlint-disable-next-line tap-hooks/exhaustive-deps -- refs are stable; notify is assumed stable; re-run only when value changes
+    // oxlint-disable-next-line react/exhaustive-deps -- refs are stable; notify is assumed stable; re-run only when value changes
   }, [value]);
 }
 
@@ -100,10 +105,6 @@ export function McpAppFrame({
   hostContext,
   maxHeight = DEFAULT_MAX_HEIGHT,
 }: McpAppFrameProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [contentHeight, setContentHeight] = useState<number | undefined>(
-    undefined,
-  );
   const bridgeRef = useRef<McpAppBridge | null>(null);
   const lastSentInputRef = useRef<unknown>(undefined);
   const lastSentOutputRef = useRef<unknown>(undefined);
@@ -129,133 +130,93 @@ export function McpAppFrame({
     output,
   };
 
-  const resourceUri = resource.uri;
+  const createBridge = (
+    frame: SandboxHostFrame,
+    host: SandboxHostApi,
+  ): SandboxBridge => {
+    const current = liveRef.current;
+    let initTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
+    const flushPending = () => {
+      if (widgetReadyRef.current) return;
+      widgetReadyRef.current = true;
+      const b = bridgeRef.current;
+      if (!b) return;
+      if (pendingInputRef.current !== undefined) {
+        b.notifyToolInput(pendingInputRef.current);
+        lastSentInputRef.current = pendingInputRef.current;
+        pendingInputRef.current = undefined;
+      }
+      if (pendingOutputRef.current !== undefined) {
+        b.notifyToolResult(pendingOutputRef.current);
+        lastSentOutputRef.current = pendingOutputRef.current;
+        pendingOutputRef.current = undefined;
+      }
+      if (pendingHostContextRef.current !== undefined) {
+        b.notifyHostContextChanged(pendingHostContextRef.current);
+        lastSentHostContextRef.current = pendingHostContextRef.current;
+        pendingHostContextRef.current = undefined;
+      }
+    };
 
-    let cancelled = false;
-    let initTimeoutId: ReturnType<typeof setTimeout> | null = null;
-    let frame: RenderedFrame | null = null;
-    const sb = sandbox;
-    const html = resource.html;
+    const liveHandlers = buildLiveHandlers(current.handlers, liveRef);
+    const liveOnInitialized = liveHandlers.onInitialized;
+    const wrappedHandlers: McpAppBridgeHandlers = {
+      ...liveHandlers,
+      onInitialized: () => {
+        if (initTimeoutId !== null) {
+          clearTimeout(initTimeoutId);
+          initTimeoutId = null;
+        }
+        flushPending();
+        liveOnInitialized?.();
+      },
+      onSizeChange: (p) => {
+        if (p.height != null) host.setHeight(p.height);
+        liveHandlers.onSizeChange?.(p);
+      },
+    };
+
+    // Safety net: if the widget never sends notifications/initialized (broken
+    // or non-spec-compliant), flush the queue anyway so the host doesn't
+    // appear hung.
+    initTimeoutId = setTimeout(() => {
+      initTimeoutId = null;
+      flushPending();
+    }, INIT_TIMEOUT_MS);
 
-    const scf = new SafeContentFrame(sb?.product ?? DEFAULT_PRODUCT, {
-      ...(sb?.sandbox !== undefined && { sandbox: sb.sandbox }),
-      ...(sb?.useShadowDom !== undefined && { useShadowDom: sb.useShadowDom }),
-      ...(sb?.enableBrowserCaching !== undefined && {
-        enableBrowserCaching: sb.enableBrowserCaching,
-      }),
-      ...(sb?.salt !== undefined && { salt: sb.salt }),
+    const bridge = createMcpAppBridge({
+      frame,
+      handlers: wrappedHandlers,
+      hostInfo: current.hostInfo,
+      hostContext: current.hostContext,
     });
+    bridgeRef.current = bridge;
 
-    const renderOpts =
-      sb?.unsafeDocumentWrite !== undefined
-        ? { unsafeDocumentWrite: sb.unsafeDocumentWrite }
-        : undefined;
+    if (current.input !== undefined) pendingInputRef.current = current.input;
+    if (current.output !== undefined) pendingOutputRef.current = current.output;
+    // hostContext is delivered inside the ui/initialize response; subsequent
+    // changes flow through useBridgeNotify's pending path.
 
-    scf
-      .renderHtml(html, container, renderOpts)
-      .then((rendered) => {
-        if (cancelled) {
-          rendered.dispose();
-          return;
-        }
-        frame = rendered;
-        const current = liveRef.current;
-        const liveHandlers = buildLiveHandlers(current.handlers, liveRef);
-        const liveOnInitialized = liveHandlers.onInitialized;
-        const flushPending = () => {
-          if (widgetReadyRef.current) return;
-          widgetReadyRef.current = true;
-          const b = bridgeRef.current;
-          if (!b) return;
-          if (pendingInputRef.current !== undefined) {
-            b.notifyToolInput(pendingInputRef.current);
-            lastSentInputRef.current = pendingInputRef.current;
-            pendingInputRef.current = undefined;
-          }
-          if (pendingOutputRef.current !== undefined) {
-            b.notifyToolResult(pendingOutputRef.current);
-            lastSentOutputRef.current = pendingOutputRef.current;
-            pendingOutputRef.current = undefined;
-          }
-          if (pendingHostContextRef.current !== undefined) {
-            b.notifyHostContextChanged(pendingHostContextRef.current);
-            lastSentHostContextRef.current = pendingHostContextRef.current;
-            pendingHostContextRef.current = undefined;
-          }
-        };
-        const wrappedHandlers: McpAppBridgeHandlers = {
-          ...liveHandlers,
-          onInitialized: () => {
-            if (initTimeoutId !== null) {
-              clearTimeout(initTimeoutId);
-              initTimeoutId = null;
-            }
-            flushPending();
-            liveOnInitialized?.();
-          },
-          onSizeChange: (p) => {
-            if (
-              typeof p.height === "number" &&
-              Number.isFinite(p.height) &&
-              p.height > 0
-            ) {
-              setContentHeight(p.height);
-            }
-            liveHandlers.onSizeChange?.(p);
-          },
-        };
-        // Safety net: if the widget never sends notifications/initialized
-        // (broken or non-spec-compliant), flush the queue anyway so the host
-        // doesn't appear hung.
-        initTimeoutId = setTimeout(() => {
+    return {
+      onMessage: bridge.onMessage,
+      dispose: () => {
+        if (initTimeoutId !== null) {
+          clearTimeout(initTimeoutId);
           initTimeoutId = null;
-          flushPending();
-        }, INIT_TIMEOUT_MS);
-        bridgeRef.current = createMcpAppBridge({
-          frame: rendered,
-          handlers: wrappedHandlers,
-          hostInfo: current.hostInfo,
-          hostContext: current.hostContext,
-        });
-
-        if (current.input !== undefined)
-          pendingInputRef.current = current.input;
-        if (current.output !== undefined)
-          pendingOutputRef.current = current.output;
-        // hostContext is delivered inside the ui/initialize response; subsequent
-        // changes flow through useBridgeNotify's pending path.
-      })
-      .catch((err) => {
-        liveRef.current.handlers?.onError?.(
-          err instanceof Error ? err : new Error(String(err)),
-        );
-      });
-
-    return () => {
-      cancelled = true;
-      if (initTimeoutId !== null) {
-        clearTimeout(initTimeoutId);
-        initTimeoutId = null;
-      }
-      bridgeRef.current?.dispose();
-      bridgeRef.current = null;
-      frame?.dispose();
-      frame = null;
-      lastSentInputRef.current = undefined;
-      lastSentOutputRef.current = undefined;
-      lastSentHostContextRef.current = undefined;
-      widgetReadyRef.current = false;
-      pendingInputRef.current = undefined;
-      pendingOutputRef.current = undefined;
-      pendingHostContextRef.current = undefined;
-      setContentHeight(undefined);
+        }
+        bridge.dispose();
+        bridgeRef.current = null;
+        lastSentInputRef.current = undefined;
+        lastSentOutputRef.current = undefined;
+        lastSentHostContextRef.current = undefined;
+        widgetReadyRef.current = false;
+        pendingInputRef.current = undefined;
+        pendingOutputRef.current = undefined;
+        pendingHostContextRef.current = undefined;
+      },
     };
-    // oxlint-disable-next-line tap-hooks/exhaustive-deps -- re-mount only on resource URI change; live values flow through liveRef
-  }, [resourceUri]);
+  };
 
   useBridgeNotify(
     input,
@@ -282,22 +243,20 @@ export function McpAppFrame({
     (b, v) => b.notifyHostContextChanged(v),
   );
 
-  const resolvedHeight =
-    contentHeight != null ? Math.min(contentHeight, maxHeight) : undefined;
-  const mergedStyle =
-    resolvedHeight != null
-      ? { ...sandbox?.style, height: resolvedHeight }
-      : sandbox?.style;
-
   return (
-    <div
-      ref={containerRef}
-      className={sandbox?.className}
-      style={mergedStyle}
-      data-mcp-app-resource={app.resourceUri}
-      data-mcp-app-prefers-border={
-        resource.meta?.prefersBorder ? "" : undefined
-      }
+    <SandboxHost
+      content={{ html: resource.html }}
+      contentKey={resource.uri}
+      sandbox={{ ...sandbox, product: sandbox?.product ?? DEFAULT_PRODUCT }}
+      maxHeight={maxHeight}
+      createBridge={createBridge}
+      onError={(err) => liveRef.current.handlers?.onError?.(err)}
+      containerProps={{
+        "data-mcp-app-resource": app.resourceUri,
+        "data-mcp-app-prefers-border": resource.meta?.prefersBorder
+          ? ""
+          : undefined,
+      }}
     />
   );
 }

package/src/mcp-apps/bridge.test.ts

@@ -1,6 +1,10 @@
 // @vitest-environment jsdom
 import { describe, expect, it, vi } from "vitest";
-import { createMcpAppBridge, type McpAppBridgeFrame } from "./bridge";
+import {
+  createMcpAppBridge,
+  type McpAppBridge,
+  type McpAppBridgeFrame,
+} from "./bridge";
 import type {
   McpAppJsonRpcMessage,
   McpAppJsonRpcRequest,
@@ -24,13 +28,8 @@ function makeFrame() {
   return { frame, captured };
 }
 
-function dispatch(frame: McpAppBridgeFrame, message: McpAppJsonRpcMessage) {
-  const event = new MessageEvent("message", {
-    data: message,
-    origin: frame.origin,
-    source: frame.iframe.contentWindow,
-  });
-  window.dispatchEvent(event);
+function deliver(bridge: McpAppBridge, message: McpAppJsonRpcMessage) {
+  bridge.onMessage(new MessageEvent("message", { data: message }));
 }
 
 async function flush() {
@@ -55,7 +54,7 @@ describe("createMcpAppBridge", () => {
       id: 1,
       method: "ui/initialize",
     };
-    dispatch(frame, req);
+    deliver(bridge, req);
     await flush();
 
     expect(captured).toHaveLength(1);
@@ -69,6 +68,34 @@ describe("createMcpAppBridge", () => {
     expect(result["capabilities"]["ui"]["sendMessage"]).toBe(true);
     expect(result["capabilities"]["ui"]["openLink"]).toBe(false);
 
+    expect(result["hostInfo"]).toEqual({ name: "test-host", version: "9.9.9" });
+    expect(result["hostCapabilities"]).toEqual({
+      serverTools: {},
+      message: { text: {} },
+    });
+
+    bridge.dispose();
+  });
+
+  it("echoes the requested protocolVersion in the ui/initialize result", async () => {
+    const { frame, captured } = makeFrame();
+    const bridge = createMcpAppBridge({ frame });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "ui/initialize",
+      params: { protocolVersion: "2026-01-26" },
+    });
+    await flush();
+
+    const result = (captured[0] as McpAppJsonRpcResponse).result as Record<
+      string,
+      any
+    >;
+    expect(result["protocolVersion"]).toBe("2026-01-26");
+    expect(result["hostCapabilities"]).toEqual({});
+
     bridge.dispose();
   });
 
@@ -77,7 +104,7 @@ describe("createMcpAppBridge", () => {
     const callTool = vi.fn().mockResolvedValue({ ok: true });
     const bridge = createMcpAppBridge({ frame, handlers: { callTool } });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 7,
       method: "tools/call",
@@ -105,7 +132,7 @@ describe("createMcpAppBridge", () => {
       handlers: { callTool, allowedTools: ["search"] },
     });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 2,
       method: "tools/call",
@@ -123,7 +150,7 @@ describe("createMcpAppBridge", () => {
     const { frame, captured } = makeFrame();
     const bridge = createMcpAppBridge({ frame });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 3,
       method: "tools/call",
@@ -141,7 +168,7 @@ describe("createMcpAppBridge", () => {
     const callTool = vi.fn();
     const bridge = createMcpAppBridge({ frame, handlers: { callTool } });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 11,
       method: "tools/call",
@@ -162,7 +189,7 @@ describe("createMcpAppBridge", () => {
       handlers: { requestDisplayMode },
     });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 13,
       method: "requestDisplayMode",
@@ -180,7 +207,7 @@ describe("createMcpAppBridge", () => {
     const openLink = vi.fn();
     const bridge = createMcpAppBridge({ frame, handlers: { openLink } });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 12,
       method: "openLink",
@@ -202,12 +229,12 @@ describe("createMcpAppBridge", () => {
       handlers: { onSizeChange, onInitialized },
     });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       method: "notifications/size_changed",
       params: { width: 320, height: 240 },
     });
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       method: "notifications/initialized",
     });
@@ -217,7 +244,7 @@ describe("createMcpAppBridge", () => {
     bridge.dispose();
   });
 
-  it("notifyToolInput / notifyToolResult / notifyHostContextChanged post correct notifications", () => {
+  it("notifyToolInput / notifyToolResult / notifyHostContextChanged post both legacy and 2026-01-26 notifications", () => {
     const { frame, captured } = makeFrame();
     const bridge = createMcpAppBridge({ frame });
 
@@ -231,16 +258,62 @@ describe("createMcpAppBridge", () => {
         method: "notifications/tools/call/input",
         params: { input: { a: 1 } },
       },
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/tool-input",
+        params: { arguments: { a: 1 } },
+      },
       {
         jsonrpc: "2.0",
         method: "notifications/tools/call/result",
         params: { result: { ok: 1 } },
       },
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/tool-result",
+        params: { ok: 1 },
+      },
       {
         jsonrpc: "2.0",
         method: "notifications/host_context/changed",
         params: { theme: "light" },
       },
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/host-context-changed",
+        params: { theme: "light" },
+      },
+    ]);
+    bridge.dispose();
+  });
+
+  it("wraps non-object and array tool results in a valid content block for the spec dialect", () => {
+    const { frame, captured } = makeFrame();
+    const bridge = createMcpAppBridge({ frame });
+
+    bridge.notifyToolResult("done");
+    bridge.notifyToolResult([1, 2]);
+    bridge.notifyToolInput(null);
+
+    const spec = captured.filter((c) =>
+      (c as { method?: string }).method?.startsWith("ui/notifications/"),
+    );
+    expect(spec).toEqual([
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/tool-result",
+        params: { content: [{ type: "text", text: "done" }] },
+      },
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/tool-result",
+        params: { content: [{ type: "text", text: "1,2" }] },
+      },
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/tool-input",
+        params: {},
+      },
     ]);
     bridge.dispose();
   });
@@ -254,13 +327,13 @@ describe("createMcpAppBridge", () => {
       handlers: { readResource, listResources },
     });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 20,
       method: "resources/read",
       params: { uri: "ui://app/x" },
     });
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 21,
       method: "resources/list",
@@ -279,13 +352,13 @@ describe("createMcpAppBridge", () => {
     const { frame, captured } = makeFrame();
     const bridge = createMcpAppBridge({ frame });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 22,
       method: "resources/read",
       params: { uri: "ui://x" },
     });
-    dispatch(frame, { jsonrpc: "2.0", id: 23, method: "resources/list" });
+    deliver(bridge, { jsonrpc: "2.0", id: 23, method: "resources/list" });
     await flush();
 
     expect((captured[0] as McpAppJsonRpcResponse).error?.code).toBe(-32601);
@@ -302,13 +375,13 @@ describe("createMcpAppBridge", () => {
       handlers: { sendMessage, updateModelContext },
     });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 30,
       method: "sendMessage",
       params: { text: "hi" },
     });
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       id: 31,
       method: "updateModelContext",
@@ -334,17 +407,17 @@ describe("createMcpAppBridge", () => {
       handlers: { onLog, onError, onRequestTeardown },
     });
 
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       method: "notifications/log",
       params: { level: "info", message: "hello" },
     });
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       method: "notifications/error",
       params: { message: "kaboom" },
     });
-    dispatch(frame, {
+    deliver(bridge, {
       jsonrpc: "2.0",
       method: "notifications/request_teardown",
       params: { reason: "done" },
@@ -355,37 +428,4 @@ describe("createMcpAppBridge", () => {
     expect(onRequestTeardown).toHaveBeenCalledWith({ reason: "done" });
     bridge.dispose();
   });
-
-  it("ignores messages from wrong origin or wrong source", async () => {
-    const { frame, captured } = makeFrame();
-    const callTool = vi.fn();
-    const bridge = createMcpAppBridge({ frame, handlers: { callTool } });
-
-    const msg: McpAppJsonRpcMessage = {
-      jsonrpc: "2.0",
-      id: 1,
-      method: "tools/call",
-      params: { name: "search" },
-    };
-
-    window.dispatchEvent(
-      new MessageEvent("message", {
-        data: msg,
-        origin: "https://attacker.example",
-        source: frame.iframe.contentWindow,
-      }),
-    );
-    window.dispatchEvent(
-      new MessageEvent("message", {
-        data: msg,
-        origin: frame.origin,
-        source: window,
-      }),
-    );
-    await flush();
-
-    expect(callTool).not.toHaveBeenCalled();
-    expect(captured).toHaveLength(0);
-    bridge.dispose();
-  });
 });