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.

Full changelog in What's New.

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>
  );
}

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.

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.

Want to go deeper? The Generative UI educational repo walks through all three.

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.

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

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 →

OpenBot AI coworkers, each with a computer of its own.

OpenDots Always-on coworkers for text, calls, and Slack.

OpenMuse A personal agent for iOS, Android, and web.

OpenTag An on-call triage bot for Slack and Teams.

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 →

Discord · Docs · X · LinkedIn · Blog

Thanks for your interest in contributing to CopilotKit! 💜 We value every contribution, whether it's code, docs, a demo app, or spreading the word.

• Code: start with CONTRIBUTING.md.
• Docs: see the docs contribution guide.
• Not sure where to start? Join our Discord and we'll help you find something.

The source code in this repository is available under the MIT License.