@copilotkit/vue 1.57.1

package/src/v2/providers/index.ts

@@ -0,0 +1,21 @@
+export { default as CopilotKitProvider } from "./CopilotKitProvider.vue";
+export type { CopilotKitProviderProps } from "./CopilotKitProvider.types";
+export type { DebugConfig } from "@copilotkit/shared";
+export { default as CopilotChatConfigurationProvider } from "./CopilotChatConfigurationProvider.vue";
+export type { CopilotChatConfigurationProviderProps } from "./CopilotChatConfigurationProvider.types";
+export { useCopilotKit } from "./useCopilotKit";
+export { useLicenseContext } from "./useLicenseContext";
+export {
+  LicenseContextKey,
+  createLicenseContextValue,
+  createDefaultLicenseRef,
+  type LicenseContextValue,
+} from "./license-context";
+export { useSandboxFunctions } from "./SandboxFunctionsContext";
+export { useCopilotChatConfiguration } from "./useCopilotChatConfiguration";
+export {
+  CopilotChatDefaultLabels,
+  type CopilotChatLabels,
+  type CopilotChatConfigurationValue,
+} from "./types";
+export type { CopilotKitContextValue } from "./keys";

package/src/v2/providers/keys.ts

@@ -0,0 +1,25 @@
+import type { ComputedRef, InjectionKey, Ref, ShallowRef } from "vue";
+import type { CopilotKitCoreVue } from "../lib/vue-core";
+import type { CopilotChatConfigurationValue } from "./types";
+import type { A2UITheme } from "../types";
+import type { SandboxFunction } from "../types";
+
+export interface CopilotKitContextValue {
+  copilotkit: ShallowRef<CopilotKitCoreVue>;
+  executingToolCallIds: Ref<ReadonlySet<string>>;
+  a2uiTheme: ComputedRef<A2UITheme | undefined>;
+  a2uiCatalog: ComputedRef<unknown>;
+  a2uiLoadingComponent: ComputedRef<unknown>;
+  a2uiIncludeSchema: ComputedRef<boolean>;
+}
+
+export const CopilotKitKey: InjectionKey<CopilotKitContextValue> =
+  Symbol("CopilotKit");
+
+export const CopilotChatConfigurationKey: InjectionKey<
+  ComputedRef<CopilotChatConfigurationValue>
+> = Symbol("CopilotChatConfiguration");
+
+export const SandboxFunctionsKey: InjectionKey<
+  Ref<readonly SandboxFunction[]>
+> = Symbol("SandboxFunctions");

package/src/v2/providers/license-context.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey, Ref } from "vue";
+import { ref } from "vue";
+import {
+  createLicenseContextValue,
+  type LicenseContextValue,
+} from "@copilotkit/shared";
+
+export type { LicenseContextValue };
+export { createLicenseContextValue };
+
+export const LicenseContextKey: InjectionKey<Ref<LicenseContextValue>> =
+  Symbol("LicenseContext");
+
+export function createDefaultLicenseRef(): Ref<LicenseContextValue> {
+  return ref(createLicenseContextValue(null));
+}

package/src/v2/providers/types.ts

@@ -0,0 +1,40 @@
+export const CopilotChatDefaultLabels = {
+  chatInputPlaceholder: "Type a message...",
+  chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
+  chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
+  chatInputToolbarFinishTranscribeButtonLabel: "Finish",
+  chatInputToolbarAddButtonLabel: "Add photos or files",
+  chatInputToolbarToolsButtonLabel: "Tools",
+  assistantMessageToolbarCopyCodeLabel: "Copy",
+  assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
+  assistantMessageToolbarCopyMessageLabel: "Copy",
+  assistantMessageToolbarThumbsUpLabel: "Good response",
+  assistantMessageToolbarThumbsDownLabel: "Bad response",
+  assistantMessageToolbarReadAloudLabel: "Read aloud",
+  assistantMessageToolbarRegenerateLabel: "Regenerate",
+  userMessageToolbarCopyMessageLabel: "Copy",
+  userMessageToolbarEditMessageLabel: "Edit",
+  chatDisclaimerText:
+    "AI can make mistakes. Please verify important information.",
+  chatToggleOpenLabel: "Open chat",
+  chatToggleCloseLabel: "Close chat",
+  modalHeaderTitle: "CopilotKit Chat",
+  welcomeMessageText: "How can I help you today?",
+} as const;
+
+export type CopilotChatLabels = typeof CopilotChatDefaultLabels;
+
+export interface CopilotChatConfigurationValue {
+  labels: CopilotChatLabels;
+  agentId: string;
+  threadId: string;
+  /**
+   * True when the current `threadId` was chosen by the caller rather than
+   * silently minted inside the provider chain. Consumers that only make
+   * sense against a real backend thread (e.g. `/connect`, suppressing the
+   * welcome screen on switch) gate on this instead of `!!threadId`.
+   */
+  hasExplicitThreadId: boolean;
+  isModalOpen?: boolean;
+  setModalOpen?: (open: boolean) => void;
+}

package/src/v2/providers/useCopilotChatConfiguration.ts

@@ -0,0 +1,11 @@
+import { computed, inject } from "vue";
+import type { ComputedRef } from "vue";
+import { CopilotChatConfigurationKey } from "./keys";
+import type { CopilotChatConfigurationValue } from "./types";
+
+export function useCopilotChatConfiguration(): ComputedRef<CopilotChatConfigurationValue | null> {
+  const injected = inject<
+    ComputedRef<CopilotChatConfigurationValue> | undefined
+  >(CopilotChatConfigurationKey, undefined);
+  return computed(() => injected?.value ?? null);
+}

package/src/v2/providers/useCopilotKit.ts

@@ -0,0 +1,11 @@
+import { inject } from "vue";
+import { CopilotKitKey } from "./keys";
+
+export function useCopilotKit() {
+  const context = inject(CopilotKitKey);
+  if (!context) {
+    throw new Error("useCopilotKit must be used within CopilotKitProvider");
+  }
+
+  return context;
+}

package/src/v2/providers/useLicenseContext.ts

@@ -0,0 +1,21 @@
+import { computed, inject, type ComputedRef } from "vue";
+import {
+  LicenseContextKey,
+  createDefaultLicenseRef,
+  type LicenseContextValue,
+} from "./license-context";
+
+/**
+ * Vue counterpart of React's `useLicenseContext()` hook.
+ *
+ * Returns a `ComputedRef<LicenseContextValue>` whose `checkFeature(...)` /
+ * `getLimit(...)` callbacks track the value installed by
+ * `CopilotKitProvider`. Falls back to a permissive default
+ * (`createLicenseContextValue(null)`) when no provider has registered the
+ * context — matching React's `createContext(createLicenseContextValue(null))`
+ * default and keeping component trees mountable in isolation.
+ */
+export function useLicenseContext(): ComputedRef<LicenseContextValue> {
+  const source = inject(LicenseContextKey, createDefaultLicenseRef(), true);
+  return computed(() => source.value);
+}

package/src/v2/types/__tests__/defineToolCallRenderer.test.ts

@@ -0,0 +1,157 @@
+import { describe, it, expect } from "vitest";
+import { defineComponent, h } from "vue";
+import { z } from "zod";
+import { ToolCallStatus } from "@copilotkit/core";
+import { defineToolCallRenderer } from "../defineToolCallRenderer";
+import type { VueToolCallRenderer } from "../vue-tool-call-renderer";
+
+describe("defineToolCallRenderer", () => {
+  it("defaults wildcard args to z.any and preserves runtime tool name", () => {
+    const wildcardRenderer = defineToolCallRenderer({
+      name: "*",
+      render: ({ name, args, status }) =>
+        h(
+          "div",
+          { "data-testid": "wildcard" },
+          `${name}:${status}:${JSON.stringify(args)}`,
+        ),
+    });
+
+    expect(wildcardRenderer.name).toBe("*");
+    expect(wildcardRenderer.args.safeParse({ anything: true }).success).toBe(
+      true,
+    );
+
+    const rendered = (
+      wildcardRenderer.render as (props: {
+        name: string;
+        toolCallId: string;
+        args: Record<string, unknown>;
+        status: ToolCallStatus;
+        result: string | undefined;
+      }) => ReturnType<typeof h>
+    )({
+      name: "customTool",
+      toolCallId: "tc-wildcard-1",
+      args: { x: 1 },
+      status: ToolCallStatus.Executing,
+      result: undefined,
+    });
+
+    expect(rendered.children).toContain("customTool");
+    expect(rendered.children).not.toContain("*:");
+  });
+
+  it("exposes toolCallId to wildcard renderers", () => {
+    const wildcardRenderer = defineToolCallRenderer({
+      name: "*",
+      render: ({ name, toolCallId, status }) =>
+        h(
+          "div",
+          { "data-testid": "wildcard" },
+          `${name}:${toolCallId}:${status}`,
+        ),
+    });
+
+    const rendered = (
+      wildcardRenderer.render as (props: {
+        name: string;
+        toolCallId: string;
+        args: Record<string, unknown>;
+        status: ToolCallStatus;
+        result: string | undefined;
+      }) => ReturnType<typeof h>
+    )({
+      name: "customTool",
+      toolCallId: "tc-123",
+      args: {},
+      status: ToolCallStatus.InProgress,
+      result: undefined,
+    });
+
+    expect(rendered.children).toContain("tc-123");
+  });
+
+  it("supports mixed renderer arrays without type casts", () => {
+    const wildcardRenderer = defineToolCallRenderer({
+      name: "*",
+      render: ({ name }) => h("div", `fallback:${name}`),
+    });
+    const weatherRenderer = defineToolCallRenderer({
+      name: "get_weather",
+      args: z.object({ location: z.string() }),
+      render: ({ args }) => h("div", `weather:${args.location}`),
+    });
+
+    const renderers: VueToolCallRenderer<unknown>[] = [
+      wildcardRenderer,
+      weatherRenderer,
+    ];
+    expect(renderers).toHaveLength(2);
+    expect(renderers[0]?.name).toBe("*");
+    expect(renderers[1]?.name).toBe("get_weather");
+  });
+
+  it("accepts a Vue component as the renderer", () => {
+    const ToolRenderer = defineComponent({
+      props: {
+        name: {
+          type: String,
+          required: true,
+        },
+        status: {
+          type: String,
+          required: true,
+        },
+      },
+      template: `<div data-testid="component-renderer">{{ name }}:{{ status }}</div>`,
+    });
+
+    const componentRenderer = defineToolCallRenderer({
+      name: "get_weather",
+      args: z.object({ location: z.string() }),
+      render: ToolRenderer,
+    });
+
+    expect(componentRenderer.render).toBe(ToolRenderer);
+  });
+
+  it("infers typed args shape for specific tools", () => {
+    const typedRenderer = defineToolCallRenderer({
+      name: "get_weather",
+      args: z.object({
+        location: z.string(),
+        units: z.enum(["celsius", "fahrenheit"]).optional(),
+      }),
+      render: ({ args, toolCallId, status, result }) => {
+        if (status === ToolCallStatus.InProgress) {
+          const locationMaybe: string | undefined = args.location;
+          return h("div", `loading:${toolCallId}:${locationMaybe ?? ""}`);
+        }
+        if (status === ToolCallStatus.Executing) {
+          const location: string = args.location;
+          return h("div", `executing:${toolCallId}:${location}`);
+        }
+        return h("div", `complete:${toolCallId}:${args.location}:${result}`);
+      },
+    });
+
+    const rendered = (
+      typedRenderer.render as (props: {
+        name: string;
+        toolCallId: string;
+        args: { location: string; units?: "celsius" | "fahrenheit" };
+        status: ToolCallStatus;
+        result: string | undefined;
+      }) => ReturnType<typeof h>
+    )({
+      name: "get_weather",
+      toolCallId: "tc-weather-1",
+      args: { location: "Paris", units: "celsius" },
+      status: ToolCallStatus.Executing,
+      result: undefined,
+    });
+
+    expect(rendered.children).toContain("executing:tc-weather-1:Paris");
+  });
+});

package/src/v2/types/a2ui.ts

@@ -0,0 +1,5 @@
+export type A2UITheme = Record<string, unknown>;
+
+export interface A2UISurfaceOperationPayload {
+  operations: unknown[];
+}

package/src/v2/types/defineToolCallRenderer.ts

@@ -0,0 +1,32 @@
+import { z } from "zod";
+import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
+import type { VueToolCallRenderer } from "./vue-tool-call-renderer";
+import type { VueToolCallRendererRenderFn } from "./vue-tool-call-renderer";
+
+export function defineToolCallRenderer(def: {
+  name: "*";
+  render: VueToolCallRendererRenderFn<unknown>;
+  agentId?: string;
+}): VueToolCallRenderer<unknown>;
+
+export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
+  name: string;
+  args: S;
+  render: VueToolCallRendererRenderFn<InferSchemaOutput<S>>;
+  agentId?: string;
+}): VueToolCallRenderer<InferSchemaOutput<S>>;
+
+export function defineToolCallRenderer<S extends StandardSchemaV1>(def: {
+  name: string;
+  args?: S;
+  render: VueToolCallRendererRenderFn<unknown>;
+  agentId?: string;
+}): VueToolCallRenderer<unknown> {
+  const argsSchema = def.name === "*" && !def.args ? z.any() : def.args;
+  return {
+    name: def.name,
+    args: argsSchema as StandardSchemaV1<any, unknown>,
+    render: def.render as VueToolCallRenderer<unknown>["render"],
+    ...(def.agentId ? { agentId: def.agentId } : {}),
+  };
+}

package/src/v2/types/frontend-tool.ts

@@ -0,0 +1,8 @@
+import type { FrontendTool } from "@copilotkit/core";
+import type { VueToolCallRenderer } from "./vue-tool-call-renderer";
+
+export type VueFrontendTool<
+  T extends Record<string, unknown> = Record<string, unknown>,
+> = FrontendTool<T> & {
+  render?: VueToolCallRenderer<T>["render"];
+};

package/src/v2/types/human-in-the-loop.ts

@@ -0,0 +1,38 @@
+import type { FrontendTool, ToolCallStatus } from "@copilotkit/core";
+import type { Component, VNodeChild } from "vue";
+
+export type VueHumanInTheLoopRenderProps<T> =
+  | {
+      name: string;
+      description: string;
+      args: Partial<T>;
+      status: ToolCallStatus.InProgress;
+      result: undefined;
+      respond: undefined;
+    }
+  | {
+      name: string;
+      description: string;
+      args: T;
+      status: ToolCallStatus.Executing;
+      result: undefined;
+      respond: (result: unknown) => Promise<void>;
+    }
+  | {
+      name: string;
+      description: string;
+      args: T;
+      status: ToolCallStatus.Complete;
+      result: string;
+      respond: undefined;
+    };
+
+export type VueHumanInTheLoopRenderFn<T> =
+  | ((props: VueHumanInTheLoopRenderProps<T>) => VNodeChild)
+  | Component<VueHumanInTheLoopRenderProps<T>>;
+
+export type VueHumanInTheLoop<
+  T extends Record<string, unknown> = Record<string, unknown>,
+> = Omit<FrontendTool<T>, "handler"> & {
+  render: VueHumanInTheLoopRenderFn<T>;
+};

package/src/v2/types/index.ts

@@ -0,0 +1,9 @@
+export * from "./vue-tool-call-renderer";
+export * from "./vue-activity-message-renderer";
+export * from "./vue-custom-message-renderer";
+export * from "./frontend-tool";
+export * from "./human-in-the-loop";
+export * from "./defineToolCallRenderer";
+export * from "./interrupt";
+export * from "./a2ui";
+export * from "./sandbox-function";

package/src/v2/types/interrupt.ts

@@ -0,0 +1,15 @@
+export interface InterruptEvent<TValue = unknown> {
+  name: string;
+  value: TValue;
+}
+
+export interface InterruptHandlerProps<TValue = unknown> {
+  event: InterruptEvent<TValue>;
+  resolve: (response: unknown) => void;
+}
+
+export interface InterruptRenderProps<TValue = unknown, TResult = unknown> {
+  event: InterruptEvent<TValue>;
+  result: TResult;
+  resolve: (response: unknown) => void;
+}

package/src/v2/types/sandbox-function.ts

@@ -0,0 +1,8 @@
+import type { z } from "zod";
+
+export interface SandboxFunction {
+  name: string;
+  description: string;
+  parameters: z.ZodTypeAny;
+  handler: (args: unknown) => Promise<unknown> | unknown;
+}

package/src/v2/types/vue-activity-message-renderer.ts

@@ -0,0 +1,22 @@
+import type { ActivityMessage } from "@ag-ui/core";
+import type { AbstractAgent } from "@ag-ui/client";
+import type { z } from "zod";
+import type { Component, VNodeChild } from "vue";
+
+export interface VueActivityMessageRendererProps<TActivityContent> {
+  activityType: string;
+  content: TActivityContent;
+  message: ActivityMessage;
+  agent: AbstractAgent | undefined;
+}
+
+export type VueActivityMessageRendererRenderFn<TActivityContent> =
+  | ((props: VueActivityMessageRendererProps<TActivityContent>) => VNodeChild)
+  | Component<VueActivityMessageRendererProps<TActivityContent>>;
+
+export interface VueActivityMessageRenderer<TActivityContent> {
+  activityType: string;
+  agentId?: string;
+  content: z.ZodSchema<TActivityContent>;
+  render: VueActivityMessageRendererRenderFn<TActivityContent>;
+}

package/src/v2/types/vue-custom-message-renderer.ts

@@ -0,0 +1,24 @@
+import type { Message } from "@ag-ui/core";
+import type { Component, VNodeChild } from "vue";
+
+export type VueCustomMessageRendererPosition = "before" | "after";
+
+export interface VueCustomMessageRendererProps {
+  message: Message;
+  position: VueCustomMessageRendererPosition;
+  runId: string;
+  messageIndex: number;
+  messageIndexInRun: number;
+  numberOfMessagesInRun: number;
+  agentId: string;
+  stateSnapshot: unknown;
+}
+
+export type VueCustomMessageRendererRenderFn =
+  | ((props: VueCustomMessageRendererProps) => VNodeChild)
+  | Component<VueCustomMessageRendererProps>;
+
+export interface VueCustomMessageRenderer {
+  agentId?: string;
+  render: VueCustomMessageRendererRenderFn;
+}

package/src/v2/types/vue-tool-call-renderer.ts

@@ -0,0 +1,44 @@
+import type { ToolCallStatus } from "@copilotkit/core";
+import type { StandardSchemaV1 } from "@copilotkit/shared";
+import type { Component, VNodeChild } from "vue";
+
+/**
+ * Props passed to a Vue tool call render function.
+ */
+export type VueToolCallRendererRenderProps<T> =
+  | {
+      name: string;
+      toolCallId: string;
+      args: Partial<T>;
+      status: ToolCallStatus.InProgress;
+      result: undefined;
+    }
+  | {
+      name: string;
+      toolCallId: string;
+      args: T;
+      status: ToolCallStatus.Executing;
+      result: undefined;
+    }
+  | {
+      name: string;
+      toolCallId: string;
+      args: T;
+      status: ToolCallStatus.Complete;
+      result: string;
+    };
+
+/**
+ * Vue component or render function for tool call rendering.
+ * Component is normalized to (props) => VNodeChild internally.
+ */
+export type VueToolCallRendererRenderFn<T> =
+  | ((props: VueToolCallRendererRenderProps<T>) => VNodeChild)
+  | Component<VueToolCallRendererRenderProps<T>>;
+
+export interface VueToolCallRenderer<T = unknown> {
+  name: string;
+  args: StandardSchemaV1<any, T>;
+  agentId?: string;
+  render: VueToolCallRendererRenderFn<T>;
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@copilotkit/typescript-config/base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "target": "ES2022",
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@copilotkit/core": ["../core/dist/index.d.mts", "../core/src/index.ts"],
+      "@copilotkit/shared": [
+        "../shared/dist/index.d.mts",
+        "../shared/src/index.ts"
+      ],
+      "@copilotkit/web-inspector": [
+        "../web-inspector/dist/index.d.mts",
+        "../web-inspector/src/index.ts"
+      ]
+    },
+    "types": ["vitest/globals", "node"]
+  },
+  "include": ["src/**/*", "src/**/*.vue"],
+  "exclude": ["dist", "node_modules", "src/**/__tests__/**"]
+}

package/vite.config.ts

@@ -0,0 +1,49 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    lib: {
+      entry: {
+        index: resolve(__dirname, "src/index.ts"),
+        "v2/index": resolve(__dirname, "src/v2/index.ts"),
+      },
+      name: "CopilotKitVue",
+      formats: ["es", "cjs"],
+      fileName: (format, entryName) =>
+        format === "es" ? `${entryName}.mjs` : `${entryName}.cjs`,
+    },
+    rollupOptions: {
+      external: [
+        "vue",
+        "@a2ui/web_core",
+        "@a2ui/web_core/v0_9",
+        "@a2ui/web_core/v0_9/basic_catalog",
+        "@ag-ui/client",
+        "@ag-ui/core",
+        "@copilotkit/core",
+        "@copilotkit/shared",
+        "@copilotkit/web-inspector",
+        "@jetbrains/websandbox",
+        "streamdown-vue",
+        "katex",
+        "lucide-vue-next",
+        "zod",
+        "zod-to-json-schema",
+      ],
+      output: {
+        globals: { vue: "Vue" },
+      },
+    },
+    outDir: "dist",
+    emptyOutDir: true,
+    sourcemap: true,
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vitest/config";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "node:path";
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./src/v2/__tests__/setup.ts"],
+    include: ["**/__tests__/**/*.test.ts"],
+    globals: true,
+    reporters: [["default", { summary: false }]],
+  },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+      "@copilotkit/web-inspector": resolve(
+        __dirname,
+        "./src/v2/__tests__/mocks/web-inspector.ts",
+      ),
+    },
+  },
+});