CopilotKit
Build agent-native experiences with generative UI, shared state, and human-in-the-loop workflows across frontend surfaces.
- Source repo
- CopilotKit/CopilotKit
- Stars
- ★ 39k
- Last updated
- today
- License
- MIT
- Primary language
- TypeScript
- FA score
- 49/100 · Major gaps
At a glance
- How it runs
- Works with
- Universal · cross-platformCodex · Claude Code · OpenAI API · Claude API
- Cost
- Free tier plus a paid hosted plan
- Setup effort
- Low · running in minutes
- You'll need
- Typical use
- A React or Next.js team adding a chat experience with streaming responses and tool calls can use CopilotKit’s chat UI and agent connection layer.
- Not a fit if
- Teams that must stay fully offline or keep data in-house; Intelligence defaults to the hosted cloud
- Teams that only need Google Chat, iMessage, or SMS; those channels are still on the roadmap
- Teams needing production-stable chat channels; Discord, WhatsApp, and Telegram are adapter-only with managed connections not yet available
- Source review
- 49/100 · Major gaps
What does this agent do, and when should you use it?
CopilotKit is an SDK for full-stack agentic applications, generative UI, and chat applications that has expanded from a React library into a multi-platform framework. It lists React/Next.js, Angular, Vue, and React Native support, while Slack, Microsoft Teams, Discord, and Google Chat are presented as beyond-browser delivery paths with beta or early-access status. Its interaction model connects UI, agents, and tools in one loop, including streaming messages, tool calls, agent responses, shared state, and human confirmation. The project is built around the AG-UI protocol for connecting agent workflows to user-facing applications, and exposes programmatic agent access through the useAgent hook. Teams configure an LLM provider and deploy the resulting application themselves; the README does not provide a complete production deployment configuration.
After project creation with npx copilotkit@latest create, an application configures an LLM key and uses CopilotKit’s Provider, state, and Hooks to connect agents to UI. Its chat UI handles streamed messages, tool calls, and agent responses, while backend tools can return UI components for direct client rendering. Generative UI can create or update components at runtime from user intent and agent state, and the shared-state layer lets agents and UI components read and write the same state in real time. useAgent({ agentId: "my_agent" }) returns an agent object, allowing reads such as agent.state.city and updates such as agent.setState({ city: "NYC" }); the README describes the same agent logic as deployable across web, mobile, and listed chat-platform integrations.
- A React or Next.js team adding a chat experience with streaming responses and tool calls can use CopilotKit’s chat UI and agent connection layer.
- An Angular team integrating an agent-facing UI into an existing frontend can use the repository’s documented Angular support while keeping agent logic aligned with other surfaces.
- A React Native product team that needs mobile UI to read and update shared agent state can use the documented React Native path.
- An application whose workflow requires an agent to pause for user input, confirmation, or edits can use the human-in-the-loop capability.
- A team with backend tools that should return client-rendered UI components can use Backend Tool Rendering.
- An organization looking to bring the same agent into Slack or Microsoft Teams workflows can request the documented early-access integration path.
How do you install or deploy this agent?
Obtain an LLM key; the README gives OpenAI, Anthropic, and Gemini as examples. In a project directory, run:
npx copilotkit@latest createThe README does not specify a Node.js version, generator options, or complete production deployment steps. To install CopilotKit skills for coding agents, run:
npx copilotkit@latest skills installHow do you use this agent?
After creating and configuring the project, connect a named agent in the UI:
const { agent } = useAgent({ agentId: "my_agent" });You can then read agent.state.city and update state from an event handler with:
agent.setState({ city: "NYC" })The README says Provider, context, state, and Hooks are configured during setup, but it does not include complete Provider configuration code or an agent-backend example.
What are this agent's strengths and limitations?
- Uses AG-UI as its connection layer and exposes programmatic agent-state reads and updates through
useAgent. - Applies the same agent logic across React/Next.js, Angular, Vue, and React Native, with Slack and Microsoft Teams listed as additional delivery paths.
- Combines chat UI, backend tool rendering, runtime generative UI, shared state, and human-in-the-loop workflows rather than only supplying a chat component.
- The quick start provides only
npx copilotkit@latest create; it does not specify a Node.js version, complete provider configuration, or production deployment procedure. - Slack, Microsoft Teams, Discord, and Google Chat are marked beta or early access, so beyond-browser delivery should not be treated as generally available.
- Self-learning is marked early access, and the README provides no concrete installation or operations details for its Cloud or self-hosted availability.
- Although OpenAI, Anthropic, and Gemini keys are named, the README does not show provider-specific configuration, failure handling, or model-compatibility details.
How does this agent compare with similar options?
The README distinguishes three generative-UI types: Static (AG-UI Protocol), Declarative (A2UI), and Open-Ended (MCP Apps & Open JSON). It positions CopilotKit as the UI layer connecting agent workflows to user-facing applications, with AG-UI handling the wire protocol.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| CopilotKit This agent | 49 · Major gaps | CLIFreemium | ★ 39k | today | TypeScript | Codex · Claude Code · OpenAI API · Claude API |
| FormKit | 55 · Major gaps | Agent plugin / skillFreemium | ★ 4.8k | today | TypeScript | Codex · Claude Code |
| Appllama Mobile Design Skills | 50 · Major gaps | Agent plugin / skillFreemium | ★ 4.9k | 2mo ago | — | Codex · Claude Code |
| GAIA UI Component Registry | 56 · Major gaps | CLIFree | ★ 225 | 2mo ago | TypeScript | — |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence: Security policy (SECURITY.md) with vulnerability reporting; dependency overrides (package.json) show proactive mitigation of known vulnerabilities; workflows (canary.yml) follow least privilege with scoped GitHub App tokens. Deductions: No explicit user confirmation mechanism (e.g., human-in-the-loop code) found; data flow transparency limited (README mentions shared state but not detailed); sensitive data handling details absent; external effects (e.g., network calls) not specified; rollback mechanism not mentioned; source attribution (e.g., third-party code) not explicit.
Evidence: Clear repository structure with Nx monorepo; test scripts exist (package.json test); e2e tests cover layout and dark mode regressions. Deductions: Dependency availability not verified (static review); failure messages not documented; self-consistency partially relies on doc-code alignment, not fully verified.
Evidence: README lists supported platforms (React, Angular, Vue, React Native, Slack etc.); quick start and examples provided; capability boundaries (e.g., Generative UI types) described. Deductions: Trigger precision (e.g., useAgent hook conditions) not detailed; environment fit (e.g., browser versions) not specified.
Evidence: README provides information architecture (features, quick start, docs links); install notes (npx copilotkit@latest create); examples (examples directory); MIT license; maintenance responsibility (contributing guide). Deductions: Naming stability not explicit (no version history); known limitations not listed; versioning/changelog not provided.
Evidence: Output usability (Generative UI dynamic rendering); marginal value (multi-platform support, AG-UI protocol); cost-benefit (quick start, free open source). Deductions: Cost-benefit not quantified (e.g., performance, resource usage); marginal value partially depends on external platforms (e.g., Slack) early access.
Evidence: README claims (e.g., AG-UI protocol adoption) have external links but no specific evidence; tests exist but not verified. Deductions: Claim traceability limited (no specific versions or docs); cross-source corroboration insufficient (relies on README only); fact-inference separation unclear (e.g., 'best-in-class' marketing language).
- Static review cannot verify runtime behavior; all scores based on source and docs.
- Dependency overrides show security mitigation but actual dependency tree not verified.
- Marketing claims in README (e.g., 'best-in-class') lack verifiable evidence.
- No changelog provided; naming stability uncertain.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
Release notes excerpt
This patch release improves A2UI catalog serialization so that composed custom component trees are correctly recognized by agent SDKs.View on GitHub ↗ -
Release notes excerpt
Features - feat(genui-eval): measure the generative UI prompt across models, and ship the improved prompt (#8102) (d168487) Fixes - fix(react-core): show scroll-to-bottom only when messages are below (#8159) (3a956ad) - fix(react-core,vue): deprecate the inputMode prop CopilotChat ignores (#8152) (a7c4dde) - fix(react-native): pass CopilotChat's agent and thread to its hooks (#8136) (035c0db) - fix(vue): forward every chat-view slot through CopilotSidebar and CopilotPopup (#8135) (117de16) - fix(react-native): draw the interrupt element in the prebuilt chat (#8133) (bfb8236) …View on GitHub ↗ -
Release notes excerpt
Security - Includes security fixes for Teams and other Channels integrations. We recommend upgrading the supported @copilotkit/channels* packages used by your application to 0.12.0, including @copilotkit/channels and @copilotkit/channels-teams where installed. If you use Telegram, review the migration guidance below before upgrading. Features - Render static JSX as images in managed Slack and Teams messages. (#6146) - Combine rendered cards with native buttons and carousel layouts. (#6146) Fixes …View on GitHub ↗