@assistant-ui/react 0.14.26 → 0.14.27

package/dist/utils/smooth/useSmooth.d.ts

@@ -1,5 +1,4 @@
 import { MessagePartState, ReasoningMessagePart, TextMessagePart } from "@assistant-ui/core";
-
 //#region src/utils/smooth/useSmooth.d.ts
 /**
  * Tuning options for the smooth text streaming animation.

package/dist/utils/smooth/useSmooth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSmooth.d.ts","names":[],"sources":["../../../src/utils/smooth/useSmooth.ts"],"mappings":";;;;;AAkBA;KAAY,aAAA;;;;;;EAMV,OAAA;EAmBW;AAAA;AA0Gb;;;EAvHE,iBAAA;EAwH2B;;;;EAnH3B,gBAAA;EAqHuC;;;;;;;EA7GvC,WAAA;AAAA;;;;;AA6G2D;;;;;;;;;;;;;;;;cAHhD,SAAA,GACX,KAAA,EAAO,gBAAA,IAAoB,eAAA,GAAkB,oBAAA,GAC7C,MAAA,aAAkB,aAAA,KACjB,gBAAA,IAAoB,eAAA,GAAkB,oBAAA"}
+{"version":3,"file":"useSmooth.d.ts","names":[],"sources":["../../../src/utils/smooth/useSmooth.ts"],"mappings":";;;;;KAkBY;;;;;;EAMV;;;;;;EAMA;;;;;EAKA;;;;;;;;EAQA;;;;;;;;;;;;;;;;;;;;;;cA0GW,YACX,OAAO,oBAAoB,kBAAkB,uBAC7C,mBAAkB,kBACjB,oBAAoB,kBAAkB"}

package/dist/utils/useToolArgsFieldStatus.d.ts

@@ -1,7 +1,5 @@
 //#region src/utils/useToolArgsFieldStatus.d.ts
 declare const useToolArgsFieldStatus: (fieldPath: (string | number)[]) => {
-  type: string;
-} | {
   readonly type: "running";
 } | {
   readonly type: "complete";
@@ -9,6 +7,8 @@ declare const useToolArgsFieldStatus: (fieldPath: (string | number)[]) => {
   readonly type: "incomplete";
   readonly reason: "cancelled" | "length" | "content-filter" | "other" | "error";
   readonly error?: unknown;
+} | {
+  type: string;
 };
 //#endregion
 export { useToolArgsFieldStatus };

package/dist/utils/useToolArgsFieldStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToolArgsFieldStatus.d.ts","names":[],"sources":["../../src/utils/useToolArgsFieldStatus.ts"],"mappings":";cAKa,sBAAA,GAA0B,SAAA"}
+{"version":3,"file":"useToolArgsFieldStatus.d.ts","names":[],"sources":["../../src/utils/useToolArgsFieldStatus.ts"],"mappings":";cAKa,yBAA0B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.14.26",
+  "version": "0.14.27",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,23 +55,23 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.2.20",
-    "@assistant-ui/store": "^0.2.19",
-    "@assistant-ui/tap": "^0.9.3",
-    "@radix-ui/primitive": "^1.1.4",
-    "@radix-ui/react-collection": "^1.1.10",
+    "@assistant-ui/core": "^0.2.21",
+    "@assistant-ui/store": "^0.2.20",
+    "@assistant-ui/tap": "^0.9.4",
+    "@radix-ui/primitive": "^1.1.5",
+    "@radix-ui/react-collection": "^1.1.12",
     "@radix-ui/react-compose-refs": "^1.1.3",
-    "@radix-ui/react-context": "^1.1.4",
-    "@radix-ui/react-primitive": "^2.1.6",
+    "@radix-ui/react-context": "^1.2.0",
+    "@radix-ui/react-primitive": "^2.1.7",
     "@radix-ui/react-use-callback-ref": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.2.3",
-    "@radix-ui/react-use-escape-keydown": "^1.1.2",
-    "assistant-cloud": "^0.1.34",
-    "assistant-stream": "^0.3.25",
-    "nanoid": "^5.1.15",
-    "radix-ui": "^1.6.0",
+    "@radix-ui/react-use-escape-keydown": "^1.1.3",
+    "assistant-cloud": "^0.1.35",
+    "assistant-stream": "^0.3.26",
+    "nanoid": "^6.0.0",
+    "radix-ui": "^1.6.2",
     "react-textarea-autosize": "^8.5.9",
-    "safe-content-frame": "^0.0.22",
+    "safe-content-frame": "^0.0.23",
     "zod": "^4.4.3",
     "zustand": "^5.0.14"
   },
@@ -92,15 +92,15 @@
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^26.0.0",
+    "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "vitest": "^4.1.9",
-    "@assistant-ui/vite": "0.0.8",
-    "@assistant-ui/x-buildutils": "0.0.17"
+    "vitest": "^4.1.10",
+    "@assistant-ui/vite": "0.0.9",
+    "@assistant-ui/x-buildutils": "0.0.18"
   },
   "publishConfig": {
     "access": "public",

package/src/index.ts

@@ -209,7 +209,9 @@ export {
   providerTool,
   type ProviderToolConfig,
   defineMcpToolkit,
+  type McpToolkitEntry,
   type McpToolkitDefinition,
+  type McpToolkitToolConfig,
   Tools,
   DataRenderers,
   Interactables,
@@ -337,6 +339,7 @@ export type {
   AppendMessage,
   TextMessagePart,
   ReasoningMessagePart,
+  PartProviderMetadata,
   SourceProviderMetadata,
   SourceMessagePart,
   ImageMessagePart,

package/src/legacy-runtime/cloud/auiV0.ts

@@ -1,11 +1,17 @@
 import type {
+  CompleteAttachment,
+  DataMessagePart,
+  FileMessagePart,
+  ImageMessagePart,
   MessageStatus,
   SourceProviderMetadata,
   ThreadMessage,
+  TextMessagePart,
+  Unstable_AudioMessagePart,
 } from "@assistant-ui/core";
 import { fromThreadMessageLike } from "../runtime-cores/external-store/ThreadMessageLike";
 import type { CloudMessage } from "assistant-cloud";
-import { isJSONValue } from "../../utils/json/is-json";
+import { isJSONValue } from "@assistant-ui/core/internal";
 import type {
   ReadonlyJSONObject,
   ReadonlyJSONValue,
@@ -65,10 +71,27 @@ type AuiV0MessagePart =
       readonly filename?: string;
     };
 
+type AuiV0AttachmentPart =
+  | TextMessagePart
+  | ImageMessagePart
+  | FileMessagePart
+  | Unstable_AudioMessagePart
+  | DataMessagePart<ReadonlyJSONValue>;
+
+type AuiV0Attachment = {
+  readonly id: string;
+  readonly type: CompleteAttachment["type"];
+  readonly name: string;
+  readonly contentType?: string;
+  readonly status: CompleteAttachment["status"];
+  readonly content: readonly AuiV0AttachmentPart[];
+};
+
 type AuiV0Message = {
   readonly role: "assistant" | "user" | "system";
   readonly status?: MessageStatus;
   readonly content: readonly AuiV0MessagePart[];
+  readonly attachments?: readonly AuiV0Attachment[];
   readonly metadata: {
     readonly unstable_state?: ReadonlyJSONValue;
     readonly unstable_annotations: readonly ReadonlyJSONValue[];
@@ -83,14 +106,59 @@ type AuiV0Message = {
   };
 };
 
+const encodeAttachmentPart = (
+  part: CompleteAttachment["content"][number],
+): AuiV0AttachmentPart => {
+  const type = part.type;
+  switch (type) {
+    case "text":
+    case "image":
+    case "file":
+    case "audio":
+      return part;
+
+    case "data": {
+      if (!isJSONValue(part.data)) {
+        console.warn(`attachment data is not JSON! ${JSON.stringify(part)}`);
+      }
+      return { ...part, data: part.data as ReadonlyJSONValue };
+    }
+
+    default: {
+      const unhandledType: never = type;
+      throw new Error(
+        `Attachment part type not supported by aui/v0: ${unhandledType}`,
+      );
+    }
+  }
+};
+
+const encodeAttachments = (
+  message: ThreadMessage,
+): readonly AuiV0Attachment[] | undefined => {
+  if (message.role !== "user" || message.attachments.length === 0) {
+    return undefined;
+  }
+
+  return message.attachments.map(
+    ({ id, type, name, contentType, status, content }) => ({
+      id,
+      type,
+      name,
+      status,
+      ...(contentType != null ? { contentType } : undefined),
+      content: content.map(encodeAttachmentPart),
+    }),
+  );
+};
+
 export function auiV0Encode(message: ThreadMessage): AuiV0Message {
-  // TODO attachments are currently intentionally ignored
   // info: ID and createdAt are ignored (we use the server value instead)
-
   const status: MessageStatus | undefined =
     message.status?.type === "running"
       ? { type: "incomplete", reason: "cancelled" }
       : message.status;
+  const attachments = encodeAttachments(message);
 
   return {
     role: message.role,
@@ -172,6 +240,7 @@ export function auiV0Encode(message: ThreadMessage): AuiV0Message {
     }),
     metadata: message.metadata as AuiV0Message["metadata"],
     ...(status ? { status } : undefined),
+    ...(attachments ? { attachments } : undefined),
   };
 }
 

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

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+import { render, waitFor } from "@testing-library/react";
+import { resource, useResource } from "@assistant-ui/tap";
+import type { ToolCallMessagePartProps } from "@assistant-ui/core/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { McpAppBridgeHandlers, McpAppsHost } from "./types";
+
+const { framePropsMock } = vi.hoisted(() => ({ framePropsMock: vi.fn() }));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useAui: () => ({
+    thread: () => ({ append: vi.fn() }),
+  }),
+}));
+
+vi.mock("./app-frame", () => ({
+  McpAppFrame: (props: unknown) => {
+    framePropsMock(props);
+    return null;
+  },
+}));
+
+import { McpAppRenderer } from "./McpAppRenderer";
+
+const useHost = ({ host }: { host: McpAppsHost }) => host;
+const Host = resource(useHost);
+
+const createPart = (serverId?: string): ToolCallMessagePartProps => ({
+  type: "tool-call",
+  toolCallId: "call-1",
+  toolName: "search",
+  args: {},
+  argsText: "{}",
+  status: { type: "complete" },
+  mcp: {
+    app: {
+      resourceUri: "ui://example/search",
+      ...(serverId !== undefined ? { serverId } : {}),
+    },
+  },
+  addResult: vi.fn(),
+  resume: vi.fn(),
+  respondToApproval: vi.fn(),
+});
+
+function Harness({ host, serverId }: { host: McpAppsHost; serverId?: string }) {
+  const renderer = useResource(
+    McpAppRenderer({
+      host: Host({ host }),
+    }),
+  );
+  const Renderer = renderer.render;
+  return <Renderer {...createPart(serverId)} />;
+}
+
+describe("McpAppRenderer", () => {
+  beforeEach(() => {
+    framePropsMock.mockReset();
+  });
+
+  it("injects serverId into loadResource and reloads when it changes", async () => {
+    const loadResource = vi.fn(async ({ uri }: { uri: string }) => ({
+      uri,
+      mimeType: "text/html;profile=mcp-app" as const,
+      html: "",
+    }));
+    const host: McpAppsHost = {
+      loadResource,
+      callTool: vi.fn(),
+      readResource: vi.fn(),
+      listResources: vi.fn(),
+    };
+
+    const view = render(<Harness host={host} serverId="server-a" />);
+    await waitFor(() =>
+      expect(loadResource).toHaveBeenCalledWith({
+        uri: "ui://example/search",
+        serverId: "server-a",
+      }),
+    );
+
+    view.rerender(<Harness host={host} serverId="server-b" />);
+    await waitFor(() => expect(loadResource).toHaveBeenCalledTimes(2));
+    expect(loadResource).toHaveBeenLastCalledWith({
+      uri: "ui://example/search",
+      serverId: "server-b",
+    });
+  });
+
+  it("gives the renderer serverId precedence in listResources", async () => {
+    const listResources = vi.fn();
+    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,
+    };
+
+    render(<Harness host={host} serverId="host-server" />);
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    const handlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+
+    await handlers.listResources?.({
+      cursor: "next",
+      serverId: "widget-server",
+    });
+    expect(listResources).toHaveBeenCalledWith({
+      cursor: "next",
+      serverId: "host-server",
+    });
+  });
+
+  it("passes listResources params through unchanged without serverId", async () => {
+    const listResources = vi.fn();
+    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,
+    };
+    const params = { cursor: "next" };
+
+    render(<Harness host={host} />);
+    await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+    const handlers = framePropsMock.mock.lastCall?.[0]
+      .handlers as McpAppBridgeHandlers;
+
+    await handlers.listResources?.(params);
+    expect(listResources).toHaveBeenCalledWith(params);
+  });
+});

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}