@assistant-ui/react 0.15.17 → 0.15.18

package/dist/unstable/webmcp/webmcp-host.js

@@ -0,0 +1,29 @@
+//#region src/unstable/webmcp/webmcp-host.ts
+const isThenable = (value) => typeof value?.then === "function";
+const resolveModelContext = () => {
+	const context = globalThis.document?.modelContext ?? globalThis.navigator?.modelContext;
+	if (!context) return void 0;
+	if (typeof context.registerTool === "function") return context;
+	console.warn("[assistant-ui] Ignoring a modelContext with no callable registerTool; WebMCP reports unsupported.");
+};
+const createHost = (context) => ({
+	available: true,
+	registerTool: (def, onError) => {
+		const controller = new AbortController();
+		const handle = context.registerTool(def, { signal: controller.signal });
+		if (isThenable(handle)) handle.then(() => {}, (error) => onError?.(error));
+		return () => controller.abort();
+	}
+});
+const getDefaultWebMcpHost = () => {
+	const context = resolveModelContext();
+	if (!context) return {
+		available: false,
+		registerTool: () => () => {}
+	};
+	return createHost(context);
+};
+//#endregion
+export { getDefaultWebMcpHost };
+
+//# sourceMappingURL=webmcp-host.js.map

package/dist/unstable/webmcp/webmcp-host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webmcp-host.js","names":["WebMcpContent","type","text","data","mimeType","WebMcpCallToolResult","content","isError","WebMcpToolDescriptor","name","description","inputSchema","execute","args","context","signal","AbortSignal","Promise","WebMcpModelContext","registerTool","tool","options","WebMcpHost","available","def","onError","error","ModelContextHost","modelContext","isThenable","value","then","resolveModelContext","globalThis","document","navigator","undefined","console","warn","createHost","controller","AbortController","handle","abort","getDefaultWebMcpHost"],"sources":["../../../src/unstable/webmcp/webmcp-host.ts"],"sourcesContent":["export type WebMcpContent =\n  | { type: \"text\"; text: string }\n  | { type: \"image\"; data: string; mimeType: string };\n\nexport type WebMcpCallToolResult = {\n  content: WebMcpContent[];\n  isError?: boolean;\n};\n\nexport type WebMcpToolDescriptor = {\n  name: string;\n  description: string;\n  inputSchema: unknown;\n  execute: (\n    args: unknown,\n    context?: { signal?: AbortSignal },\n  ) => Promise<WebMcpCallToolResult>;\n};\n\nexport type WebMcpModelContext = {\n  /**\n   * Aborting `options.signal` is what unregisters the tool. The explainer\n   * defines no other removal method, and a name-keyed one could not be used\n   * safely: a later registration may already hold the name.\n   */\n  registerTool(\n    tool: WebMcpToolDescriptor,\n    options?: { signal?: AbortSignal },\n  ): Promise<void> | void;\n};\n\nexport type WebMcpHost = {\n  available: boolean;\n  registerTool(\n    def: WebMcpToolDescriptor,\n    onError?: (error: unknown) => void,\n  ): () => void;\n};\n\ntype ModelContextHost = { modelContext?: WebMcpModelContext } | undefined;\n\nconst isThenable = (value: unknown): value is Promise<unknown> =>\n  typeof (value as { then?: unknown } | null | undefined)?.then === \"function\";\n\n// The explainer puts modelContext on document; navigator is tolerated for\n// older drafts and extensions that still inject it there.\nconst resolveModelContext = (): WebMcpModelContext | undefined => {\n  const context =\n    (globalThis.document as ModelContextHost)?.modelContext ??\n    (globalThis.navigator as ModelContextHost)?.modelContext;\n  if (!context) return undefined;\n  if (typeof context.registerTool === \"function\") return context;\n  console.warn(\n    \"[assistant-ui] Ignoring a modelContext with no callable registerTool; WebMCP reports unsupported.\",\n  );\n  return undefined;\n};\n\nconst createHost = (context: WebMcpModelContext): WebMcpHost => ({\n  available: true,\n  registerTool: (def, onError) => {\n    const controller = new AbortController();\n    const handle = context.registerTool(def, { signal: controller.signal });\n    if (isThenable(handle)) {\n      handle.then(\n        () => {},\n        (error) => onError?.(error),\n      );\n    }\n    return () => controller.abort();\n  },\n});\n\nexport const getDefaultWebMcpHost = (): WebMcpHost => {\n  const context = resolveModelContext();\n  if (!context) {\n    return {\n      available: false,\n      registerTool: () => () => {},\n    };\n  }\n  return createHost(context);\n};\n"],"mappings":";AAyCA,MAAM6B,cAAcC,UAClB,OAAQA,OAAiDC,SAAS;AAIpE,MAAMC,4BAA4D;CAChE,MAAMlB,UACHmB,WAAWC,UAA+BN,gBAC1CK,WAAWE,WAAgCP;CAC9C,IAAI,CAACd,SAAS,OAAOsB,KAAAA;CACrB,IAAI,OAAOtB,QAAQK,iBAAiB,YAAY,OAAOL;CACvDuB,QAAQC,KACN,mGACF;AAEF;AAEA,MAAMC,cAAczB,aAA6C;CAC/DS,WAAW;CACXJ,eAAeK,KAAKC,YAAY;EAC9B,MAAMe,aAAa,IAAIC,gBAAgB;EACvC,MAAMC,SAAS5B,QAAQK,aAAaK,KAAK,EAAET,QAAQyB,WAAWzB,OAAO,CAAC;EACtE,IAAIc,WAAWa,MAAM,GACnBA,OAAOX,WACC,CAAC,IACNL,UAAUD,UAAUC,KAAK,CAC5B;EAEF,aAAac,WAAWG,MAAM;CAChC;AACF;AAEA,MAAaC,6BAAyC;CACpD,MAAM9B,UAAUkB,oBAAoB;CACpC,IAAI,CAAClB,SACH,OAAO;EACLS,WAAW;EACXJ,0BAA0B,CAAC;CAC7B;CAEF,OAAOoB,WAAWzB,OAAO;AAC3B"}

package/dist/utils/Primitive.d.ts

@@ -93,16 +93,16 @@ declare const Primitive: {
   }, "ref"> & {
     render?: ReactElement | undefined;
   } & RefAttributes<HTMLSpanElement>>;
-  svg: ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement> & {
+  ul: ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
     asChild?: boolean;
   }, "ref"> & {
     render?: ReactElement | undefined;
-  } & RefAttributes<SVGSVGElement>>;
-  ul: ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
+  } & RefAttributes<HTMLUListElement>>;
+  svg: ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement> & {
     asChild?: boolean;
   }, "ref"> & {
     render?: ReactElement | undefined;
-  } & RefAttributes<HTMLUListElement>>;
+  } & RefAttributes<SVGSVGElement>>;
 };
 //#endregion
 export { Primitive, type PrimitiveProps, type WithRenderPropProps, withRenderProp };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.15.17",
+  "version": "0.15.18",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,15 +55,15 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.16",
-    "@assistant-ui/store": "^0.3.11",
-    "@assistant-ui/tap": "^0.9.15",
-    "assistant-cloud": "^0.1.42",
-    "assistant-stream": "^0.3.40",
+    "@assistant-ui/core": "^0.3.17",
+    "@assistant-ui/store": "^0.3.12",
+    "@assistant-ui/tap": "^0.9.16",
+    "assistant-cloud": "^0.1.43",
+    "assistant-stream": "^0.3.41",
     "radix-ui": "^1.6.7",
     "react-textarea-autosize": "^8.5.9",
-    "safe-content-frame": "^0.0.28",
-    "zod": "^4.4.3",
+    "safe-content-frame": "^0.0.29",
+    "zod": "^4.5.4",
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
@@ -81,11 +81,11 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/vite": "0.0.15",
-    "@assistant-ui/x-buildutils": "0.0.24",
-    "@testing-library/react": "^16.3.2",
+    "@assistant-ui/vite": "0.0.16",
+    "@assistant-ui/x-buildutils": "0.0.25",
+    "@testing-library/react": "^16.3.3",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.4.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "jsdom": "^30.0.1",

package/src/index.ts

@@ -43,6 +43,8 @@ export type {
   ThreadListItemState,
 } from "@assistant-ui/core";
 
+export { toolApprovalAcceptsText } from "@assistant-ui/core";
+
 export { useCloudThreadListRuntime } from "@assistant-ui/core/react";
 export { AssistantCloud } from "assistant-cloud";
 
@@ -360,6 +362,7 @@ export type {
   GenerativeUISpec,
   Unstable_AudioMessagePart,
   RespondToToolApprovalOptions,
+  ToolApprovalDisplay,
   ToolApprovalOption,
   ToolApprovalOptionKind,
   ToolApprovalResponse,
@@ -515,6 +518,7 @@ export {
   getMcpAppFromToolPart,
 } from "./mcp-apps";
 export type {
+  McpAppPartOptions,
   McpAppRendererOptions,
   McpAppMetadata,
   McpAppResource,
@@ -531,3 +535,12 @@ export type {
   ToolCallMessagePartMcpMetadata,
 } from "./mcp-apps";
 export type { McpAppResourceOutput } from "@assistant-ui/core/react";
+export type { ShimLoadError, ShimLoadErrorCode } from "safe-content-frame";
+
+// Unstable - WebMCP provider (exposes frontend tools to a WebMCP-capable browser)
+export {
+  unstable_useWebMcpProvider,
+  type Unstable_WebMcpProviderOptions,
+  type Unstable_WebMcpProviderResult,
+} from "./unstable/webmcp/useWebMcpProvider";
+export { defaultWebMcpFilter as unstable_defaultWebMcpFilter } from "./unstable/webmcp/convertTools";

package/src/mcp-apps/McpAppRenderer.test.tsx

@@ -9,16 +9,21 @@ import type {
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type {
   McpAppBridgeHandlers,
+  McpAppFrameProps,
+  McpAppHostContext,
   McpAppsHost,
   McpAppsRemoteHostOptions,
 } from "./types";
 
-const { framePropsMock } = vi.hoisted(() => ({ framePropsMock: vi.fn() }));
+const { appendMock, framePropsMock } = vi.hoisted(() => ({
+  appendMock: vi.fn(),
+  framePropsMock: vi.fn(),
+}));
 
 vi.mock("@assistant-ui/store", async (importOriginal) => ({
   ...(await importOriginal()),
   useAui: () => ({
-    thread: () => ({ append: vi.fn() }),
+    thread: { append: appendMock },
   }),
 }));
 
@@ -43,9 +48,12 @@ const createDeferred = <T,>() => {
   return { promise, resolve };
 };
 
-const createPart = (serverId?: string): ToolCallMessagePartProps => ({
+const createPart = (
+  serverId?: string,
+  toolCallId = "call-1",
+): ToolCallMessagePartProps => ({
   type: "tool-call",
-  toolCallId: "call-1",
+  toolCallId,
   toolName: "search",
   args: {},
   argsText: "{}",
@@ -105,6 +113,60 @@ function MemoizedHarness({ host }: { host: McpAppsHost }) {
   return <MemoizedPart Renderer={renderer.render} />;
 }
 
+const MemoizedPartById = memo(function MemoizedPartById({
+  Renderer,
+  toolCallId,
+}: {
+  Renderer: ToolCallMessagePartComponent;
+  toolCallId: string;
+}) {
+  return <Renderer {...createPart(undefined, toolCallId)} />;
+});
+
+function OptionsHarness({
+  host,
+  hostContext,
+  handlers,
+  forPart,
+  toolCallIds = ["call-1"],
+}: {
+  host: McpAppsHost;
+  hostContext?: McpAppHostContext;
+  handlers?: McpAppRendererOptions["handlers"];
+  forPart?: McpAppRendererOptions["forPart"];
+  toolCallIds?: string[];
+}) {
+  const renderer = useResource(
+    McpAppRenderer({
+      host: Host({ host }),
+      ...(hostContext === undefined ? {} : { hostContext }),
+      ...(handlers === undefined ? {} : { handlers }),
+      ...(forPart === undefined ? {} : { forPart }),
+    }),
+  );
+  return toolCallIds.map((toolCallId) => (
+    <MemoizedPartById
+      key={toolCallId}
+      Renderer={renderer.render}
+      toolCallId={toolCallId}
+    />
+  ));
+}
+
+const framePropsCalls = () =>
+  framePropsMock.mock.calls.map(([props]) => props as McpAppFrameProps);
+
+const loadingHost = (): McpAppsHost => ({
+  loadResource: vi.fn(async ({ uri }) => ({
+    uri,
+    mimeType: "text/html;profile=mcp-app" as const,
+    html: "",
+  })),
+  callTool: vi.fn(),
+  readResource: vi.fn(),
+  listResources: vi.fn(),
+});
+
 function RemoteHarness({
   url,
   headers,
@@ -127,9 +189,146 @@ function RemoteHarness({
 
 describe("McpAppRenderer", () => {
   beforeEach(() => {
+    appendMock.mockReset();
     framePropsMock.mockReset();
   });
 
+  it("loads newly mounted parts through the committed host", async () => {
+    const hostA = loadingHost();
+    const hostB = loadingHost();
+    const view = render(
+      <OptionsHarness host={hostA} toolCallIds={["call-1"]} />,
+    );
+    await waitFor(() => expect(hostA.loadResource).toHaveBeenCalledOnce());
+    vi.mocked(hostA.loadResource).mockClear();
+
+    view.rerender(
+      <OptionsHarness host={hostB} toolCallIds={["call-1", "call-2"]} />,
+    );
+    await waitFor(() => expect(hostB.loadResource).toHaveBeenCalled());
+
+    expect(hostA.loadResource).not.toHaveBeenCalled();
+  });
+
+  it("merges forPart handlers over the thread-wide handlers", async () => {
+    const onInitialized = vi.fn();
+    render(
+      <OptionsHarness
+        host={loadingHost()}
+        handlers={{ onInitialized }}
+        forPart={(part) => ({
+          handlers: {
+            requestDisplayMode: ({ mode }) => {
+              void part;
+              return { mode };
+            },
+          },
+        })}
+      />,
+    );
+
+    await waitFor(() => expect(framePropsCalls().length).toBeGreaterThan(0));
+    const handlers = framePropsCalls().at(-1)?.handlers;
+    expect(handlers?.requestDisplayMode).toBeDefined();
+    handlers?.onInitialized?.();
+    expect(onInitialized).toHaveBeenCalledOnce();
+  });
+
+  it("leaves mounted parts alone when renderer options are unchanged", async () => {
+    const host = loadingHost();
+    const hostContext: McpAppHostContext = { displayMode: "inline" };
+    const view = () => <OptionsHarness host={host} hostContext={hostContext} />;
+
+    const rendered = render(view());
+    await waitFor(() => expect(framePropsCalls().length).toBeGreaterThan(0));
+    const rendersBefore = framePropsCalls().length;
+
+    rendered.rerender(view());
+    expect(framePropsCalls().length).toBe(rendersBefore);
+  });
+
+  it("delivers a changed renderer host context to mounted parts", async () => {
+    const host = loadingHost();
+    const view = render(
+      <OptionsHarness host={host} hostContext={{ displayMode: "inline" }} />,
+    );
+    await waitFor(() =>
+      expect(framePropsCalls().at(-1)?.hostContext).toEqual({
+        displayMode: "inline",
+      }),
+    );
+
+    view.rerender(
+      <OptionsHarness
+        host={host}
+        hostContext={{ displayMode: "fullscreen" }}
+      />,
+    );
+    await waitFor(() =>
+      expect(framePropsCalls().at(-1)?.hostContext).toEqual({
+        displayMode: "fullscreen",
+      }),
+    );
+  });
+
+  it("resolves host context per part through forPart", async () => {
+    const modes: Record<string, string> = {
+      "call-1": "inline",
+      "call-2": "fullscreen",
+    };
+    render(
+      <OptionsHarness
+        host={loadingHost()}
+        hostContext={{ theme: "light" }}
+        toolCallIds={["call-1", "call-2"]}
+        forPart={(part) => ({
+          hostContext: {
+            theme: "light",
+            displayMode: modes[part.toolCallId] as "inline" | "fullscreen",
+          },
+        })}
+      />,
+    );
+
+    await waitFor(() => expect(framePropsCalls().length).toBeGreaterThan(1));
+    const delivered = framePropsCalls().map((props) => props.hostContext);
+    expect(delivered).toContainEqual({
+      theme: "light",
+      displayMode: "inline",
+    });
+    expect(delivered).toContainEqual({
+      theme: "light",
+      displayMode: "fullscreen",
+    });
+  });
+
+  it("gives forPart handlers the part that owns the frame", async () => {
+    const promoted: string[] = [];
+    render(
+      <OptionsHarness
+        host={loadingHost()}
+        toolCallIds={["call-1", "call-2"]}
+        forPart={(part) => ({
+          hostContext: { toolCallId: part.toolCallId },
+          handlers: {
+            requestDisplayMode: ({ mode }) => {
+              promoted.push(`${part.toolCallId}:${mode}`);
+              return { mode };
+            },
+          },
+        })}
+      />,
+    );
+
+    await waitFor(() => expect(framePropsCalls().length).toBeGreaterThan(1));
+    const second = framePropsCalls().find(
+      (props) => props.hostContext?.["toolCallId"] === "call-2",
+    );
+    await second?.handlers?.requestDisplayMode?.({ mode: "fullscreen" });
+
+    expect(promoted).toEqual(["call-2:fullscreen"]);
+  });
+
   it("injects serverId into loadResource and reloads when it changes", async () => {
     const loadResource = vi.fn(async ({ uri }: { uri: string }) => ({
       uri,
@@ -250,7 +449,7 @@ describe("McpAppRenderer", () => {
     framePropsMock.mockClear();
     view.rerender(<MemoizedHarness host={nextHost} />);
 
-    expect(nextHost.loadResource).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(nextHost.loadResource).toHaveBeenCalledTimes(1));
     expect(framePropsMock).not.toHaveBeenCalled();
 
     nextResource.resolve({
@@ -473,6 +672,55 @@ describe("McpAppRenderer", () => {
     expect(listResources).toHaveBeenCalledWith(params);
   });
 
+  it("appends MCP Apps message content in the default sendMessage handler", async () => {
+    render(<Harness host={loadingHost()} />);
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    const handlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+
+    expect(
+      handlers.sendMessage?.({
+        role: "user",
+        content: [
+          { type: "text", text: "Open Grade 5 Math" },
+          { type: "image", data: "image", mimeType: "image/png" },
+          { type: "text", text: "Period 4" },
+        ],
+      }),
+    ).toEqual({ ok: true });
+    expect(appendMock).toHaveBeenCalledWith({
+      content: [
+        { type: "text", text: "Open Grade 5 Math" },
+        { type: "text", text: "Period 4" },
+      ],
+    });
+
+    expect(handlers.sendMessage?.({ text: "typed instead" })).toEqual({
+      ok: true,
+    });
+    expect(appendMock).toHaveBeenLastCalledWith({
+      content: [{ type: "text", text: "typed instead" }],
+    });
+
+    expect(
+      handlers.sendMessage?.({
+        role: "user",
+        content: [{ type: "image", data: "image", mimeType: "image/png" }],
+      }),
+    ).toEqual({
+      isError: true,
+      ok: false,
+      reason: "no text content to append",
+    });
+
+    expect(handlers.sendMessage?.({ role: "user" })).toEqual({
+      isError: true,
+      ok: false,
+      reason: "unrecognised params shape",
+    });
+    expect(appendMock).toHaveBeenCalledTimes(2);
+  });
+
   it("uses caller UI handlers and keeps data-plane handlers on the host", async () => {
     const host: McpAppsHost = {
       loadResource: vi.fn(async ({ uri }) => ({