feat(vue): implement core hooks and composables

Vue 3 composition API hooks matching React hook parity:
agents, attachments, suggestions, frontend tools, HITL,
interrupts, threads, keyboard/katex utilities, and
pin-to-send.

Author: enekesabel

packages/vue/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";

packages/vue/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,
+  );
+}

packages/vue/src/v2/hooks/index.ts

@@ -0,0 +1,29 @@
+export { useAgent, UseAgentUpdate } from "./use-agent";
+export { useAgentContext } from "./use-agent-context";
+export type { AgentContextInput, JsonSerializable } from "./use-agent-context";
+export { useFrontendTool } from "./use-frontend-tool";
+export { useComponent } from "./use-component";
+export { useRenderTool } from "./use-render-tool";
+export { useDefaultRenderTool } from "./use-default-render-tool";
+export { useHumanInTheLoop } from "./use-human-in-the-loop";
+export { useSuggestions } from "./use-suggestions";
+export type {
+  UseSuggestionsOptions,
+  UseSuggestionsResult,
+} from "./use-suggestions";
+export { useConfigureSuggestions } from "./use-configure-suggestions";
+export { useInterrupt } from "./use-interrupt";
+export type { UseInterruptConfig, UseInterruptResult } from "./use-interrupt";
+export { useThreads } from "./use-threads";
+export type { Thread, UseThreadsInput, UseThreadsResult } from "./use-threads";
+export { useAttachments } from "./use-attachments";
+export type {
+  UseAttachmentsProps,
+  UseAttachmentsReturn,
+} from "./use-attachments";
+export { useKeyboardHeight } from "./use-keyboard-height";
+export type { KeyboardState } from "./use-keyboard-height";
+export { useKatexStyles } from "./use-katex-styles";
+export { useCapabilities } from "./use-capabilities";
+export { useRenderCustomMessages } from "./use-render-custom-messages";
+export { useRenderActivityMessage } from "./use-render-activity-message";

packages/vue/src/v2/hooks/use-agent-context.ts

@@ -0,0 +1,55 @@
+import { computed, toValue, watch } from "vue";
+import type { MaybeRefOrGetter } from "vue";
+import { useCopilotKit } from "../providers/useCopilotKit";
+
+export type JsonSerializable =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonSerializable[]
+  | { [key: string]: JsonSerializable };
+
+export interface AgentContextInput {
+  description: MaybeRefOrGetter<string>;
+  value: MaybeRefOrGetter<JsonSerializable>;
+}
+
+/**
+ * Registers reactive contextual data that is sent with agent runs.
+ *
+ * The context entry is added when the composable is active and removed
+ * automatically on scope cleanup.
+ *
+ * @example
+ * ```ts
+ * useAgentContext({
+ *   description: "Current workspace",
+ *   value: "copilotkit-vue",
+ * });
+ * ```
+ */
+export function useAgentContext(context: AgentContextInput): void {
+  const { copilotkit } = useCopilotKit();
+  const resolvedDescription = computed(() => toValue(context.description));
+  const resolvedValue = computed(() => toValue(context.value));
+
+  const stringValue = computed(() =>
+    typeof resolvedValue.value === "string"
+      ? resolvedValue.value
+      : JSON.stringify(resolvedValue.value),
+  );
+
+  watch(
+    [() => copilotkit.value, resolvedDescription, stringValue],
+    (_newValues, _old, onCleanup) => {
+      const core = copilotkit.value;
+      const id = core.addContext({
+        description: resolvedDescription.value,
+        value: stringValue.value,
+      });
+      onCleanup(() => core.removeContext(id));
+    },
+    { immediate: true },
+  );
+}