What is CopilotKit?

An agent that only produces text wastes the application it lives in. CopilotKit connects the two: a hook publishes part of your application state so the agent can read it, another registers a frontend function the agent may call, and a third lets the agent answer with a real React component rather than a paragraph — a form to confirm, a chart, a diff to approve. It talks to backends through AG-UI, the protocol the same team publishes, so the agent can be LangGraph, CrewAI, the Claude Agent SDK or several others without changing the frontend. What it does not do is be the agent: you still bring one, and the smooth path is React.

What can you do with CopilotKit?

Let the agent see what is on the screen — A hook publishes a piece of your application state, so the agent answers about the row the user is looking at rather than asking them to describe it.
Let the agent press the buttons — Frontend functions can be registered as actions the agent may call, so it can filter a table or open a dialog instead of explaining how to.
Answer with a component, not a paragraph — The agent can render a React component inside the conversation — a confirmation form, a chart, a diff — so the next step is a click rather than a copy-and-paste.
Keep the chat or keep your design — Ready-made chat, sidebar and popup surfaces cover the common case; the headless option gives you the runtime with none of the styling.
Change the agent without changing the UI — The frontend speaks AG-UI, so swapping LangGraph for CrewAI or the Claude Agent SDK behind it does not reach the components.

Before you choose CopilotKit

It is the front end only. You still need an agent behind it, and the value appears once that agent exists — on its own it adds a chat box to an application that has nothing to say.
React is the supported path in practice; other frontends and the hosted intelligence features are advertised, but the documentation, examples and component library are written for React.

Frequently asked questions

Is CopilotKit free for commercial use?

CopilotKit is released under the MIT licence — OSI-approved open source, which permits commercial use.

How can CopilotKit be deployed?

CopilotKit is available as Self-hosted / Managed cloud.

Documentation

Reproduced from the CopilotKit/CopilotKit README, published under MIT. Read the original ↗

CopilotKit

Docs · Examples · CopilotKit Intelligence · Discord

Build agent-native applications — on any framework, on any surface.

Generative UI, shared state, and human-in-the-loop workflows for React, Angular, Vue, React Native — and in Slack and Microsoft Teams.

What is CopilotKit

CopilotKit is a best-in-class SDK for building full-stack agentic applications, Generative UI, and chat applications.

What started as a React library is now the horizontal layer between your agents and your users: the same agent can power your web app, your mobile app, and your team’s Slack or Microsoft Teams workspace.

We are the company behind the AG-UI Protocol — adopted by Google, LangChain, AWS, Microsoft, Mastra, PydanticAI, and more!

Quick Start

Up and running in under five minutes. All you need is an LLM key (OpenAI, Anthropic, Gemini, etc.).

npx copilotkit@latest create

Agent Skills

CopilotKit ships agent skills that teach your coding agent (Claude Code, Codex, Cursor, Gemini, and others) how to set up, build with, integrate, debug, and upgrade CopilotKit.

Install them into any project directory:

npx copilotkit@latest skills install

Run it again any time to refresh to the latest skills.

Bring Your App to Life

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

Features:

Chat UI – A fully customizable chat interface that supports message streaming, tool calls, and agent responses.
Backend Tool Rendering – Enables agents to call backend tools that return UI components rendered directly in the client.
Generative UI – Allows agents to generate and update UI components dynamically at runtime based on user intent and agent state.
Shared State – A synchronized state layer that both agents and UI components can read from and write to in real time.
Human-in-the-Loop – Lets agents pause execution to request user input, confirmation, or edits before continuing.
Self-Learning (early access) – Agents that continuously improve from user feedback via in-context reinforcement learning (CLHF).

🧩 Works With Your Stack

One agent backend. Every frontend.

Platform	Status	Get Started
⚛️ React / Next.js	✅ GA	Quickstart
🅰️ Angular	✅ Supported	Source Code & Quickstart
💚 Vue	✅ Supported	Source Code - Quickstart coming soon
📱 React Native	✅ Supported	Quickstart
💬 Slack / Microsoft Teams	✅ Supported	Channels · Quickstart
🔜 Discord / WhatsApp / Telegram / Google Chat / iMessage / SMS	🟡 Coming soon	Channels

Your agent logic stays the same — AG-UI handles the wire protocol, CopilotKit handles the UI layer for each framework and channel.

💬 Channels: One Agent, Every Chat App

The Channels SDK takes the agent you already built and drops it into the chat apps your users live in — same tools, same shared state, same human-in-the-loop, no rewrite (Learn more).

Slack – Agents as first-class Slack apps: threads, tool calls, and human-in-the-loop approvals right in the channel.
Microsoft Teams – Bring agentic workflows to the enterprise, where your org already lives.

👉 Explore Channels →

🧠 Self-Learning Agents

Improve your product by learning over time.

With Continuous Learning from Human Feedback (CLHF), part of CopilotKit Intelligence, agents improve with every interaction:

In-context reinforcement learning – Agents automatically improve from user interactions, no model fine-tuning required.
Automatic prompt augmentation – Agent behavior adapts based on recent interactions and outcomes.
Per-user adaptation – Agents learn individual preferences and get better for each user over time.
Threads & persistence – Full interaction history — generative UI, human-in-the-loop, shared state — captured across sessions.

Available via CopilotKit Cloud or self-hosted.

🔒 Early access: We’re onboarding teams now.

👉 Request early access →

https://github.com/user-attachments/assets/7372b27b-8def-40fb-a11d-1f6585f556ad

What this gives you:

CopilotKit installed – Core packages are fully set up in your app
Provider configured – Context, state, and hooks ready to use
Agent <> UI connected – Agents can stream actions and render UI immediately
Deployment-ready – Your app is ready to deploy

Complete getting started guide →

How it works:

CopilotKit connects your UI, agents, and tools into a single interaction loop.

CopilotKit Diagram — Motion x2 6 sec version

This enables:

Agents that ask users for input
Tools that render UI
Stateful workflows across steps and sessions
One agent, deployed across web, mobile, and chat platforms

⭐️ useAgent Hook

The useAgent hook sits directly on AG-UI, giving you full programmatic control over the agent connection.

// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });

// Render and update your agent's state
return <div>
  <h1>{agent.state.city}</h1>
  <button onClick={() => agent.setState({ city: "NYC" })}>
    Set City
  </button>
</div>

Check out the useAgent docs to learn more.

https://github.com/user-attachments/assets/67928406-8abc-49a1-a851-98018b52174f

Generative UI

Generative UI is a core CopilotKit pattern that allows agents to dynamically render UI as part of their workflow.

https://github.com/user-attachments/assets/3cfacac0-4ffd-457a-96f9-d7951e4ab7b6

Compare the Three Types

Explore:

Generative UI educational repo →

🖥️ AG-UI: The Agent–User Interaction Protocol

Connect agent workflows to user-facing apps, with deep partnerships and 1st-party integrations across the agentic stack—including LangChain, CrewAI, Mastra, PydanticAI, and more.

npx create-ag-ui-app my-agent-app

🤝 Community

What’s New

🙋🏽‍♂️ Contributing

Thanks for your interest in contributing to CopilotKit! 💜

We value all contributions, whether it’s through code, documentation, creating demo apps, or just spreading the word.

Here are a few useful resources to help you get started:

For code contributions, CONTRIBUTING.md.
For documentation-related contributions, check out the documentation contributions guide.
Want to contribute but not sure how? Join our Discord and we’ll help you out!

📄 License

This repository’s source code is available under the MIT License.