@copilotkit/vue 1.76.0 → 1.77.1

package/src/v2/components/__tests__/MCPAppsActivityRenderer.test.ts

@@ -48,6 +48,32 @@ async function flushAsync() {
   await nextTick();
 }
 
+/**
+ * Wait for the sandbox iframe to be configured by the shared session. The host
+ * mounts the iframe synchronously, but the bridge package is loaded through a
+ * dynamic import and the resource is fetched through the agent, so `srcdoc` (and
+ * the sandbox contract attributes) land a few macrotasks later.
+ */
+async function waitForSandboxIframe(wrapper: {
+  find: (selector: string) => { exists: () => boolean; element: Element };
+}): Promise<HTMLIFrameElement> {
+  let iframe: HTMLIFrameElement | undefined;
+  await vi.waitFor(
+    () => {
+      const found = wrapper.find("iframe");
+      expect(found.exists()).toBe(true);
+      const element = found.element as HTMLIFrameElement;
+      expect(element.srcdoc).toBeTruthy();
+      iframe = element;
+    },
+    // The bridge arrives through a dynamic import, so this waits on real module
+    // loading rather than a microtask. `vi.waitFor`'s 1s default is enough in
+    // isolation but not when the whole monorepo's suites run in parallel.
+    { timeout: 10_000, interval: 50 },
+  );
+  return iframe!;
+}
+
 describe("MCPAppsActivityRenderer", () => {
   it("exports the expected activity type and schema", () => {
     expect(MCPAppsActivityType).toBe("mcp-apps");
@@ -80,8 +106,8 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-1",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent: undefined,
@@ -123,8 +149,8 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-no-border",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
@@ -174,18 +200,15 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-csp",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
       },
     });
 
-    await flushAsync();
-    await flushAsync();
-
-    const iframe = wrapper.find("iframe").element as HTMLIFrameElement;
+    const iframe = await waitForSandboxIframe(wrapper);
     expect(iframe.srcdoc).toContain("script-src");
     expect(iframe.srcdoc).toContain("frame-src");
     expect(iframe.srcdoc).toContain("https://widgets.example.com");
@@ -214,18 +237,15 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-default-csp",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
       },
     });
 
-    await flushAsync();
-    await flushAsync();
-
-    const iframe = wrapper.find("iframe").element as HTMLIFrameElement;
+    const iframe = await waitForSandboxIframe(wrapper);
     expect(iframe.srcdoc).toContain(
       "script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*;",
     );
@@ -260,16 +280,15 @@ describe("MCPAppsActivityRenderer", () => {
         },
         message: {
           id: "activity-testid",
-          role: "assistant",
-          content: "",
+          role: "activity",
+          content: {},
           activityType: MCPAppsActivityType,
         },
         agent,
       },
     });
 
-    await flushAsync();
-    await flushAsync();
+    await waitForSandboxIframe(wrapper);
 
     const iframe = wrapper.find('iframe[data-testid="mcp-app-iframe"]');
     expect(iframe.exists()).toBe(true);

package/src/v2/components/__tests__/MCPAppsActivityRendererContentError.test.ts

@@ -0,0 +1,122 @@
+/**
+ * A content rejection is RECOVERABLE: the session reports it through
+ * `onContentError` and, once valid content resumes, calls it again with `null`.
+ * The adapter must clear the message then - otherwise the widget starts working
+ * again while the host still shows a stale error until the next bind.
+ */
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import type { AbstractAgent } from "@ag-ui/client";
+
+// Capture the hooks the adapter hands to the session, so the test can drive the
+// recoverable/fatal channels directly.
+const { bindMcpAppSpy, sessionSpy } = vi.hoisted(() => {
+  const session = {
+    sendToolInput: vi.fn(),
+    sendToolResult: vi.fn(),
+    syncContent: vi.fn(),
+    teardown: vi.fn(),
+  };
+  return { bindMcpAppSpy: vi.fn(() => session), sessionSpy: session };
+});
+
+vi.mock("@copilotkit/mcp-apps-renderer", () => ({
+  bindMcpApp: bindMcpAppSpy,
+}));
+
+vi.mock("../../providers/useCopilotKit", () => ({
+  useCopilotKit: () => ({
+    copilotkit: { value: { runAgent: vi.fn() } },
+  }),
+}));
+
+import {
+  MCPAppsActivityRenderer,
+  MCPAppsActivityType,
+} from "../MCPAppsActivityRenderer";
+
+function createAgentMock(): AbstractAgent {
+  return {
+    threadId: "content-error-thread",
+    isRunning: false,
+    messages: [],
+    runAgent: vi.fn().mockResolvedValue({ result: { contents: [] } }),
+    addMessage: vi.fn(),
+    subscribe: vi.fn(() => ({ unsubscribe: vi.fn() })),
+  } as unknown as AbstractAgent;
+}
+
+function mountRenderer() {
+  return mount(MCPAppsActivityRenderer, {
+    props: {
+      activityType: MCPAppsActivityType,
+      content: {
+        resourceUri: "ui://server/app",
+        serverHash: "hash",
+        result: { content: [] },
+      },
+      message: {
+        id: "activity-1",
+        role: "activity",
+        content: {},
+        activityType: MCPAppsActivityType,
+      },
+      agent: createAgentMock(),
+    },
+  });
+}
+
+/** The hooks object passed to the most recent bindMcpApp call. */
+async function capturedHooks() {
+  await vi.waitFor(() => expect(bindMcpAppSpy).toHaveBeenCalled());
+  const options = bindMcpAppSpy.mock.calls.at(-1)![0] as {
+    hooks?: {
+      onContentError?: (err: Error | null) => void;
+      onError?: (err: Error) => void;
+    };
+  };
+  return options.hooks!;
+}
+
+describe("MCPAppsActivityRenderer content error recovery", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows a rejected-content error and clears it when valid content resumes", async () => {
+    const wrapper = mountRenderer();
+    const hooks = await capturedHooks();
+
+    // valid -> nothing shown
+    expect(wrapper.text()).not.toContain("Error:");
+
+    // invalid -> the rejection is visible
+    hooks.onContentError!(new Error("content does not match the schema"));
+    await nextTick();
+    expect(wrapper.text()).toContain("content does not match the schema");
+
+    // valid again -> the message disappears
+    hooks.onContentError!(null);
+    await nextTick();
+    expect(wrapper.text()).not.toContain("content does not match the schema");
+    expect(wrapper.text()).not.toContain("Error:");
+  });
+
+  it("keeps a fatal session error on screen", async () => {
+    const wrapper = mountRenderer();
+    const hooks = await capturedHooks();
+
+    hooks.onError!(new Error("No resource content in response"));
+    await nextTick();
+    expect(wrapper.text()).toContain("No resource content in response");
+
+    // Clearing the recoverable channel must not clear a fatal error.
+    hooks.onContentError!(null);
+    await nextTick();
+    expect(wrapper.text()).toContain("No resource content in response");
+  });
+});
+
+// Referenced so the session stub is not tree-shaken out of the mock factory.
+void sessionSpy;

package/src/v2/components/__tests__/MCPAppsActivityRendererSeed.test.ts

@@ -0,0 +1,109 @@
+/**
+ * Vue counterpart of react-core's `MCPAppsActivityRendererSeed.test.tsx`.
+ *
+ * The session is self-driving: given a `messageId`, it subscribes to the agent's
+ * message store and pushes tool input/result to the widget itself. That store is
+ * authoritative only for activities that live in it - a host can render an
+ * activity from an EXTERNAL messages list (absent from `agent.messages`), whose
+ * props may never change after mount. For those, the adapter must seed the
+ * widget by calling `session.syncContent(props.content)` immediately after
+ * binding, otherwise the widget would never receive its initial content.
+ */
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import type { AbstractAgent } from "@ag-ui/client";
+
+// Capture the bindMcpApp options and the returned session's calls. Hoisted so
+// the vi.mock factory (which is itself hoisted above imports) can reference them.
+const { bindMcpAppSpy, sessionSpy } = vi.hoisted(() => {
+  const session = {
+    sendToolInput: vi.fn(),
+    sendToolResult: vi.fn(),
+    syncContent: vi.fn(),
+    teardown: vi.fn(),
+  };
+  const bind = vi.fn(() => session);
+  return { bindMcpAppSpy: bind, sessionSpy: session };
+});
+
+// Only the bridge-carrying root entry is mocked; the bridge-free `/activity`
+// entry (activity type + content schema) stays real, as in the React test.
+vi.mock("@copilotkit/mcp-apps-renderer", () => ({
+  bindMcpApp: bindMcpAppSpy,
+}));
+
+vi.mock("../../providers/useCopilotKit", () => ({
+  useCopilotKit: () => ({
+    copilotkit: { value: { runAgent: vi.fn() } },
+  }),
+}));
+
+import {
+  MCPAppsActivityRenderer,
+  MCPAppsActivityType,
+} from "../MCPAppsActivityRenderer";
+import type { MCPAppsActivityContent } from "../MCPAppsActivityRenderer";
+
+function createAgentMock(): AbstractAgent {
+  return {
+    threadId: "seed-thread",
+    isRunning: false,
+    // The activity under test is NOT in the store: this is the external
+    // messages-list case the seed exists for.
+    messages: [],
+    runAgent: vi.fn().mockResolvedValue({ result: { contents: [] } }),
+    addMessage: vi.fn(),
+    subscribe: vi.fn(() => ({ unsubscribe: vi.fn() })),
+  } as unknown as AbstractAgent;
+}
+
+const content: MCPAppsActivityContent = {
+  resourceUri: "ui://server/external",
+  serverHash: "hash-external",
+  toolInput: { city: "Paris" },
+  result: { content: [{ type: "text", text: "Forecast" }], isError: false },
+} as MCPAppsActivityContent;
+
+function mountRenderer() {
+  return mount(MCPAppsActivityRenderer, {
+    props: {
+      activityType: MCPAppsActivityType,
+      content,
+      message: {
+        id: "external-activity-1",
+        role: "activity",
+        content: {},
+        activityType: MCPAppsActivityType,
+      },
+      agent: createAgentMock(),
+    },
+  });
+}
+
+describe("MCPAppsActivityRenderer external-activity seed", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("passes the activity messageId to the bridge for self-subscription", async () => {
+    mountRenderer();
+
+    await vi.waitFor(() => expect(bindMcpAppSpy).toHaveBeenCalledTimes(1));
+    const opts = bindMcpAppSpy.mock.calls[0]![0];
+    expect(opts.messageId).toBe("external-activity-1");
+  });
+
+  it("seeds the widget with the initial tool input/result right after binding, even when props never change", async () => {
+    mountRenderer();
+
+    // The content watcher does not re-run for unchanged props, so without the
+    // explicit seed the widget would never receive this initial content.
+    await vi.waitFor(() => expect(sessionSpy.syncContent).toHaveBeenCalled());
+    expect(sessionSpy.syncContent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        toolInput: { city: "Paris" },
+        resourceUri: "ui://server/external",
+      }),
+    );
+  });
+});

package/src/v2/components/chat/CopilotPopupViewInternal.vue

@@ -352,7 +352,7 @@ onBeforeUnmount(() => {
   <div
     v-if="isRendered"
     data-copilotkit
-    class="cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"
+    class="cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:bg-transparent cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"
   >
     <div
       ref="containerRef"

package/src/v2/components/chat/__tests__/CopilotPopupView.slots.e2e.test.ts

@@ -540,6 +540,26 @@ describe("CopilotPopupView Slot System E2E Tests", () => {
   });
 
   describe("8. Integration Tests", () => {
+    it("keeps the transparent-background utility on the positioning wrapper", () => {
+      const Host = defineComponent({
+        components: { CopilotPopupView },
+        setup() {
+          return { sampleMessages };
+        },
+        template: `<CopilotPopupView :messages="sampleMessages" :default-open="true" />`,
+      });
+
+      const { container } = renderInWrapper(Host);
+      const popup = container.querySelector("[data-copilot-popup]");
+      const positioningWrapper = popup?.parentElement;
+
+      expect(positioningWrapper?.hasAttribute("data-copilotkit")).toBe(true);
+      // jsdom does not load the generated stylesheet; this guards the utility-class contract only.
+      expect(positioningWrapper?.classList.contains("cpk:bg-transparent")).toBe(
+        true,
+      );
+    });
+
     it("should render popup with all default components when open", () => {
       const Host = defineComponent({
         components: { CopilotPopupView },

package/src/v2/providers/CopilotKitProvider.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { GENERATE_SANDBOXED_UI_DESCRIPTION } from "@copilotkit/shared";
 import {
   computed,
   h,
@@ -88,20 +89,6 @@ const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follo
 - Minimal transitions (150ms) for hover/focus states only. No decorative animations.
 - Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
 
-const GENERATE_SANDBOXED_UI_DESCRIPTION =
-  "Generate sandboxed UI. " +
-  "IMPORTANT: The generated code runs in a sandboxed iframe WITHOUT same-origin access. " +
-  "Do NOT use localStorage, sessionStorage, document.cookie, IndexedDB, or fetch/XMLHttpRequest to same-origin URLs. " +
-  "To communicate with the host application, use Websandbox.connection.remote.<functionName>(args) which returns a Promise.\n\n" +
-  "You CAN use external libraries from CDNs by including <script> or <link> tags in the HTML <head> (e.g., Chart.js, D3, Three.js, x-data-spreadsheet, etc.). " +
-  "CDN resources load normally inside the sandbox.\n\n" +
-  "PARAMETER ORDER IS CRITICAL — generate parameters in exactly this order:\n" +
-  "1. initialHeight + placeholderMessages (shown to user while generating)\n" +
-  "2. css (all styles FIRST — the user sees a placeholder until CSS is complete)\n" +
-  "3. html (streams in live — the user watches the UI build as HTML is generated)\n" +
-  "4. jsFunctions (reusable helper functions)\n" +
-  "5. jsExpressions (applied one-by-one — the user sees each expression take effect)";
-
 const props = withDefaults(defineProps<CopilotKitProviderProps>(), {
   headers: () => ({}),
   properties: () => ({}),

package/vite.config.ts

@@ -29,6 +29,13 @@ export default defineConfig({
         "@ag-ui/client",
         "@ag-ui/core",
         "@copilotkit/core",
+        // Keep the shared MCP Apps host + its subpaths external. The root entry
+        // carries the ext-apps AppBridge and is loaded through a dynamic
+        // import() in the renderer, so it must stay a real runtime import (not
+        // be inlined, which would pull the bridge into the eager chunk and undo
+        // the lazy-loading); `/activity` is the bridge-free surface imported
+        // statically for activity registration.
+        /^@copilotkit\/mcp-apps-renderer(\/.*)?$/,
         "@copilotkit/shared",
         "@copilotkit/web-inspector",
         // Keep @copilotkit/web-components (the Lit drawer element) + its subpaths