@copilotkit/vue 2.0.0-rc.20 → 2.0.0-rc.21

package/src/v2/components/MCPAppsActivityRenderer.ts

@@ -1,4 +1,12 @@
-import { computed, defineComponent, h, ref, shallowRef, watch } from "vue";
+import {
+  computed,
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch,
+} from "vue";
 import type { PropType } from "vue";
 import type { AbstractAgent } from "@ag-ui/client";
 import type { VueActivityMessageRendererProps } from "../types";
@@ -27,12 +35,8 @@ export type {
 } from "@copilotkit/mcp-apps-renderer/activity";
 
 import type { MCPAppsActivityContent } from "@copilotkit/mcp-apps-renderer/activity";
-// Type-only imports: erased at build, so they never pull the ext-apps bridge
-// into the bundle. Only the dynamic import() below does, and only lazily.
-import type {
-  McpAppSession,
-  FetchedResource,
-} from "@copilotkit/mcp-apps-renderer";
+import { ɵMcpAppHost } from "@copilotkit/mcp-apps-renderer/activity";
+import type { ɵMcpAppHostState } from "@copilotkit/mcp-apps-renderer/activity";
 
 /**
  * MCP Apps Extension Activity Renderer
@@ -77,213 +81,82 @@ export const MCPAppsActivityRenderer = defineComponent({
   setup(props) {
     const { copilotkit } = useCopilotKit();
     const containerRef = ref<HTMLDivElement | null>(null);
-    // UI-only state: plain refs are fine (no agent-bound payload crosses here).
-    const error = ref<Error | null>(null);
-    // Recoverable: an activity update the content schema rejected, from the
-    // store or from props. Cleared as soon as valid content resumes, unlike
-    // `error`, which is a fatal setup failure.
-    const contentError = ref<Error | null>(null);
-    const isLoading = ref(true);
-    const iframeSize = ref<{ width?: number; height?: number }>({});
-    // shallowRef for externally-owned objects: the session, the iframe element
-    // and the fetched resource must never be wrapped in a reactive proxy (the
-    // resource crosses into the widget, and proxies are not clone-safe).
-    const iframeRef = shallowRef<HTMLIFrameElement | null>(null);
-    const sessionRef = shallowRef<McpAppSession | null>(null);
-    const fetchedResource = shallowRef<FetchedResource | null>(null);
-
-    // The activity message id. Passed to the session so it self-subscribes to
-    // the agent's activity stream and pushes tool input/result itself (this
-    // adapter does not forward store-backed activities).
-    const messageId = computed(() => props.message?.id);
+    // The shared host owns the iframe, its size and its state, and binds the
+    // protocol session (loaded lazily); this component only draws the state.
+    const app = shallowRef<ɵMcpAppHost | null>(null);
+    // Set by the immediate watcher below, before the first render.
+    const state = shallowRef<ɵMcpAppHostState>({
+      loading: true,
+      error: null,
+      contentError: null,
+      size: {},
+      prefersBorder: false,
+    });
+    let unsubscribe: () => void = () => undefined;
 
-    // Create the sandbox iframe and bind the MCP session. Re-binds only when the
-    // widget identity (resourceUri/serverHash/serverId) or the agent/host/message
-    // changes - NOT when tool input/result stream in (those are pushed without
-    // recreating the iframe). `flush: "post"` so the container element is mounted
-    // when the callback runs.
+    // A new host or sandbox setting needs a new host object.
     watch(
-      [
-        // The container element is a watch source, not just a read: `immediate`
-        // runs the callback synchronously at setup, before the template ref is
-        // populated. Watching it re-runs the bind once the element mounts.
-        containerRef,
-        () => props.agent,
-        () => copilotkit.value,
-        messageId,
-        () => props.content.resourceUri,
-        () => props.content.serverHash,
-        () => props.content.serverId,
-        () => props.allowSameOriginFallback,
-      ],
-      ([container, agent], _old, onCleanup) => {
-        if (!agent) {
-          error.value = new Error("No agent available to fetch resource");
-          isLoading.value = false;
-          return;
-        }
-        if (!container) {
-          return;
-        }
-
-        let mounted = true;
-        isLoading.value = true;
-        error.value = null;
-        contentError.value = null;
-        iframeSize.value = {};
-        fetchedResource.value = null;
-
-        // The host owns the iframe: create + mount it here (bindMcpApp only
-        // configures the sandbox contract + talks to it through the bridge).
-        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.value = iframe;
-
-        // Register cleanup BEFORE the async import: if this watcher is
-        // invalidated (props change / unmount) while the import is in flight,
-        // `mounted` is already false when it resolves, so we never bind.
-        onCleanup(() => {
-          mounted = false;
-          sessionRef.value?.teardown();
-          sessionRef.value = null;
-          iframe.remove();
-          if (iframeRef.value === iframe) {
-            iframeRef.value = null;
-          }
+      [() => copilotkit.value, () => props.allowSameOriginFallback],
+      ([core, allowSameOriginFallback]) => {
+        unsubscribe();
+        app.value?.destroy();
+        const created = new ɵMcpAppHost({
+          host: core,
+          sessionOptions: { allowSameOriginFallback },
+          importRenderer: () => import("@copilotkit/mcp-apps-renderer"),
         });
-
-        const setup = async () => {
-          try {
-            // Load the bridge package lazily. The bridge is heavy (it pulls the
-            // MCP SDK Protocol + zod schemas, ~40-50 kB gzipped); keeping it
-            // behind a dynamic import() means a non-MCP app never pays for it.
-            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 },
-                );
-              },
-            );
-            if (!mounted) return;
-
-            const session = mod.bindMcpApp({
-              iframe,
-              getContent: () => props.content,
-              getAgent: () => props.agent,
-              host: copilotkit.value,
-              // Self-driving: the session subscribes to the agent's activity
-              // stream (filtered by messageId) and pushes tool input/result to
-              // the widget itself, so this adapter does not forward STORE-backed
-              // activities. It still calls syncContent for activities rendered
-              // from an external messages list (see the seed below).
-              messageId: messageId.value,
-              options: {
-                allowSameOriginFallback: props.allowSameOriginFallback,
-              },
-              hooks: {
-                onResource: (resource) => {
-                  if (!mounted) return;
-                  fetchedResource.value = resource;
-                  isLoading.value = false;
-                },
-                onSizeChanged: (size) => {
-                  if (mounted) iframeSize.value = size;
-                },
-                onContentError: (err) => {
-                  if (mounted) contentError.value = err;
-                },
-                onError: (err) => {
-                  if (!mounted) return;
-                  error.value = err;
-                  isLoading.value = false;
-                },
-              },
-            });
-            sessionRef.value = session;
-            // Seed the initial content now: the content watcher below does not
-            // re-run for unchanged props, so an activity rendered from an
-            // EXTERNAL messages list (absent from agent.messages) would never
-            // receive its initial tool input/result. Deduped + store precedence
-            // make this a no-op for agent-backed activities.
-            session.syncContent(props.content);
-          } catch (err) {
-            console.error("[MCPAppsRenderer] Setup error:", err);
-            if (mounted) {
-              error.value = err instanceof Error ? err : new Error(String(err));
-              isLoading.value = false;
-            }
-          }
-        };
-
-        void setup();
+        unsubscribe = created.subscribe(() => {
+          state.value = created.getState();
+        });
+        state.value = created.getState();
+        app.value = created;
       },
-      { immediate: true, flush: "post" },
+      { immediate: true },
     );
-
-    // Size the iframe when the widget reports a new content size.
+    // `flush: "post"` so the container element is mounted when this runs.
     watch(
-      iframeSize,
-      (size) => {
-        const iframe = iframeRef.value;
-        if (!iframe) return;
-        if (size.width !== undefined) {
-          // Use minWidth with min() to allow expansion but cap at 100%
-          iframe.style.minWidth = `min(${size.width}px, 100%)`;
-          iframe.style.width = "100%";
-        }
-        if (size.height !== undefined) {
-          iframe.style.height = `${size.height}px`;
-        }
+      [
+        app,
+        () => props.agent,
+        () => props.message?.id,
+        () => props.content,
+        containerRef,
+      ],
+      ([host, agent, messageId, content, container]) => {
+        if (!host) return;
+        host.setAgent(agent);
+        host.setMessageId(messageId);
+        host.setContent(content);
+        host.setContainer(container);
       },
-      { deep: true },
+      { immediate: true, flush: "post" },
     );
+    onBeforeUnmount(() => {
+      unsubscribe();
+      app.value?.destroy();
+    });
 
-    // Forward tool input/result from the content prop. The session is
-    // self-driving for activities that live in the agent's message store, but a
-    // host can render an activity from an EXTERNAL messages list that is absent
-    // from `agent.messages`; this keeps such widgets fed. `syncContent` is
-    // deduped and shares the subscription's dedup, so the agent-driven path
-    // never double-sends.
-    watch(
-      [() => props.content.toolInput, () => props.content.result],
-      () => {
-        sessionRef.value?.syncContent(props.content);
-      },
-      { deep: true },
+    // prefersBorder: true = border and background; otherwise none.
+    const borderStyle = computed(() =>
+      state.value.prefersBorder
+        ? {
+            borderRadius: "8px",
+            backgroundColor: "#f9f9f9",
+            border: "1px solid #e0e0e0",
+          }
+        : {},
     );
 
-    // Determine border styling based on prefersBorder metadata from fetched
-    // resource: true = show border/background, false = none, undefined = host
-    // decides (we default to none).
-    const borderStyle = computed(() => {
-      const prefersBorder = fetchedResource.value?._meta?.ui?.prefersBorder;
-      if (prefersBorder !== true) return {};
-      return {
-        borderRadius: "8px",
-        backgroundColor: "#f9f9f9",
-        border: "1px solid #e0e0e0",
-      };
-    });
-
-    return () =>
-      h(
+    return () => {
+      const { loading, error, contentError, size } = state.value;
+      const shownError = error ?? contentError;
+      return h(
         "div",
         {
           ref: containerRef,
           style: {
             width: "100%",
-            height:
-              iframeSize.value.height !== undefined
-                ? `${iframeSize.value.height}px`
-                : "auto",
+            height: size.height !== undefined ? `${size.height}px` : "auto",
             minHeight: "100px",
             overflow: "hidden",
             position: "relative",
@@ -291,22 +164,23 @@ export const MCPAppsActivityRenderer = defineComponent({
           },
         },
         [
-          isLoading.value
+          loading
             ? h(
                 "div",
                 { style: { padding: "1rem", color: "#666" } },
                 "Loading...",
               )
             : null,
-          error.value || contentError.value
+          shownError
             ? h(
                 "div",
                 { style: { color: "red", padding: "1rem" } },
-                `Error: ${(error.value ?? contentError.value)!.message}`,
+                `Error: ${shownError}`,
               )
             : null,
         ],
       );
+    };
   },
 });
 

package/src/v2/components/OpenGenerativeUIRenderer.ts

@@ -8,11 +8,13 @@ import {
   watch,
 } from "vue";
 import type { PropType } from "vue";
-import * as z from "zod";
 import {
   OPEN_GENERATIVE_UI_ACTIVITY_TYPE,
   ToolCallStatus,
+  ɵGENERATE_SANDBOXED_UI_ARGS_SCHEMA,
+  ɵOPEN_GENERATIVE_UI_CONTENT_SCHEMA,
   ɵOpenGenerativeUIController,
+  ɵPlaceholderCycler,
 } from "@copilotkit/core";
 import type {
   GenerateSandboxedUiArgs,
@@ -24,27 +26,14 @@ export type { GenerateSandboxedUiArgs, OpenGenerativeUIContent };
 
 export const OpenGenerativeUIActivityType = OPEN_GENERATIVE_UI_ACTIVITY_TYPE;
 
-export const OpenGenerativeUIContentSchema = z.object({
-  initialHeight: z.number().optional(),
-  generating: z.boolean().optional(),
-  css: z.string().optional(),
-  cssComplete: z.boolean().optional(),
-  html: z.array(z.string()).optional(),
-  htmlComplete: z.boolean().optional(),
-  jsFunctions: z.string().optional(),
-  jsFunctionsComplete: z.boolean().optional(),
-  jsExpressions: z.array(z.string()).optional(),
-  jsExpressionsComplete: z.boolean().optional(),
-}) satisfies z.ZodType<OpenGenerativeUIContent>;
+/** Validates Open Generative UI activity content (shared with React and Angular). */
+export const OpenGenerativeUIContentSchema = ɵOPEN_GENERATIVE_UI_CONTENT_SCHEMA;
 
-export const GenerateSandboxedUiArgsSchema = z.object({
-  initialHeight: z.number().optional(),
-  placeholderMessages: z.array(z.string()).optional(),
-  css: z.string().optional(),
-  html: z.string().optional(),
-  jsFunctions: z.string().optional(),
-  jsExpressions: z.array(z.string()).optional(),
-}) satisfies z.ZodType<GenerateSandboxedUiArgs>;
+/**
+ * Schema for the generateSandboxedUi tool call arguments (shared with React
+ * and Angular). It also describes the arguments to the model as JSON Schema.
+ */
+export const GenerateSandboxedUiArgsSchema = ɵGENERATE_SANDBOXED_UI_ARGS_SCHEMA;
 
 /**
  * Renders Open Generative UI content. The core controller throttles the
@@ -84,7 +73,7 @@ export const OpenGenerativeUIRenderer = defineComponent({
     });
 
     return () => {
-      const { phase, generating, height } = state.value;
+      const { phase, height, showSpinner, showOverlay } = state.value;
       const hasVisibleSandbox = phase !== "placeholder";
       return h(
         "div",
@@ -105,48 +94,57 @@ export const OpenGenerativeUIRenderer = defineComponent({
           },
         },
         [
-          !hasVisibleSandbox
-            ? h("div", { "data-testid": "open-generative-ui-placeholder" }, [
-                h(
-                  "svg",
-                  {
-                    width: "48",
-                    height: "48",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    style: { animation: "ck-spin 1s linear infinite" },
+          showOverlay
+            ? h(
+                "div",
+                {
+                  "data-testid": "open-generative-ui-progress-overlay",
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    zIndex: 10,
+                    pointerEvents: "all",
+                    backgroundColor: "rgba(255, 255, 255, 0.5)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
                   },
-                  [
-                    h("circle", {
-                      cx: "12",
-                      cy: "12",
-                      r: "10",
-                      stroke: "#e0e0e0",
-                      "stroke-width": "3",
-                    }),
-                    h("path", {
-                      d: "M12 2a10 10 0 0 1 10 10",
-                      stroke: "#999",
-                      "stroke-width": "3",
-                      "stroke-linecap": "round",
-                    }),
-                  ],
-                ),
-                h(
-                  "style",
-                  "@keyframes ck-spin { to { transform: rotate(360deg) } }",
-                ),
-              ])
-            : null,
-          generating
-            ? h("div", {
-                "data-testid": "open-generative-ui-progress-overlay",
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  backgroundColor: "rgba(255,255,255,0.45)",
                 },
-              })
+                showSpinner
+                  ? [
+                      h(
+                        "svg",
+                        {
+                          "data-testid": "open-generative-ui-spinner",
+                          width: "48",
+                          height: "48",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          style: { animation: "ck-spin 1s linear infinite" },
+                        },
+                        [
+                          h("circle", {
+                            cx: "12",
+                            cy: "12",
+                            r: "10",
+                            stroke: "#e0e0e0",
+                            "stroke-width": "3",
+                          }),
+                          h("path", {
+                            d: "M12 2a10 10 0 0 1 10 10",
+                            stroke: "#999",
+                            "stroke-width": "3",
+                            "stroke-linecap": "round",
+                          }),
+                        ],
+                      ),
+                      h(
+                        "style",
+                        "@keyframes ck-spin { to { transform: rotate(360deg) } }",
+                      ),
+                    ]
+                  : [],
+              )
             : null,
         ],
       );
@@ -186,35 +184,35 @@ export const OpenGenerativeUIToolRenderer = defineComponent({
     result: { type: String as PropType<string | undefined>, required: false },
   },
   setup(props) {
-    const visibleMessageIndex = ref(0);
-
+    const cycler = new ɵPlaceholderCycler();
+    const message = shallowRef(cycler.getSnapshot().message);
+    const unsubscribe = cycler.subscribe(() => {
+      message.value = cycler.getSnapshot().message;
+    });
     watch(
-      () => props.args.placeholderMessages,
-      (messages, _, onCleanup) => {
-        if (!messages?.length || props.status === ToolCallStatus.Complete)
-          return;
-        visibleMessageIndex.value = Math.max(messages.length - 1, 0);
-        const timer = window.setInterval(() => {
-          visibleMessageIndex.value =
-            (visibleMessageIndex.value + 1) % Math.max(messages.length, 1);
-        }, 5000);
-        onCleanup(() => window.clearInterval(timer));
-      },
+      () =>
+        [
+          props.args.placeholderMessages,
+          props.status === ToolCallStatus.Complete,
+        ] as const,
+      ([messages, complete]) => cycler.update(messages, complete),
       { immediate: true },
     );
+    onBeforeUnmount(() => {
+      unsubscribe();
+      cycler.dispose();
+    });
 
     return () => {
-      if (props.status === ToolCallStatus.Complete) return null;
-      const messages = props.args.placeholderMessages;
-      if (!messages?.length) return null;
-      const currentMessage = messages[visibleMessageIndex.value] ?? messages[0];
+      // Nothing once complete — the activity renderer handles the UI.
+      if (message.value === undefined) return null;
       return h(
         "div",
         {
           style: { padding: "8px 12px", color: "#999", fontSize: "14px" },
           "data-testid": "open-generative-ui-tool-placeholder",
         },
-        currentMessage,
+        message.value,
       );
     };
   },