@copilotkit/react-core 1.71.1 → 1.72.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_copilotkit = require('./copilotkit-BkVEkUS0.cjs');
+const require_copilotkit = require('./copilotkit-gopQXrTQ.cjs');
 let react = require("react");
 react = require_copilotkit.__toESM(react);
 let _copilotkit_core = require("@copilotkit/core");

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { $n as LangGraphInterruptAction, Cr as CatchAllFrontendAction, Er as RenderFunctionStatus, Jn as CopilotApiConfig, Qn as CoAgentStateRender, Sr as CatchAllActionRenderPropsWait, Tr as FrontendActionAvailability, X as useAgent, Xn as CopilotContextParams, Yn as CopilotContext, Zn as useCopilotContext, _r as ActionRenderProps, ar as QueuedInterruptEvent, br as ActionRenderPropsWait, bt as useRenderToolCall$1, cr as CrewsResponseStatus, dr as CrewsToolStateItem, er as LangGraphInterruptActionSetter, fr as CopilotChatSuggestionConfiguration, gr as TreeNode, hr as Tree, ir as LangGraphInterruptRenderProps, lr as CrewsStateItem, mr as DocumentPointer, n as defaultCopilotContextCategories, nr as LangGraphInterruptRender, or as CrewsAgentState, pr as SystemMessageFunction, qn as CoagentInChatRenderFunction, r as CopilotKitProps, rr as LangGraphInterruptRenderHandlerProps, sr as CrewsResponse, t as CopilotKit, tr as LangGraphInterruptActionSetterArgs, ur as CrewsTaskStateItem, vr as ActionRenderPropsNoArgs, wr as FrontendAction, xr as CatchAllActionRenderProps, yr as ActionRenderPropsNoArgsWait } from "./copilotkit-DCIXZawe.cjs";
+import { $n as LangGraphInterruptAction, Cr as CatchAllFrontendAction, Er as RenderFunctionStatus, Jn as CopilotApiConfig, Qn as CoAgentStateRender, Sr as CatchAllActionRenderPropsWait, Tr as FrontendActionAvailability, X as useAgent, Xn as CopilotContextParams, Yn as CopilotContext, Zn as useCopilotContext, _r as ActionRenderProps, ar as QueuedInterruptEvent, br as ActionRenderPropsWait, bt as useRenderToolCall$1, cr as CrewsResponseStatus, dr as CrewsToolStateItem, er as LangGraphInterruptActionSetter, fr as CopilotChatSuggestionConfiguration, gr as TreeNode, hr as Tree, ir as LangGraphInterruptRenderProps, lr as CrewsStateItem, mr as DocumentPointer, n as defaultCopilotContextCategories, nr as LangGraphInterruptRender, or as CrewsAgentState, pr as SystemMessageFunction, qn as CoagentInChatRenderFunction, r as CopilotKitProps, rr as LangGraphInterruptRenderHandlerProps, sr as CrewsResponse, t as CopilotKit, tr as LangGraphInterruptActionSetterArgs, ur as CrewsTaskStateItem, vr as ActionRenderPropsNoArgs, wr as FrontendAction, xr as CatchAllActionRenderProps, yr as ActionRenderPropsNoArgsWait } from "./copilotkit-DoHSqB_u.cjs";
 import "./v2/index.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CopilotRuntimeClient, CopilotRuntimeClientOptions, ForwardedParametersInput, Message } from "@copilotkit/runtime-client-gql";

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { $n as LangGraphInterruptAction, Cr as CatchAllFrontendAction, Er as RenderFunctionStatus, Jn as CopilotApiConfig, Qn as CoAgentStateRender, Sr as CatchAllActionRenderPropsWait, Tr as FrontendActionAvailability, X as useAgent, Xn as CopilotContextParams, Yn as CopilotContext, Zn as useCopilotContext, _r as ActionRenderProps, ar as QueuedInterruptEvent, br as ActionRenderPropsWait, bt as useRenderToolCall$1, cr as CrewsResponseStatus, dr as CrewsToolStateItem, er as LangGraphInterruptActionSetter, fr as CopilotChatSuggestionConfiguration, gr as TreeNode, hr as Tree, ir as LangGraphInterruptRenderProps, lr as CrewsStateItem, mr as DocumentPointer, n as defaultCopilotContextCategories, nr as LangGraphInterruptRender, or as CrewsAgentState, pr as SystemMessageFunction, qn as CoagentInChatRenderFunction, r as CopilotKitProps, rr as LangGraphInterruptRenderHandlerProps, sr as CrewsResponse, t as CopilotKit, tr as LangGraphInterruptActionSetterArgs, ur as CrewsTaskStateItem, vr as ActionRenderPropsNoArgs, wr as FrontendAction, xr as CatchAllActionRenderProps, yr as ActionRenderPropsNoArgsWait } from "./copilotkit-ChjzWqn6.mjs";
+import { $n as LangGraphInterruptAction, Cr as CatchAllFrontendAction, Er as RenderFunctionStatus, Jn as CopilotApiConfig, Qn as CoAgentStateRender, Sr as CatchAllActionRenderPropsWait, Tr as FrontendActionAvailability, X as useAgent, Xn as CopilotContextParams, Yn as CopilotContext, Zn as useCopilotContext, _r as ActionRenderProps, ar as QueuedInterruptEvent, br as ActionRenderPropsWait, bt as useRenderToolCall$1, cr as CrewsResponseStatus, dr as CrewsToolStateItem, er as LangGraphInterruptActionSetter, fr as CopilotChatSuggestionConfiguration, gr as TreeNode, hr as Tree, ir as LangGraphInterruptRenderProps, lr as CrewsStateItem, mr as DocumentPointer, n as defaultCopilotContextCategories, nr as LangGraphInterruptRender, or as CrewsAgentState, pr as SystemMessageFunction, qn as CoagentInChatRenderFunction, r as CopilotKitProps, rr as LangGraphInterruptRenderHandlerProps, sr as CrewsResponse, t as CopilotKit, tr as LangGraphInterruptActionSetterArgs, ur as CrewsTaskStateItem, vr as ActionRenderPropsNoArgs, wr as FrontendAction, xr as CatchAllActionRenderProps, yr as ActionRenderPropsNoArgsWait } from "./copilotkit-DsMFLrpY.mjs";
 import "./v2/index.mjs";
 import React, { ReactNode, RefObject, SetStateAction } from "react";
 import { StaticSuggestionsConfig, Suggestion } from "@copilotkit/core";

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 
-import { Nt as useCopilotChatConfiguration, Ot as useRenderToolCall$1, Q as useSuggestions, X as INTERRUPT_EVENT_NAME, Y as useInterrupt, Z as useConfigureSuggestions, a as ThreadsProvider, c as CoAgentStateRendersProvider, d as shouldShowDevConsole, dt as useCopilotKit, f as useToast, g as useCopilotContext, h as CopilotContext, i as ThreadsContext, l as useCoAgentStateRenders, lt as useRenderCustomMessages, m as useCopilotMessagesContext, mt as defineToolCallRenderer, n as defaultCopilotContextCategories, nt as useAgent, o as useThreads, p as CopilotMessagesContext, r as CoAgentStateRenderBridge, rt as useHumanInTheLoop$1, s as CoAgentStateRendersContext, st as useFrontendTool$1, t as CopilotKit, u as useAsyncCallback } from "./copilotkit-D5BTo0YG.mjs";
+import { Nt as useCopilotChatConfiguration, Ot as useRenderToolCall$1, Q as useSuggestions, X as INTERRUPT_EVENT_NAME, Y as useInterrupt, Z as useConfigureSuggestions, a as ThreadsProvider, c as CoAgentStateRendersProvider, d as shouldShowDevConsole, dt as useCopilotKit, f as useToast, g as useCopilotContext, h as CopilotContext, i as ThreadsContext, l as useCoAgentStateRenders, lt as useRenderCustomMessages, m as useCopilotMessagesContext, mt as defineToolCallRenderer, n as defaultCopilotContextCategories, nt as useAgent, o as useThreads, p as CopilotMessagesContext, r as CoAgentStateRenderBridge, rt as useHumanInTheLoop$1, s as CoAgentStateRendersContext, st as useFrontendTool$1, t as CopilotKit, u as useAsyncCallback } from "./copilotkit-qK-Q3rmE.mjs";
 import React, { Fragment, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { CopilotKitCoreRuntimeConnectionStatus, ToolCallStatus } from "@copilotkit/core";
 import { AGUIConnectNotImplementedError, HttpAgent } from "@ag-ui/client";

package/dist/index.umd.js

@@ -1,10 +1,10 @@
 "use client";
 
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('react'), require('@copilotkit/core'), require('@ag-ui/client'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('zod'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('react-markdown'), require('@copilotkit/runtime-client-gql')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@copilotkit/core', '@ag-ui/client', '@copilotkit/shared', 'react/jsx-runtime', 'zod', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', 'react-markdown', '@copilotkit/runtime-client-gql'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCore = {}), global.React,global.CopilotKitCore,global.AgUIClient,global.CopilotKitShared,global.ReactJsxRuntime,global.Zod,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global.ReactMarkdown,global.CopilotKitRuntimeClientGQL));
-})(this, function(exports, react, _copilotkit_core, _ag_ui_client, _copilotkit_shared, react_jsx_runtime, zod, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, react_markdown, _copilotkit_runtime_client_gql) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('react'), require('@copilotkit/core'), require('@ag-ui/client'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('zod'), require('@copilotkit/mcp-apps-renderer/activity'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('react-markdown'), require('@copilotkit/runtime-client-gql')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@copilotkit/core', '@ag-ui/client', '@copilotkit/shared', 'react/jsx-runtime', 'zod', '@copilotkit/mcp-apps-renderer/activity', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', 'react-markdown', '@copilotkit/runtime-client-gql'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCore = {}), global.React,global.CopilotKitCore,global.AgUIClient,global.CopilotKitShared,global.ReactJsxRuntime,global.Zod,global.CopilotKitMcpAppsRendererActivity,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global.ReactMarkdown,global.CopilotKitRuntimeClientGQL));
+})(this, function(exports, react, _copilotkit_core, _ag_ui_client, _copilotkit_shared, react_jsx_runtime, zod, _copilotkit_mcp_apps_renderer_activity, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, react_markdown, _copilotkit_runtime_client_gql) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -773,197 +773,17 @@ react_markdown = __toESM(react_markdown);
 //#endregion
 //#region src/v2/components/MCPAppsActivityRenderer.tsx
 /**
-	* Run an MCP app `ui/message` follow-up, scoped to the thread it was enqueued
-	* for (issue #5819).
-	*
-	* The MCP request queue delays follow-up work until the agent is idle. There is
-	* a single shared registry agent per id, and switching threads overwrites its
-	* `threadId`/`messages` in place. So if the host switches threads while a
-	* follow-up is queued, running it now would execute against — and stream into —
-	* the now-foreground thread.
-	*
-	* - **Same thread** (the common case): run on the shared agent, unchanged.
-	* - **Thread changed**: the shared agent has moved on, so the follow-up can no
-	*   longer run in its originating thread's context. Drop it rather than leak it
-	*   into the current thread. (The MCP app already received its `ui/message` ack
-	*   at enqueue time; only the optional agent turn is skipped.)
-	*
-	* @internal exported for testing.
-	*/
-	async function ɵrunMcpFollowUp({ host, agent, capturedThreadId }) {
-		const currentThreadId = agent.threadId || "default";
-		const originThreadId = capturedThreadId || "default";
-		if (currentThreadId === originThreadId) return host.runAgent({ agent });
-		console.warn(`[MCPAppsRenderer] ui/message follow-up dropped: the thread changed (${originThreadId} → ${currentThreadId}) between enqueue and execution, so running it would leak into the now-foreground thread.`);
-		return {
-			result: void 0,
-			newMessages: []
-		};
-	}
-	function buildSandboxHTML(extraCspDomains) {
-		const baseScriptSrc = "'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*";
-		const baseFrameSrc = "* blob: data: http://localhost:* https://localhost:*";
-		const extra = extraCspDomains?.length ? " " + extraCspDomains.join(" ") : "";
-		return `<!doctype html>
-<html>
-<head>
-<meta charset="utf-8" />
-<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: blob: 'unsafe-inline'; media-src * blob: data:; font-src * blob: data:; script-src ${baseScriptSrc + extra}; style-src * blob: data: 'unsafe-inline'; connect-src *; frame-src ${baseFrameSrc + extra}; base-uri 'self';" />
-<style>html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden}*{box-sizing:border-box}iframe{background-color:transparent;border:none;padding:0;overflow:hidden;width:100%;height:100%}</style>
-</head>
-<body>
-<script>
-if(window.self===window.top){throw new Error("This file must be used in an iframe.")}
-const inner=document.createElement("iframe");
-inner.style="width:100%;height:100%;border:none;";
-inner.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms");
-document.body.appendChild(inner);
-window.addEventListener("message",async(event)=>{
-if(event.source===window.parent){
-if(event.data&&event.data.method==="ui/notifications/sandbox-resource-ready"){
-const{html,sandbox}=event.data.params;
-if(typeof sandbox==="string")inner.setAttribute("sandbox",sandbox);
-if(typeof html==="string")inner.srcdoc=html;
-}else if(inner&&inner.contentWindow){
-inner.contentWindow.postMessage(event.data,"*");
-}
-}else if(event.source===inner.contentWindow){
-window.parent.postMessage(event.data,"*");
-}
-});
-window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-ready",params:{}},"*");
-<\/script>
-</body>
-</html>`;
-	}
-	/**
-	* Queue for serializing MCP app requests to an agent.
-	* Ensures requests wait for the agent to stop running and are processed one at a time.
-	*/
-	var MCPAppsRequestQueue = class {
-		constructor() {
-			this.queues = /* @__PURE__ */ new Map();
-			this.processing = /* @__PURE__ */ new Map();
-		}
-		/**
-		* Add a request to the queue for a specific agent thread.
-		* Returns a promise that resolves when the request completes.
-		*/
-		async enqueue(agent, request) {
-			const threadId = agent.threadId || "default";
-			return new Promise((resolve, reject) => {
-				let queue = this.queues.get(threadId);
-				if (!queue) {
-					queue = [];
-					this.queues.set(threadId, queue);
-				}
-				queue.push({
-					execute: request,
-					resolve,
-					reject
-				});
-				this.processQueue(threadId, agent);
-			});
-		}
-		async processQueue(threadId, agent) {
-			if (this.processing.get(threadId)) return;
-			this.processing.set(threadId, true);
-			try {
-				const queue = this.queues.get(threadId);
-				if (!queue) return;
-				while (queue.length > 0) {
-					const item = queue[0];
-					try {
-						await this.waitForAgentIdle(agent);
-						const result = await item.execute();
-						item.resolve(result);
-					} catch (error) {
-						item.reject(error instanceof Error ? error : new Error(String(error)));
-					}
-					queue.shift();
-				}
-			} finally {
-				this.processing.set(threadId, false);
-			}
-		}
-		waitForAgentIdle(agent) {
-			return new Promise((resolve) => {
-				if (!agent.isRunning) {
-					resolve();
-					return;
-				}
-				let done = false;
-				const finish = () => {
-					if (done) return;
-					done = true;
-					clearInterval(checkInterval);
-					sub.unsubscribe();
-					resolve();
-				};
-				const sub = agent.subscribe({
-					onRunFinalized: finish,
-					onRunFailed: finish
-				});
-				const checkInterval = setInterval(() => {
-					if (!agent.isRunning) finish();
-				}, 500);
-			});
-		}
-	};
-	const mcpAppsRequestQueue = new MCPAppsRequestQueue();
-	const MCP_OPEN_LINK_BLOCKED_SCHEMES = new Set([
-		"javascript:",
-		"data:",
-		"vbscript:",
-		"blob:",
-		"file:"
-	]);
-	/**
-	* Activity type for MCP Apps events - must match the middleware's MCPAppsActivityType
-	*/
-	const MCPAppsActivityType = "mcp-apps";
-	const MCPAppsActivityContentSchema = zod.z.object({
-		result: zod.z.object({
-			content: zod.z.array(zod.z.any()).optional(),
-			structuredContent: zod.z.any().optional(),
-			isError: zod.z.boolean().optional()
-		}),
-		resourceUri: zod.z.string(),
-		serverHash: zod.z.string(),
-		serverId: zod.z.string().optional(),
-		toolInput: zod.z.record(zod.z.string(), zod.z.unknown()).optional()
-	});
-	/**
 	* MCP Apps Extension Activity Renderer
 	*
 	* Renders MCP Apps UI in a sandboxed iframe with full protocol support.
-	* Fetches resource content on-demand via proxied MCP requests.
+	* Fetches resource content on-demand via proxied MCP requests. The React shell
+	* owns the iframe; `bindMcpApp` owns the protocol.
 	*/
-	/**
-	* Permissive `ui/message` schema. ext-apps restricts the request to
-	* `role: "user"` with no `followUp`, but CopilotKit intentionally extends
-	* `ui/message` with `role` ("user" | "assistant") and `followUp` (documented
-	* behavior with dedicated tests). We register our own handler (instead of the
-	* bridge's strict `onmessage`) so those extensions survive the migration.
-	*
-	* Going forward, widgets SHOULD pass the extensions under
-	* `params._meta.copilotkit`; the top-level `role`/`followUp` fields are the
-	* legacy channel, kept for backward compatibility and slated for deprecation.
-	*/
-	const CopilotKitUiMessageSchema = zod.z.object({
-		method: zod.z.literal("ui/message"),
-		params: zod.z.object({
-			role: zod.z.string().optional(),
-			content: zod.z.array(zod.z.any()).optional(),
-			followUp: zod.z.boolean().optional(),
-			_meta: zod.z.record(zod.z.string(), zod.z.any()).optional()
-		}).passthrough()
-	});
 	const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agent }) {
 		const { copilotkit } = useCopilotKit();
 		const containerRef = (0, react.useRef)(null);
 		const iframeRef = (0, react.useRef)(null);
-		const [iframeReady, setIframeReady] = (0, react.useState)(false);
+		const sessionRef = (0, react.useRef)(null);
 		const [error, setError] = (0, react.useState)(null);
 		const [isLoading, setIsLoading] = (0, react.useState)(true);
 		const [iframeSize, setIframeSize] = (0, react.useState)({});
@@ -972,207 +792,81 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		contentRef.current = content;
 		const agentRef = (0, react.useRef)(agent);
 		agentRef.current = agent;
-		const bridgeRef = (0, react.useRef)(null);
-		const fetchStateRef = (0, react.useRef)({
-			inProgress: false,
-			promise: null,
-			resourceUri: null
-		});
 		(0, react.useEffect)(() => {
-			const { resourceUri, serverHash, serverId } = content;
-			if (fetchStateRef.current.inProgress && fetchStateRef.current.resourceUri === resourceUri) {
-				fetchStateRef.current.promise?.then((resource) => {
-					if (resource) {
-						setFetchedResource(resource);
-						setIsLoading(false);
-					}
-				}).catch((err) => {
-					setError(err instanceof Error ? err : new Error(String(err)));
-					setIsLoading(false);
-				});
-				return;
-			}
+			const container = containerRef.current;
+			if (!container) return;
 			if (!agent) {
 				setError(/* @__PURE__ */ new Error("No agent available to fetch resource"));
 				setIsLoading(false);
 				return;
 			}
-			fetchStateRef.current.inProgress = true;
-			fetchStateRef.current.resourceUri = resourceUri;
-			const fetchPromise = (async () => {
-				try {
-					const resource = (await mcpAppsRequestQueue.enqueue(agent, () => agent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
-						serverHash,
-						serverId,
-						method: "resources/read",
-						params: { uri: resourceUri }
-					} } }))).result?.contents?.[0];
-					if (!resource) throw new Error("No resource content in response");
-					return resource;
-				} catch (err) {
-					console.error("[MCPAppsRenderer] Failed to fetch resource:", err);
-					throw err;
-				} finally {
-					fetchStateRef.current.inProgress = false;
-				}
-			})();
-			fetchStateRef.current.promise = fetchPromise;
-			fetchPromise.then((resource) => {
-				if (resource) {
-					setFetchedResource(resource);
-					setIsLoading(false);
-				}
-			}).catch((err) => {
-				setError(err instanceof Error ? err : new Error(String(err)));
-				setIsLoading(false);
-			});
-		}, [agent, content]);
-		(0, react.useEffect)(() => {
-			if (isLoading || !fetchedResource) return;
-			const container = containerRef.current;
-			if (!container) return;
 			let mounted = true;
-			let bridge = null;
-			let createdIframe = null;
+			setIsLoading(true);
+			setError(null);
+			const iframe = document.createElement("iframe");
+			iframe.style.width = "100%";
+			iframe.style.height = "100px";
+			iframe.style.border = "none";
+			iframe.style.backgroundColor = "transparent";
+			iframe.style.display = "block";
+			container.appendChild(iframe);
+			iframeRef.current = iframe;
 			const setup = async () => {
 				try {
-					const bridgeModule = await import("@modelcontextprotocol/ext-apps/app-bridge").catch((importErr) => {
-						throw new Error("MCP Apps require '@modelcontextprotocol/ext-apps' and its peer '@modelcontextprotocol/sdk'. Install them with: npm install @modelcontextprotocol/ext-apps @modelcontextprotocol/sdk", { cause: importErr });
-					});
-					if (!mounted) return;
-					const { AppBridge, PostMessageTransport } = bridgeModule;
-					const iframe = document.createElement("iframe");
-					createdIframe = iframe;
-					iframe.style.width = "100%";
-					iframe.style.height = "100px";
-					iframe.style.border = "none";
-					iframe.style.backgroundColor = "transparent";
-					iframe.style.display = "block";
-					iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
-					iframe.setAttribute("data-testid", "mcp-app-iframe");
-					iframe.setAttribute("title", "Interactive MCP application");
-					const cspDomains = fetchedResource._meta?.ui?.csp?.resourceDomains;
-					iframe.srcdoc = buildSandboxHTML(cspDomains);
-					iframeRef.current = iframe;
-					container.appendChild(iframe);
-					const win = iframe.contentWindow;
-					if (!win) throw new Error("Sandbox iframe has no contentWindow");
-					let html;
-					if (fetchedResource.text) html = fetchedResource.text;
-					else if (fetchedResource.blob) html = atob(fetchedResource.blob);
-					else throw new Error("Resource has no text or blob content");
-					bridge = new AppBridge(null, {
-						name: "CopilotKit MCP Apps Host",
-						version: "1.0.0"
-					}, {
-						openLinks: {},
-						logging: {},
-						message: { text: {} }
-					}, { hostContext: {
-						theme: "light",
-						platform: "web"
-					} });
-					bridge.onsandboxready = () => {
-						bridge?.sendSandboxResourceReady({ html });
-					};
-					bridge.setRequestHandler(CopilotKitUiMessageSchema, async (req) => {
-						const currentAgent = agentRef.current;
-						if (!currentAgent) {
-							console.warn("[MCPAppsRenderer] ui/message: No agent available");
-							return { isError: false };
-						}
-						try {
-							const params = req.params;
-							const ck = params._meta?.copilotkit ?? {};
-							const role = ck.role || params.role || "user";
-							const textContent = params.content?.filter((c) => c.type === "text" && c.text).map((c) => c.text).join("\n") || "";
-							if (textContent) currentAgent.addMessage({
-								id: crypto.randomUUID(),
-								role,
-								content: textContent
-							});
-							if ((ck.followUp ?? params.followUp ?? role === "user") && textContent) {
-								const capturedThreadId = currentAgent.threadId || "default";
-								mcpAppsRequestQueue.enqueue(currentAgent, () => ɵrunMcpFollowUp({
-									host: copilotkit,
-									agent: currentAgent,
-									capturedThreadId
-								})).catch((err) => console.error("[MCPAppsRenderer] ui/message agent run failed:", err));
-							}
-							return { isError: false };
-						} catch (err) {
-							console.error("[MCPAppsRenderer] ui/message error:", err);
-							return { isError: true };
-						}
+					const mod = await import("@copilotkit/mcp-apps-renderer").catch((importErr) => {
+						throw new Error("MCP Apps require '@copilotkit/mcp-apps-renderer' and its '@modelcontextprotocol/ext-apps' dependency. Reinstall your dependencies if this package is missing.", { cause: importErr });
 					});
-					bridge.onopenlink = async ({ url }) => {
-						let parsed;
-						try {
-							parsed = new URL(url);
-						} catch {
-							console.warn("[MCPAppsRenderer] ui/open-link rejected: unparseable url");
-							return { isError: true };
-						}
-						if (MCP_OPEN_LINK_BLOCKED_SCHEMES.has(parsed.protocol)) {
-							console.warn("[MCPAppsRenderer] ui/open-link rejected: blocked scheme", parsed.protocol);
-							return { isError: true };
-						}
-						window.open(url, "_blank", "noopener,noreferrer");
-						return { isError: false };
-					};
-					bridge.oncalltool = async (params) => {
-						const { serverHash, serverId } = contentRef.current;
-						const currentAgent = agentRef.current;
-						if (!serverHash) throw new Error("No server hash available for proxying");
-						if (!currentAgent) throw new Error("No agent available for proxying");
-						return (await mcpAppsRequestQueue.enqueue(currentAgent, () => currentAgent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
-							serverHash,
-							serverId,
-							method: "tools/call",
-							params
-						} } }))).result || { content: [] };
-					};
-					bridge.onsizechange = (p) => {
-						if (!mounted) return;
-						const { width, height } = p || {};
-						setIframeSize({
-							width: typeof width === "number" ? width : void 0,
-							height: typeof height === "number" ? height : void 0
-						});
-					};
-					bridge.oninitialized = () => {
-						if (mounted) setIframeReady(true);
-					};
-					bridge.onloggingmessage = (p) => {
-						console.log("[MCPAppsRenderer] App log:", p);
-					};
-					const transport = new PostMessageTransport(win, win);
-					await bridge.connect(transport);
 					if (!mounted) {
-						await bridge.close();
+						iframe.remove();
 						return;
 					}
-					bridgeRef.current = bridge;
+					const session = mod.bindMcpApp({
+						iframe,
+						getContent: () => contentRef.current,
+						getAgent: () => agentRef.current,
+						host: copilotkit,
+						hooks: {
+							onResource: (resource) => {
+								if (!mounted) return;
+								setFetchedResource(resource);
+								setIsLoading(false);
+							},
+							onSizeChanged: (size) => {
+								if (mounted) setIframeSize(size);
+							},
+							onError: (err) => {
+								if (!mounted) return;
+								setError(err);
+								setIsLoading(false);
+							}
+						}
+					});
+					sessionRef.current = session;
+					const current = contentRef.current;
+					if (current.toolInput) session.sendToolInput(current.toolInput);
+					if (current.result) session.sendToolResult(current.result);
 				} catch (err) {
 					console.error("[MCPAppsRenderer] Setup error:", err);
-					if (mounted) setError(err instanceof Error ? err : new Error(String(err)));
+					if (mounted) {
+						setError(err instanceof Error ? err : new Error(String(err)));
+						setIsLoading(false);
+					}
 				}
 			};
 			setup();
 			return () => {
 				mounted = false;
-				bridgeRef.current = null;
-				bridge?.close();
-				if (createdIframe) {
-					createdIframe.remove();
-					createdIframe = null;
-				}
+				sessionRef.current?.teardown();
+				sessionRef.current = null;
+				iframe.remove();
 				iframeRef.current = null;
 			};
 		}, [
-			isLoading,
-			fetchedResource,
-			copilotkit
+			agent,
+			copilotkit,
+			content.resourceUri,
+			content.serverHash,
+			content.serverId
 		]);
 		(0, react.useEffect)(() => {
 			if (iframeRef.current) {
@@ -1184,11 +878,11 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			}
 		}, [iframeSize]);
 		(0, react.useEffect)(() => {
-			if (iframeReady && content.toolInput) bridgeRef.current?.sendToolInput({ arguments: content.toolInput });
-		}, [iframeReady, content.toolInput]);
+			if (content.toolInput) sessionRef.current?.sendToolInput(content.toolInput);
+		}, [content.toolInput]);
 		(0, react.useEffect)(() => {
-			if (iframeReady && content.result) bridgeRef.current?.sendToolResult(content.result);
-		}, [iframeReady, content.result]);
+			if (content.result) sessionRef.current?.sendToolResult(content.result);
+		}, [content.result]);
 		const borderStyle = fetchedResource?._meta?.ui?.prefersBorder === true ? {
 			borderRadius: "8px",
 			backgroundColor: "#f9f9f9",
@@ -2575,8 +2269,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		}, [rawCatalog, catalogToggleVersion]);
 		const builtInActivityRenderers = (0, react.useMemo)(() => {
 			const renderers = [{
-				activityType: MCPAppsActivityType,
-				content: MCPAppsActivityContentSchema,
+				activityType: _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityType,
+				content: _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityContentSchema,
 				render: MCPAppsActivityRenderer
 			}];
 			if (openGenUIActive) renderers.push({