@ai-sdk/react 4.0.0-beta.18 → 4.0.0-beta.181

package/dist/index.js

@@ -1,31 +1,3 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __accessCheck = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -45,26 +17,18 @@ var __privateSet = (obj, member, value, setter) => {
   return value;
 };
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Chat: () => Chat,
-  experimental_useObject: () => experimental_useObject,
-  useChat: () => useChat,
-  useCompletion: () => useCompletion
-});
-module.exports = __toCommonJS(src_exports);
-
 // src/use-chat.ts
-var import_react = require("react");
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 
 // src/chat.react.ts
-var import_ai = require("ai");
+import {
+  AbstractChat
+} from "ai";
 
 // src/throttle.ts
-var import_throttleit = __toESM(require("throttleit"));
+import throttleFunction from "throttleit";
 function throttle(fn, waitMs) {
-  return waitMs != null ? (0, import_throttleit.default)(fn, waitMs) : fn;
+  return waitMs != null ? throttleFunction(fn, waitMs) : fn;
 }
 
 // src/chat.react.ts
@@ -157,7 +121,7 @@ _callMessagesCallbacks = new WeakMap();
 _callStatusCallbacks = new WeakMap();
 _callErrorCallbacks = new WeakMap();
 var _state;
-var Chat = class extends import_ai.AbstractChat {
+var Chat = class extends AbstractChat {
   constructor({ messages, ...init }) {
     const state = new ReactChatState(messages);
     super({ ...init, state });
@@ -176,7 +140,7 @@ function useChat({
   resume = false,
   ...options
 } = {}) {
-  const callbacksRef = (0, import_react.useRef)(
+  const callbacksRef = useRef(
     !("chat" in options) ? {
       onToolCall: options.onToolCall,
       onData: options.onData,
@@ -217,35 +181,35 @@ function useChat({
       return (_c = (_b = (_a = callbacksRef.current).sendAutomaticallyWhen) == null ? void 0 : _b.call(_a, arg)) != null ? _c : false;
     }
   };
-  const chatRef = (0, import_react.useRef)(
+  const chatRef = useRef(
     "chat" in options ? options.chat : new Chat(optionsWithCallbacks)
   );
   const shouldRecreateChat = "chat" in options && options.chat !== chatRef.current || "id" in options && chatRef.current.id !== options.id;
   if (shouldRecreateChat) {
     chatRef.current = "chat" in options ? options.chat : new Chat(optionsWithCallbacks);
   }
-  const subscribeToMessages = (0, import_react.useCallback)(
+  const subscribeToMessages = useCallback(
     (update) => chatRef.current["~registerMessagesCallback"](update, throttleWaitMs),
     // `chatRef.current.id` is required to trigger re-subscription when the chat ID changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [throttleWaitMs, chatRef.current.id]
   );
-  const messages = (0, import_react.useSyncExternalStore)(
+  const messages = useSyncExternalStore(
     subscribeToMessages,
     () => chatRef.current.messages,
     () => chatRef.current.messages
   );
-  const status = (0, import_react.useSyncExternalStore)(
+  const status = useSyncExternalStore(
     chatRef.current["~registerStatusCallback"],
     () => chatRef.current.status,
     () => chatRef.current.status
   );
-  const error = (0, import_react.useSyncExternalStore)(
+  const error = useSyncExternalStore(
     chatRef.current["~registerErrorCallback"],
     () => chatRef.current.error,
     () => chatRef.current.error
   );
-  const setMessages = (0, import_react.useCallback)(
+  const setMessages = useCallback(
     (messagesParam) => {
       if (typeof messagesParam === "function") {
         messagesParam = messagesParam(chatRef.current.messages);
@@ -254,7 +218,7 @@ function useChat({
     },
     [chatRef]
   );
-  (0, import_react.useEffect)(() => {
+  useEffect(() => {
     if (resume) {
       chatRef.current.resumeStream();
     }
@@ -280,9 +244,11 @@ function useChat({
 }
 
 // src/use-completion.ts
-var import_ai2 = require("ai");
-var import_react2 = require("react");
-var import_swr = __toESM(require("swr"));
+import {
+  callCompletionApi
+} from "ai";
+import { useCallback as useCallback2, useEffect as useEffect2, useId, useRef as useRef2, useState } from "react";
+import useSWR from "swr";
 function useCompletion({
   api = "/api/completion",
   id,
@@ -297,32 +263,32 @@ function useCompletion({
   onError,
   experimental_throttle: throttleWaitMs
 } = {}) {
-  const hookId = (0, import_react2.useId)();
+  const hookId = useId();
   const completionId = id || hookId;
-  const { data, mutate } = (0, import_swr.default)([api, completionId], null, {
+  const { data, mutate } = useSWR([api, completionId], null, {
     fallbackData: initialCompletion
   });
-  const { data: isLoading = false, mutate: mutateLoading } = (0, import_swr.default)(
+  const { data: isLoading = false, mutate: mutateLoading } = useSWR(
     [completionId, "loading"],
     null
   );
-  const [error, setError] = (0, import_react2.useState)(void 0);
+  const [error, setError] = useState(void 0);
   const completion = data;
-  const [abortController, setAbortController] = (0, import_react2.useState)(null);
-  const extraMetadataRef = (0, import_react2.useRef)({
+  const [abortController, setAbortController] = useState(null);
+  const extraMetadataRef = useRef2({
     credentials,
     headers,
     body
   });
-  (0, import_react2.useEffect)(() => {
+  useEffect2(() => {
     extraMetadataRef.current = {
       credentials,
       headers,
       body
     };
   }, [credentials, headers, body]);
-  const triggerRequest = (0, import_react2.useCallback)(
-    async (prompt, options) => (0, import_ai2.callCompletionApi)({
+  const triggerRequest = useCallback2(
+    async (prompt, options) => callCompletionApi({
       api,
       prompt,
       credentials: extraMetadataRef.current.credentials,
@@ -358,26 +324,26 @@ function useCompletion({
       throttleWaitMs
     ]
   );
-  const stop = (0, import_react2.useCallback)(() => {
+  const stop = useCallback2(() => {
     if (abortController) {
       abortController.abort();
       setAbortController(null);
     }
   }, [abortController]);
-  const setCompletion = (0, import_react2.useCallback)(
+  const setCompletion = useCallback2(
     (completion2) => {
       mutate(completion2, false);
     },
     [mutate]
   );
-  const complete = (0, import_react2.useCallback)(
+  const complete = useCallback2(
     async (prompt, options) => {
       return triggerRequest(prompt, options);
     },
     [triggerRequest]
   );
-  const [input, setInput] = (0, import_react2.useState)(initialInput);
-  const handleSubmit = (0, import_react2.useCallback)(
+  const [input, setInput] = useState(initialInput);
+  const handleSubmit = useCallback2(
     (event) => {
       var _a;
       (_a = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a.call(event);
@@ -385,7 +351,7 @@ function useCompletion({
     },
     [input, complete]
   );
-  const handleInputChange = (0, import_react2.useCallback)(
+  const handleInputChange = useCallback2(
     (e) => {
       setInput(e.target.value);
     },
@@ -406,10 +372,19 @@ function useCompletion({
 }
 
 // src/use-object.ts
-var import_provider_utils = require("@ai-sdk/provider-utils");
-var import_ai3 = require("ai");
-var import_react3 = require("react");
-var import_swr2 = __toESM(require("swr"));
+import {
+  isAbortError,
+  resolve,
+  normalizeHeaders,
+  safeValidateTypes
+} from "@ai-sdk/provider-utils";
+import {
+  asSchema,
+  isDeepEqualData,
+  parsePartialJson
+} from "ai";
+import { useCallback as useCallback3, useId as useId2, useRef as useRef3, useState as useState2 } from "react";
+import useSWR2 from "swr";
 var getOriginalFetch = () => fetch;
 function useObject({
   api,
@@ -423,21 +398,21 @@ function useObject({
   headers,
   credentials
 }) {
-  const hookId = (0, import_react3.useId)();
+  const hookId = useId2();
   const completionId = id != null ? id : hookId;
-  const { data, mutate } = (0, import_swr2.default)(
+  const { data, mutate } = useSWR2(
     [api, completionId],
     null,
     { fallbackData: initialValue }
   );
-  const [error, setError] = (0, import_react3.useState)(void 0);
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
-  const abortControllerRef = (0, import_react3.useRef)(null);
-  const stop = (0, import_react3.useCallback)(() => {
+  const [error, setError] = useState2(void 0);
+  const [isLoading, setIsLoading] = useState2(false);
+  const abortControllerRef = useRef3(null);
+  const stop = useCallback3(() => {
     var _a;
     try {
       (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
-    } catch (ignored) {
+    } catch (e) {
     } finally {
       setIsLoading(false);
       abortControllerRef.current = null;
@@ -450,13 +425,13 @@ function useObject({
       setIsLoading(true);
       const abortController = new AbortController();
       abortControllerRef.current = abortController;
-      const resolvedHeaders = await (0, import_provider_utils.resolve)(headers);
+      const resolvedHeaders = await resolve(headers);
       const actualFetch = fetch2 != null ? fetch2 : getOriginalFetch();
       const response = await actualFetch(api, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          ...(0, import_provider_utils.normalizeHeaders)(resolvedHeaders)
+          ...normalizeHeaders(resolvedHeaders)
         },
         credentials,
         signal: abortController.signal,
@@ -476,9 +451,9 @@ function useObject({
         new WritableStream({
           async write(chunk) {
             accumulatedText += chunk;
-            const { value } = await (0, import_ai3.parsePartialJson)(accumulatedText);
+            const { value } = await parsePartialJson(accumulatedText);
             const currentObject = value;
-            if (!(0, import_ai3.isDeepEqualData)(latestObject, currentObject)) {
+            if (!isDeepEqualData(latestObject, currentObject)) {
               latestObject = currentObject;
               mutate(currentObject);
             }
@@ -487,9 +462,9 @@ function useObject({
             setIsLoading(false);
             abortControllerRef.current = null;
             if (onFinish != null) {
-              const validationResult = await (0, import_provider_utils.safeValidateTypes)({
+              const validationResult = await safeValidateTypes({
                 value: latestObject,
-                schema: (0, import_ai3.asSchema)(schema)
+                schema: asSchema(schema)
               });
               onFinish(
                 validationResult.success ? { object: validationResult.value, error: void 0 } : { object: void 0, error: validationResult.error }
@@ -499,7 +474,7 @@ function useObject({
         })
       );
     } catch (error2) {
-      if ((0, import_provider_utils.isAbortError)(error2)) {
+      if (isAbortError(error2)) {
         return;
       }
       if (onError && error2 instanceof Error) {
@@ -528,11 +503,752 @@ function useObject({
   };
 }
 var experimental_useObject = useObject;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+
+// src/use-realtime.ts
+import {
+  Experimental_AbstractRealtimeSession as AbstractRealtimeSession
+} from "ai";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function getRealtimeStoreKey(options) {
+  return {
+    model: options.model,
+    token: options.api.token,
+    sessionConfig: options.sessionConfig,
+    sampleRate: options.sampleRate,
+    maxEvents: options.maxEvents
+  };
+}
+function shouldCreateRealtimeStore(currentKey, nextOptions) {
+  return currentKey.model !== nextOptions.model || currentKey.token !== nextOptions.api.token || currentKey.sessionConfig !== nextOptions.sessionConfig || currentKey.sampleRate !== nextOptions.sampleRate || currentKey.maxEvents !== nextOptions.maxEvents;
+}
+var RealtimeStore = class extends AbstractRealtimeSession {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      status: "disconnected",
+      messages: [],
+      events: [],
+      isCapturing: false,
+      isPlaying: false
+    };
+    this.callbacks = {
+      status: /* @__PURE__ */ new Set(),
+      messages: /* @__PURE__ */ new Set(),
+      events: /* @__PURE__ */ new Set(),
+      isCapturing: /* @__PURE__ */ new Set(),
+      isPlaying: /* @__PURE__ */ new Set()
+    };
+  }
+  get status() {
+    return this.state.status;
+  }
+  get messages() {
+    return this.state.messages;
+  }
+  get events() {
+    return this.state.events;
+  }
+  get isCapturing() {
+    return this.state.isCapturing;
+  }
+  get isPlaying() {
+    return this.state.isPlaying;
+  }
+  subscribe(key, onChange) {
+    this.callbacks[key].add(onChange);
+    return () => {
+      this.callbacks[key].delete(onChange);
+    };
+  }
+  setState(key, value) {
+    this.state = { ...this.state, [key]: value };
+    this.callbacks[key].forEach((callback) => callback());
+  }
+  pushMessage(message) {
+    this.state = {
+      ...this.state,
+      messages: [...this.state.messages, message]
+    };
+    this.callbacks.messages.forEach((callback) => callback());
+  }
+  updateMessages(updater) {
+    this.state = {
+      ...this.state,
+      messages: updater(this.state.messages)
+    };
+    this.callbacks.messages.forEach((callback) => callback());
+  }
+  pushEvent(event) {
+    const nextEvents = [...this.state.events, event];
+    this.state = {
+      ...this.state,
+      events: nextEvents.length > this.maxEvents ? nextEvents.slice(-this.maxEvents) : nextEvents
+    };
+    this.callbacks.events.forEach((callback) => callback());
+  }
+};
+function useRealtime(options) {
+  const callbacksRef = useRef4({
+    onToolCall: options.onToolCall,
+    onEvent: options.onEvent,
+    onError: options.onError
+  });
+  callbacksRef.current = {
+    onToolCall: options.onToolCall,
+    onEvent: options.onEvent,
+    onError: options.onError
+  };
+  const realtimeRef = useRef4(null);
+  let realtimeEntry = realtimeRef.current;
+  if (realtimeEntry == null || shouldCreateRealtimeStore(realtimeEntry.key, options)) {
+    realtimeEntry = {
+      store: new RealtimeStore({
+        ...options,
+        onToolCall: (...args) => {
+          var _a, _b;
+          return (_b = (_a = callbacksRef.current).onToolCall) == null ? void 0 : _b.call(_a, ...args);
+        },
+        onEvent: (...args) => {
+          var _a, _b;
+          return (_b = (_a = callbacksRef.current).onEvent) == null ? void 0 : _b.call(_a, ...args);
+        },
+        onError: (...args) => {
+          var _a, _b;
+          return (_b = (_a = callbacksRef.current).onError) == null ? void 0 : _b.call(_a, ...args);
+        }
+      }),
+      key: getRealtimeStoreKey(options)
+    };
+    realtimeRef.current = realtimeEntry;
+  } else {
+    realtimeEntry.key = getRealtimeStoreKey(options);
+  }
+  const rt = realtimeEntry.store;
+  const status = useSyncExternalStore2(
+    useCallback4((cb) => rt.subscribe("status", cb), [rt]),
+    () => rt.status,
+    () => rt.status
+  );
+  const messages = useSyncExternalStore2(
+    useCallback4((cb) => rt.subscribe("messages", cb), [rt]),
+    () => rt.messages,
+    () => rt.messages
+  );
+  const events = useSyncExternalStore2(
+    useCallback4((cb) => rt.subscribe("events", cb), [rt]),
+    () => rt.events,
+    () => rt.events
+  );
+  const isCapturing = useSyncExternalStore2(
+    useCallback4((cb) => rt.subscribe("isCapturing", cb), [rt]),
+    () => rt.isCapturing,
+    () => rt.isCapturing
+  );
+  const isPlaying = useSyncExternalStore2(
+    useCallback4((cb) => rt.subscribe("isPlaying", cb), [rt]),
+    () => rt.isPlaying,
+    () => rt.isPlaying
+  );
+  useEffect3(() => {
+    return () => rt.dispose();
+  }, [rt]);
+  return {
+    status,
+    messages,
+    events,
+    isCapturing,
+    isPlaying,
+    connect: rt.connect.bind(rt),
+    disconnect: rt.disconnect.bind(rt),
+    addToolOutput: rt.addToolOutput.bind(rt),
+    sendEvent: rt.sendEvent.bind(rt),
+    sendTextMessage: rt.sendTextMessage.bind(rt),
+    sendAudio: rt.sendAudio.bind(rt),
+    commitAudio: rt.commitAudio.bind(rt),
+    clearAudioBuffer: rt.clearAudioBuffer.bind(rt),
+    requestResponse: rt.requestResponse.bind(rt),
+    cancelResponse: rt.cancelResponse.bind(rt),
+    startAudioCapture: rt.startAudioCapture.bind(rt),
+    stopAudioCapture: rt.stopAudioCapture.bind(rt),
+    stopPlayback: rt.stopPlayback.bind(rt)
+  };
+}
+var experimental_useRealtime = useRealtime;
+
+// src/mcp-apps/app-renderer.tsx
+import { useEffect as useEffect5, useState as useState3 } from "react";
+
+// src/mcp-apps/app-frame.tsx
+import { useEffect as useEffect4, useMemo, useRef as useRef5 } 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 = useRef5(null);
+  const bridgeRef = useRef5(void 0);
+  const inputRef = useRef5(input);
+  const outputRef = useRef5(output);
+  const hostContextRef = useRef5(hostContext);
+  const initializedRef = useRef5(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 = useRef5(bridgeHandlers);
+  bridgeHandlersRef.current = bridgeHandlers;
+  useEffect4(() => {
+    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
+  ]);
+  useEffect4(() => {
+    var _a2;
+    (_a2 = bridgeRef.current) == null ? void 0 : _a2.setHandlers(bridgeHandlers);
+  }, [bridgeHandlers]);
+  useEffect4(() => {
+    var _a2;
+    if (hostContext != null) {
+      (_a2 = bridgeRef.current) == null ? void 0 : _a2.setHostContext(hostContext);
+    }
+  }, [hostContext]);
+  useEffect4(() => {
+    var _a2;
+    if (initializedRef.current && input !== void 0) {
+      (_a2 = bridgeRef.current) == null ? void 0 : _a2.sendToolInput(input);
+    }
+  }, [input]);
+  useEffect4(() => {
+    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();
+  useEffect5(() => {
+    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;
+  useEffect5(() => {
+    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,
+  experimental_useRealtime,
   useChat,
   useCompletion
-});
+};
 //# sourceMappingURL=index.js.map