@assistant-ui/react 0.15.16 → 0.15.17

package/src/mcp-apps/McpAppRenderer.tsx

@@ -2,6 +2,7 @@
 
 import {
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -47,6 +48,14 @@ export type McpAppRendererOptions = {
   hostInfo?: McpAppHostInfo;
   /** Delivered to the widget on initialize and pushed via `notifications/host_context/changed` on change. */
   hostContext?: McpAppHostContext;
+  /**
+   * Optional widget interaction and lifecycle handlers. Data-plane handlers
+   * (`callTool`, `readResource`, `listResources`) always use `host`.
+   */
+  handlers?: Omit<
+    McpAppBridgeHandlers,
+    "callTool" | "readResource" | "listResources"
+  >;
   /** Rendered when no MCP app is on the part, or while load is in flight / failed (unless overridden). */
   fallback?: ReactNode;
   /** Rendered while the resource is loading. Defaults to `fallback`. */
@@ -106,13 +115,9 @@ function InlineRenderer({
   const aui = useAui();
   const app = getMcpAppFromToolPart(part);
   const cachedAppRef = useRef<McpAppMetadata | undefined>(undefined);
-  if (
-    app != null &&
-    (cachedAppRef.current?.resourceUri !== app.resourceUri ||
-      cachedAppRef.current?.serverId !== app.serverId)
-  ) {
-    cachedAppRef.current = app;
-  }
+  useLayoutEffect(() => {
+    if (app != null) cachedAppRef.current = app;
+  }, [app]);
   const appForRender = app ?? cachedAppRef.current;
 
   const [loadedResource, setLoadedResource] = useState<LoadedResourceState>();
@@ -120,8 +125,7 @@ function InlineRenderer({
   const host = useHostStore((state) => state.host);
   const resourceUri = appForRender?.resourceUri;
   const serverId = appForRender?.serverId;
-  const serverIdRef = useRef<string | undefined>(undefined);
-  serverIdRef.current = serverId;
+  const callerHandlers = opts.handlers;
   useEffect(() => {
     if (resourceUri == null) return;
     let cancelled = false;
@@ -165,34 +169,37 @@ function InlineRenderer({
 
   const bridgeHandlers = useMemo<McpAppBridgeHandlers>(
     () => ({
-      openLink: defaultOpenLink,
-      sendMessage: (params) => {
-        const text = extractSendMessageText(params);
-        if (!text) return { ok: false, reason: "unrecognised params shape" };
-        aui.thread.append({ content: [{ type: "text", text }] });
-        return { ok: true };
-      },
+      ...callerHandlers,
+      openLink: callerHandlers?.openLink ?? defaultOpenLink,
+      sendMessage:
+        callerHandlers?.sendMessage ??
+        ((params) => {
+          const text = extractSendMessageText(params);
+          if (!text) return { ok: false, reason: "unrecognised params shape" };
+          aui.thread.append({ content: [{ type: "text", text }] });
+          return { ok: true };
+        }),
       callTool: (params) =>
         useHostStore.getState().host.callTool({
           ...params,
-          ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
+          ...(serverId ? { serverId } : {}),
         }),
       readResource: (params) =>
         useHostStore.getState().host.readResource({
           ...params,
-          ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
+          ...(serverId ? { serverId } : {}),
         }),
       listResources: (params) => {
-        if (!serverIdRef.current) {
+        if (!serverId) {
           return useHostStore.getState().host.listResources(params);
         }
         return useHostStore.getState().host.listResources({
           ...(isRecord(params) ? params : {}),
-          serverId: serverIdRef.current,
+          serverId,
         });
       },
     }),
-    [aui, useHostStore],
+    [aui, callerHandlers, serverId, useHostStore],
   );
 
   const loadedResourceForApp =

package/src/mcp-apps/McpAppsRemoteHost.concurrent.test.tsx

@@ -0,0 +1,215 @@
+// @vitest-environment jsdom
+
+import { act, render, waitFor } from "@testing-library/react";
+import { useResource } from "@assistant-ui/tap";
+import {
+  startTransition,
+  Suspense,
+  useLayoutEffect,
+  type ReactNode,
+} from "react";
+import { describe, expect, it, vi } from "vitest";
+import type { McpAppsHost } from "./types";
+import { McpAppsRemoteHost } from "./McpAppsRemoteHost";
+
+describe("McpAppsRemoteHost concurrent rendering", () => {
+  it("keeps committed authorization options during an interrupted render", async () => {
+    const pending = new Promise<never>(() => {});
+    const fetch = vi.fn(async () => Response.json({ content: [] }));
+    let committedHost: McpAppsHost | undefined;
+
+    const Probe = ({
+      authorization,
+      suspend,
+      children,
+    }: {
+      authorization: string;
+      suspend: boolean;
+      children: ReactNode;
+    }) => {
+      const host = useResource(
+        McpAppsRemoteHost({
+          url: "/api/mcp-apps",
+          fetch,
+          headers: { authorization },
+        }),
+      );
+      useLayoutEffect(() => {
+        committedHost = host;
+      }, [host]);
+      if (suspend) throw pending;
+      return children;
+    };
+
+    const view = render(
+      <Suspense fallback={null}>
+        <Probe authorization="Bearer workspace-a" suspend={false}>
+          workspace-a
+        </Probe>
+      </Suspense>,
+    );
+
+    act(() => {
+      startTransition(() => {
+        view.rerender(
+          <Suspense fallback={null}>
+            <Probe authorization="Bearer workspace-b" suspend>
+              workspace-b
+            </Probe>
+          </Suspense>,
+        );
+      });
+    });
+
+    expect(view.container.textContent).toBe("workspace-a");
+    await committedHost?.callTool({ name: "search" });
+
+    expect(fetch).toHaveBeenCalledWith("/api/mcp-apps", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        authorization: "Bearer workspace-a",
+      },
+      body: JSON.stringify({
+        method: "tools/call",
+        params: { name: "search" },
+      }),
+    });
+
+    view.unmount();
+  });
+
+  it("keeps the URL and authorization from one committed options snapshot", async () => {
+    const fetch = vi.fn(async () => Response.json({ content: [] }));
+    let currentHost: McpAppsHost | undefined;
+
+    const Probe = ({
+      url,
+      authorization,
+    }: {
+      url: string;
+      authorization: string;
+    }) => {
+      const host = useResource(
+        McpAppsRemoteHost({
+          url,
+          fetch,
+          headers: { authorization },
+        }),
+      );
+      useLayoutEffect(() => {
+        currentHost = host;
+        void host.callTool({ name: "layout-request" });
+      }, [host]);
+      return null;
+    };
+
+    const view = render(
+      <Probe url="/workspace-a/mcp" authorization="Bearer workspace-a" />,
+    );
+    fetch.mockClear();
+
+    view.rerender(
+      <Probe url="/workspace-b/mcp" authorization="Bearer workspace-b" />,
+    );
+
+    expect(fetch).toHaveBeenNthCalledWith(1, "/workspace-b/mcp", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        authorization: "Bearer workspace-b",
+      },
+      body: JSON.stringify({
+        method: "tools/call",
+        params: { name: "layout-request" },
+      }),
+    });
+
+    await currentHost?.callTool({ name: "committed-request" });
+
+    expect(fetch).toHaveBeenNthCalledWith(2, "/workspace-b/mcp", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        authorization: "Bearer workspace-b",
+      },
+      body: JSON.stringify({
+        method: "tools/call",
+        params: { name: "committed-request" },
+      }),
+    });
+
+    view.unmount();
+  });
+
+  it("refreshes pending options when a URL switch render retries", async () => {
+    let authorization = "Bearer workspace-b-old";
+    let resumed = false;
+    let resume: (() => void) | undefined;
+    const pending = new Promise<void>((resolve) => {
+      resume = () => {
+        resumed = true;
+        resolve();
+      };
+    });
+    const fetch = vi.fn(async () => Response.json({ content: [] }));
+
+    const Probe = ({ url }: { url: string }) => {
+      const host = useResource(
+        McpAppsRemoteHost({
+          url,
+          fetch,
+          headers: {
+            authorization:
+              url === "/workspace-a/mcp" ? "Bearer workspace-a" : authorization,
+          },
+        }),
+      );
+      useLayoutEffect(() => {
+        void host.callTool({ name: "layout-request" });
+      }, [host]);
+      if (url === "/workspace-b/mcp" && !resumed) throw pending;
+      return <span>{url}</span>;
+    };
+
+    const view = render(
+      <Suspense fallback={null}>
+        <Probe url="/workspace-a/mcp" />
+      </Suspense>,
+    );
+    try {
+      fetch.mockClear();
+
+      act(() => {
+        startTransition(() => {
+          view.rerender(
+            <Suspense fallback={null}>
+              <Probe url="/workspace-b/mcp" />
+            </Suspense>,
+          );
+        });
+      });
+      expect(view.container.textContent).toBe("/workspace-a/mcp");
+
+      authorization = "Bearer workspace-b-new";
+      await act(async () => resume?.());
+      await waitFor(() =>
+        expect(view.container.textContent).toBe("/workspace-b/mcp"),
+      );
+
+      expect(fetch).toHaveBeenCalledWith("/workspace-b/mcp", {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          authorization: "Bearer workspace-b-new",
+        },
+        body: JSON.stringify({
+          method: "tools/call",
+          params: { name: "layout-request" },
+        }),
+      });
+    } finally {
+      view.unmount();
+    }
+  });
+});

package/src/mcp-apps/McpAppsRemoteHost.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { resource } from "@assistant-ui/tap";
 import type {
   McpAppResource,
@@ -111,20 +111,17 @@ const useMcpAppsRemoteHost = (
   options: McpAppsRemoteHostOptions,
 ): McpAppsHost => {
   const optionsRef = useRef(options);
-  optionsRef.current = options;
+  useEffect(() => {
+    optionsRef.current = options;
+  });
 
   const url = options.url;
 
-  return useMemo((): McpAppsHost => {
-    const getCurrentOptions = (): McpAppsRemoteHostOptions => {
-      const current = optionsRef.current;
-      return {
-        url,
-        ...(current.fetch !== undefined ? { fetch: current.fetch } : {}),
-        ...(current.headers !== undefined ? { headers: current.headers } : {}),
-      };
-    };
-    return {
+  const hostState = useMemo(() => {
+    let pendingOptions = options;
+    const getCurrentOptions = () =>
+      optionsRef.current.url === url ? optionsRef.current : pendingOptions;
+    const host: McpAppsHost = {
       loadResource: async (params) => {
         const options = getCurrentOptions();
         return parseMcpAppResource(
@@ -139,7 +136,26 @@ const useMcpAppsRemoteHost = (
       listResources: (params) =>
         postToHost(getCurrentOptions(), "resources/list", params),
     };
+    return {
+      host,
+      updatePendingOptions: (next: McpAppsRemoteHostOptions) => {
+        pendingOptions = next;
+      },
+    };
+    // oxlint-disable-next-line react/exhaustive-deps -- URL changes replace the host identity; pending and same-URL options are refreshed outside the memo
   }, [url]);
+
+  // The pending snapshot is read only while the committed ref still lags this
+  // host's URL, and every write to it carries that same render's options, so
+  // no render can pair one URL with another's credentials. A committed host can
+  // be written here (a child layout effect re-rendering synchronously runs
+  // before passive effects publish the ref), which stays coherent for the same
+  // reason.
+  if (optionsRef.current.url !== url) {
+    hostState.updatePendingOptions(options);
+  }
+
+  return hostState.host;
 };
 
 export const McpAppsRemoteHost = resource(useMcpAppsRemoteHost);

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

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+import { act, startTransition, Suspense } from "react";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type {
+  SandboxBridge,
+  SandboxHostProps,
+} from "../sandbox-host/SandboxHost";
+import type { CreateMcpAppBridgeOptions, McpAppBridge } from "./bridge";
+import { MCP_APP_MIME_TYPE } from "./types";
+
+const { sandboxHostMock, createMcpAppBridgeMock } = vi.hoisted(() => ({
+  sandboxHostMock: vi.fn(),
+  createMcpAppBridgeMock: vi.fn(),
+}));
+
+vi.mock("../sandbox-host/SandboxHost", () => ({
+  SandboxHost: sandboxHostMock,
+}));
+
+vi.mock("./bridge", async (importOriginal) => ({
+  ...(await importOriginal()),
+  createMcpAppBridge: createMcpAppBridgeMock,
+}));
+
+import { McpAppFrame } from "./app-frame";
+
+describe("McpAppFrame", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("keeps bridge options scoped to committed renders", async () => {
+    let committedCreateBridge: SandboxHostProps["createBridge"] | null = null;
+    sandboxHostMock.mockImplementation((props: SandboxHostProps) => {
+      committedCreateBridge ??= props.createBridge;
+      return null;
+    });
+    const bridge: McpAppBridge = {
+      onMessage: vi.fn(),
+      dispose: vi.fn(),
+      notifyToolInput: vi.fn(),
+      notifyToolResult: vi.fn(),
+      notifyHostContextChanged: vi.fn(),
+    };
+    createMcpAppBridgeMock.mockReturnValue(bridge);
+    const callToolA = vi.fn();
+    const callToolB = vi.fn();
+    const interruptedRender = vi.fn();
+    const pending = new Promise<never>(() => {});
+    const Block = () => {
+      interruptedRender();
+      throw pending;
+    };
+    const view = (
+      workspace: string,
+      callTool: typeof callToolA,
+      blocked: boolean,
+    ) => (
+      <Suspense fallback={null}>
+        <McpAppFrame
+          app={{ resourceUri: "ui://example/widget" }}
+          resource={{
+            uri: "ui://example/widget",
+            mimeType: MCP_APP_MIME_TYPE,
+            html: "",
+          }}
+          handlers={{ callTool }}
+          hostContext={{ workspace }}
+        />
+        {blocked ? <Block /> : null}
+      </Suspense>
+    );
+    const rendered = render(view("workspace-a", callToolA, false));
+
+    act(() => {
+      startTransition(() =>
+        rendered.rerender(view("workspace-b", callToolB, true)),
+      );
+    });
+    expect(interruptedRender).toHaveBeenCalled();
+    expect(committedCreateBridge).not.toBeNull();
+
+    const sandboxBridge: SandboxBridge = committedCreateBridge!(
+      {
+        iframe: document.createElement("iframe"),
+        origin: "https://widget.example",
+        sendMessage: vi.fn(),
+      },
+      { setHeight: vi.fn() },
+    );
+    const options = createMcpAppBridgeMock.mock
+      .calls[0]![0] as CreateMcpAppBridgeOptions;
+    expect(options.hostContext).toEqual({ workspace: "workspace-a" });
+    await options.handlers?.callTool?.({ name: "search" });
+    expect(callToolA).toHaveBeenCalledOnce();
+    expect(callToolB).not.toHaveBeenCalled();
+
+    sandboxBridge.dispose();
+  });
+});

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

@@ -1,6 +1,11 @@
 "use client";
 
-import { type MutableRefObject, useEffect, useRef } from "react";
+import {
+  type MutableRefObject,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from "react";
 import { type McpAppBridge, createMcpAppBridge } from "./bridge";
 import {
   SandboxHost,
@@ -121,14 +126,22 @@ export function McpAppFrame({
     undefined,
   );
 
-  const liveRef = useRef<LiveSnapshot>(null!);
-  liveRef.current = {
+  const liveRef = useRef<LiveSnapshot>({
     handlers,
     hostInfo,
     hostContext,
     input,
     output,
-  };
+  });
+  useLayoutEffect(() => {
+    liveRef.current = {
+      handlers,
+      hostInfo,
+      hostContext,
+      input,
+      output,
+    };
+  }, [handlers, hostInfo, hostContext, input, output]);
 
   const createBridge = (
     frame: SandboxHostFrame,

package/src/mcp-apps/index.ts

@@ -13,5 +13,6 @@ export type {
   McpAppsHost,
   McpAppsRemoteHostOptions,
   McpAppToolCallParams,
+  McpAppBridgeHandlers,
   ToolCallMessagePartMcpMetadata,
 } from "./types";

package/src/model-context/frame/AssistantFrame.test.ts

@@ -27,7 +27,7 @@ describe("AssistantFrame Integration", () => {
             parentHandler({
               data,
               source: iframeWindow,
-              origin: "*",
+              origin: window.location.origin,
             } as MessageEvent);
           });
         }
@@ -44,7 +44,7 @@ describe("AssistantFrame Integration", () => {
             iframeHandler({
               data,
               source: parentWindow, // parent window is the source for subscription
-              origin: "*",
+              origin: window.location.origin,
             } as MessageEvent);
           });
         }
@@ -104,7 +104,7 @@ describe("AssistantFrame Integration", () => {
             type: "model-context-request",
           }),
         }),
-        "*",
+        window.location.origin,
       );
     });
 

package/src/model-context/frame/SPEC_AssistantFrame.md

@@ -88,7 +88,7 @@ All messages are wrapped with a channel identifier to avoid conflicts with other
 
 #### Security Considerations
 
-1. **Origin Validation**: Both sides can specify `targetOrigin` to restrict message sources; providers share a fail-closed origin policy
+1. **Origin Validation**: Both sides default to the current page's origin and can specify an exact `targetOrigin` for cross-origin frames; providers share a fail-closed origin policy
 2. **Window Reference**: Host (parent) only accepts messages from the specific iframe window it's connected to
 3. **Message Channel**: Using a unique channel identifier prevents cross-talk with other postMessage users
 

package/src/model-context/frame/useAssistantFrameHost.ts

@@ -20,7 +20,7 @@ type UseAssistantFrameHostOptions = {
  *
  *   useAssistantFrameHost({
  *     iframeRef,
- *     targetOrigin: "https://trusted-domain.com", // optional
+ *     targetOrigin: "https://trusted-domain.com",
  *   });
  *
  *   return <iframe ref={iframeRef} src="..." />;
@@ -29,7 +29,7 @@ type UseAssistantFrameHostOptions = {
  */
 export const useAssistantFrameHost = ({
   iframeRef,
-  targetOrigin = "*",
+  targetOrigin,
   register,
 }: UseAssistantFrameHostOptions): void => {
   useEffect(() => {

package/src/model-context/makeAssistantVisible.tsx

@@ -12,7 +12,7 @@ import {
   useContext,
 } from "react";
 import { useAui } from "@assistant-ui/store";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { tool } from "@assistant-ui/core";
 
 const click = tool({

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import type { ActionButtonProps } from "../../utils/createActionButton";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { Primitive } from "../../utils/Primitive";
 import { useActionBarCopy } from "@assistant-ui/core/react";
 import { useAuiState } from "@assistant-ui/store";

package/src/primitives/actionBar/ActionBarExportMarkdown.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef, useCallback } from "react";
 import type { ActionButtonProps } from "../../utils/createActionButton";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { Primitive } from "../../utils/Primitive";
 import { useAuiState, useAui } from "@assistant-ui/store";
 

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import type { ActionButtonProps } from "../../utils/createActionButton";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { Primitive } from "../../utils/Primitive";
 import { useAuiState } from "@assistant-ui/store";
 import { useActionBarFeedbackNegative as useActionBarFeedbackNegativeBehavior } from "@assistant-ui/core/react";

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import type { ActionButtonProps } from "../../utils/createActionButton";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { useAuiState } from "@assistant-ui/store";
 import { Primitive } from "../../utils/Primitive";
 import { useActionBarFeedbackPositive as useActionBarFeedbackPositiveBehavior } from "@assistant-ui/core/react";

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

@@ -3,7 +3,7 @@
 import { forwardRef } from "react";
 import type { ActionButtonProps } from "../../utils/createActionButton";
 import { Primitive } from "../../utils/Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { useActionBarStopSpeaking as useActionBarStopSpeakingBehavior } from "@assistant-ui/core/react";
 
 const useActionBarStopSpeaking = () => {

package/src/primitives/actionBarMore/scope.ts

@@ -1,8 +1,8 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import type { Scope } from "@radix-ui/react-context";
+import type { Context } from "radix-ui/internal";
 
 export const useDropdownMenuScope: ReturnType<
   typeof DropdownMenuPrimitive.createDropdownMenuScope
 > = DropdownMenuPrimitive.createDropdownMenuScope();
 
-export type ScopedProps<P> = P & { __scopeActionBarMore?: Scope };
+export type ScopedProps<P> = P & { __scopeActionBarMore?: Context.Scope };

package/src/primitives/assistantModal/AssistantModalContent.tsx

@@ -6,7 +6,7 @@ import {
   forwardRef,
 } from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { PopoverRenderContent } from "./popoverRenderPrimitives";
 import { type ScopedProps, usePopoverScope } from "./scope";

package/src/primitives/assistantModal/scope.ts

@@ -1,7 +1,7 @@
 import { Popover as PopoverPrimitive } from "radix-ui";
-import type { Scope } from "@radix-ui/react-context";
+import type { Context } from "radix-ui/internal";
 
 export const usePopoverScope: ReturnType<
   typeof PopoverPrimitive.createPopoverScope
 > = PopoverPrimitive.createPopoverScope();
-export type ScopedProps<P> = P & { __scopeAssistantModal?: Scope };
+export type ScopedProps<P> = P & { __scopeAssistantModal?: Context.Scope };