@assistant-ui/react 0.14.14 → 0.14.15

package/src/mcp-apps/bridge.ts

@@ -1,4 +1,4 @@
-import type { RenderedFrame } from "safe-content-frame";
+import type { SandboxHostFrame } from "../sandbox-host/SandboxHost";
 import {
   MCP_APP_PROTOCOL_VERSION,
   type McpAppBridgeHandlers,
@@ -10,6 +10,7 @@ import {
   type McpAppJsonRpcRequest,
   type McpAppJsonRpcResponse,
 } from "./types";
+import { isRecord } from "../utils/json/is-json";
 
 const VALID_DISPLAY_MODES = [
   "inline",
@@ -17,20 +18,17 @@ const VALID_DISPLAY_MODES = [
   "pip",
 ] as const satisfies readonly McpAppDisplayMode[];
 
-export type McpAppBridgeFrame = Pick<
-  RenderedFrame,
-  "iframe" | "origin" | "sendMessage"
->;
+export type McpAppBridgeFrame = SandboxHostFrame;
 
 export type CreateMcpAppBridgeOptions = {
   frame: McpAppBridgeFrame;
   handlers?: McpAppBridgeHandlers | undefined;
   hostInfo?: McpAppHostInfo | undefined;
   hostContext?: McpAppHostContext | undefined;
-  targetWindow?: Window | undefined;
 };
 
 export type McpAppBridge = {
+  onMessage: (event: MessageEvent) => void;
   dispose: () => void;
   notifyToolInput: (input: unknown) => void;
   notifyToolResult: (result: unknown) => void;
@@ -90,13 +88,8 @@ export function createMcpAppBridge(
     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);
   };
@@ -136,10 +129,15 @@ export function createMcpAppBridge(
 
       switch (normalizeMethod(req.method)) {
         case "ui/initialize": {
+          const requestedProtocolVersion =
+            isRecord(params) && typeof params.protocolVersion === "string"
+              ? params.protocolVersion
+              : MCP_APP_PROTOCOL_VERSION;
           respond(req.id, {
             result: {
-              protocolVersion: MCP_APP_PROTOCOL_VERSION,
+              protocolVersion: requestedProtocolVersion,
               host: hostInfo,
+              hostInfo,
               hostContext,
               capabilities: {
                 tools: handlers.callTool ? {} : undefined,
@@ -154,6 +152,18 @@ export function createMcpAppBridge(
                   updateModelContext: !!handlers.updateModelContext,
                 },
               },
+              hostCapabilities: {
+                ...(handlers.openLink ? { openLinks: {} } : {}),
+                ...(handlers.callTool ? { serverTools: {} } : {}),
+                ...(handlers.readResource || handlers.listResources
+                  ? { serverResources: {} }
+                  : {}),
+                ...(handlers.updateModelContext
+                  ? { updateModelContext: { text: {} } }
+                  : {}),
+                ...(handlers.sendMessage ? { message: { text: {} } } : {}),
+                ...(handlers.onLog ? { logging: {} } : {}),
+              },
             },
           });
           return;
@@ -405,11 +415,9 @@ export function createMcpAppBridge(
     }
   };
 
-  // Cross-origin guard: ignore any postMessage not originating from this
-  // app's iframe contentWindow at the SafeContentFrame-issued origin.
+  // The host applies the cross-origin guard before delegating; this only
+  // validates the JSON-RPC envelope.
   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;
@@ -420,18 +428,20 @@ export function createMcpAppBridge(
     }
   };
 
-  targetWindow.addEventListener("message", onMessage);
-
   return {
-    dispose: () => {
-      targetWindow.removeEventListener("message", onMessage);
-    },
+    onMessage,
+    dispose: () => {},
     notifyToolInput: (input: unknown) => {
       post({
         jsonrpc: "2.0",
         method: "notifications/tools/call/input",
         params: { input },
       });
+      post({
+        jsonrpc: "2.0",
+        method: "ui/notifications/tool-input",
+        params: isRecord(input) ? { arguments: input } : {},
+      });
     },
     notifyToolResult: (result: unknown) => {
       post({
@@ -439,6 +449,13 @@ export function createMcpAppBridge(
         method: "notifications/tools/call/result",
         params: { result },
       });
+      post({
+        jsonrpc: "2.0",
+        method: "ui/notifications/tool-result",
+        params: isRecord(result)
+          ? result
+          : { content: [{ type: "text", text: String(result) }] },
+      });
     },
     notifyHostContextChanged: (ctx: McpAppHostContext) => {
       post({
@@ -446,6 +463,11 @@ export function createMcpAppBridge(
         method: "notifications/host_context/changed",
         params: ctx,
       });
+      post({
+        jsonrpc: "2.0",
+        method: "ui/notifications/host-context-changed",
+        params: ctx,
+      });
     },
   };
 }

package/src/mcp-apps/types.ts

@@ -1,9 +1,8 @@
-import type { CSSProperties } from "react";
 import type {
   McpAppMetadata,
   ToolCallMessagePartMcpMetadata,
 } from "@assistant-ui/core";
-import type { SandboxOption } from "safe-content-frame";
+import type { SandboxHostConfig } from "../sandbox-host/SandboxHost";
 
 export type { McpAppMetadata, ToolCallMessagePartMcpMetadata };
 
@@ -97,16 +96,7 @@ export type McpAppBridgeHandlers = {
   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 McpAppSandboxConfig = SandboxHostConfig;
 
 export type McpAppFrameProps = {
   app: McpAppMetadata;

package/src/primitives/composer/trigger/TriggerPopover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAui, useAuiState } from "@assistant-ui/store";
-import { useResource } from "@assistant-ui/tap/react";
+import { useResource } from "@assistant-ui/tap";
 import type { Unstable_TriggerAdapter } from "@assistant-ui/core";
 import {
   createContext,

package/src/primitives/composer/trigger/TriggerPopoverResource.ts

@@ -1,4 +1,5 @@
-import { resource, tapEffectEvent, tapResource } from "@assistant-ui/tap";
+import { useEffectEvent } from "react";
+import { useResource, resource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerAdapter,
   Unstable_TriggerCategory,
@@ -50,88 +51,86 @@ export type TriggerPopoverResourceOutput = {
 };
 
 /** Composes detection, navigation, keyboard, and selection sub-resources. */
-export const TriggerPopoverResource = resource(
-  ({
-    adapter,
-    text,
-    triggerChar,
-    behavior,
-    aui,
-    popoverId,
-  }: {
-    adapter: Unstable_TriggerAdapter | undefined;
-    text: string;
-    triggerChar: string;
-    behavior: TriggerBehavior | undefined;
-    aui: AssistantClient;
-    /** Stable ID for accessible element IDs (pass React's useId() from component layer). */
-    popoverId: string;
-  }): TriggerPopoverResourceOutput => {
-    const detection = tapResource(
-      TriggerDetectionResource({ text, triggerChar }),
-    );
-
-    const open =
-      detection.trigger !== null &&
-      adapter !== undefined &&
-      behavior !== undefined;
+export const TriggerPopoverResource = resource(function TriggerPopoverResource({
+  adapter,
+  text,
+  triggerChar,
+  behavior,
+  aui,
+  popoverId,
+}: {
+  adapter: Unstable_TriggerAdapter | undefined;
+  text: string;
+  triggerChar: string;
+  behavior: TriggerBehavior | undefined;
+  aui: AssistantClient;
+  /** Stable ID for accessible element IDs (pass React's useId() from component layer). */
+  popoverId: string;
+}): TriggerPopoverResourceOutput {
+  const detection = useResource(
+    TriggerDetectionResource({ text, triggerChar }),
+  );
 
-    const navigation = tapResource(
-      TriggerNavigationResource({
-        adapter,
-        query: detection.query,
-        open,
-      }),
-    );
+  const open =
+    detection.trigger !== null &&
+    adapter !== undefined &&
+    behavior !== undefined;
 
-    const onSelected = tapEffectEvent(() => {
-      navigation.goBack();
-    });
+  const navigation = useResource(
+    TriggerNavigationResource({
+      adapter,
+      query: detection.query,
+      open,
+    }),
+  );
 
-    const selection = tapResource(
-      TriggerSelectionResource({
-        behavior,
-        trigger: detection.trigger,
-        aui,
-        triggerChar,
-        setCursorPosition: detection.setCursorPosition,
-        onSelected,
-      }),
-    );
+  const onSelected = useEffectEvent(() => {
+    navigation.goBack();
+  });
 
-    const keyboard = tapResource(
-      TriggerKeyboardResource({
-        navigableList: navigation.navigableList,
-        isSearchMode: navigation.isSearchMode,
-        activeCategoryId: navigation.activeCategoryId,
-        query: detection.query,
-        popoverId,
-        open,
-        selectItem: selection.selectItem,
-        selectCategory: navigation.selectCategory,
-        goBack: navigation.goBack,
-        close: selection.close,
-      }),
-    );
+  const selection = useResource(
+    TriggerSelectionResource({
+      behavior,
+      trigger: detection.trigger,
+      aui,
+      triggerChar,
+      setCursorPosition: detection.setCursorPosition,
+      onSelected,
+    }),
+  );
 
-    return {
-      open,
-      query: detection.query,
-      activeCategoryId: navigation.activeCategoryId,
-      categories: navigation.categories,
-      items: navigation.items,
-      highlightedIndex: keyboard.highlightedIndex,
+  const keyboard = useResource(
+    TriggerKeyboardResource({
+      navigableList: navigation.navigableList,
       isSearchMode: navigation.isSearchMode,
+      activeCategoryId: navigation.activeCategoryId,
+      query: detection.query,
       popoverId,
-      highlightedItemId: keyboard.highlightedItemId,
+      open,
+      selectItem: selection.selectItem,
       selectCategory: navigation.selectCategory,
       goBack: navigation.goBack,
-      selectItem: selection.selectItem,
       close: selection.close,
-      highlightIndex: keyboard.highlightIndex,
-      handleKeyDown: keyboard.handleKeyDown,
-      setCursorPosition: detection.setCursorPosition,
-      registerSelectItemOverride: selection.registerSelectItemOverride,
-    };
-  },
-);
+    }),
+  );
+
+  return {
+    open,
+    query: detection.query,
+    activeCategoryId: navigation.activeCategoryId,
+    categories: navigation.categories,
+    items: navigation.items,
+    highlightedIndex: keyboard.highlightedIndex,
+    isSearchMode: navigation.isSearchMode,
+    popoverId,
+    highlightedItemId: keyboard.highlightedItemId,
+    selectCategory: navigation.selectCategory,
+    goBack: navigation.goBack,
+    selectItem: selection.selectItem,
+    close: selection.close,
+    highlightIndex: keyboard.highlightIndex,
+    handleKeyDown: keyboard.handleKeyDown,
+    setCursorPosition: detection.setCursorPosition,
+    registerSelectItemOverride: selection.registerSelectItemOverride,
+  };
+});

package/src/primitives/composer/trigger/triggerDetectionResource.ts

@@ -1,4 +1,5 @@
-import { resource, tapMemo, tapState } from "@assistant-ui/tap";
+import { useMemo, useState } from "react";
+import { resource } from "@assistant-ui/tap";
 import { detectTrigger } from "./detectTrigger";
 
 /** Detected trigger position within the composer text. */
@@ -18,16 +19,16 @@ export type TriggerDetectionResourceOutput = {
 
 /** Tracks cursor position and derives the active trigger + query from composer text. */
 export const TriggerDetectionResource = resource(
-  ({
+  function TriggerDetectionResource({
     text,
     triggerChar,
   }: {
     text: string;
     triggerChar: string;
-  }): TriggerDetectionResourceOutput => {
-    const [cursorPosition, setCursorPosition] = tapState(text.length);
+  }): TriggerDetectionResourceOutput {
+    const [cursorPosition, setCursorPosition] = useState(text.length);
 
-    const trigger = tapMemo(() => {
+    const trigger = useMemo(() => {
       const pos = Math.min(cursorPosition, text.length);
       return detectTrigger(text, triggerChar, pos);
     }, [cursorPosition, text, triggerChar]);

package/src/primitives/composer/trigger/triggerKeyboardResource.ts

@@ -1,9 +1,5 @@
-import {
-  resource,
-  tapEffect,
-  tapEffectEvent,
-  tapState,
-} from "@assistant-ui/tap";
+import { useEffect, useEffectEvent, useState } from "react";
+import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
@@ -39,7 +35,7 @@ export type TriggerKeyboardResourceOutput = {
  * category drill-in, back, and close to the callbacks supplied by the parent.
  */
 export const TriggerKeyboardResource = resource(
-  ({
+  function TriggerKeyboardResource({
     navigableList,
     isSearchMode,
     activeCategoryId,
@@ -61,24 +57,24 @@ export const TriggerKeyboardResource = resource(
     selectCategory: (categoryId: string) => void;
     goBack: () => void;
     close: () => void;
-  }): TriggerKeyboardResourceOutput => {
-    const [highlightedIndex, setHighlightedIndex] = tapState(0);
+  }): TriggerKeyboardResourceOutput {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
 
-    tapEffect(() => {
+    useEffect(() => {
       setHighlightedIndex(0);
     }, [navigableList]);
 
-    tapEffect(() => {
+    useEffect(() => {
       setHighlightedIndex(0);
     }, [isSearchMode, activeCategoryId]);
 
-    const highlightIndex = tapEffectEvent((index: number) => {
+    const highlightIndex = useEffectEvent((index: number) => {
       if (index < 0 || index >= navigableList.length) return;
       if (index === highlightedIndex) return;
       setHighlightedIndex(index);
     });
 
-    const handleKeyDown = tapEffectEvent(
+    const handleKeyDown = useEffectEvent(
       (e: TriggerPopoverKeyEvent): boolean => {
         if (!open) return false;
 

package/src/primitives/composer/trigger/triggerNavigationResource.ts

@@ -1,10 +1,5 @@
-import {
-  resource,
-  tapEffect,
-  tapEffectEvent,
-  tapMemo,
-  tapState,
-} from "@assistant-ui/tap";
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
+import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerAdapter,
   Unstable_TriggerCategory,
@@ -44,7 +39,7 @@ export type TriggerNavigationResourceOutput = {
  * adapter + current query. Pure derivation — no side effects on the composer.
  */
 export const TriggerNavigationResource = resource(
-  ({
+  function TriggerNavigationResource({
     adapter,
     query,
     open,
@@ -52,28 +47,28 @@ export const TriggerNavigationResource = resource(
     adapter: Unstable_TriggerAdapter | undefined;
     query: string;
     open: boolean;
-  }): TriggerNavigationResourceOutput => {
-    const [activeCategoryId, setActiveCategoryId] = tapState<string | null>(
+  }): TriggerNavigationResourceOutput {
+    const [activeCategoryId, setActiveCategoryId] = useState<string | null>(
       null,
     );
 
-    tapEffect(() => {
+    useEffect(() => {
       if (!open) setActiveCategoryId(null);
     }, [open]);
 
-    const categories = tapMemo<readonly Unstable_TriggerCategory[]>(() => {
+    const categories = useMemo<readonly Unstable_TriggerCategory[]>(() => {
       if (!open || !adapter) return [];
       return adapter.categories();
     }, [open, adapter]);
 
     const effectiveActiveCategoryId = open ? activeCategoryId : null;
 
-    const allItems = tapMemo<readonly Unstable_TriggerItem[]>(() => {
+    const allItems = useMemo<readonly Unstable_TriggerItem[]>(() => {
       if (!effectiveActiveCategoryId || !adapter) return [];
       return adapter.categoryItems(effectiveActiveCategoryId);
     }, [effectiveActiveCategoryId, adapter]);
 
-    const searchResults = tapMemo<
+    const searchResults = useMemo<
       readonly Unstable_TriggerItem[] | null
     >(() => {
       if (!open || !adapter || effectiveActiveCategoryId) return null;
@@ -96,7 +91,7 @@ export const TriggerNavigationResource = resource(
 
     const isSearchMode = searchResults !== null;
 
-    const filteredCategories = tapMemo(() => {
+    const filteredCategories = useMemo(() => {
       if (isSearchMode) return [];
       if (!query) return categories;
       const lower = query.toLowerCase();
@@ -105,14 +100,14 @@ export const TriggerNavigationResource = resource(
       );
     }, [categories, query, isSearchMode]);
 
-    const filteredItems = tapMemo(() => {
+    const filteredItems = useMemo(() => {
       if (isSearchMode) return searchResults ?? [];
       if (!query) return allItems;
       const lower = query.toLowerCase();
       return allItems.filter((item) => matchesQuery(item, lower));
     }, [allItems, query, isSearchMode, searchResults]);
 
-    const navigableList = tapMemo(() => {
+    const navigableList = useMemo(() => {
       if (isSearchMode) return searchResults ?? [];
       if (effectiveActiveCategoryId) return filteredItems;
       return filteredCategories;
@@ -124,11 +119,11 @@ export const TriggerNavigationResource = resource(
       filteredCategories,
     ]);
 
-    const selectCategory = tapEffectEvent((categoryId: string) => {
+    const selectCategory = useEffectEvent((categoryId: string) => {
       setActiveCategoryId(categoryId);
     });
 
-    const goBack = tapEffectEvent(() => {
+    const goBack = useEffectEvent(() => {
       setActiveCategoryId(null);
     });
 

package/src/primitives/composer/trigger/triggerSelectionResource.ts

@@ -1,4 +1,5 @@
-import { resource, tapEffectEvent, tapRef } from "@assistant-ui/tap";
+import { useEffectEvent, useRef } from "react";
+import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_DirectiveFormatter,
   Unstable_TriggerItem,
@@ -33,7 +34,7 @@ export type TriggerSelectionResourceOutput = {
 
 /** Owns composer text mutation + behavior dispatch on item selection. */
 export const TriggerSelectionResource = resource(
-  ({
+  function TriggerSelectionResource({
     behavior,
     trigger,
     aui,
@@ -48,12 +49,12 @@ export const TriggerSelectionResource = resource(
     setCursorPosition: (pos: number) => void;
     /** Called after a successful selection so the parent can reset nav state. */
     onSelected: () => void;
-  }): TriggerSelectionResourceOutput => {
+  }): TriggerSelectionResourceOutput {
     // Select-item override: lets Lexical's DirectivePlugin intercept selection
     // and drive its own node insertion.
-    const selectItemOverrideRef = tapRef<SelectItemOverride | null>(null);
+    const selectItemOverrideRef = useRef<SelectItemOverride | null>(null);
 
-    const registerSelectItemOverride = tapEffectEvent(
+    const registerSelectItemOverride = useEffectEvent(
       (fn: SelectItemOverride) => {
         selectItemOverrideRef.current = fn;
         return () => {
@@ -64,7 +65,7 @@ export const TriggerSelectionResource = resource(
       },
     );
 
-    const selectItem = tapEffectEvent((item: Unstable_TriggerItem) => {
+    const selectItem = useEffectEvent((item: Unstable_TriggerItem) => {
       if (!trigger || !behavior) return;
 
       if (selectItemOverrideRef.current?.(item)) {
@@ -105,7 +106,7 @@ export const TriggerSelectionResource = resource(
       onSelected();
     });
 
-    const close = tapEffectEvent(() => {
+    const close = useEffectEvent(() => {
       onSelected();
       // Move cursor before the trigger so trigger detection deactivates
       if (trigger) {