CopilotKit
CopilotKit is an SDK for building full-stack agentic applications with generative UI, shared state, and human-in-the-loop workflows. It supports React, Angular, Vue, React Native, Slack, and Microsoft Teams, allowing one agent backend to power multiple frontends. It is for developers who want to integrate AI agents into their applications quickly.
🎬 CopilotKit Tutorial - Todos App AI Copilot · CopilotKit
✨ Key features
- Chat UI with streaming, tool calls, and agent responses.
- Backend tool rendering returns UI components to client.
- Generative UI: agents dynamically generate and update UI.
- Shared state synchronized between agents and UI in real time.
- Human-in-the-loop: agents pause for user input or confirmation.
- Self-learning agents (early access) improve from user feedback.
🎯 Use cases
- Add a chat interface to a React or Next.js app.
- Build agentic workflows that require user approvals or edits.
- Deploy the same agent to web, mobile, and Slack/Teams.
- Create dynamic UI components that change based on agent state.
- Implement stateful multi-step workflows across sessions.
📦 Installation
🧰 Requirements: Requires an LLM API key (OpenAI, Anthropic, Gemini, etc.). Supports Node.js environments for React/Next.js, Angular, Vue, React Native, and Slack/Teams.
npx copilotkit@latest create
For agent skills (optional):
npx copilotkit@latest skills install
🚀 Usage
// Programmatically access and control your agents
const { agent } = useAgent({ agentId: "my_agent" });
// Render and update your agent's state
return (
<div>
{agent.state.city}
<button onClick={() => agent.setState({ city: "NYC" })}>
Set City
</button>
</div>
);
⚠️ Good to know
Self-learning agents are in early access and require onboarding. Some channels like Discord, WhatsApp, Telegram, Google Chat, iMessage, and SMS are coming soon.
❓ FAQ
What frameworks does CopilotKit support?
It supports React/Next.js (GA), Angular, Vue, React Native, Slack, and Microsoft Teams. Discord, WhatsApp, Telegram, Google Chat, iMessage, and SMS are coming soon.
How do I get started?
Run npx copilotkit@latest create to scaffold a new app. You need an LLM API key from providers like OpenAI, Anthropic, or Gemini.
What is AG-UI?
AG-UI is an agent-user interaction protocol adopted by companies like Google, LangChain, AWS, and Microsoft. CopilotKit uses it as the wire protocol between agents and UI.
Can I use CopilotKit with my existing agent?
Yes, CopilotKit is a horizontal layer that connects your agents to multiple frontends. Your agent logic stays the same; CopilotKit handles the UI layer for each framework and channel.
📊 Repository
🤖 Overview, features, install steps and FAQ were generated from the project's README on Sep 4, 2026. Always check the original source before running commands.