CopilotKit

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. Source on GitHub.
🧩 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-6-luna" }) },
});

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.

This is the beginning of the README. Read the rest at the original. Read the full README ↗