@assistant-ui/react 0.14.0 → 0.14.3

package/src/mcp-apps/bridge.ts

@@ -0,0 +1,435 @@
+import type { RenderedFrame } from "safe-content-frame";
+import {
+  MCP_APP_PROTOCOL_VERSION,
+  type McpAppBridgeHandlers,
+  type McpAppDisplayMode,
+  type McpAppHostContext,
+  type McpAppHostInfo,
+  type McpAppJsonRpcMessage,
+  type McpAppJsonRpcNotification,
+  type McpAppJsonRpcRequest,
+  type McpAppJsonRpcResponse,
+} from "./types";
+
+const VALID_DISPLAY_MODES = [
+  "inline",
+  "fullscreen",
+  "pip",
+] as const satisfies readonly McpAppDisplayMode[];
+
+export type McpAppBridgeFrame = Pick<
+  RenderedFrame,
+  "iframe" | "origin" | "sendMessage"
+>;
+
+export type CreateMcpAppBridgeOptions = {
+  frame: McpAppBridgeFrame;
+  handlers?: McpAppBridgeHandlers | undefined;
+  hostInfo?: McpAppHostInfo | undefined;
+  hostContext?: McpAppHostContext | undefined;
+  targetWindow?: Window | undefined;
+};
+
+export type McpAppBridge = {
+  dispose: () => void;
+  notifyToolInput: (input: unknown) => void;
+  notifyToolResult: (result: unknown) => void;
+  notifyHostContextChanged: (hostContext: McpAppHostContext) => void;
+};
+
+const DEFAULT_HOST_INFO: McpAppHostInfo = {
+  name: "assistant-ui",
+  version: "0.1",
+};
+
+const JSONRPC_ERROR = {
+  parseError: -32700,
+  invalidRequest: -32600,
+  methodNotFound: -32601,
+  invalidParams: -32602,
+  internalError: -32603,
+} as const;
+
+function isJsonRpcMessage(value: unknown): value is McpAppJsonRpcMessage {
+  if (!value || typeof value !== "object") return false;
+  const v = value as Record<string, unknown>;
+  return v.jsonrpc === "2.0" && typeof v.method === "string";
+}
+
+function isRequest(msg: McpAppJsonRpcMessage): msg is McpAppJsonRpcRequest {
+  return "id" in msg;
+}
+
+function isNotification(
+  msg: McpAppJsonRpcMessage,
+): msg is McpAppJsonRpcNotification {
+  return !("id" in msg);
+}
+
+export function createMcpAppBridge(
+  opts: CreateMcpAppBridgeOptions,
+): McpAppBridge {
+  const {
+    frame,
+    handlers = {},
+    hostInfo = DEFAULT_HOST_INFO,
+    hostContext = {},
+    targetWindow = typeof window !== "undefined" ? window : undefined,
+  } = opts;
+
+  if (!targetWindow) {
+    throw new Error("createMcpAppBridge requires a window context");
+  }
+
+  const post = (msg: McpAppJsonRpcMessage) => {
+    frame.sendMessage(msg);
+  };
+
+  const respond = (
+    id: McpAppJsonRpcRequest["id"],
+    payload:
+      | { result: unknown }
+      | { error: { code: number; message: string; data?: unknown } },
+  ) => {
+    const res: McpAppJsonRpcResponse = {
+      jsonrpc: "2.0",
+      id,
+      ...payload,
+    };
+    post(res);
+  };
+
+  const errorResponse = (
+    id: McpAppJsonRpcRequest["id"],
+    code: number,
+    message: string,
+    data?: unknown,
+  ) => {
+    respond(id, {
+      error: {
+        code,
+        message,
+        ...(data !== undefined ? { data } : {}),
+      },
+    });
+  };
+
+  const handleRequest = async (req: McpAppJsonRpcRequest) => {
+    try {
+      const params = req.params;
+
+      switch (req.method) {
+        case "ui/initialize": {
+          respond(req.id, {
+            result: {
+              protocolVersion: MCP_APP_PROTOCOL_VERSION,
+              host: hostInfo,
+              hostContext,
+              capabilities: {
+                tools: handlers.callTool ? {} : undefined,
+                resources:
+                  handlers.readResource || handlers.listResources
+                    ? {}
+                    : undefined,
+                ui: {
+                  sendMessage: !!handlers.sendMessage,
+                  openLink: !!handlers.openLink,
+                  requestDisplayMode: !!handlers.requestDisplayMode,
+                  updateModelContext: !!handlers.updateModelContext,
+                },
+              },
+            },
+          });
+          return;
+        }
+
+        case "tools/call": {
+          if (!handlers.callTool) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.methodNotFound,
+              "tools/call is not supported by this host",
+            );
+            return;
+          }
+          const callParams = (params ?? {}) as {
+            name?: unknown;
+            arguments?: unknown;
+          };
+          if (typeof callParams.name !== "string") {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.invalidParams,
+              "tools/call requires a string 'name'",
+            );
+            return;
+          }
+          if (
+            handlers.allowedTools &&
+            !handlers.allowedTools.includes(callParams.name)
+          ) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.invalidParams,
+              `tool '${callParams.name}' is not allowed for this app`,
+            );
+            return;
+          }
+          let callArgs: Record<string, unknown> | undefined;
+          if (callParams.arguments !== undefined) {
+            if (
+              callParams.arguments === null ||
+              typeof callParams.arguments !== "object" ||
+              Array.isArray(callParams.arguments)
+            ) {
+              errorResponse(
+                req.id,
+                JSONRPC_ERROR.invalidParams,
+                "tools/call 'arguments' must be an object",
+              );
+              return;
+            }
+            callArgs = callParams.arguments as Record<string, unknown>;
+          }
+          const result = await handlers.callTool({
+            name: callParams.name,
+            ...(callArgs !== undefined ? { arguments: callArgs } : {}),
+          });
+          respond(req.id, { result });
+          return;
+        }
+
+        case "resources/read": {
+          if (!handlers.readResource) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.methodNotFound,
+              "resources/read is not supported by this host",
+            );
+            return;
+          }
+          const readParams = (params ?? {}) as { uri?: unknown };
+          if (typeof readParams.uri !== "string") {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.invalidParams,
+              "resources/read requires a string 'uri'",
+            );
+            return;
+          }
+          respond(req.id, {
+            result: await handlers.readResource({ uri: readParams.uri }),
+          });
+          return;
+        }
+
+        case "resources/list": {
+          if (!handlers.listResources) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.methodNotFound,
+              "resources/list is not supported by this host",
+            );
+            return;
+          }
+          respond(req.id, {
+            result: (await handlers.listResources(params)) ?? null,
+          });
+          return;
+        }
+
+        case "openLink": {
+          if (!handlers.openLink) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.methodNotFound,
+              "openLink is not supported by this host",
+            );
+            return;
+          }
+          const linkParams = (params ?? {}) as { url?: unknown };
+          if (typeof linkParams.url !== "string") {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.invalidParams,
+              "openLink requires a string 'url'",
+            );
+            return;
+          }
+          let linkProtocol: string;
+          try {
+            linkProtocol = new URL(linkParams.url).protocol;
+          } catch {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.invalidParams,
+              "openLink requires a valid URL",
+            );
+            return;
+          }
+          if (linkProtocol !== "https:" && linkProtocol !== "http:") {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.invalidParams,
+              "openLink only accepts http(s) URLs",
+            );
+            return;
+          }
+          respond(req.id, {
+            result: await handlers.openLink({ url: linkParams.url }),
+          });
+          return;
+        }
+
+        case "sendMessage": {
+          if (!handlers.sendMessage) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.methodNotFound,
+              "sendMessage is not supported by this host",
+            );
+            return;
+          }
+          respond(req.id, {
+            result: (await handlers.sendMessage(params)) ?? null,
+          });
+          return;
+        }
+
+        case "updateModelContext": {
+          if (!handlers.updateModelContext) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.methodNotFound,
+              "updateModelContext is not supported by this host",
+            );
+            return;
+          }
+          respond(req.id, {
+            result: (await handlers.updateModelContext(params)) ?? null,
+          });
+          return;
+        }
+
+        case "requestDisplayMode": {
+          if (!handlers.requestDisplayMode) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.methodNotFound,
+              "requestDisplayMode is not supported by this host",
+            );
+            return;
+          }
+          const modeParams = (params ?? {}) as { mode?: unknown };
+          if (
+            typeof modeParams.mode !== "string" ||
+            !VALID_DISPLAY_MODES.includes(modeParams.mode as McpAppDisplayMode)
+          ) {
+            errorResponse(
+              req.id,
+              JSONRPC_ERROR.invalidParams,
+              "requestDisplayMode requires a valid 'mode'",
+            );
+            return;
+          }
+          respond(req.id, {
+            result: await handlers.requestDisplayMode({
+              mode: modeParams.mode as McpAppDisplayMode,
+            }),
+          });
+          return;
+        }
+
+        default: {
+          errorResponse(
+            req.id,
+            JSONRPC_ERROR.methodNotFound,
+            `Unknown method: ${req.method}`,
+          );
+        }
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      handlers.onError?.(error);
+      errorResponse(req.id, JSONRPC_ERROR.internalError, error.message);
+    }
+  };
+
+  const handleNotification = (note: McpAppJsonRpcNotification) => {
+    switch (note.method) {
+      case "notifications/initialized": {
+        handlers.onInitialized?.();
+        return;
+      }
+      case "notifications/size_changed": {
+        const p = (note.params ?? {}) as { width?: number; height?: number };
+        handlers.onSizeChange?.({
+          ...(typeof p.width === "number" ? { width: p.width } : {}),
+          ...(typeof p.height === "number" ? { height: p.height } : {}),
+        });
+        return;
+      }
+      case "notifications/log": {
+        handlers.onLog?.(note.params);
+        return;
+      }
+      case "notifications/request_teardown": {
+        handlers.onRequestTeardown?.(note.params);
+        return;
+      }
+      case "notifications/error": {
+        const p = (note.params ?? {}) as { message?: string };
+        handlers.onError?.(
+          new Error(typeof p.message === "string" ? p.message : "Widget error"),
+        );
+        return;
+      }
+      default:
+        return;
+    }
+  };
+
+  // Cross-origin guard: ignore any postMessage not originating from this
+  // app's iframe contentWindow at the SafeContentFrame-issued origin.
+  const onMessage = (event: MessageEvent) => {
+    if (event.source !== frame.iframe.contentWindow) return;
+    if (event.origin !== frame.origin) return;
+    if (!isJsonRpcMessage(event.data)) return;
+
+    const msg = event.data;
+    if (isRequest(msg)) {
+      void handleRequest(msg);
+    } else if (isNotification(msg)) {
+      handleNotification(msg);
+    }
+  };
+
+  targetWindow.addEventListener("message", onMessage);
+
+  return {
+    dispose: () => {
+      targetWindow.removeEventListener("message", onMessage);
+    },
+    notifyToolInput: (input: unknown) => {
+      post({
+        jsonrpc: "2.0",
+        method: "notifications/tools/call/input",
+        params: { input },
+      });
+    },
+    notifyToolResult: (result: unknown) => {
+      post({
+        jsonrpc: "2.0",
+        method: "notifications/tools/call/result",
+        params: { result },
+      });
+    },
+    notifyHostContextChanged: (ctx: McpAppHostContext) => {
+      post({
+        jsonrpc: "2.0",
+        method: "notifications/host_context/changed",
+        params: ctx,
+      });
+    },
+  };
+}

package/src/mcp-apps/index.ts

@@ -0,0 +1,17 @@
+export { McpAppRenderer, type McpAppRendererOptions } from "./McpAppRenderer";
+export { McpAppsRemoteHost } from "./McpAppsRemoteHost";
+export { getMcpAppFromToolPart } from "./utils";
+export type {
+  McpAppMetadata,
+  McpAppResource,
+  McpAppResourceMeta,
+  McpAppResourceCSP,
+  McpAppSandboxConfig,
+  McpAppHostInfo,
+  McpAppHostContext,
+  McpAppDisplayMode,
+  McpAppsHost,
+  McpAppsRemoteHostOptions,
+  McpAppToolCallParams,
+  ToolCallMessagePartMcpMetadata,
+} from "./types";

package/src/mcp-apps/types.ts

@@ -0,0 +1,163 @@
+import type { CSSProperties } from "react";
+import type {
+  McpAppMetadata,
+  ToolCallMessagePartMcpMetadata,
+} from "@assistant-ui/core";
+import type { SandboxOption } from "safe-content-frame";
+
+export type { McpAppMetadata, ToolCallMessagePartMcpMetadata };
+
+export const MCP_APP_MIME_TYPE = "text/html;profile=mcp-app" as const;
+
+export const MCP_APP_PROTOCOL_VERSION = "0.1" as const;
+
+export type McpAppResourceCSP = {
+  connectDomains?: string[];
+  resourceDomains?: string[];
+  frameDomains?: string[];
+  [k: string]: unknown;
+};
+
+export type McpAppResourceMeta = {
+  prefersBorder?: boolean;
+  csp?: McpAppResourceCSP;
+  permissions?: Record<string, unknown>;
+  [k: string]: unknown;
+};
+
+export type McpAppResource = {
+  uri: string;
+  mimeType: typeof MCP_APP_MIME_TYPE;
+  html: string;
+  meta?: McpAppResourceMeta;
+};
+
+export type McpAppDisplayMode = "inline" | "fullscreen" | "pip";
+
+export type McpAppHostContext = {
+  theme?: "light" | "dark";
+  displayMode?: McpAppDisplayMode;
+  availableDisplayModes?: McpAppDisplayMode[];
+  [k: string]: unknown;
+};
+
+export type McpAppHostInfo = {
+  name: string;
+  version: string;
+};
+
+/**
+ * What `McpAppRenderer` needs from its host — the data-plane operations
+ * the widget can request. Provided by a host resource like
+ * `McpAppsRemoteHost`.
+ */
+export type McpAppsHost = {
+  loadResource: (params: { uri: string }) => Promise<McpAppResource>;
+  callTool: (params: McpAppToolCallParams) => Promise<unknown>;
+  readResource: (params: { uri: 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
+ */
+export type McpAppsRemoteHostOptions = {
+  url: string;
+  fetch?: typeof fetch;
+  headers?:
+    | Record<string, string>
+    | (() => Record<string, string> | Promise<Record<string, string>>);
+};
+
+export type McpAppToolCallParams = {
+  name: string;
+  arguments?: Record<string, unknown>;
+};
+
+export type McpAppBridgeHandlers = {
+  allowedTools?: readonly string[];
+  callTool?: (params: McpAppToolCallParams) => Promise<unknown> | unknown;
+  readResource?: (params: { uri: string }) => Promise<unknown> | unknown;
+  listResources?: (params?: unknown) => Promise<unknown> | unknown;
+  openLink?: (params: { url: string }) => Promise<unknown> | unknown;
+  sendMessage?: (params: unknown) => Promise<unknown> | unknown;
+  updateModelContext?: (params: unknown) => Promise<unknown> | unknown;
+  requestDisplayMode?: (params: {
+    mode: McpAppDisplayMode;
+  }) => Promise<{ mode: McpAppDisplayMode }> | { mode: McpAppDisplayMode };
+  onSizeChange?: (params: { width?: number; height?: number }) => void;
+  onInitialized?: () => void;
+  onRequestTeardown?: (params: unknown) => void;
+  onLog?: (params: unknown) => void;
+  onError?: (error: Error) => void;
+};
+
+export type McpAppSandboxConfig = {
+  sandbox?: SandboxOption[];
+  useShadowDom?: boolean;
+  enableBrowserCaching?: boolean;
+  salt?: string;
+  product?: string;
+  className?: string;
+  style?: CSSProperties;
+  unsafeDocumentWrite?: boolean;
+};
+
+export type McpAppFrameProps = {
+  app: McpAppMetadata;
+  resource: McpAppResource;
+  input?: unknown;
+  output?: unknown;
+  sandbox?: McpAppSandboxConfig | undefined;
+  handlers?: McpAppBridgeHandlers | undefined;
+  hostInfo?: McpAppHostInfo | undefined;
+  hostContext?: McpAppHostContext | undefined;
+  /**
+   * Upper bound (in pixels) for the auto-resize height driven by the widget's
+   * `notifications/size_changed`. Defaults to 800.
+   */
+  maxHeight?: number | undefined;
+};
+
+export type McpAppJsonRpcRequest = {
+  jsonrpc: "2.0";
+  id: string | number;
+  method: string;
+  params?: unknown;
+};
+
+export type McpAppJsonRpcNotification = {
+  jsonrpc: "2.0";
+  method: string;
+  params?: unknown;
+};
+
+export type McpAppJsonRpcError = {
+  code: number;
+  message: string;
+  data?: unknown;
+};
+
+export type McpAppJsonRpcResponse =
+  | {
+      jsonrpc: "2.0";
+      id: string | number;
+      result: unknown;
+      error?: never;
+    }
+  | {
+      jsonrpc: "2.0";
+      id: string | number;
+      result?: never;
+      error: McpAppJsonRpcError;
+    };
+
+export type McpAppJsonRpcMessage =
+  | McpAppJsonRpcRequest
+  | McpAppJsonRpcNotification
+  | McpAppJsonRpcResponse;

package/src/mcp-apps/utils.ts

@@ -0,0 +1,16 @@
+import {
+  isMcpAppUri,
+  type McpAppMetadata,
+  type ToolCallMessagePart,
+} from "@assistant-ui/core";
+
+type ToolPartLike = Pick<ToolCallMessagePart, "mcp">;
+
+export function getMcpAppFromToolPart(
+  part: ToolPartLike,
+): McpAppMetadata | undefined {
+  const app = part.mcp?.app;
+  if (!app) return undefined;
+  if (!isMcpAppUri(app.resourceUri)) return undefined;
+  return app;
+}

package/src/primitives/composer/ComposerInput.test.tsx

@@ -66,6 +66,15 @@ vi.mock("./ComposerInputPluginContext", () => ({
   useComposerInputPluginRegistryOptional: () => pluginRegistry,
 }));
 
+let activeAria: {
+  popoverId: string;
+  highlightedItemId: string | undefined;
+} | null = null;
+
+vi.mock("./trigger/TriggerPopoverRootContext", () => ({
+  useTriggerPopoverActiveAriaOptional: () => activeAria,
+}));
+
 vi.mock("@radix-ui/react-use-escape-keydown", () => ({
   useEscapeKeydown: () => {},
 }));
@@ -121,6 +130,7 @@ describe("ComposerPrimitiveInput", () => {
     threadState.isRunning = false;
     threadState.capabilities = { queue: false, attachments: false };
     pluginRegistry = null;
+    activeAria = null;
 
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -229,4 +239,42 @@ describe("ComposerPrimitiveInput", () => {
     });
     expect(setText).not.toHaveBeenCalled();
   });
+
+  it("does not apply ARIA combobox attributes when no trigger popover is open", async () => {
+    activeAria = null;
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBeNull();
+    expect(textarea.getAttribute("aria-expanded")).toBeNull();
+    expect(textarea.getAttribute("aria-haspopup")).toBeNull();
+    expect(textarea.getAttribute("aria-activedescendant")).toBeNull();
+  });
+
+  it("applies ARIA combobox attributes when a trigger popover is open", async () => {
+    activeAria = {
+      popoverId: "popover-1",
+      highlightedItemId: "popover-1-option-foo",
+    };
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBe("popover-1");
+    expect(textarea.getAttribute("aria-expanded")).toBe("true");
+    expect(textarea.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(textarea.getAttribute("aria-activedescendant")).toBe(
+      "popover-1-option-foo",
+    );
+  });
+
+  it("omits aria-activedescendant when no item is highlighted", async () => {
+    activeAria = {
+      popoverId: "popover-1",
+      highlightedItemId: undefined,
+    };
+    const textarea = await mount();
+
+    expect(textarea.getAttribute("aria-controls")).toBe("popover-1");
+    expect(textarea.getAttribute("aria-expanded")).toBe("true");
+    expect(textarea.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(textarea.getAttribute("aria-activedescendant")).toBeNull();
+  });
 });