Skip to content

CopilotKitProvider.mdx

Latest commit

 

History

History
213 lines (160 loc) · 9.39 KB

CopilotKitProvider.mdx

File metadata and controls

213 lines (160 loc) · 9.39 KB
Raw
title CopilotKitProvider
description The Vue 3 provider component that wraps your application and supplies the CopilotKit context.
This is the Vue 3 provider component. Import it from `@copilotkit/vue/v2`.

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

<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:

<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.

The endpoint for the Copilot Runtime instance. When omitted but a public key is set, requests fall back to the Copilot Cloud chat endpoint. 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). 
{
  "Authorization": "Bearer X"
}
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). 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. Your Copilot Cloud API key.

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

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.

Signed license token for offline verification of Enterprise Intelligence Platform features. Obtain it from https://dashboard.operations.copilotkit.ai. Custom properties sent with each request. Can include `threadMetadata` for thread creation and `authorization` for LangGraph Platform authentication. 
{
  user_id: "users_id",
  authorization: "your-auth-token", // For LangGraph Platform authentication
  threadMetadata: {
    account_id: "123",
    user_type: "premium",
  },
}
Controls the runtime transport. `true` uses a single endpoint, `false` uses the REST transport, and when omitted the transport is auto-detected. 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. Self-managed agents keyed by agent ID. Merged with `agents__unsafe_dev_only` (these take precedence on key collisions). Renderers for tool calls, mapping a tool name and argument schema to a Vue component used to render the tool call in the UI. 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. Renderers for custom message types. 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. 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. 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. 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`. Optional error handler for debugging and observability. Receives a structured error event with the error, an error code, and contextual debugging information. 
<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>
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`). 
<template>
  <CopilotKitProvider
    runtime-url="/api/copilotkit"
    :a2ui="{ theme: myCustomTheme }"
  >
    <!-- ... your app ... -->
  </CopilotKitProvider>
</template>
Default anchor corner for the inspector button and window. Used only on first load, before the user drags it to a custom position. 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.

Slots

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

Related