CopilotKit
Open-source frontend SDK for agent-native apps: chat UI, generative UI, shared state and human-in-the-loop
CopilotKit is an open-source SDK for putting an agent inside your own product: a customisable chat interface, UI components the agent can render at runtime, a state layer the agent and the app both read and write, and a step where the run pauses for a human decision. It is MIT-licensed, covers React, Angular, Vue and React Native, and is the project behind the AG-UI protocol. It solves the interface half of shipping an AI feature — not the harder half, which is getting anyone to use it.
What CopilotKit is
CopilotKit describes itself as an SDK for building full-stack agentic applications, generative UI and chat applications. It started as a React library and is now multi-platform: the README lists React and Next.js as generally available, Angular, Vue and React Native as supported, and Slack and Microsoft Teams in beta, with Discord and Google Chat noted as coming — the same agent backend behind each surface. Getting started is one command, npx copilotkit@latest create, plus a model key from OpenAI, Anthropic, Gemini or another provider. The repository's source is MIT.
The same team maintains AG-UI, the agent-to-user interaction protocol underneath it, which the README says has been adopted across the agent ecosystem including LangChain, CrewAI, Mastra and PydanticAI. That matters to a founder in a practical way: the wire format between your agent and your interface is a decision you would otherwise make yourself and regret later, and standing on a protocol other frameworks already speak keeps the agent side replaceable. The project also ships installable skills that teach a coding assistant how to set the library up and debug it, which is a fair signal of who it expects to be writing the integration.
The patterns it gives you, and what each one is for
The feature list is really a list of interface patterns for agent products, and they are not interchangeable. Knowing which problem each one solves is what stops you bolting a chat box onto a job the user could have done with a button.
| Pattern | What it solves | Where it gets overused |
|---|---|---|
| Chat UI | A place for open-ended requests the interface has no button for, with streaming replies and visible tool calls. | As the entire product. Typing a sentence to trigger something that was one click away is more work, not less. |
| Generative UI | Letting the agent render real components — a table, a form, a chart — instead of describing them in prose. | Rendering something bespoke for every reply, so the product looks different each time and never becomes learnable. |
| Shared state | Keeping the agent and the app looking at the same data, so an agent action updates the screen and a user edit reaches the agent. | Syncing more state than the agent needs, which turns every small UI change into an agent-behaviour change. |
| Human-in-the-loop | Pausing before something consequential to ask for confirmation, an edit, or the missing piece of input. | Confirming everything, until people click through the prompts without reading them — the failure mode of any approval step. |
The last row is the one worth getting right, and it is a product decision rather than a technical one. Which actions deserve a pause is a question about consequences and reversibility, not about the framework; the concepts sit in human-in-the-loop and approval gate.
A first-party note on shipping an agent interface
At AgentCeres — the AI growth team at agentceres.com — the whole product surface is an agent conversation, so we have built and rebuilt this interface. The most useful thing we learned is on no SDK's feature list: during a long agent turn, silence reads as broken. Someone waiting half a minute with nothing moving does not conclude that careful work is happening, they conclude the product hung and reload, which cancels the work they were waiting for. We ended up showing one live line of what is happening now and a collapsible per-turn trail of what was done, and complaints about the product being slow largely turned into questions about what it was doing.
The second lesson is about restraint, and it is the part no library can decide for you. Our agents hand work to each other, and the messages between them are genuinely interesting to us and useless to a customer. So we show that a specialist was consulted, by name, and never what was said. Deciding what a person is allowed to see turned out not to be a rendering problem at all: when we built that trail the data had been sitting in the transcript the entire time, and the actual work was choosing what belonged in front of a human.
Which is where the build-then-grow split falls for a library like this. CopilotKit genuinely shortens the distance between an agent that works and an agent a customer can use. It does nothing about the two things that decide whether an AI feature matters: whether anyone finds it, and whether the first thing they try succeeds. Both are onboarding work — usertour is the guided version of it, and langfuse is how you see what the agent actually did once real users are inside it.
FAQ
- Is CopilotKit free?
- The repository's source is available under the MIT licence, so you can self-host it and build a commercial product on top at no software cost. The project also sells a hosted cloud and an intelligence platform, and some capabilities — the self-learning features the README marks as early access, and the Slack and Teams surfaces — sit behind those. Model usage is a separate bill from whichever provider your agent points at.
- Do I need an agent framework to use it?
- No. It talks to whatever sits behind it through AG-UI, so the agent can be a framework such as LangChain or CrewAI, or your own code calling a model directly. That separation is the practical argument for adopting it: the interface layer and the agent layer change at very different speeds, and you do not want a UI rewrite every time you change how the agent reasons.
- Why not just build the chat interface myself?
- A basic streaming chat window is a weekend. The parts that take much longer are the ones you meet later — tool calls that render components, keeping app state and agent state in agreement, resuming a conversation across sessions, and pausing mid-run for a human decision. If your product is an agent, those stop being optional quickly, and that is the case for a library. If you need a support widget, this is far more than you need.
- Will adding an AI feature grow my product?
- Not on its own, and it is worth being blunt about that. An agent inside your product is an adoption and retention feature: it can make a hard workflow easy for people who already use you. It creates no demand, and shipping it does not make it discovered — in practice most users never open it unless the first session puts it in their path. Plan the introduction with as much care as the implementation.
- Which frameworks does it support?
- The README lists React and Next.js as generally available, Angular, Vue and React Native as supported, and Slack, Microsoft Teams, Discord and Google Chat as beta or coming soon, all against one agent backend. If you are on a stack it does not cover, AG-UI is the protocol you would implement against, and it is the more durable thing to depend on in any case.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.