CopilotKit

What it is

CopilotKit is an open source stack for putting an AI agent in front of the people who use your app. You bring the agent, built on LangGraph, CrewAI, Mastra or another framework, or you use CopilotKit’s built-in one. CopilotKit gives it a chat, generative UI, shared state and human-in-the-loop. Copilot Runtime sits on your server and talks to the agent. A frontend package shows the chat in React, Angular, Vue or React Native. Events between them stream over AG-UI, an open protocol from the same team. The code is under the MIT license.

1. A user types in the chat inside your app
2. The frontend sends the run to Copilot Runtime
3. The runtime calls your agent, or the built-in one
4. Events stream back over AG-UI as the agent works
5. Your app shows text, tool UI and shared state

Who it suits

Developers who have an agent, or want one, and need a place inside a real app where users talk to it. React and Next.js developers get the most complete route, since the README marks that surface GA. Angular, Vue and React Native are marked supported. Teams whose graph already runs on LangGraph can keep it where it runs. The LangGraph page says nothing inside the graph changes. They add a runtime route that registers it, and the frontend.

Skip it if you want a chatbot without writing code. Every route here has you edit an app and host the runtime yourself.

Where to use it

CopilotKit runs inside your own app, on the frontends and agent backends the README lists.

• React and Next.js: marked GA, with the Quickstart as the main route
• Angular, Vue and React Native: marked supported, each with its own quickstart
• Slack and Microsoft Teams: marked GA on cloud-hosted CopilotKit Intelligence
• Agent backends: LangGraph, Deep Agents, CrewAI, Mastra, Google ADK, PydanticAI, Microsoft Agent Framework, AWS Strands, Claude Agent SDK, LlamaIndex, Agno, AG2 and A2A, or the built-in agent
• Coding agents: skills for Claude Code, Codex, Cursor and Gemini CLI, and an MCP docs server with steps for Claude Code, Codex, Cursor, Windsurf, Cline, GitHub Copilot and the Claude apps

How to set it up

Get it saves a zip of Mindket’s setup notes in your downloads folder. It holds a file for each frontend, the LangGraph route, models and keys, and each coding agent. Below is Next.js by hand, from the README and the Quickstart.

1. Create a Next.js app. Skip this step in an app you already have.
2. Install the two CopilotKit packages.
3. Put your OpenAI key in .env.local. That is the README’s file name, and the Quickstart uses .env.
4. Add the runtime route. It registers CopilotKit’s built-in agent under the name default.
5. Add the provider and the sidebar. In the README’s version, app/page.tsx wraps the page in CopilotKitProvider and imports the stylesheet.
6. Start the dev server and ask something. The Quickstart suggests “Can you tell me a joke?”

npx create-next-app@latest my-copilot-app
cd my-copilot-app
npm install @copilotkit/react-core @copilotkit/runtime

The README’s runtime route:

// app/api/copilotkit/[[...slug]]/route.ts
import {
  CopilotRuntime,
  createCopilotRuntimeHandler,
  BuiltInAgent,
} from "@copilotkit/runtime/v2";

const runtime = new CopilotRuntime({
  agents: { default: new BuiltInAgent({ model: "openai:gpt-5.4-mini" }) },
});

const handler = createCopilotRuntimeHandler({
  runtime,
  basePath: "/api/copilotkit",
});
export { handler as GET, handler as POST, handler as PATCH, handler as DELETE };

And its page:

// app/page.tsx
"use client";
import { CopilotKitProvider, CopilotSidebar } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";

export default function Page() {
  return (
    <CopilotKitProvider runtimeUrl="/api/copilotkit">
      <main>
        <h1>Your App</h1>
        <CopilotSidebar />
      </main>
    </CopilotKitProvider>
  );
}

If you would rather not wire it by hand, paste the README’s prompt into your coding agent. It has the agent run npx --yes copilotkit@latest onboard start and walk you through the setup. The create command below scaffolds a new app in its own folder and leaves an existing app alone.

npx copilotkit@latest create

How to use it

You talk to the agent in the chat, and your own code decides what else it can reach in the app. These React pieces come from the README and the docs pages Mindket read.

In a development build, an Inspector button sits in the corner of the app. It lists your agent, the AG-UI events of each run and the tools registered in the browser. Each web quickstart ends by checking that the agent shows up there and that events move when you send a message. React Native has no Inspector, since it is a browser overlay.

Example

Your app shows a todo list that reads agent.state.todos, with CopilotChat beside it, as on the Shared State page. You type this into the chat.

Add a task to buy groceries

The agent updates the shared state, and the todo list shows the new item at once. You write no backend code for this, because the Built-in Agent has the state tools AGUISendStateSnapshot and AGUISendStateDelta by default. The runtime sends each update to the browser over SSE, and useAgent re-renders the list.

For newcomers and experts

If you are new. An agent is a language model that can call tools and work through steps. CopilotKit is the part your users see. The runtime is a small server piece that holds your model key and talks to the agent, so the key stays out of the browser. AG-UI is the stream of events between the agent and your page: text, tool calls and state changes. Human-in-the-loop means the agent stops and waits for a person’s answer. Start with the Next.js steps above and the built-in agent. It needs only an OpenAI key.

For experts. The Built-in Agent runs on AI SDK 6 from Vercel. A model string is provider:model, and the id goes to the provider unchanged. With OPENAI_BASE_URL set to a host that is not OpenAI or Azure, it switches to the Chat Completions API, and COPILOTKIT_OPENAI_API lets you pick the API yourself. A custom model is any AI SDK model from a provider package on its ai-v6 line. For OpenAI-compatible services, call provider.chat(model), since the bare call goes to the Responses API.

Generative UI comes three ways. Controlled UI picks from components you registered, declarative UI renders an A2UI spec, and open-ended UI runs a full interface in a sandbox through MCP Apps. For pauses, useHumanInTheLoop is a tool the model chooses to call, while useInterrupt follows an interrupt() inside a LangGraph node. The docs say the Built-in Agent does not support interrupts.

In the React SPA, Vue, Angular and React Native quickstarts, the runtime is its own Node server built with createCopilotNodeListener. Its CORS is off by default, so a browser app on another port needs cors: true and an absolute runtimeUrl. The docs note that the Express and Hono adapters default to permissive CORS. The /v2 subpaths need moduleResolution set to bundler in tsconfig.json, or type checking fails while the app still runs.

Good to know

The open-source packages run in your app and on your server. A few parts reach out, and one is commercial.

• License: MIT. The LICENSE file reads “Copyright (c) Atai Barkai”
• The CLI: npx copilotkit@latest runs the copilotkit npm package. Its npm page lists its repository as CopilotKit/Intelligence and its license as “SEE LICENSE IN LICENSE”, not the MIT text above
• Hosted layers: CopilotKit Intelligence adds saved threads, memory, learning, analytics and Slack or Teams channels, cloud-hosted or self-hosted. The README says its Developer plan is free, and the pages Mindket read give no prices. The README marks CopilotKit Soar as commercial, and it is in early access
• Usage data: the packages send metadata-only telemetry, and the docs say it holds no prompts, messages, agent state or tool data. COPILOTKIT_TELEMETRY_DISABLED=true in the runtime’s environment turns it off for the runtime and the Inspector
• Your model provider: your server sends the conversation to the provider you choose. Keep the key on the server and out of VITE_ variables, which reach the browser
• Coding agent extras: the MCP docs server runs at mcp.copilotkit.ai. The Build with agents page installs the skills with Vercel Labs’ skills tool (npx skills add CopilotKit/CopilotKit/skills -y). That tool needs Node.js 22.20 or later and collects anonymous usage data. DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 turns off its telemetry and security-audit requests
• Removal: the quickstarts give no uninstall steps for the packages. Use your package manager, and claude mcp remove copilotkit-mcp -s project for the Claude Code server