Vue

@copilotkit/vue brings CopilotKit to Vue 3. It ships a provider, a set of prebuilt chat components, and composables that mirror the React SDK. Everything is built on the AG-UI agent protocol.

Installation

npm install @copilotkit/vue

Styling

When using the prebuilt UI components, import the stylesheet once at your app entry point:

import "@copilotkit/vue/styles.css";

Provider setup

Wrap your app (or a sub-tree) with CopilotKitProvider to configure the runtime connection. Composables and components read this context through Vue's provide/inject, so they must be used within the provider.

<script setup lang="ts">
import { CopilotKitProvider, CopilotChat } from "@copilotkit/vue/v2";
import "@copilotkit/vue/styles.css";
</script>

<template>
  <CopilotKitProvider runtime-url="/api/copilotkit">
    <CopilotChat />
  </CopilotKitProvider>
</template>

Vue conventions

A few patterns recur across this reference and differ from the React SDK:

• Composables return refs. A composable such as useAgent returns reactive refs (for example { agent }). Read them with .value in <script setup>, or unwrapped directly in templates.
• Reactive arguments. Many composables accept MaybeRefOrGetter arguments, so you can pass a plain value, a ref, or a getter and the composable stays reactive to changes.
• Props are kebab-case in templates. Component props are documented with their camelCase names but are written as kebab-case attributes in templates (for example runtimeUrl becomes runtime-url).
• Slots replace render props. Where the React SDK uses render props or children, the Vue components expose named slots for the same customization.

API Reference