@copilotkit/vue 1.57.1

package/eslint.config.mjs

@@ -0,0 +1,42 @@
+import js from "@eslint/js";
+import globals from "globals";
+import pluginVue from "eslint-plugin-vue";
+import tseslint from "typescript-eslint";
+import vueParser from "vue-eslint-parser";
+
+export default [
+  {
+    ignores: ["node_modules/**", "dist/**"],
+  },
+  {
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs["flat/essential"],
+  {
+    files: ["**/*.{ts,mts,cts,tsx}"],
+    languageOptions: {
+      parser: tseslint.parser,
+    },
+  },
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        ecmaVersion: "latest",
+        sourceType: "module",
+        extraFileExtensions: [".vue"],
+      },
+    },
+  },
+];

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@copilotkit/vue",
+  "version": "1.57.1",
+  "private": false,
+  "description": "Vue 3 components and composables for CopilotKit",
+  "keywords": [
+    "ai",
+    "assistant",
+    "automation",
+    "copilot",
+    "copilotkit",
+    "javascript",
+    "vue",
+    "vue3"
+  ],
+  "homepage": "https://github.com/CopilotKit/CopilotKit",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CopilotKit/CopilotKit.git"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "typesVersions": {
+    "*": {
+      "v2": [
+        "./dist/v2/index.d.cts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./v2": {
+      "import": {
+        "types": "./dist/v2/index.d.mts",
+        "default": "./dist/v2/index.mjs"
+      },
+      "require": {
+        "types": "./dist/v2/index.d.cts",
+        "default": "./dist/v2/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && pnpm build:css && pnpm build:types",
+    "build:css": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css -m && node scripts/scope-preflight.mjs ./dist/styles.css",
+    "build:types": "vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist --skipLibCheck && cp ./dist/index.d.ts ./dist/index.d.mts && cp ./dist/index.d.ts ./dist/index.d.cts && cp ./dist/v2/index.d.ts ./dist/v2/index.d.mts && cp ./dist/v2/index.d.ts ./dist/v2/index.d.cts",
+    "dev:css": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css --watch --minify",
+    "dev": "concurrently \"pnpm dev:css\" \"vite build --watch\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "lint": "eslint .",
+    "check-types": "vue-tsc --noEmit",
+    "publint": "publint .",
+    "attw": "attw --pack . --profile node16 --exclude-entrypoints ./styles.css --ignore-rules internal-resolution-error",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@a2ui/web_core": "0.9.0",
+    "@ag-ui/client": "0.0.53",
+    "@ag-ui/core": "0.0.53",
+    "@copilotkit/core": "workspace:*",
+    "@copilotkit/shared": "workspace:*",
+    "@copilotkit/web-inspector": "workspace:*",
+    "@jetbrains/websandbox": "^1.1.3",
+    "katex": "^0.16.27",
+    "lucide-vue-next": "^0.525.0",
+    "streamdown-vue": "^1.0.29",
+    "zod": "^3.25.75",
+    "zod-to-json-schema": "^3.24.5"
+  },
+  "devDependencies": {
+    "@copilotkit/typescript-config": "workspace:*",
+    "@eslint/js": "^9.39.2",
+    "@tailwindcss/cli": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/vue": "^8.1.0",
+    "@types/node": "^22.15.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/compiler-sfc": "^3.5.14",
+    "@vue/test-utils": "^2.4.6",
+    "arktype": "^2.1.29",
+    "concurrently": "^9.1.0",
+    "eslint": "^9.30.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^16.5.0",
+    "jsdom": "^26.1.0",
+    "phoenix": "^1.8.4",
+    "postcss": "^8.5.6",
+    "rxjs": "7.8.1",
+    "tailwindcss": "^4.0.8",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "5.8.2",
+    "typescript-eslint": "^8.52.0",
+    "valibot": "^1.3.0",
+    "vite": "^6.0.0",
+    "vitest": "^4.1.3",
+    "vue": "^3.5.28",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/scripts/scope-preflight.mjs

@@ -0,0 +1,100 @@
+/**
+ * Post-processes compiled Tailwind CSS to scope all @layer base rules
+ * under [data-copilotkit], preventing CopilotKit styles from leaking
+ * into the host application.
+ *
+ * Run after `tailwindcss` CLI: node scripts/scope-preflight.mjs <file>
+ */
+
+import { readFileSync, writeFileSync } from "fs";
+import { parse } from "postcss";
+
+const SCOPE = "[data-copilotkit]";
+const file = process.argv[2];
+if (!file) {
+  console.error("Usage: node scripts/scope-preflight.mjs <css-file>");
+  process.exit(1);
+}
+
+/** Selectors that are already scoped and should be left alone. */
+function isAlreadyScoped(selector) {
+  return (
+    selector.includes("[data-copilot") || selector.includes("[data-sidebar")
+  );
+}
+
+/** Rewrite a single selector to be scoped under [data-copilotkit]. */
+function scopeSelector(sel) {
+  sel = sel.trim();
+
+  // Already scoped — keep as-is
+  if (isAlreadyScoped(sel)) return sel;
+
+  // html, :host → [data-copilotkit]
+  if (sel === "html" || sel === ":host" || sel === "html,:host") {
+    return SCOPE;
+  }
+
+  // body → null (remove)
+  if (sel === "body") return null;
+
+  // ::backdrop → null (cannot be scoped to a container)
+  if (sel === "::backdrop") return null;
+
+  // Bare universal selector → scope to container + descendants
+  if (sel === "*") return `${SCOPE}, ${SCOPE} *`;
+
+  // Pseudo-elements (::) and vendor pseudo-classes (:-) → descendant only
+  // These can't be combined with an attribute selector suffix
+  if (sel.startsWith(":")) {
+    return `${SCOPE} ${sel}`;
+  }
+
+  // Element / attribute selectors → descendant AND self-matching
+  // e.g. button → [data-copilotkit] button, button[data-copilotkit]
+  // This ensures <button data-copilotkit> also receives the preflight reset
+  return `${SCOPE} ${sel}, ${sel}${SCOPE}`;
+}
+
+function scopeRule(rule) {
+  const newSelectors = [];
+
+  for (const sel of rule.selectors) {
+    const scoped = scopeSelector(sel);
+    if (scoped !== null) {
+      // scopeSelector may return comma-separated selectors (for *)
+      if (typeof scoped === "string" && scoped.includes(", ")) {
+        newSelectors.push(...scoped.split(", "));
+      } else if (scoped) {
+        newSelectors.push(scoped);
+      }
+    }
+  }
+
+  if (newSelectors.length === 0) {
+    rule.remove();
+  } else {
+    rule.selectors = newSelectors;
+  }
+}
+
+/** Recursively scope all rules within a node (handles @supports, @media, etc.) */
+function scopeChildren(node) {
+  node.walk((child) => {
+    if (child.type === "rule") {
+      scopeRule(child);
+    }
+    // @supports / @media blocks are walked automatically
+  });
+}
+
+// --- Main ---
+const css = readFileSync(file, "utf8");
+const root = parse(css);
+
+root.walkAtRules("layer", (layer) => {
+  if (layer.params !== "base") return;
+  scopeChildren(layer);
+});
+
+writeFileSync(file, root.toString());

package/src/components/copilot-provider/CopilotKit.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * V1 compatibility wrapper for CopilotKitProvider.
+ *
+ * Accepts the same props as CopilotKitProvider plus legacy v1 props
+ * (publicApiKey, publicLicenseKey) and delegates to the v2 provider.
+ */
+import type { CopilotKitProps } from "./types";
+import CopilotKitProvider from "../../v2/providers/CopilotKitProvider.vue";
+
+const props = defineProps<CopilotKitProps>();
+</script>
+
+<template>
+  <CopilotKitProvider v-bind="props">
+    <slot />
+  </CopilotKitProvider>
+</template>

package/src/components/copilot-provider/index.ts

@@ -0,0 +1,2 @@
+export { default as CopilotKit } from "./CopilotKit.vue";
+export type { CopilotKitProps } from "./types";

package/src/components/copilot-provider/types.ts

@@ -0,0 +1,24 @@
+import type { CopilotKitProviderProps } from "../../v2/providers/CopilotKitProvider.types";
+
+/**
+ * V1 CopilotKit component props.
+ *
+ * Extends the v2 CopilotKitProviderProps with legacy v1-specific fields.
+ */
+export interface CopilotKitProps extends CopilotKitProviderProps {
+  /**
+   * Your Copilot Cloud API key.
+   * @deprecated Use publicLicenseKey with the v2 CopilotKitProvider instead.
+   */
+  publicApiKey?: string;
+
+  /**
+   * Your public license key for accessing premium CopilotKit features.
+   */
+  publicLicenseKey?: string;
+
+  /**
+   * The endpoint for the Copilot Runtime instance.
+   */
+  runtimeUrl?: string;
+}

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useCopilotAction } from "./use-copilot-action";
+export type {
+  FrontendAction,
+  CatchAllFrontendAction,
+} from "./use-copilot-action";
+export { useFrontendTool } from "./use-frontend-tool";
+export type { UseFrontendToolArgs } from "./use-frontend-tool";
+export { useCopilotReadable } from "./use-copilot-readable";
+export type { UseCopilotReadableOptions } from "./use-copilot-readable";

package/src/hooks/use-copilot-action.ts

@@ -0,0 +1,168 @@
+/**
+ * V1 compatibility wrapper for useCopilotAction.
+ *
+ * Accepts the legacy Parameter[] action format and routes to the appropriate
+ * v2 composable (useFrontendTool, useHumanInTheLoop, or useRenderTool).
+ */
+import type { WatchSource } from "vue";
+import type { Parameter, MappedParameterTypes } from "@copilotkit/shared";
+import { getZodParameters, parseJson } from "@copilotkit/shared";
+import { useFrontendTool as useFrontendToolV2 } from "../v2/hooks/use-frontend-tool";
+import { useHumanInTheLoop as useHumanInTheLoopV2 } from "../v2/hooks/use-human-in-the-loop";
+import { useRenderTool as useRenderToolV2 } from "../v2/hooks/use-render-tool";
+import type { VueFrontendTool, VueHumanInTheLoop } from "../v2/types";
+
+// Wraps a v1 render function so a JSON-string `result` is parsed before being
+// passed through. Mirrors the v1 React behavior. If render is a Component
+// (object) rather than a function, returns it unchanged — Components receive
+// props through Vue's prop system and the user is responsible for parsing.
+function wrapRenderWithJsonResult<R>(render: R): R {
+  if (typeof render !== "function") return render;
+  return ((props: { result?: unknown }) => {
+    const next =
+      typeof props.result === "string"
+        ? { ...props, result: parseJson(props.result, props.result) }
+        : props;
+    return (render as (p: unknown) => unknown)(next);
+  }) as R;
+}
+
+export interface FrontendAction<T extends Parameter[] | [] = []> {
+  name: string;
+  description?: string;
+  parameters?: T;
+  handler?: (args: MappedParameterTypes<T>) => unknown | Promise<unknown>;
+  followUp?: boolean;
+  available?: "disabled" | "enabled" | "remote" | "frontend";
+  render?: VueFrontendTool<MappedParameterTypes<T>>["render"];
+  renderAndWaitForResponse?: VueFrontendTool<MappedParameterTypes<T>>["render"];
+  renderAndWait?: VueFrontendTool<MappedParameterTypes<T>>["render"];
+  agentId?: string;
+}
+
+export interface CatchAllFrontendAction {
+  name: "*";
+  render: (props: unknown) => unknown;
+}
+
+export function useCopilotAction<const T extends Parameter[] | [] = []>(
+  action: FrontendAction<T> | CatchAllFrontendAction,
+  deps?: WatchSource<unknown>[],
+): void {
+  const zodParameters =
+    "parameters" in action
+      ? getZodParameters(action.parameters as T)
+      : undefined;
+
+  // Catch-all render action
+  if (action.name === "*") {
+    useRenderToolV2(
+      {
+        name: "*",
+        render: wrapRenderWithJsonResult(
+          (action as CatchAllFrontendAction).render,
+        ),
+        ...("agentId" in action
+          ? { agentId: (action as FrontendAction<T>).agentId }
+          : {}),
+      },
+      deps,
+    );
+    return;
+  }
+
+  const typedAction = action as FrontendAction<T>;
+
+  // Human-in-the-loop: has renderAndWaitForResponse or renderAndWait
+  if (
+    "renderAndWaitForResponse" in typedAction ||
+    "renderAndWait" in typedAction
+  ) {
+    const render =
+      typedAction.render ??
+      typedAction.renderAndWaitForResponse ??
+      typedAction.renderAndWait;
+
+    if (!render) {
+      console.warn(
+        `[CopilotKit] useCopilotAction: HITL action '${typedAction.name}' ` +
+          `has no render function. Skipping.`,
+      );
+      return;
+    }
+
+    useHumanInTheLoopV2<MappedParameterTypes<T>>(
+      {
+        name: typedAction.name,
+        description: typedAction.description,
+        parameters: zodParameters,
+        render: wrapRenderWithJsonResult(render) as VueHumanInTheLoop<
+          MappedParameterTypes<T>
+        >["render"],
+        agentId: typedAction.agentId,
+      },
+      deps,
+    );
+    return;
+  }
+
+  // Render-only: available is "frontend" or "disabled" (no handler invoked remotely)
+  if (
+    typedAction.available === "frontend" ||
+    typedAction.available === "disabled"
+  ) {
+    if (typedAction.render && zodParameters) {
+      useRenderToolV2(
+        {
+          name: typedAction.name,
+          parameters: zodParameters,
+          render: wrapRenderWithJsonResult(
+            typedAction.render as (props: unknown) => unknown,
+          ),
+          agentId: typedAction.agentId,
+        },
+        deps,
+      );
+    } else {
+      console.warn(
+        `[CopilotKit] useCopilotAction: action '${typedAction.name}' ` +
+          `with available="${typedAction.available}" requires both ` +
+          `'render' and 'parameters'. Skipping registration.`,
+      );
+    }
+    return;
+  }
+
+  // Default: frontend tool with handler
+  // Wrap the v1 handler (single-arg) to match v2's (args, context) => Promise<unknown> signature
+  const normalizedHandler = typedAction.handler
+    ? (args: MappedParameterTypes<T>) =>
+        Promise.resolve(typedAction.handler!(args))
+    : undefined;
+
+  // Convert v1 available (string enum) to v2 available (boolean)
+  // At this point, "frontend" and "disabled" have been handled above,
+  // so remaining values are "enabled", "remote", or undefined.
+  // "remote" means server-only: register the tool but mark it as not
+  // available on the frontend (matches React's ActionInputAvailability.Remote).
+  let normalizedAvailable: boolean | undefined;
+  if (typedAction.available === "remote") {
+    normalizedAvailable = false;
+  } else if (typedAction.available !== undefined) {
+    normalizedAvailable = true;
+  }
+
+  useFrontendToolV2<MappedParameterTypes<T>>(
+    {
+      name: typedAction.name,
+      description: typedAction.description,
+      parameters: zodParameters,
+      handler: normalizedHandler,
+      followUp: typedAction.followUp,
+      render: wrapRenderWithJsonResult(typedAction.render),
+      available: normalizedAvailable,
+      agentId: typedAction.agentId,
+    },
+    deps,
+  );
+}

package/src/hooks/use-copilot-readable.ts

@@ -0,0 +1,75 @@
+/**
+ * V1 compatibility wrapper for useCopilotReadable.
+ *
+ * Provides app-state and other information to the Copilot context.
+ * Delegates directly to the v2 CopilotKitCoreVue instance.
+ */
+import { watch, ref, type Ref } from "vue";
+import type { WatchSource } from "vue";
+import { useCopilotKit } from "../v2/providers/useCopilotKit";
+
+export interface UseCopilotReadableOptions {
+  /** The description of the information to be added to the Copilot context. */
+  description: string;
+  /** The value to be added to the Copilot context. Object values are automatically stringified. */
+  value: unknown;
+  /** Whether the context is available to the Copilot. */
+  available?: "enabled" | "disabled";
+  /** Custom conversion function to serialize the value to a string. */
+  convert?: (description: string, value: unknown) => string;
+}
+
+export function useCopilotReadable(
+  options: UseCopilotReadableOptions,
+  deps?: WatchSource<unknown>[],
+): Ref<string | undefined> {
+  const { copilotkit } = useCopilotKit();
+  const ctxIdRef = ref<string | undefined>(undefined);
+
+  const extraDeps = deps ?? [];
+
+  watch(
+    [
+      () => options.description,
+      () => options.value,
+      () => options.convert,
+      () => options.available,
+      ...extraDeps,
+    ],
+    (_newValues, _old, onCleanup) => {
+      const core = copilotkit.value;
+      if (!core) return;
+
+      const { description, value, convert, available } = options;
+
+      let serializedValue: string;
+      try {
+        serializedValue = convert
+          ? convert(description, value)
+          : JSON.stringify(value);
+      } catch (err) {
+        console.warn(
+          `[CopilotKit] useCopilotReadable: failed to serialize ` +
+            `value for "${description}":`,
+          err,
+        );
+        serializedValue = String(value);
+      }
+
+      if (available === "disabled") return;
+
+      ctxIdRef.value = core.addContext({
+        description,
+        value: serializedValue,
+      });
+
+      onCleanup(() => {
+        if (!ctxIdRef.value) return;
+        core.removeContext(ctxIdRef.value);
+      });
+    },
+    { immediate: true },
+  );
+
+  return ctxIdRef;
+}

package/src/hooks/use-frontend-tool.ts

@@ -0,0 +1,76 @@
+/**
+ * V1 compatibility wrapper for useFrontendTool.
+ *
+ * Accepts the legacy Parameter[] format and converts to Zod via getZodParameters,
+ * then delegates to the v2 composable.
+ */
+import type { WatchSource } from "vue";
+import {
+  type Parameter,
+  type MappedParameterTypes,
+  getZodParameters,
+  parseJson,
+} from "@copilotkit/shared";
+import { useFrontendTool as useFrontendToolV2 } from "../v2/hooks/use-frontend-tool";
+import type { VueFrontendTool } from "../v2/types";
+
+export interface UseFrontendToolArgs<T extends Parameter[] | [] = []> {
+  name: string;
+  description?: string;
+  parameters?: T;
+  handler?: (args: MappedParameterTypes<T>) => unknown | Promise<unknown>;
+  followUp?: boolean;
+  available?: "disabled" | "enabled";
+  render?: VueFrontendTool<MappedParameterTypes<T>>["render"];
+  agentId?: string;
+}
+
+export function useFrontendTool<const T extends Parameter[] = []>(
+  tool: UseFrontendToolArgs<T>,
+  deps?: WatchSource<unknown>[],
+) {
+  const {
+    name,
+    description,
+    parameters,
+    handler,
+    followUp,
+    available,
+    render,
+    agentId,
+  } = tool;
+  const zodParameters = getZodParameters(parameters);
+
+  // Wrap the v1 handler (single-arg) to match v2's (args, context) => Promise<unknown> signature
+  const normalizedHandler = handler
+    ? (args: MappedParameterTypes<T>) => Promise.resolve(handler(args))
+    : undefined;
+
+  // Wrap render to parse JSON-string results before passing them to the
+  // user's render function — matches the v1 React behavior. If render is a
+  // Component rather than a function, leave it unchanged.
+  const normalizedRender =
+    typeof render === "function"
+      ? ((props: { result?: unknown }) => {
+          const renderProps =
+            typeof props.result === "string"
+              ? { ...props, result: parseJson(props.result, props.result) }
+              : props;
+          return (render as (p: unknown) => unknown)(renderProps);
+        })
+      : render;
+
+  useFrontendToolV2<MappedParameterTypes<T>>(
+    {
+      name,
+      description,
+      parameters: zodParameters,
+      handler: normalizedHandler,
+      followUp,
+      render: normalizedRender,
+      available: available === undefined ? undefined : available !== "disabled",
+      agentId,
+    },
+    deps,
+  );
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+// V1 compat entry -- re-exports v2 with backward-compat wrappers
+export * from "./v2";
+
+// V1 wrapper overrides (these shadow v2 exports where the API differs)
+export { useCopilotAction } from "./hooks";
+export type { FrontendAction, CatchAllFrontendAction } from "./hooks";
+export { useFrontendTool } from "./hooks";
+export type { UseFrontendToolArgs } from "./hooks";
+export { useCopilotReadable } from "./hooks";
+export type { UseCopilotReadableOptions } from "./hooks";
+export { CopilotKit } from "./components/copilot-provider";
+export type { CopilotKitProps } from "./components/copilot-provider";