@assistant-ui/react 0.14.26 → 0.14.28

package/src/mcp-apps/McpAppRenderer.tsx

@@ -26,6 +26,7 @@ import type {
   McpAppsHost,
 } from "./types";
 import { getMcpAppFromToolPart } from "./utils";
+import { isRecord } from "@assistant-ui/core/internal";
 
 export type McpAppRendererOptions = {
   /**
@@ -55,6 +56,7 @@ export type McpAppRendererOptions = {
 
 type LoadedResourceState = {
   resourceUri: string;
+  serverId?: string;
   resource?: McpAppResource;
   error?: Error;
 };
@@ -100,7 +102,11 @@ function InlineRenderer({
   const aui = useAui();
   const app = getMcpAppFromToolPart(part);
   const cachedAppRef = useRef<McpAppMetadata | undefined>(undefined);
-  if (app != null && cachedAppRef.current?.resourceUri !== app.resourceUri) {
+  if (
+    app != null &&
+    (cachedAppRef.current?.resourceUri !== app.resourceUri ||
+      cachedAppRef.current?.serverId !== app.serverId)
+  ) {
     cachedAppRef.current = app;
   }
   const appForRender = app ?? cachedAppRef.current;
@@ -108,21 +114,37 @@ function InlineRenderer({
   const [loadedResource, setLoadedResource] = useState<LoadedResourceState>();
 
   const resourceUri = appForRender?.resourceUri;
+  const serverId = appForRender?.serverId;
+  const serverIdRef = useRef<string | undefined>(undefined);
+  serverIdRef.current = serverId;
   useEffect(() => {
     if (appForRender == null || resourceUri == null) return;
     let cancelled = false;
     const targetUri = resourceUri;
+    const targetServerId = serverId;
 
     internalsRef.current.host
-      .loadResource({ uri: targetUri })
+      .loadResource({
+        uri: targetUri,
+        ...(targetServerId ? { serverId: targetServerId } : {}),
+      })
       .then((res) => {
         if (!cancelled)
-          setLoadedResource({ resourceUri: targetUri, resource: res });
+          setLoadedResource({
+            resourceUri: targetUri,
+            ...(targetServerId !== undefined
+              ? { serverId: targetServerId }
+              : {}),
+            resource: res,
+          });
       })
       .catch((error: unknown) => {
         if (!cancelled) {
           setLoadedResource({
             resourceUri: targetUri,
+            ...(targetServerId !== undefined
+              ? { serverId: targetServerId }
+              : {}),
             error: error instanceof Error ? error : new Error(String(error)),
           });
         }
@@ -131,8 +153,8 @@ function InlineRenderer({
     return () => {
       cancelled = true;
     };
-    // oxlint-disable-next-line react/exhaustive-deps -- re-fetch only when URI changes; appForRender identity is unstable and internalsRef is a stable ref
-  }, [resourceUri]);
+    // oxlint-disable-next-line react/exhaustive-deps -- re-fetch only when URI or server identity changes; appForRender identity is unstable and internalsRef is a stable ref
+  }, [resourceUri, serverId]);
 
   const bridgeHandlers = useMemo<McpAppBridgeHandlers>(
     () => ({
@@ -143,16 +165,32 @@ function InlineRenderer({
         aui.thread().append({ content: [{ type: "text", text }] });
         return { ok: true };
       },
-      callTool: (params) => internalsRef.current.host.callTool(params),
-      readResource: (params) => internalsRef.current.host.readResource(params),
-      listResources: (params) =>
-        internalsRef.current.host.listResources(params),
+      callTool: (params) =>
+        internalsRef.current.host.callTool({
+          ...params,
+          ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
+        }),
+      readResource: (params) =>
+        internalsRef.current.host.readResource({
+          ...params,
+          ...(serverIdRef.current ? { serverId: serverIdRef.current } : {}),
+        }),
+      listResources: (params) => {
+        if (!serverIdRef.current) {
+          return internalsRef.current.host.listResources(params);
+        }
+        return internalsRef.current.host.listResources({
+          ...(isRecord(params) ? params : {}),
+          serverId: serverIdRef.current,
+        });
+      },
     }),
     [aui, internalsRef],
   );
 
   const loadedResourceForApp =
-    loadedResource?.resourceUri === appForRender?.resourceUri
+    loadedResource?.resourceUri === appForRender?.resourceUri &&
+    loadedResource?.serverId === appForRender?.serverId
       ? loadedResource
       : undefined;
   const appResource = loadedResourceForApp?.resource;

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

@@ -0,0 +1,126 @@
+import { createTapRoot, useResource } from "@assistant-ui/tap";
+import { describe, expect, it, vi } from "vitest";
+import { McpAppsRemoteHost } from "./McpAppsRemoteHost";
+
+const mount = (fetch: typeof globalThis.fetch) =>
+  createTapRoot(function Root() {
+    return useResource(
+      McpAppsRemoteHost({
+        url: "/api/mcp-apps",
+        fetch,
+      }),
+    );
+  });
+
+describe("McpAppsRemoteHost", () => {
+  it("posts the requested method and params to the host route", async () => {
+    const fetch = vi.fn(async () =>
+      Response.json({ content: [{ type: "text", text: "ok" }] }),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await expect(
+        root.getValue().callTool({
+          name: "search",
+          arguments: { query: "docs" },
+        }),
+      ).resolves.toEqual({ content: [{ type: "text", text: "ok" }] });
+
+      expect(fetch).toHaveBeenCalledWith("/api/mcp-apps", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          method: "tools/call",
+          params: { name: "search", arguments: { query: "docs" } },
+        }),
+      });
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("posts serverId params verbatim for tool calls and resource loads", async () => {
+    const fetch = vi.fn(async () =>
+      Response.json({ content: [{ type: "text", text: "ok" }] }),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await root.getValue().callTool({
+        name: "search",
+        arguments: { query: "docs" },
+        serverId: "search-server",
+      });
+      await root.getValue().loadResource({
+        uri: "ui://example/search",
+        serverId: "search-server",
+      });
+
+      expect(fetch).toHaveBeenNthCalledWith(1, "/api/mcp-apps", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          method: "tools/call",
+          params: {
+            name: "search",
+            arguments: { query: "docs" },
+            serverId: "search-server",
+          },
+        }),
+      });
+      expect(fetch).toHaveBeenNthCalledWith(2, "/api/mcp-apps", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          method: "mcp-apps/read-resource",
+          params: {
+            uri: "ui://example/search",
+            serverId: "search-server",
+          },
+        }),
+      });
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("includes method, url, status, and text body in host request errors", async () => {
+    const fetch = vi.fn(
+      async () =>
+        new Response("Missing tool name", {
+          status: 500,
+          statusText: "Internal Server Error",
+        }),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await expect(
+        root.getValue().callTool({ name: "search" }),
+      ).rejects.toThrow(
+        'MCP App host request "tools/call" to "/api/mcp-apps" failed with 500 Internal Server Error: Missing tool name',
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+
+  it("uses JSON error messages from failed host responses", async () => {
+    const fetch = vi.fn(async () =>
+      Response.json(
+        { error: { message: "resources/list is not supported" } },
+        { status: 400, statusText: "Bad Request" },
+      ),
+    ) as unknown as typeof globalThis.fetch;
+    const root = mount(fetch);
+
+    try {
+      await expect(root.getValue().listResources()).rejects.toThrow(
+        'MCP App host request "resources/list" to "/api/mcp-apps" failed with 400 Bad Request: resources/list is not supported',
+      );
+    } finally {
+      root.unmount();
+    }
+  });
+});

package/src/mcp-apps/McpAppsRemoteHost.ts

@@ -6,6 +6,39 @@ import type {
   McpAppsRemoteHostOptions,
 } from "./types";
 
+const truncateBody = (body: string) =>
+  body.length > 500 ? `${body.slice(0, 500)}...` : body;
+
+const extractErrorBody = (body: string): string | undefined => {
+  const trimmed = body.trim();
+  if (!trimmed) return undefined;
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    if (parsed && typeof parsed === "object") {
+      const record = parsed as Record<string, unknown>;
+      if (typeof record.message === "string") return record.message;
+      if (typeof record.error === "string") return record.error;
+      if (record.error && typeof record.error === "object") {
+        const error = record.error as Record<string, unknown>;
+        if (typeof error.message === "string") return error.message;
+      }
+    }
+  } catch {
+    return truncateBody(trimmed);
+  }
+
+  return truncateBody(trimmed);
+};
+
+const readErrorBody = async (res: Response): Promise<string | undefined> => {
+  try {
+    return extractErrorBody(await res.text());
+  } catch {
+    return undefined;
+  }
+};
+
 async function postToHost(
   options: McpAppsRemoteHostOptions,
   method: string,
@@ -22,7 +55,13 @@ async function postToHost(
     body: JSON.stringify({ method, params }),
   });
   if (!res.ok) {
-    throw new Error(`MCP App host request failed: ${res.status}`);
+    const status = res.statusText
+      ? `${res.status} ${res.statusText}`
+      : `${res.status}`;
+    const body = await readErrorBody(res);
+    throw new Error(
+      `MCP App host request "${method}" to "${options.url}" failed with ${status}${body ? `: ${body}` : ""}`,
+    );
   }
   return res.json();
 }

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

@@ -246,7 +246,9 @@ export function McpAppFrame({
   return (
     <SandboxHost
       content={{ html: resource.html }}
-      contentKey={resource.uri}
+      contentKey={
+        app.serverId ? `${app.serverId} ${resource.uri}` : resource.uri
+      }
       sandbox={{ ...sandbox, product: sandbox?.product ?? DEFAULT_PRODUCT }}
       maxHeight={maxHeight}
       createBridge={createBridge}

package/src/mcp-apps/bridge.ts

@@ -10,7 +10,7 @@ import {
   type McpAppJsonRpcRequest,
   type McpAppJsonRpcResponse,
 } from "./types";
-import { isRecord } from "../utils/json/is-json";
+import { isRecord } from "@assistant-ui/core/internal";
 
 const VALID_DISPLAY_MODES = [
   "inline",

package/src/mcp-apps/types.ts

@@ -51,19 +51,27 @@ export type McpAppHostInfo = {
  * `McpAppsRemoteHost`.
  */
 export type McpAppsHost = {
-  loadResource: (params: { uri: string }) => Promise<McpAppResource>;
-  callTool: (params: McpAppToolCallParams) => Promise<unknown>;
-  readResource: (params: { uri: string }) => Promise<unknown>;
+  loadResource: (params: {
+    uri: string;
+    serverId?: string;
+  }) => Promise<McpAppResource>;
+  callTool: (
+    params: McpAppToolCallParams & { serverId?: string },
+  ) => Promise<unknown>;
+  readResource: (params: {
+    uri: string;
+    serverId?: string;
+  }) => Promise<unknown>;
   listResources: (params?: unknown) => Promise<unknown>;
 };
 
 /**
  * Options for `McpAppsRemoteHost`. The host POSTs `{ method, params }` to
- * `url` and expects JSON responses. Method names sent:
- * - `mcp-apps/read-resource` (`{ uri }`) → `McpAppResource`
- * - `tools/call` (`{ name, arguments? }`) → tool result
- * - `resources/read` (`{ uri }`) → resource read result
- * - `resources/list` (`params?`) → list result
+ * `url` and expects JSON responses. Params may carry `serverId` for host-side routing. Method names sent:
+ * - `mcp-apps/read-resource` (`{ uri, serverId? }`) → `McpAppResource`
+ * - `tools/call` (`{ name, arguments?, serverId? }`) → tool result
+ * - `resources/read` (`{ uri, serverId? }`) → resource read result
+ * - `resources/list` (`{ serverId?, ...params }?`) → list result
  */
 export type McpAppsRemoteHostOptions = {
   url: string;

package/src/model-context/makeAssistantVisible.test.tsx

@@ -0,0 +1,146 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, render } from "@testing-library/react";
+import {
+  forwardRef,
+  useState,
+  type ComponentProps,
+  type ChangeEvent,
+} from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { registerMock, auiMock } = vi.hoisted(() => {
+  const register = vi.fn((_provider: unknown) => () => {});
+  return {
+    registerMock: register,
+    auiMock: {
+      modelContext: () => ({ register }),
+    },
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useAui: () => auiMock,
+}));
+
+import { makeAssistantVisible } from "./makeAssistantVisible";
+
+type EditTool = {
+  execute: (args: { editId: string; value: string }) => Promise<unknown>;
+};
+
+type ModelContextProvider = {
+  getModelContext: () => {
+    tools: {
+      edit: EditTool;
+    };
+  };
+};
+
+const ControlledInput = forwardRef<HTMLInputElement, ComponentProps<"input">>(
+  ({ onChange, ...props }, ref) => {
+    const [value, setValue] = useState("initial");
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+      onChange?.(event);
+    };
+
+    return (
+      <input
+        {...props}
+        ref={ref}
+        value={value}
+        data-react-value={value}
+        onChange={handleChange}
+      />
+    );
+  },
+);
+
+const ControlledTextarea = forwardRef<
+  HTMLTextAreaElement,
+  ComponentProps<"textarea">
+>(({ onChange, ...props }, ref) => {
+  const [value, setValue] = useState("initial");
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    onChange?.(event);
+  };
+
+  return (
+    <textarea
+      {...props}
+      ref={ref}
+      value={value}
+      data-react-value={value}
+      onChange={handleChange}
+    />
+  );
+});
+
+const runEditTool = async (
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string,
+) => {
+  const editId = element.dataset.editId;
+  if (editId === undefined) throw new Error("Missing edit id");
+
+  const provider = registerMock.mock.calls[0]![0] as ModelContextProvider;
+  const task = provider.getModelContext().tools.edit.execute({
+    editId,
+    value,
+  });
+  await vi.runAllTimersAsync();
+  await task;
+};
+
+describe("makeAssistantVisible editable components", () => {
+  beforeEach(() => {
+    registerMock.mockClear();
+    vi.stubGlobal("CSS", { escape: (value: string) => value });
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
+  it("updates controlled input state through the edit tool", async () => {
+    const EditableInput = makeAssistantVisible(ControlledInput, {
+      editable: true,
+    });
+    const onChange = vi.fn();
+    const input = render(<EditableInput onChange={onChange} />).getByRole(
+      "textbox",
+    );
+
+    await act(async () => {
+      await runEditTool(input as HTMLInputElement, "updated");
+    });
+
+    expect(input).toHaveProperty("value", "updated");
+    expect(input.getAttribute("data-react-value")).toBe("updated");
+    expect(onChange).toHaveBeenCalledOnce();
+  });
+
+  it("updates controlled textarea state through the edit tool", async () => {
+    const EditableTextarea = makeAssistantVisible(ControlledTextarea, {
+      editable: true,
+    });
+    const onChange = vi.fn();
+    const textarea = render(<EditableTextarea onChange={onChange} />).getByRole(
+      "textbox",
+    );
+
+    await act(async () => {
+      await runEditTool(textarea as HTMLTextAreaElement, "updated");
+    });
+
+    expect(textarea).toHaveProperty("value", "updated");
+    expect(textarea.getAttribute("data-react-value")).toBe("updated");
+    expect(onChange).toHaveBeenCalledOnce();
+  });
+});

package/src/model-context/makeAssistantVisible.tsx

@@ -40,6 +40,23 @@ const click = tool({
   },
 });
 
+const setNativeValue = (
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string,
+) => {
+  const prototype =
+    element instanceof HTMLInputElement
+      ? HTMLInputElement.prototype
+      : HTMLTextAreaElement.prototype;
+  const setter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
+
+  if (setter) {
+    setter.call(element, value);
+  } else {
+    element.value = value;
+  }
+};
+
 const edit = tool({
   parameters: {
     type: "object",
@@ -57,7 +74,7 @@ const edit = tool({
     const escapedEditId = CSS.escape(editId);
     const el = document.querySelector(`[data-edit-id='${escapedEditId}']`);
     if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-      el.value = value;
+      setNativeValue(el, value);
       el.dispatchEvent(new Event("input", { bubbles: true }));
       el.dispatchEvent(new Event("change", { bubbles: true }));
 

package/src/primitives/assistantModal/AssistantModalAnchor.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import {
-  type ComponentPropsWithoutRef,
-  type ComponentRef,
-  forwardRef,
-} from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import { type ComponentRef, forwardRef } from "react";
+import type { Popover as PopoverPrimitive } from "radix-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { PopoverRenderAnchor } from "./popoverRenderPrimitives";
 import { type ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveAnchor {
   export type Element = ComponentRef<typeof PopoverPrimitive.Anchor>;
-  export type Props = ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>;
+  export type Props = WithRenderPropProps<typeof PopoverPrimitive.Anchor>;
 }
 
 export const AssistantModalPrimitiveAnchor = forwardRef<
@@ -26,7 +24,7 @@ export const AssistantModalPrimitiveAnchor = forwardRef<
   ) => {
     const scope = usePopoverScope(__scopeAssistantModal);
 
-    return <PopoverPrimitive.Anchor {...scope} {...rest} ref={ref} />;
+    return <PopoverRenderAnchor {...scope} {...rest} ref={ref} />;
   },
 );
 AssistantModalPrimitiveAnchor.displayName = "AssistantModalPrimitive.Anchor";

package/src/primitives/assistantModal/AssistantModalContent.tsx

@@ -6,14 +6,14 @@ import {
   forwardRef,
 } from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { type ScopedProps, usePopoverScope } from "./scope";
 import { composeEventHandlers } from "@radix-ui/primitive";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { PopoverRenderContent } from "./popoverRenderPrimitives";
+import { type ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveContent {
   export type Element = ComponentRef<typeof PopoverPrimitive.Content>;
-  export type Props = ComponentPropsWithoutRef<
-    typeof PopoverPrimitive.Content
-  > & {
+  export type Props = WithRenderPropProps<typeof PopoverPrimitive.Content> & {
     portalProps?:
       | ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>
       | undefined;
@@ -41,7 +41,7 @@ export const AssistantModalPrimitiveContent = forwardRef<
 
     return (
       <PopoverPrimitive.Portal {...scope} {...portalProps}>
-        <PopoverPrimitive.Content
+        <PopoverRenderContent
           {...scope}
           {...props}
           ref={forwardedRef}

package/src/primitives/assistantModal/AssistantModalTrigger.test.tsx

@@ -0,0 +1,80 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { AssistantModalPrimitiveAnchor } from "./AssistantModalAnchor";
+import { AssistantModalPrimitiveContent } from "./AssistantModalContent";
+import { AssistantModalPrimitiveRoot } from "./AssistantModalRoot";
+import { AssistantModalPrimitiveTrigger } from "./AssistantModalTrigger";
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAui: () => ({
+      on: () => () => {},
+    }),
+  };
+});
+
+describe("AssistantModalPrimitive render props", () => {
+  it("Trigger render matches asChild", () => {
+    const renderHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveTrigger
+          render={<button type="button" className="trigger" />}
+        >
+          Open
+        </AssistantModalPrimitiveTrigger>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    const asChildHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveTrigger asChild>
+          <button type="button" className="trigger">
+            Open
+          </button>
+        </AssistantModalPrimitiveTrigger>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    expect(renderHtml).toBe(asChildHtml);
+    expect(renderHtml).toContain('class="trigger"');
+    expect(renderHtml).toContain("Open");
+    expect(renderHtml).toContain('type="button"');
+    expect(renderHtml).toMatch(/aria-haspopup|aria-expanded|data-state/);
+  });
+
+  it("Anchor render matches asChild", () => {
+    const renderHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveAnchor render={<div className="anchor" />}>
+          Anchor
+        </AssistantModalPrimitiveAnchor>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    const asChildHtml = renderToStaticMarkup(
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveAnchor asChild>
+          <div className="anchor">Anchor</div>
+        </AssistantModalPrimitiveAnchor>
+      </AssistantModalPrimitiveRoot>,
+    );
+
+    expect(renderHtml).toBe(asChildHtml);
+    expect(renderHtml).toContain('class="anchor"');
+    expect(renderHtml).toContain("Anchor");
+  });
+
+  it("accepts render on Trigger, Anchor, and Content", () => {
+    const tree = (
+      <AssistantModalPrimitiveRoot open>
+        <AssistantModalPrimitiveTrigger render={<button type="button" />} />
+        <AssistantModalPrimitiveAnchor render={<div />} />
+        <AssistantModalPrimitiveContent render={<div />} />
+      </AssistantModalPrimitiveRoot>
+    );
+
+    expect(tree).toBeTruthy();
+  });
+});