@ai-sdk/react 4.0.0-canary.126 → 4.0.0-canary.127

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @ai-sdk/react
 
+## 4.0.0-canary.127
+
+### Patch Changes
+
+- 611f621: feat(mcp): feat(mcp): add support for MCP Apps
+- Updated dependencies [611f621]
+  - @ai-sdk/mcp@2.0.0-canary.44
+
 ## 4.0.0-canary.126
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,6 +1,11 @@
-import { UIMessage, AbstractChat, ChatInit, CompletionRequestOptions, UseCompletionOptions, DeepPartial } from 'ai';
+import { UIMessage, AbstractChat, ChatInit, CompletionRequestOptions, UseCompletionOptions, DeepPartial, ToolUIPart, UITools, DynamicToolUIPart } from 'ai';
 export { CreateUIMessage, UIMessage, UseCompletionOptions } from 'ai';
 import { FlexibleSchema, FetchFunction, Resolvable, InferSchema } from '@ai-sdk/provider-utils';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { MCPAppResource } from '@ai-sdk/mcp';
+export { MCPAppResource } from '@ai-sdk/mcp';
 
 declare class Chat<UI_MESSAGE extends UIMessage> extends AbstractChat<UI_MESSAGE> {
     #private;
@@ -175,4 +180,73 @@ declare function useObject<SCHEMA extends FlexibleSchema, RESULT = InferSchema<S
 initialValue, fetch, onError, onFinish, headers, credentials, }: Experimental_UseObjectOptions<SCHEMA, RESULT>): Experimental_UseObjectHelpers<RESULT, INPUT>;
 declare const experimental_useObject: typeof useObject;
 
-export { Chat, Experimental_UseObjectHelpers, Experimental_UseObjectOptions, UseChatHelpers, UseChatOptions, UseCompletionHelpers, experimental_useObject, useChat, useCompletion };
+type MCPAppDisplayMode = 'inline' | 'fullscreen' | 'pip';
+type MCPAppMetadata = {
+    resourceUri: string;
+    mimeType: MCPAppResource['mimeType'];
+    visibility?: Array<'model' | 'app'>;
+};
+type MCPAppHostContext = {
+    theme?: 'light' | 'dark';
+    displayMode?: MCPAppDisplayMode;
+    availableDisplayModes?: MCPAppDisplayMode[];
+    [key: string]: unknown;
+};
+type MCPAppToolCallParams = {
+    name: string;
+    arguments?: Record<string, unknown>;
+};
+type MCPAppBridgeHandlers = {
+    allowedTools?: 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;
+};
+type MCPAppSandboxConfig = {
+    url: string | URL;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+    targetOrigin?: string;
+    outerSandbox?: string;
+    innerSandbox?: string;
+};
+type MCPAppRendererProps = {
+    part: ToolUIPart<UITools> | DynamicToolUIPart;
+    sandbox: MCPAppSandboxConfig;
+    resource?: MCPAppResource;
+    loadResource?: (app: MCPAppMetadata) => Promise<MCPAppResource>;
+    handlers?: MCPAppBridgeHandlers;
+    hostInfo?: {
+        name: string;
+        version: string;
+    };
+    hostContext?: MCPAppHostContext;
+    fallback?: ReactNode;
+};
+
+declare function MCPAppRenderer({ part, sandbox, resource: resourceProp, loadResource, handlers, hostInfo, hostContext, fallback, }: MCPAppRendererProps): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null;
+
+export { Chat, Experimental_UseObjectHelpers, Experimental_UseObjectOptions, MCPAppBridgeHandlers, MCPAppMetadata, MCPAppRendererProps, MCPAppSandboxConfig, UseChatHelpers, UseChatOptions, UseCompletionHelpers, MCPAppRenderer as experimental_MCPAppRenderer, experimental_useObject, useChat, useCompletion };

package/dist/index.js

@@ -503,8 +503,578 @@ function useObject({
   };
 }
 var experimental_useObject = useObject;
+
+// src/mcp-apps/app-renderer.tsx
+import { useEffect as useEffect4, useState as useState3 } from "react";
+
+// src/mcp-apps/app-frame.tsx
+import { useEffect as useEffect3, useMemo, useRef as useRef4 } from "react";
+
+// src/mcp-apps/bridge.ts
+import { isJSONObject } from "@ai-sdk/provider";
+var MCP_APP_PROTOCOL_VERSION = "2026-01-26";
+function isJsonRpcMessage(value) {
+  return value != null && typeof value === "object" && !Array.isArray(value) && "jsonrpc" in value && value.jsonrpc === "2.0";
+}
+function isRequest(message) {
+  return "method" in message && "id" in message;
+}
+function isNotification(message) {
+  return "method" in message && !("id" in message);
+}
+function toError(error) {
+  return error instanceof Error ? error : new Error(String(error));
+}
+function assertToolCallParams(params) {
+  if (!isJSONObject(params) || typeof params.name !== "string") {
+    throw new Error("Invalid tools/call params");
+  }
+  return {
+    name: params.name,
+    arguments: isJSONObject(params.arguments) ? params.arguments : void 0
+  };
+}
+var MCPAppBridge = class {
+  constructor({
+    targetWindow,
+    targetOrigin = "*",
+    handlers = {},
+    hostInfo = { name: "ai-sdk-react", version: "1.0.0" },
+    hostContext = { displayMode: "inline" }
+  }) {
+    this.initialized = false;
+    this.pendingNotifications = [];
+    this.nextRequestId = 0;
+    this.pendingResponses = /* @__PURE__ */ new Map();
+    this.targetWindow = targetWindow;
+    this.targetOrigin = targetOrigin;
+    this.handlers = handlers;
+    this.hostInfo = hostInfo;
+    this.hostContext = hostContext;
+  }
+  /**
+   * Replaces the callbacks used to serve iframe requests.
+   */
+  setHandlers(handlers) {
+    this.handlers = handlers;
+  }
+  /**
+   * Updates host context and notifies the iframe after initialization.
+   *
+   * @example
+   * ```ts
+   * bridge.setHostContext({ theme: 'dark', displayMode: 'inline' });
+   * ```
+   */
+  setHostContext(hostContext) {
+    this.hostContext = hostContext;
+    this.sendNotification({
+      method: "ui/notifications/host-context-changed",
+      params: hostContext
+    });
+  }
+  /**
+   * Processes one `message` event from the sandbox proxy iframe.
+   */
+  handleMessage(event) {
+    if (event.source !== this.targetWindow || !isJsonRpcMessage(event.data)) {
+      return;
+    }
+    const message = event.data;
+    if ("result" in message || "error" in message) {
+      this.handleResponse(message);
+      return;
+    }
+    if (isRequest(message)) {
+      void this.handleRequest(message);
+      return;
+    }
+    if (isNotification(message)) {
+      this.handleNotification(message);
+    }
+  }
+  /**
+   * Sends app HTML and sandbox settings to the sandbox proxy.
+   */
+  sendSandboxResourceReady(params) {
+    this.post({
+      jsonrpc: "2.0",
+      method: "ui/notifications/sandbox-resource-ready",
+      params
+    });
+  }
+  /**
+   * Sends final tool arguments to the MCP App.
+   */
+  sendToolInput(input) {
+    this.sendNotification({
+      method: "ui/notifications/tool-input",
+      params: { arguments: input }
+    });
+  }
+  /**
+   * Sends a completed MCP tool result to the MCP App.
+   */
+  sendToolResult(result) {
+    this.sendNotification({
+      method: "ui/notifications/tool-result",
+      params: result
+    });
+  }
+  /**
+   * Notifies the MCP App that the related tool call was cancelled.
+   */
+  sendToolCancelled(reason) {
+    this.sendNotification({
+      method: "ui/notifications/tool-cancelled",
+      params: reason != null ? { reason } : {}
+    });
+  }
+  /**
+   * Requests graceful teardown before the host removes the iframe.
+   */
+  teardownResource() {
+    return this.request("ui/resource-teardown", {});
+  }
+  /**
+   * Rejects pending bridge requests and clears queued notifications.
+   */
+  close() {
+    for (const pending of this.pendingResponses.values()) {
+      pending.reject(new Error("MCP App bridge closed"));
+    }
+    this.pendingResponses.clear();
+    this.pendingNotifications = [];
+  }
+  /**
+   * Resolves or rejects a host-initiated request when the iframe responds.
+   */
+  handleResponse(response) {
+    const pending = this.pendingResponses.get(response.id);
+    if (pending == null) {
+      return;
+    }
+    this.pendingResponses.delete(response.id);
+    if (response.error != null) {
+      pending.reject(new Error(response.error.message));
+    } else {
+      pending.resolve(response.result);
+    }
+  }
+  /**
+   * Runs a handler for an iframe request and posts the JSON-RPC response.
+   */
+  async handleRequest(request) {
+    var _a, _b;
+    try {
+      const result = await this.getRequestResult(request);
+      this.post({ jsonrpc: "2.0", id: request.id, result });
+    } catch (error) {
+      const normalizedError = toError(error);
+      (_b = (_a = this.handlers).onError) == null ? void 0 : _b.call(_a, normalizedError);
+      this.post({
+        jsonrpc: "2.0",
+        id: request.id,
+        error: { code: -32603, message: normalizedError.message }
+      });
+    }
+  }
+  /**
+   * Maps supported iframe request methods to host callbacks.
+   */
+  async getRequestResult(request) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    switch (request.method) {
+      case "ui/initialize":
+        return {
+          protocolVersion: MCP_APP_PROTOCOL_VERSION,
+          hostCapabilities: {
+            ...this.handlers.callTool != null ? { serverTools: {} } : {},
+            ...this.handlers.readResource != null ? { serverResources: {} } : {},
+            ...this.handlers.onLog != null ? { logging: {} } : {}
+          },
+          hostInfo: this.hostInfo,
+          hostContext: this.hostContext
+        };
+      case "tools/call": {
+        if (this.handlers.callTool == null) {
+          throw new Error("No tools/call handler configured");
+        }
+        const params = assertToolCallParams(request.params);
+        if (this.handlers.allowedTools != null && !this.handlers.allowedTools.includes(params.name)) {
+          throw new Error(`Tool is not app-visible: ${params.name}`);
+        }
+        return this.handlers.callTool(params);
+      }
+      case "resources/read":
+        if (this.handlers.readResource == null) {
+          throw new Error("No resources/read handler configured");
+        }
+        return this.handlers.readResource(request.params);
+      case "resources/list":
+        if (this.handlers.listResources == null) {
+          throw new Error("No resources/list handler configured");
+        }
+        return this.handlers.listResources(request.params);
+      case "ui/open-link":
+        if (this.handlers.openLink == null) {
+          throw new Error("No ui/open-link handler configured");
+        }
+        return this.handlers.openLink(request.params);
+      case "ui/message":
+        return (_c = (_b = (_a = this.handlers).sendMessage) == null ? void 0 : _b.call(_a, request.params)) != null ? _c : {};
+      case "ui/update-model-context":
+        return (_f = (_e = (_d = this.handlers).updateModelContext) == null ? void 0 : _e.call(_d, request.params)) != null ? _f : {};
+      case "ui/request-display-mode":
+        return (_j = (_h = (_g = this.handlers).requestDisplayMode) == null ? void 0 : _h.call(
+          _g,
+          request.params
+        )) != null ? _j : { mode: (_i = this.hostContext.displayMode) != null ? _i : "inline" };
+      default:
+        throw new Error(`Unsupported MCP App method: ${request.method}`);
+    }
+  }
+  /**
+   * Handles iframe lifecycle and telemetry notifications.
+   */
+  handleNotification(notification) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    switch (notification.method) {
+      case "ui/notifications/initialized":
+        this.initialized = true;
+        this.flushNotifications();
+        (_b = (_a = this.handlers).onInitialized) == null ? void 0 : _b.call(_a);
+        break;
+      case "ui/notifications/size-changed":
+        (_d = (_c = this.handlers).onSizeChange) == null ? void 0 : _d.call(
+          _c,
+          notification.params
+        );
+        break;
+      case "ui/notifications/request-teardown":
+        (_f = (_e = this.handlers).onRequestTeardown) == null ? void 0 : _f.call(_e, notification.params);
+        break;
+      case "notifications/message":
+        (_h = (_g = this.handlers).onLog) == null ? void 0 : _h.call(_g, notification.params);
+        break;
+    }
+  }
+  /**
+   * Sends a host-to-iframe notification, queueing it until app initialization.
+   */
+  sendNotification(notification) {
+    const message = { jsonrpc: "2.0", ...notification };
+    if (!this.initialized && !notification.method.includes("sandbox")) {
+      this.pendingNotifications.push(message);
+      return;
+    }
+    this.post(message);
+  }
+  /**
+   * Sends notifications that were queued before `ui/notifications/initialized`.
+   */
+  flushNotifications() {
+    const notifications = this.pendingNotifications;
+    this.pendingNotifications = [];
+    for (const notification of notifications) {
+      this.post(notification);
+    }
+  }
+  /**
+   * Sends a host-initiated JSON-RPC request to the iframe.
+   */
+  request(method, params) {
+    const id = this.nextRequestId++;
+    this.post({ jsonrpc: "2.0", id, method, params });
+    return new Promise((resolve2, reject) => {
+      this.pendingResponses.set(id, { resolve: resolve2, reject });
+    });
+  }
+  /**
+   * Posts a JSON-RPC message to the sandbox proxy iframe.
+   */
+  post(message) {
+    this.targetWindow.postMessage(message, this.targetOrigin);
+  }
+};
+
+// src/mcp-apps/sandbox.ts
+var MCP_APP_DEFAULT_OUTER_SANDBOX = "allow-scripts allow-same-origin allow-forms";
+var MCP_APP_DEFAULT_INNER_SANDBOX = "allow-scripts allow-forms";
+function getMCPAppCSP(csp) {
+  var _a, _b, _c;
+  if (csp == null) {
+    return void 0;
+  }
+  const connectSrc = ["'self'", ...(_a = csp.connectDomains) != null ? _a : []];
+  const imgSrc = ["'self'", "data:", ...(_b = csp.resourceDomains) != null ? _b : []];
+  const frameSrc = ["'self'", ...(_c = csp.frameDomains) != null ? _c : []];
+  return [
+    "default-src 'none'",
+    "script-src 'unsafe-inline'",
+    "style-src 'unsafe-inline'",
+    `connect-src ${connectSrc.join(" ")}`,
+    `img-src ${imgSrc.join(" ")}`,
+    `font-src ${imgSrc.join(" ")}`,
+    `frame-src ${frameSrc.join(" ")}`
+  ].join("; ");
+}
+function getMCPAppAllowAttribute(permissions) {
+  if (permissions == null) {
+    return void 0;
+  }
+  const allow = [];
+  if (permissions.camera)
+    allow.push("camera");
+  if (permissions.microphone)
+    allow.push("microphone");
+  if (permissions.geolocation)
+    allow.push("geolocation");
+  if (permissions.clipboardWrite)
+    allow.push("clipboard-write");
+  return allow.length > 0 ? allow.join("; ") : void 0;
+}
+
+// src/mcp-apps/utils.ts
+import { isJSONObject as isJSONObject2 } from "@ai-sdk/provider";
+function getMCPAppFromToolPart(part) {
+  var _a;
+  const mcpMetadata = (_a = part.toolMetadata) == null ? void 0 : _a.mcp;
+  const rawAppMetadata = isJSONObject2(mcpMetadata) ? mcpMetadata.app : void 0;
+  const appMetadata = isJSONObject2(rawAppMetadata) ? rawAppMetadata : void 0;
+  if (appMetadata == null || appMetadata.mimeType !== "text/html;profile=mcp-app" || typeof appMetadata.resourceUri !== "string" || !appMetadata.resourceUri.startsWith("ui://") || appMetadata.visibility != null && (!Array.isArray(appMetadata.visibility) || appMetadata.visibility.some(
+    (value) => value !== "model" && value !== "app"
+  ))) {
+    return void 0;
+  }
+  return appMetadata;
+}
+function normalizeMCPAppToolResult(output) {
+  if (output != null && typeof output === "object" && "content" in output) {
+    return output;
+  }
+  return {
+    content: [],
+    structuredContent: output
+  };
+}
+
+// src/mcp-apps/app-frame.tsx
+import { jsx } from "react/jsx-runtime";
+function sendToolState({
+  bridge,
+  input,
+  output
+}) {
+  if (bridge == null) {
+    return;
+  }
+  if (input !== void 0) {
+    bridge.sendToolInput(input);
+  }
+  if (output !== void 0) {
+    bridge.sendToolResult(normalizeMCPAppToolResult(output));
+  }
+}
+function MCPAppFrame({
+  app,
+  resource,
+  input,
+  output,
+  sandbox,
+  handlers,
+  hostInfo,
+  hostContext
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const iframeRef = useRef4(null);
+  const bridgeRef = useRef4(void 0);
+  const inputRef = useRef4(input);
+  const outputRef = useRef4(output);
+  const hostContextRef = useRef4(hostContext);
+  const initializedRef = useRef4(false);
+  inputRef.current = input;
+  outputRef.current = output;
+  hostContextRef.current = hostContext;
+  const targetOrigin = (_a = sandbox.targetOrigin) != null ? _a : "*";
+  const sandboxUrl = String(sandbox.url);
+  const resourceCSP = getMCPAppCSP((_b = resource.meta) == null ? void 0 : _b.csp);
+  const resourceAllow = getMCPAppAllowAttribute((_c = resource.meta) == null ? void 0 : _c.permissions);
+  const innerSandbox = (_d = sandbox.innerSandbox) != null ? _d : MCP_APP_DEFAULT_INNER_SANDBOX;
+  const bridgeHandlers = useMemo(
+    () => ({
+      ...handlers,
+      onInitialized: () => {
+        var _a2;
+        initializedRef.current = true;
+        (_a2 = handlers == null ? void 0 : handlers.onInitialized) == null ? void 0 : _a2.call(handlers);
+        sendToolState({
+          bridge: bridgeRef.current,
+          input: inputRef.current,
+          output: outputRef.current
+        });
+      }
+    }),
+    [handlers]
+  );
+  const bridgeHandlersRef = useRef4(bridgeHandlers);
+  bridgeHandlersRef.current = bridgeHandlers;
+  useEffect3(() => {
+    const iframe = iframeRef.current;
+    const targetWindow = iframe == null ? void 0 : iframe.contentWindow;
+    if (targetWindow == null) {
+      return;
+    }
+    initializedRef.current = false;
+    const bridge = new MCPAppBridge({
+      targetWindow,
+      targetOrigin,
+      handlers: bridgeHandlersRef.current,
+      hostInfo,
+      hostContext: hostContextRef.current
+    });
+    bridgeRef.current = bridge;
+    const onMessage = (event) => {
+      var _a2;
+      if (event.source === targetWindow && ((_a2 = event.data) == null ? void 0 : _a2.jsonrpc) === "2.0" && event.data.method === "ui/notifications/sandbox-proxy-ready") {
+        bridge.sendSandboxResourceReady({
+          html: resource.html,
+          csp: resourceCSP,
+          sandbox: innerSandbox,
+          allow: resourceAllow
+        });
+        return;
+      }
+      bridge.handleMessage(event);
+    };
+    window.addEventListener("message", onMessage);
+    return () => {
+      initializedRef.current = false;
+      window.removeEventListener("message", onMessage);
+      void bridge.teardownResource().catch(() => {
+      });
+      bridge.close();
+      bridgeRef.current = void 0;
+    };
+  }, [
+    hostInfo,
+    innerSandbox,
+    resource.html,
+    resourceAllow,
+    resourceCSP,
+    sandboxUrl,
+    targetOrigin
+  ]);
+  useEffect3(() => {
+    var _a2;
+    (_a2 = bridgeRef.current) == null ? void 0 : _a2.setHandlers(bridgeHandlers);
+  }, [bridgeHandlers]);
+  useEffect3(() => {
+    var _a2;
+    if (hostContext != null) {
+      (_a2 = bridgeRef.current) == null ? void 0 : _a2.setHostContext(hostContext);
+    }
+  }, [hostContext]);
+  useEffect3(() => {
+    var _a2;
+    if (initializedRef.current && input !== void 0) {
+      (_a2 = bridgeRef.current) == null ? void 0 : _a2.sendToolInput(input);
+    }
+  }, [input]);
+  useEffect3(() => {
+    var _a2;
+    if (initializedRef.current && output !== void 0) {
+      (_a2 = bridgeRef.current) == null ? void 0 : _a2.sendToolResult(normalizeMCPAppToolResult(output));
+    }
+  }, [output]);
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref: iframeRef,
+      title: "MCP App",
+      "aria-label": (_e = sandbox.title) != null ? _e : app.resourceUri,
+      src: sandboxUrl,
+      className: sandbox.className,
+      style: sandbox.style,
+      sandbox: (_f = sandbox.outerSandbox) != null ? _f : MCP_APP_DEFAULT_OUTER_SANDBOX
+    }
+  );
+}
+
+// src/mcp-apps/app-renderer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function getToolPartOutput(part) {
+  return part.state === "output-available" ? part.output : void 0;
+}
+function getToolPartInput(part) {
+  return part.state === "input-available" || part.state === "output-available" ? part.input : void 0;
+}
+function MCPAppRenderer({
+  part,
+  sandbox,
+  resource: resourceProp,
+  loadResource,
+  handlers,
+  hostInfo,
+  hostContext,
+  fallback = null
+}) {
+  const app = getMCPAppFromToolPart(part);
+  const [cachedApp, setCachedApp] = useState3();
+  const [loadedResource, setLoadedResource] = useState3();
+  useEffect4(() => {
+    if (app != null) {
+      setCachedApp(
+        (previous) => (previous == null ? void 0 : previous.resourceUri) === app.resourceUri ? previous : app
+      );
+    }
+  }, [app == null ? void 0 : app.resourceUri]);
+  const appForRender = app != null ? app : cachedApp;
+  useEffect4(() => {
+    if (appForRender == null || resourceProp != null || loadResource == null) {
+      return;
+    }
+    let cancelled = false;
+    const resourceUri = appForRender.resourceUri;
+    loadResource(appForRender).then((resource2) => {
+      if (!cancelled) {
+        setLoadedResource({ resourceUri, resource: resource2 });
+      }
+    }).catch((error2) => {
+      if (!cancelled) {
+        setLoadedResource({
+          resourceUri,
+          error: error2 instanceof Error ? error2 : new Error(String(error2))
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [appForRender == null ? void 0 : appForRender.resourceUri, loadResource, resourceProp]);
+  const loadedResourceForApp = (loadedResource == null ? void 0 : loadedResource.resourceUri) === (appForRender == null ? void 0 : appForRender.resourceUri) ? loadedResource : void 0;
+  const resource = resourceProp != null ? resourceProp : loadedResourceForApp == null ? void 0 : loadedResourceForApp.resource;
+  const error = resourceProp == null ? loadedResourceForApp == null ? void 0 : loadedResourceForApp.error : void 0;
+  if (appForRender == null || error != null || resource == null) {
+    return fallback;
+  }
+  return /* @__PURE__ */ jsx2(
+    MCPAppFrame,
+    {
+      app: appForRender,
+      resource,
+      input: getToolPartInput(part),
+      output: getToolPartOutput(part),
+      sandbox,
+      handlers,
+      hostInfo,
+      hostContext
+    }
+  );
+}
 export {
   Chat,
+  MCPAppRenderer as experimental_MCPAppRenderer,
   experimental_useObject,
   useChat,
   useCompletion