CopilotKitProvider

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.

Slots

Related

• useCopilotKit -- Low-level composable for accessing the provider context
• useAgent -- High-level composable for accessing agent instances
• useFrontendTool -- Register frontend tools dynamically
• useHumanInTheLoop -- Register human-in-the-loop tools dynamically