@assistant-ui/react 0.15.15 → 0.15.17

package/src/devtools/DevToolsHooks.test.ts

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DevToolsHooks, DevToolsProviderApi } from "./DevToolsHooks";
+
+describe("DevToolsHooks", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("notifies every listener when one throws", () => {
+    const error = new Error("listener failed");
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    const laterListener = vi.fn();
+    const unsubscribeThrowing = DevToolsHooks.subscribe(() => {
+      throw error;
+    });
+    const unsubscribeLater = DevToolsHooks.subscribe(laterListener);
+    let unregister = () => {};
+
+    try {
+      unregister = DevToolsProviderApi.register({});
+      const apiId = [...DevToolsHooks.getApis().keys()].at(-1);
+      expect(apiId).toBeDefined();
+
+      DevToolsHooks.clearEventLogs(apiId!);
+
+      expect(laterListener).toHaveBeenCalledTimes(2);
+      expect(consoleError).toHaveBeenCalledTimes(2);
+      expect(consoleError).toHaveBeenCalledWith(
+        "[assistant-ui] DevTools listener threw an error",
+        error,
+      );
+    } finally {
+      unsubscribeThrowing();
+      unsubscribeLater();
+      unregister();
+    }
+  });
+});

package/src/devtools/DevToolsHooks.ts

@@ -1,4 +1,5 @@
 import type { Unsubscribe } from "@assistant-ui/core";
+import { notifyEventListeners } from "@assistant-ui/core/internal";
 import type { AssistantClient } from "@assistant-ui/store";
 
 export interface EventLog {
@@ -54,6 +55,10 @@ const getHook = (): DevToolsHook => {
   return newHook;
 };
 
+const notifyListeners = (apiId: number): void => {
+  notifyEventListeners(getHook().listeners, apiId, "DevTools");
+};
+
 export class DevToolsHooks {
   static subscribe(listener: () => void): Unsubscribe {
     const hook = getHook();
@@ -69,17 +74,12 @@ export class DevToolsHooks {
     if (!entry) return;
 
     entry.logs = [];
-    DevToolsHooks.notifyListeners(apiId);
+    notifyListeners(apiId);
   }
 
   static getApis(): Map<number, DevToolsApiEntry> {
     return getHook().apis;
   }
-
-  private static notifyListeners(apiId: number): void {
-    const hook = getHook();
-    hook.listeners.forEach((listener) => listener(apiId));
-  }
 }
 
 export class DevToolsProviderApi {
@@ -116,15 +116,15 @@ export class DevToolsProviderApi {
         );
       }
 
-      DevToolsProviderApi.notifyListeners(apiId);
+      notifyListeners(apiId);
     });
 
     const stateUnsubscribe = aui.subscribe?.(() => {
-      DevToolsProviderApi.notifyListeners(apiId);
+      notifyListeners(apiId);
     });
 
     hook.apis.set(apiId, entry);
-    DevToolsProviderApi.notifyListeners(apiId);
+    notifyListeners(apiId);
 
     return () => {
       const hook = getHook();
@@ -136,12 +136,7 @@ export class DevToolsProviderApi {
 
       hook.apis.delete(apiId);
 
-      DevToolsProviderApi.notifyListeners(apiId);
+      notifyListeners(apiId);
     };
   }
-
-  private static notifyListeners(apiId: number): void {
-    const hook = getHook();
-    hook.listeners.forEach((listener) => listener(apiId));
-  }
 }

package/src/index.ts

@@ -83,7 +83,12 @@ export {
 } from "@assistant-ui/core";
 
 // --- adapters/suggestion ---
-export type { SuggestionAdapter } from "@assistant-ui/core";
+export type {
+  SuggestionAdapter,
+  SuggestionAdapterGenerateOptions,
+  CreateSuggestionAdapterOptions,
+} from "@assistant-ui/core";
+export { createSuggestionAdapter } from "@assistant-ui/core";
 
 // --- adapters/RuntimeAdapterProvider ---
 export {
@@ -475,6 +480,8 @@ export {
   useTriggerPopoverTriggers as unstable_useTriggerPopoverTriggers,
   useTriggerPopoverTriggersOptional as unstable_useTriggerPopoverTriggersOptional,
   type RegisteredTrigger as Unstable_RegisteredTrigger,
+  type TriggerMatch as Unstable_TriggerMatch,
+  type TriggerMatcher as Unstable_TriggerMatcher,
   type TriggerBehavior as Unstable_TriggerBehavior,
 } from "./primitives/composer/trigger";
 export type {
@@ -520,6 +527,7 @@ export type {
   McpAppsHost,
   McpAppsRemoteHostOptions,
   McpAppToolCallParams,
+  McpAppBridgeHandlers,
   ToolCallMessagePartMcpMetadata,
 } from "./mcp-apps";
 export type { McpAppResourceOutput } from "@assistant-ui/core/react";

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

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { render, waitFor } from "@testing-library/react";
 import { resource, useResource, withKey } from "@assistant-ui/tap";
-import { memo } from "react";
+import { act, memo, startTransition, Suspense } from "react";
 import type {
   ToolCallMessagePartComponent,
   ToolCallMessagePartProps,
@@ -29,7 +29,7 @@ vi.mock("./app-frame", () => ({
   },
 }));
 
-import { McpAppRenderer } from "./McpAppRenderer";
+import { McpAppRenderer, type McpAppRendererOptions } from "./McpAppRenderer";
 import { McpAppsRemoteHost } from "./McpAppsRemoteHost";
 
 const useHost = ({ host }: { host: McpAppsHost }) => host;
@@ -61,14 +61,31 @@ const createPart = (serverId?: string): ToolCallMessagePartProps => ({
   respondToApproval: vi.fn(),
 });
 
-function Harness({ host, serverId }: { host: McpAppsHost; serverId?: string }) {
+const createPartWithoutApp = (): ToolCallMessagePartProps => {
+  const part = createPart();
+  delete part.mcp;
+  return part;
+};
+
+function Harness({
+  host,
+  serverId,
+  handlers,
+  part,
+}: {
+  host: McpAppsHost;
+  serverId?: string;
+  handlers?: McpAppRendererOptions["handlers"];
+  part?: ToolCallMessagePartProps;
+}) {
   const renderer = useResource(
     McpAppRenderer({
       host: Host({ host }),
+      ...(handlers === undefined ? {} : { handlers }),
     }),
   );
   const Renderer = renderer.render;
-  return <Renderer {...createPart(serverId)} />;
+  return <Renderer {...(part ?? createPart(serverId))} />;
 }
 
 const MemoizedPart = memo(function MemoizedPart({
@@ -142,6 +159,64 @@ describe("McpAppRenderer", () => {
     });
   });
 
+  it("keeps bridge server ids scoped to committed renders", async () => {
+    const host: 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(),
+    };
+    const interruptedRender = vi.fn();
+    const pending = new Promise<never>(() => {});
+    const Blocker = ({ blocked }: { blocked: boolean }) => {
+      if (blocked) {
+        interruptedRender();
+        throw pending;
+      }
+      return null;
+    };
+    const view = (part: ToolCallMessagePartProps, blocked: boolean) => (
+      <Suspense fallback={null}>
+        <Harness host={host} part={part} />
+        <Blocker blocked={blocked} />
+      </Suspense>
+    );
+    const rendered = render(view(createPart("server-a"), false));
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    const handlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+
+    act(() => {
+      startTransition(() =>
+        rendered.rerender(view(createPart("server-b"), true)),
+      );
+    });
+    expect(interruptedRender).toHaveBeenCalled();
+    await handlers.callTool?.({ name: "search" });
+
+    expect(host.callTool).toHaveBeenCalledWith({
+      name: "search",
+      serverId: "server-a",
+    });
+
+    framePropsMock.mockClear();
+    vi.mocked(host.callTool).mockClear();
+    rendered.rerender(view(createPartWithoutApp(), false));
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    expect(framePropsMock.mock.lastCall?.[0].app.serverId).toBe("server-a");
+    const fallbackHandlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+    await fallbackHandlers.callTool?.({ name: "search" });
+    expect(host.callTool).toHaveBeenCalledWith({
+      name: "search",
+      serverId: "server-a",
+    });
+  });
+
   it("reloads the resource and hides stale HTML when the host changes", async () => {
     const nextResource = createDeferred<{
       uri: string;
@@ -397,4 +472,58 @@ describe("McpAppRenderer", () => {
     await handlers.listResources?.(params);
     expect(listResources).toHaveBeenCalledWith(params);
   });
+
+  it("uses caller UI handlers and keeps data-plane handlers on the host", async () => {
+    const host: 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(),
+    };
+    const requestDisplayMode = vi.fn(({ mode }) => ({ mode }));
+    const updateModelContext = vi.fn();
+    const openLink = vi.fn();
+    const sendMessage = vi.fn();
+    const onInitialized = vi.fn();
+
+    render(
+      <Harness
+        host={host}
+        handlers={{
+          requestDisplayMode,
+          updateModelContext,
+          openLink,
+          sendMessage,
+          onInitialized,
+        }}
+      />,
+    );
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    const handlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+
+    expect(await handlers.requestDisplayMode?.({ mode: "fullscreen" })).toEqual(
+      { mode: "fullscreen" },
+    );
+    await handlers.updateModelContext?.({ text: "context" });
+    await handlers.openLink?.({ url: "https://example.com" });
+    await handlers.sendMessage?.({ text: "hello" });
+    handlers.onInitialized?.();
+    await handlers.callTool?.({ name: "search" });
+    await handlers.readResource?.({ uri: "ui://resource" });
+    await handlers.listResources?.();
+
+    expect(requestDisplayMode).toHaveBeenCalledWith({ mode: "fullscreen" });
+    expect(updateModelContext).toHaveBeenCalledWith({ text: "context" });
+    expect(openLink).toHaveBeenCalledWith({ url: "https://example.com" });
+    expect(sendMessage).toHaveBeenCalledWith({ text: "hello" });
+    expect(onInitialized).toHaveBeenCalledOnce();
+    expect(host.callTool).toHaveBeenCalledWith({ name: "search" });
+    expect(host.readResource).toHaveBeenCalledWith({ uri: "ui://resource" });
+    expect(host.listResources).toHaveBeenCalledWith(undefined);
+  });
 });

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);