@copilotkit/vue 1.57.1

package/src/v2/components/a2ui/A2UIBuiltInToolCallRenderer.ts

@@ -0,0 +1,295 @@
+import { h, watch, type VNodeChild } from "vue";
+import type { ShallowRef } from "vue";
+import { z } from "zod";
+import type { ToolCallStatus } from "@copilotkit/core";
+import type { CopilotKitCoreVue } from "../../lib/vue-core";
+import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
+
+/**
+ * Tool name used by the dynamic A2UI generation secondary LLM.
+ * This renderer is auto-registered when A2UI is enabled.
+ */
+export const RENDER_A2UI_TOOL_NAME = "render_a2ui";
+
+/**
+ * Registers the built-in `render_a2ui` tool call renderer via the props-based
+ * `setRenderToolCalls` mechanism (not `useRenderTool`).
+ *
+ * This ensures user-registered `useRenderTool({ name: "render_a2ui", ... })`
+ * hooks automatically override the built-in, since the merge logic in
+ * vue-core.ts gives hook-based entries priority over prop-based entries.
+ *
+ * Call from the provider's setup function and pass a cleanup callback.
+ */
+export function registerA2UIBuiltInToolCallRenderer(
+  copilotkit: ShallowRef<CopilotKitCoreVue>,
+  enabled: () => boolean,
+): void {
+  watch(
+    [() => copilotkit.value, enabled],
+    ([core, isEnabled], _prev, onCleanup) => {
+      if (!isEnabled) return;
+
+      const renderer = defineToolCallRenderer({
+        name: RENDER_A2UI_TOOL_NAME,
+        args: z.any(),
+        render: ({ status, args: parameters }: {
+          status: ToolCallStatus;
+          args: unknown;
+          [key: string]: unknown;
+        }): VNodeChild => {
+          if (status === "complete") return null;
+          const params = parameters as Record<string, unknown>;
+          // Hide skeleton once the A2UI surface has enough data to render.
+          const items = params?.items;
+          if (Array.isArray(items) && items.length > 0) return null;
+          const components = params?.components;
+          if (Array.isArray(components) && components.length > 2) return null;
+          return renderA2UIProgressIndicator(parameters);
+        },
+      });
+
+      // Register via props-based mechanism so useRenderTool hooks take priority
+      const existing = core.propRenderToolCalls;
+      core.setRenderToolCalls([
+        ...existing.filter(
+          (rc) => rc.name !== RENDER_A2UI_TOOL_NAME,
+        ),
+        renderer,
+      ]);
+
+      onCleanup(() => {
+        const current = core.propRenderToolCalls;
+        core.setRenderToolCalls(
+          current.filter(
+            (rc) => rc.name !== RENDER_A2UI_TOOL_NAME,
+          ),
+        );
+        progressState.clear();
+      });
+    },
+    { immediate: true },
+  );
+}
+
+/**
+ * Vue render-function equivalent of the React A2UIProgressIndicator.
+ * Shows a skeleton wireframe that progressively reveals as tokens stream in.
+ */
+const progressState = new Map<string, { lastTime: number; lastTokens: number }>();
+
+function renderA2UIProgressIndicator(parameters: unknown): VNodeChild {
+  const params = parameters as Record<string, unknown> | null | undefined;
+  const key = typeof params?.name === "string" ? params.name : "__default__";
+  let state = progressState.get(key);
+  if (!state) {
+    state = { lastTime: 0, lastTokens: 0 };
+    progressState.set(key, state);
+  }
+
+  const now = Date.now();
+  let tokens = state.lastTokens;
+  if (now - state.lastTime > 200) {
+    const chars = JSON.stringify(parameters ?? {}).length;
+    tokens = Math.round(chars / 4);
+    state.lastTime = now;
+    state.lastTokens = tokens;
+  }
+
+  const phase = tokens < 50 ? 0 : tokens < 200 ? 1 : tokens < 400 ? 2 : 3;
+
+  const dot = () =>
+    h("div", {
+      style: {
+        width: "7px",
+        height: "7px",
+        borderRadius: "50%",
+        backgroundColor: "#d4d4d8",
+        flexShrink: 0,
+      },
+    });
+
+  const spacer = () => h("div", { style: { width: "12px" } });
+
+  const bar = (
+    w: number,
+    ht: number,
+    bg: string,
+    anim?: number,
+    opacity?: number,
+    transition?: string,
+  ) =>
+    h("div", {
+      style: {
+        width: `${w}px`,
+        height: `${ht}px`,
+        borderRadius: "9999px",
+        backgroundColor: bg,
+        ...(anim !== undefined
+          ? {
+              animation: `cpk-a2ui-fade 2.4s ease-in-out ${anim}s infinite`,
+            }
+          : {}),
+        ...(opacity !== undefined ? { opacity } : {}),
+        ...(transition ? { transition } : {}),
+      },
+    });
+
+  const row = (show: boolean, delay: number, children: VNodeChild[]) =>
+    h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          opacity: show ? 1 : 0,
+          transition: `opacity 0.4s ${delay}s`,
+        },
+      },
+      children,
+    );
+
+  return h("div", { style: { margin: "12px 0", maxWidth: "320px" } }, [
+    h(
+      "div",
+      {
+        style: {
+          position: "relative",
+          overflow: "hidden",
+          borderRadius: "12px",
+          border: "1px solid rgba(228,228,231,0.8)",
+          backgroundColor: "#fff",
+          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+          padding: "16px 18px 14px",
+        },
+      },
+      [
+        // Top bar
+        h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              marginBottom: "12px",
+            },
+          },
+          [
+            h("div", { style: { display: "flex", gap: "4px" } }, [
+              dot(),
+              dot(),
+              dot(),
+            ]),
+            bar(64, 6, "#e4e4e7", undefined, phase >= 1 ? 1 : 0.4, "opacity 0.5s"),
+          ],
+        ),
+        // Skeleton lines
+        h("div", { style: { display: "grid", gap: "7px" } }, [
+          row(phase >= 0, 0, [
+            bar(36, 7, "rgba(147,197,253,0.7)", 0),
+            bar(80, 7, "rgba(219,234,254,0.8)", 0.2),
+          ]),
+          row(phase >= 0, 0.1, [
+            spacer(),
+            dot(),
+            bar(100, 7, "rgba(24,24,27,0.2)", 0.3),
+          ]),
+          row(phase >= 1, 0.15, [
+            spacer(),
+            bar(48, 7, "rgba(24,24,27,0.15)", 0.1),
+            bar(40, 7, "rgba(153,246,228,0.6)", 0.5),
+            bar(56, 7, "rgba(147,197,253,0.6)", 0.3),
+          ]),
+          row(phase >= 1, 0.2, [
+            spacer(),
+            dot(),
+            bar(60, 7, "rgba(24,24,27,0.15)", 0.4),
+          ]),
+          row(phase >= 2, 0.25, [
+            bar(40, 7, "rgba(153,246,228,0.5)", 0.2),
+            dot(),
+            bar(48, 7, "rgba(24,24,27,0.15)", 0.6),
+            bar(64, 7, "rgba(147,197,253,0.5)", 0.1),
+          ]),
+          row(phase >= 2, 0.3, [
+            bar(36, 7, "rgba(147,197,253,0.6)", 0.5),
+            bar(36, 7, "rgba(24,24,27,0.12)", 0.7),
+          ]),
+          row(phase >= 3, 0.35, [
+            dot(),
+            bar(44, 7, "rgba(24,24,27,0.18)", 0.3),
+            dot(),
+            bar(56, 7, "rgba(153,246,228,0.5)", 0.8),
+            bar(48, 7, "rgba(147,197,253,0.5)", 0.4),
+          ]),
+        ]),
+        // Shimmer
+        h("div", {
+          style: {
+            pointerEvents: "none",
+            position: "absolute",
+            inset: "0",
+            background:
+              "linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%, transparent 100%)",
+            backgroundSize: "250% 100%",
+            animation: "cpk-a2ui-sweep 3s ease-in-out infinite",
+          },
+        }),
+      ],
+    ),
+    // Label
+    h(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          marginTop: "8px",
+        },
+      },
+      [
+        h(
+          "span",
+          {
+            style: {
+              fontSize: "12px",
+              color: "#a1a1aa",
+              letterSpacing: "0.025em",
+            },
+          },
+          "Building interface",
+        ),
+        ...(tokens > 0
+          ? [
+              h(
+                "span",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "#d4d4d8",
+                    fontVariantNumeric: "tabular-nums",
+                  },
+                },
+                `~${tokens.toLocaleString()} tokens`,
+              ),
+            ]
+          : []),
+      ],
+    ),
+    // Keyframe styles
+    h("style", `
+      @keyframes cpk-a2ui-fade {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+      @keyframes cpk-a2ui-sweep {
+        0% { background-position: 250% 0; }
+        100% { background-position: -250% 0; }
+      }
+    `),
+  ]);
+}

package/src/v2/components/a2ui/A2UICatalogContext.ts

@@ -0,0 +1,190 @@
+import { computed, watch } from "vue";
+import type { ShallowRef } from "vue";
+import type { Catalog, ComponentApi } from "@a2ui/web_core/v0_9";
+import { zodToJsonSchema } from "zod-to-json-schema";
+import {
+  A2UI_DEFAULT_GENERATION_GUIDELINES,
+  A2UI_DEFAULT_DESIGN_GUIDELINES,
+} from "@copilotkit/shared";
+import type { CopilotKitCoreVue } from "../../lib/vue-core";
+import { vueBasicCatalog } from "./catalog";
+
+/**
+ * Context description used to identify the A2UI component schema in
+ * RunAgentInput.context.  Must match the constant in @ag-ui/a2ui-middleware
+ * so the middleware can overwrite a frontend-provided schema with a
+ * server-side one.
+ *
+ * Duplicated from @copilotkit/a2ui-renderer/catalog-utils to avoid pulling
+ * in React dependencies.
+ */
+const A2UI_SCHEMA_CONTEXT_DESCRIPTION =
+  "A2UI Component Schema — available components for generating UI surfaces. " +
+  "Use these component names and properties when creating A2UI operations.";
+
+/**
+ * Build a context string describing the available A2UI catalog.
+ * Vue-native equivalent of buildCatalogContextValue from a2ui-renderer.
+ */
+function buildCatalogContextValue(catalog?: Catalog<ComponentApi>): string {
+  const resolved = catalog ?? vueBasicCatalog;
+  const BASIC_CATALOG_ID =
+    "https://a2ui.org/specification/v0_9/basic_catalog.json";
+  const lines: string[] = [];
+  lines.push("Available A2UI catalog:");
+
+  if (resolved.id === BASIC_CATALOG_ID) {
+    lines.push(`- ${resolved.id} (basic catalog)`);
+    return lines.join("\n");
+  }
+
+  // Check if the resolved catalog extends the basic catalog
+  let isSuperset = true;
+  for (const name of vueBasicCatalog.components.keys()) {
+    if (!resolved.components.has(name)) {
+      isSuperset = false;
+      break;
+    }
+  }
+
+  // Identify custom components (not in basic catalog)
+  const customNames: string[] = [];
+  for (const name of resolved.components.keys()) {
+    if (!vueBasicCatalog.components.has(name)) {
+      customNames.push(name);
+    }
+  }
+
+  lines.push(`- ${resolved.id}`);
+  if (isSuperset) {
+    lines.push(
+      "  Extends the basic catalog with all standard components plus:",
+    );
+  } else {
+    lines.push("  Custom catalog (does NOT include all basic components).");
+    lines.push("  Custom components:");
+  }
+
+  for (const name of customNames) {
+    const comp = resolved.components.get(name);
+    if (!comp) continue;
+    const jsonSchema = zodToJsonSchema(comp.schema);
+    lines.push(`  - ${name}:`);
+    lines.push(
+      `    ${JSON.stringify(jsonSchema, null, 2).split("\n").join("\n    ")}`,
+    );
+  }
+
+  return lines.join("\n");
+}
+
+/**
+ * Extract component schemas from a catalog in A2UI v0.9 inline format.
+ * Vue-native equivalent of extractCatalogComponentSchemas.
+ */
+function extractCatalogComponentSchemas(
+  catalog?: Catalog<ComponentApi>,
+): { catalogId: string; components: Record<string, Record<string, unknown>> } {
+  const resolved = catalog ?? vueBasicCatalog;
+  const components: Record<string, Record<string, unknown>> = {};
+
+  for (const [name, comp] of resolved.components) {
+    const zodSchema = zodToJsonSchema(comp.schema, {
+      target: "jsonSchema2019-09",
+    }) as { properties?: Record<string, unknown>; required?: string[] };
+
+    components[name] = {
+      allOf: [
+        { $ref: "common_types.json#/$defs/ComponentCommon" },
+        {
+          properties: {
+            component: { const: name },
+            ...(zodSchema.properties ?? {}),
+          },
+          required: ["component", ...(zodSchema.required ?? [])],
+        },
+      ],
+    };
+  }
+
+  return { catalogId: resolved.id, components };
+}
+
+/**
+ * Registers agent context describing the available A2UI catalog, component
+ * schemas, and generation/design guidelines.
+ *
+ * Vue-native equivalent of React's `<A2UICatalogContext>` component.
+ * Call from the provider's setup function.
+ */
+export function registerA2UICatalogContext(
+  copilotkit: ShallowRef<CopilotKitCoreVue>,
+  options: {
+    enabled: () => boolean;
+    catalog: () => Catalog<ComponentApi> | undefined;
+    includeSchema: () => boolean;
+  },
+): void {
+  const contextValue = computed(() =>
+    buildCatalogContextValue(options.catalog()),
+  );
+
+  // Register catalog capabilities context
+  watch(
+    [() => copilotkit.value, options.enabled, contextValue],
+    ([core, isEnabled, value], _prev, onCleanup) => {
+      if (!isEnabled) return;
+      const id = core.addContext({
+        description:
+          "A2UI catalog capabilities: available catalog IDs and " +
+          "custom component definitions the client can render.",
+        value,
+      });
+      onCleanup(() => core.removeContext(id));
+    },
+    { immediate: true },
+  );
+
+  // Register schema + generation/design guidelines
+  const schemaValue = computed(() => {
+    if (!options.includeSchema()) return null;
+    return JSON.stringify(
+      extractCatalogComponentSchemas(options.catalog()),
+    );
+  });
+
+  watch(
+    [() => copilotkit.value, options.enabled, schemaValue],
+    ([core, isEnabled, schema], _prev, onCleanup) => {
+      if (!isEnabled || !schema) return;
+      const ids: string[] = [];
+      ids.push(
+        core.addContext({
+          description: A2UI_SCHEMA_CONTEXT_DESCRIPTION,
+          value: schema,
+        }),
+      );
+      ids.push(
+        core.addContext({
+          description:
+            "A2UI generation guidelines — protocol rules, tool arguments, " +
+            "path rules, data model format, and " +
+            "form/two-way-binding instructions.",
+          value: A2UI_DEFAULT_GENERATION_GUIDELINES,
+        }),
+      );
+      ids.push(
+        core.addContext({
+          description:
+            "A2UI design guidelines — visual design rules, component " +
+            "hierarchy tips, and action handler patterns.",
+          value: A2UI_DEFAULT_DESIGN_GUIDELINES,
+        }),
+      );
+      onCleanup(() => {
+        for (const id of ids) core.removeContext(id);
+      });
+    },
+    { immediate: true },
+  );
+}

package/src/v2/components/a2ui/VueSurface.ts

@@ -0,0 +1,144 @@
+/**
+ * Vue-native A2UI Surface renderer.
+ *
+ * Replaces the React island pattern with Vue components that use
+ * @a2ui/web_core's framework-agnostic primitives directly.
+ */
+
+import {
+  defineComponent,
+  h,
+  ref,
+  onUnmounted,
+  type PropType,
+  type VNode,
+} from "vue";
+import {
+  ComponentContext,
+  type SurfaceModel,
+  type ComponentModel,
+} from "@a2ui/web_core/v0_9";
+import type { VueComponentImplementation } from "./adapter";
+
+/**
+ * DeferredChild — Vue equivalent of the React DeferredChild.
+ * Subscribes to component create/delete events and renders the
+ * appropriate catalog component via the GenericBinder adapter.
+ */
+const DeferredChild = defineComponent({
+  name: "A2UIDeferredChild",
+  props: {
+    surface: {
+      type: Object as PropType<SurfaceModel<VueComponentImplementation>>,
+      required: true,
+    },
+    id: { type: String, required: true },
+    basePath: { type: String, required: true },
+  },
+  setup(props) {
+    // Reactive trigger — incremented when the component is created/deleted
+    const version = ref(0);
+
+    const sub1 = props.surface.componentsModel.onCreated.subscribe(
+      (comp: ComponentModel) => {
+        if (comp.id === props.id) {
+          version.value++;
+        }
+      },
+    );
+    const sub2 = props.surface.componentsModel.onDeleted.subscribe(
+      (delId: string) => {
+        if (delId === props.id) {
+          version.value++;
+        }
+      },
+    );
+
+    onUnmounted(() => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    });
+
+    function buildChild(childId: string, specificPath?: string): VNode {
+      const path = specificPath || props.basePath;
+      return h(DeferredChild, {
+        key: `${childId}-${path}`,
+        surface: props.surface,
+        id: childId,
+        basePath: path,
+      });
+    }
+
+    return () => {
+      // Touch version to ensure reactivity
+      void version.value;
+
+      const componentModel = props.surface.componentsModel.get(props.id);
+
+      if (!componentModel) {
+        // Shimmer placeholder while component isn't yet available
+        return h("div", {
+          style: {
+            padding: "12px 16px",
+            borderRadius: "8px",
+            background:
+              "linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)",
+            backgroundSize: "200% 100%",
+            animation: "a2ui-shimmer 1.5s ease-in-out infinite",
+            minHeight: "2rem",
+          },
+          innerHTML: `<style>@keyframes a2ui-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }</style>`,
+        });
+      }
+
+      const compImpl = props.surface.catalog.components.get(
+        componentModel.type,
+      );
+
+      if (!compImpl) {
+        return h(
+          "div",
+          { style: { color: "red" } },
+          `Unknown component: ${componentModel.type}`,
+        );
+      }
+
+      // Create context for this component
+      const context = new ComponentContext(
+        props.surface,
+        props.id,
+        props.basePath,
+      );
+
+      // Render the catalog component's Vue wrapper (created by createVueComponent)
+      return h(compImpl.render, {
+        context,
+        buildChild,
+      });
+    };
+  },
+});
+
+/**
+ * A2uiSurface — renders the root of a single A2UI surface.
+ * The root component always has ID 'root' and base path '/'.
+ */
+export const A2uiSurface = defineComponent({
+  name: "A2uiSurface",
+  props: {
+    surface: {
+      type: Object as PropType<SurfaceModel<VueComponentImplementation>>,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () =>
+      h(DeferredChild, {
+        surface: props.surface,
+        id: "root",
+        basePath: "/",
+      });
+  },
+});
+
+export { DeferredChild };