CopilotKit for Vue: the full React SDK, now native to Vue

TL;DR. @copilotkit/vue gives Vue apps the same CopilotKit features React apps have: chat components, frontend tools, shared state, human in the loop, generative UI, and threads, all over AG-UI. Abel Enekes, a software engineer at fynk, built it and contributed upstream.

To get started check out the Vue quick start.

Here’s a full CopilotKit app in Vue:

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

<template>
  <CopilotKitProvider runtime-url="/api/copilotkit">
    <main style="height: 100dvh">
      <CopilotChat />
    </main>
  </CopilotKitProvider>
</template>

That’s a streaming chat connected to your agent. It runs on the same runtime, the same AG-UI events, and the same agent you’d use with React.

What you get

The Vue SDK follows the React API by name and by behavior. If you’ve read the React docs, you already know it.

• Prebuilt chat UI. CopilotChat, CopilotSidebar and CopilotPopup, with Vue slots where React uses render props.
• Frontend tools. useFrontendTool lets the agent call functions in your app, with Zod, Valibot or ArkType schemas.
• Shared context. useAgentContext sends reactive app state with every run. Pass a ref and the agent sees what the user sees.
• Human in the loop. useHumanInTheLoop and useInterrupt pause the agent until the user answers.
• Generative UI. useRenderTool and useComponent render tool calls with your own Vue components.
• Agents and threads. useAgent, useThreads and useSuggestions for state, history and next steps.
• Attachments and voice, plus the CopilotKit inspector for debugging runs.

Here’s human in the loop in Vue. The agent asks before it acts, and your component decides how to ask:

import { useHumanInTheLoop } from "@copilotkit/vue/v2";
import { z } from "zod";
import ConfirmCard from "./ConfirmCard.vue";

useHumanInTheLoop({
  name: "confirmSendForSignature",
  description: "Ask the user before sending a contract for signature",
  parameters: z.object({ contractName: z.string() }),
  render: ConfirmCard, // receives args, status and respond()
});

ConfirmCard shows the contract name and two buttons. A click calls respond(...) and the agent run continues.

One agent, every frontend

CopilotKit sits between your UI and your agent. AG-UI, the open protocol underneath, keeps the two independent: your agent emits events for text, tool calls, state, and pauses, and any CopilotKit frontend can render them.

Vue now sits next to React, React Native, and Angular. Your agent doesn’t change. LangGraph, CrewAI, Mastra, Pydantic AI, Google ADK, Microsoft Agent Framework, or any other AG-UI agent works the same behind a Vue app as behind a React one.

That separation is why a Vue SDK was possible at all. Nothing about the agent was React-specific. Only the frontend layer was.

Built by the community

We didn’t write the first version. Abel Enekes did.

Abel is a software engineer at fynk, a contract management platform. fynk’s app is built in Vue, and its team wanted an in-app assistant that could read contracts, compare them, show its work, and ask before changing anything. CopilotKit had everything they needed, except Vue support.

They had three options: fork CopilotKit and maintain it alone, wait for us, or build it upstream. They chose to build it upstream.

Abel started in February, planning to write “a couple of lines” with a coding agent. He ported CopilotKit’s React test suite first, then wrote the Vue code until those tests passed. He recorded the rules for translating React patterns to Vue in a parity guide that now ships with the package. The pull request came in at 62,517 lines across 244 files.

“I just wanted to save a couple of lines. Getting from ‘it works’ to ‘it works like CopilotKit’ was the real journey.”
Abel Enekes, Software Engineer at fynk

Our team reviewed it the day it opened. We reworked parts of the architecture and merged it on May 13, 2026. @copilotkit/vue was on npm that evening.

Since then, other contributors and we have shipped more than twenty Vue fixes and features, including a threads drawer, human-in-the-loop fixes, accessibility work, and full Vue docs. Abel has merged five more pull requests.

fynk now runs its production assistant on it. Their write-up covers what they built, why they chose an open protocol over their own message format, and how the switch removed about 11,000 lines from their codebase.

Get started

npm install @copilotkit/vue

• Vue quick start
• Vue API reference
• Source on GitHub
• Read fynks Vue contribution story

If you build something with it, show us. Vue developers can now build any CopilotKit feature in Vue, thanks to someone who needed it and built it upstream.

Thanks, Abel, and thanks to the fynk team for working on this upstream with us. 💚