Docs ·
Examples ·
Intelligence ·
OpenBot ·
Discord
CopilotKit is the open-source stack for putting AI agents in front of real users. Bring the agent you already built, on any framework, and give it chat, generative UI, shared state, and human-in-the-loop in React, Angular, Vue, React Native, Slack, and Microsoft Teams.
When it goes to production, add CopilotKit Intelligence and your agents keep getting better: conversations that pick up where users left off, memory across sessions, and Continual Learning that turns real use into Skills you review and publish.
We're also the team behind AG-UI, the open Agent–User Interaction protocol adopted by Google, Microsoft, AWS, LangChain, Mastra, PydanticAI, and more.
What's new
| What's new | What it is |
|---|
| 🪁 CopilotKit Soar | AI coworkers your company owns, running on your own servers. Powered by OpenBot. Now in early access → |
| 🔁 Continual Learning | Agents learn from full-stack trajectories (what the agent did and what your users did), captured over AG-UI. |
| 🤖 OpenBot | Open-source AI coworkers that each get a computer of their own. MIT licensed. |
| 🧩 AG-UI 1.0 + A2UI 1.0 | CopilotKit now speaks AG-UI 1.0 and the A2UI 1.0 spec for declarative generative UI. |
| 💬 Channels | Write Channels JSX once. Render native Block Kit in Slack and Adaptive Cards in Microsoft Teams. |
Full changelog in What's New.
Quick start
Let your coding agent do it. Paste this prompt into Claude Code, Cursor, Codex, or any coding agent running in your project. It inspects your app and walks you through the integration.
Help me get started with CopilotKit. From the root of my project, run this
command and follow the instructions:
npx --yes copilotkit@latest onboard start
Start a new project. Scaffolds a fresh app in its own directory. It won't touch an app you already have.
npx copilotkit@latest create
Give your coding agent CopilotKit skills. Helps it build features and debug issues once you're set up (learn more).
npx copilotkit@latest skills install
npm install @copilotkit/react-core @copilotkit/runtime
# .env.local
OPENAI_API_KEY=your_openai_api_key
// 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 };
// 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>
);
}
Already running LangGraph, CrewAI, Mastra, or another framework? Swap the Built-in Agent for yours using that framework's quickstart.
https://github.com/user-attachments/assets/4af4c22a-1638-4328-add7-ede088afea64
How it works
Your agent handles reasoning and execution. CopilotKit turns its work into a product experience. Events stream over AG-UI, so the agent can show its work as it happens, read what the user is looking at, call tools that render UI, and pause for a person to approve the next step. Your agent logic stays the same on every surface.
What you can build
https://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3
| Feature | What it does |
|---|
| Chat components | Start with a working chat, replace the parts you need with slots, or go fully Headless UI. |
| Generative UI | Agents render real UI, from your own components to A2UI specs to sandboxed MCP Apps. |
| Shared state | One state layer that both the agent and your UI read and write in real time. |
| Human-in-the-loop | Agents pause for input, confirmation, or edits before they act. |
| Frontend tools | Let the agent take actions inside your app, with your code doing the work. |
| AG-UI Streams | Conversations that survive reloads, devices, and sessions, with generative UI intact. |
| Voice and WebMCP | Talk to your agent, and expose your app's actions to browser agents. |
| Inspector | A localhost overlay that shows threads, agents, and learning as you build. |
Full control with useAgent
Every component is built on hooks you can use directly. useAgent sits right on top of AG-UI and gives you programmatic control of the agent connection.
import { useAgent } from "@copilotkit/react-core/v2";
function CityPicker() {
const { agent } = useAgent({ agentId: "my_agent" });
return (
<div>
<h1>{agent.state.city}</h1>
<button onClick={() => agent.setState({ city: "NYC" })}>Set city</button>
</div>
);
}
More in the programmatic control docs.
Generative UI, three ways
https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6
| Type | The agent… | Built on |
|---|
| Controlled | picks from components you registered | AG-UI tool calls and state |
| Declarative | describes UI as a structured spec your app renders | A2UI |
| Open-ended | ships a full interface that runs in a sandbox | MCP Apps |
Want to go deeper? The Generative UI educational repo walks through all three.
Works with your stack
One agent backend. Every frontend.
Agent frameworks. LangGraph · Deep Agents · CrewAI · Mastra · Google ADK · PydanticAI · Microsoft Agent Framework · AWS Strands · Claude Agent SDK · LlamaIndex · Agno · AG2 · A2A · or CopilotKit's Built-in Agent.
CopilotKit Intelligence
Most agents plateau at launch quality. CopilotKit Intelligence is the production layer that keeps yours improving. It works with the CopilotKit app and agent framework you already run, cloud-hosted or self-hosted on your own infrastructure.
- Continual Learning: real use of your app becomes evidence-backed insights, then Skills you review and publish. Every learned behavior traces back to its source.
- AG-UI Streams: conversations pick up where users left off, with messages, generative UI, and live runs restored as they were.
- User Memories: durable facts and preferences carried across conversations, recalled semantically.
- Product Analytics: see what users ask for, what agents do, and where people get value.
- Channels: Slack and Microsoft Teams infrastructure for the agent you already built.
- Self-hosted: the same platform inside your Kubernetes cluster, VPC, or air-gapped environment.
The Developer plan is free. 👉 Connect Intelligence in 5 minutes → · Compare open source and Intelligence
AI coworkers, built on CopilotKit
We build real products on this stack, and open-source them.
OpenBot is an open-source agent workspace for your employees. Every AI coworker gets a computer of its own, with a browser, files, and tools, and every action is decided before it happens and recorded after. Bring any AG-UI agent and any model.
CopilotKit Soar turns that core into one business-ready product. It gives each employee an AI coworker that works in your company's tools, learns new tasks from the people it works with, and runs on your own servers. Our engineers set it up with you, then hand you the keys.
Soar is in early access today. 👉 Get early access →
AG-UI: the Agent–User Interaction protocol
AG-UI is the open, event-based protocol that connects agents to the people using them. MCP connects agents to tools, A2A connects agents to each other, and AG-UI connects them to your users. CopilotKit is built on it, and it has first-party integrations across LangChain, CrewAI, Mastra, PydanticAI, Google ADK, AWS, Microsoft, and more.
npx create-ag-ui-app my-agent-app
👉 Explore AG-UI on GitHub →
Community
Discord · Docs · X · LinkedIn · Blog
Contributing
Thanks for your interest in contributing to CopilotKit! 💜 We value every contribution, whether it's code, docs, a demo app, or spreading the word.
License
The source code in this repository is available under the MIT License.
