copilotkit-docs

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

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

Prefer to wire it up by hand? Here's a Next.js app in three files.

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.

What you can build

https://github.com/user-attachments/assets/72b7b4f3-b6e7-460c-a932-5746fe3c8db3

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