ContextQMD
Back to Copilotkit

CopilotKitProvider

showcase/shell-docs/src/content/reference/vue/components/CopilotKitProvider.mdx

1.61.19.2 KB
Original Source
<Callout type="info"> This is the Vue 3 provider component. Import it from `@copilotkit/vue/v2`. </Callout>

CopilotKitProvider typically wraps your entire application (or a sub-tree where you want a copilot). It creates the CopilotKit core instance and provides the copilot context to all descendant components and composables (such as useCopilotKit and useAgent).

The wrapped application is rendered through the component's default slot, since Vue uses slots rather than a children prop.

Example

vue
<script setup lang="ts">
import { CopilotKitProvider } from "@copilotkit/vue/v2";
</script>

<template>
  <CopilotKitProvider runtime-url="/api/copilotkit">
    <!-- ... your app ... -->
  </CopilotKitProvider>
</template>

Connect to Copilot Cloud with a public API key instead of a self-hosted runtime:

vue
<script setup lang="ts">
import { CopilotKitProvider } from "@copilotkit/vue/v2";
</script>

<template>
  <CopilotKitProvider public-api-key="ck_pub_your_key">
    <!-- ... your app ... -->
  </CopilotKitProvider>
</template>

Properties

You must provide at least one of runtimeUrl, publicApiKey, or publicLicenseKey (or a set of local agents), otherwise the provider warns in development and throws in production.

<PropertyReference name="runtimeUrl" type="string"> The endpoint for the Copilot Runtime instance. When omitted but a public key is set, requests fall back to the Copilot Cloud chat endpoint. </PropertyReference> <PropertyReference name="headers" type="Record<string, string> | (() => Record<string, string>)"> Additional headers to send with each request. Pass a plain object, or a function that returns headers (useful for dynamically resolved values such as auth tokens).
json
{
  "Authorization": "Bearer X"
}
</PropertyReference> <PropertyReference name="credentials" type="RequestCredentials"> Indicates whether the user agent should send or receive cookies for cross-origin requests. Set to `"include"` to enable HTTP-only cookie authentication (configure CORS with credentials on your runtime endpoint to match). </PropertyReference> <PropertyReference name="defaultThrottleMs" type="number"> Default throttle interval (in milliseconds) applied to `useAgent` composables that do not specify their own `throttleMs`. Must be a non-negative finite number; invalid values log an error and fall back to unthrottled. </PropertyReference> <PropertyReference name="publicApiKey" type="string"> Your Copilot Cloud API key.

Don't have it yet? Go to https://dashboard.operations.copilotkit.ai and get one for free.

</PropertyReference> <PropertyReference name="publicLicenseKey" type="string"> Your public license key for accessing Enterprise Intelligence Platform features.

Don't have it yet? Go to https://dashboard.operations.copilotkit.ai and get one for free.

</PropertyReference> <PropertyReference name="licenseToken" type="string"> Signed license token for offline verification of Enterprise Intelligence Platform features. Obtain it from https://dashboard.operations.copilotkit.ai. </PropertyReference> <PropertyReference name="properties" type="Record<string, unknown>" default="{}"> Custom properties sent with each request. Can include `threadMetadata` for thread creation and `authorization` for LangGraph Platform authentication.
js
{
  user_id: "users_id",
  authorization: "your-auth-token", // For LangGraph Platform authentication
  threadMetadata: {
    account_id: "123",
    user_type: "premium",
  },
}
</PropertyReference> <PropertyReference name="useSingleEndpoint" type="boolean"> Controls the runtime transport. `true` uses a single endpoint, `false` uses the REST transport, and when omitted the transport is auto-detected. </PropertyReference> <PropertyReference name="agents__unsafe_dev_only" type="Record<string, AbstractAgent>" default="{}"> Local in-browser agents keyed by agent ID, for development only. These run client-side rather than through the runtime, so do not rely on them in production. </PropertyReference> <PropertyReference name="selfManagedAgents" type="Record<string, AbstractAgent>" default="{}"> Self-managed agents keyed by agent ID. Merged with `agents__unsafe_dev_only` (these take precedence on key collisions). </PropertyReference> <PropertyReference name="renderToolCalls" type="VueToolCallRenderer<any>[]"> Renderers for tool calls, mapping a tool name and argument schema to a Vue component used to render the tool call in the UI. </PropertyReference> <PropertyReference name="renderActivityMessages" type="VueActivityMessageRenderer<unknown>[]" default="[]"> Renderers for activity messages, mapping an activity type and content schema to a Vue component. The built-in MCP Apps renderer is always merged in automatically; the A2UI and Open Generative UI renderers are merged in when those features are active. </PropertyReference> <PropertyReference name="renderCustomMessages" type="VueCustomMessageRenderer[]" default="[]"> Renderers for custom message types. </PropertyReference> <PropertyReference name="frontendTools" type="VueFrontendTool[]" default="[]"> Frontend tools available to the agent. Must be a stable array; to add or remove tools dynamically, use the [`useFrontendTool`](/reference/vue/hooks/useFrontendTool) composable instead. </PropertyReference> <PropertyReference name="humanInTheLoop" type="VueHumanInTheLoop[]" default="[]"> Human-in-the-loop tools that pause for user input before resolving. Must be a stable array; to add or remove them dynamically, use the [`useHumanInTheLoop`](/reference/vue/hooks/useHumanInTheLoop) composable instead. </PropertyReference> <PropertyReference name="openGenerativeUI" type="{ sandboxFunctions?: SandboxFunction[]; designSkill?: string }"> Configuration for Open Generative UI. `sandboxFunctions` exposes host functions to generated sandboxed UI (callable via `Websandbox.connection.remote`), and `designSkill` overrides the default design guidelines provided to the generation tool. `sandboxFunctions` must be a stable array. </PropertyReference> <PropertyReference name="showDevConsole" type="boolean | &quot;auto&quot;" default="false"> Whether to show the dev console and inspector. `true` always shows it, `false` always hides it, and `"auto"` shows it only on `localhost` / `127.0.0.1`. </PropertyReference> <PropertyReference name="onError" type="(event: { error: Error; code: CopilotKitCoreErrorCode; context: Record<string, any> }) => void | Promise<void>"> Optional error handler for debugging and observability. Receives a structured error event with the error, an error code, and contextual debugging information.
vue
<script setup lang="ts">
import { CopilotKitProvider } from "@copilotkit/vue/v2";

function handleError(event: {
  error: Error;
  code: string;
  context: Record<string, any>;
}) {
  debugDashboard.capture(event);
}
</script>

<template>
  <CopilotKitProvider public-api-key="ck_pub_your_key" :on-error="handleError">
    <!-- ... your app ... -->
  </CopilotKitProvider>
</template>
</PropertyReference> <PropertyReference name="a2ui" type="{ theme?: A2UITheme; catalog?: any; loadingComponent?: Component; includeSchema?: boolean }"> Configuration for the A2UI (Agent-to-UI) renderer. The built-in A2UI renderer activates automatically when the runtime reports that `a2ui` is configured in `CopilotRuntime`, so this prop is optional and only needed to override the theme, supply a custom component `catalog`, set a `loadingComponent`, or toggle whether the schema is included (`includeSchema`).
vue
<template>
  <CopilotKitProvider
    runtime-url="/api/copilotkit"
    :a2ui="{ theme: myCustomTheme }"
  >
    <!-- ... your app ... -->
  </CopilotKitProvider>
</template>
</PropertyReference> <PropertyReference name="inspectorDefaultAnchor" type="{ horizontal: &quot;left&quot; | &quot;right&quot;; vertical: &quot;top&quot; | &quot;bottom&quot; }" default='{ horizontal: "right", vertical: "top" }'> Default anchor corner for the inspector button and window. Used only on first load, before the user drags it to a custom position. </PropertyReference> <PropertyReference name="debug" type="DebugConfig"> Enable debug logging for the client-side event pipeline. Accepts `true` / `false` to toggle events and lifecycle logging (verbose off), or `{ events?: boolean; lifecycle?: boolean; verbose?: boolean }` for granular control. </PropertyReference>

Slots

<PropertyReference name="default" type="slot" required> The default slot renders the wrapped application. Vue uses slots rather than a `children` prop, so everything placed between the opening and closing `<CopilotKitProvider>` tags receives the copilot context.
vue
<template>
  <CopilotKitProvider runtime-url="/api/copilotkit">
    <!-- This content is the default slot -->
    <App />
  </CopilotKitProvider>
</template>
</PropertyReference>