Vue

@copilotkit/vue provides Vue 3 components and composables for CopilotKit. This guide gets you to a working Vue app with a chat UI talking to an AG-UI agent.

It connects to the agent directly with HttpAgent, so there's no CopilotKit runtime to stand up and nothing framework-specific to configure. The same setup works with any AG-UI-compatible agent, whether it's built on LangGraph, CrewAI, Mastra, Pydantic AI, or your own server.

Prerequisites#

A running AG-UI-compatible agent endpoint. If you don't have one yet, pick a framework under Integrations and follow its agent setup.
Vue 3.3+
Node.js 18+

Getting started#

Create your Vue app#

If you don't have one already:

npm create vue@latest my-copilot-app
cd my-copilot-app
npm install

Install CopilotKit#

npm install @copilotkit/vue

pnpm add @copilotkit/vue

yarn add @copilotkit/vue

Import the styles#

Import the package stylesheet once in your app entry. It's self-contained, so the chat renders without any other CSS.

src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "@copilotkit/vue/styles.css"; 

createApp(App).mount("#app");

Connect to your agent#

Create an HttpAgent pointing at your agent endpoint, hand it to CopilotKitProvider, and drop in CopilotChat. Register the agent under the id default so the chat picks it up automatically.

src/App.vue

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

// Point this at your AG-UI-compatible agent endpoint
const agent = new HttpAgent({ url: "http://localhost:8000/" }); 
</script>

<template>
  <CopilotKitProvider :self-managed-agents="{ default: agent }">
    <div style="height: 100vh">
      <CopilotChat />
    </div>
  </CopilotKitProvider>
</template>

Pick your chat layout

CopilotChat is a full-height chat. Swap it for CopilotSidebar (a collapsible side panel) or CopilotPopup (a floating widget) for a different layout. They take the same props.

Run the app#

npm run dev

Open the dev server URL (Vite prints it, usually http://localhost:5173), send a message, and you'll see it stream back from your agent.

Troubleshooting

Chat renders unstyled: Make sure you imported @copilotkit/vue/styles.css in your app entry.
No response from the agent: Confirm the url points at a reachable AG-UI endpoint and that the agent is running. Check the browser network tab for the request.
CORS errors: A browser-direct connection needs the agent endpoint to allow your app's origin. Enable CORS on the agent, or put it behind the CopilotKit runtime.

Where to go next#

Self-managed agents: securing the connection, the dev-only registration variant, and combining with a runtime.
Connect AG-UI agents: the HttpAgent interface and the AG-UI protocol.
Integrations: set up the agent itself on LangGraph, CrewAI, Mastra, and other frameworks.

The composables (useAgent, useFrontendTool, useHumanInTheLoop, and more) mirror the React SDK. See the @copilotkit/vue README for the full API, slot-based customization, and Nuxt SSR setup.