Development
Plugin
copilotkit
Docs · Examples · Enterprise Intelligence Platform · 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 beyond the browser.
Plugin Signal88/100Strong
maintained100
capable62
documented100
adopted97
Install on Claude Code
> /plugin marketplace add CopilotKit/CopilotKit> /plugin install copilotkit@copilotkit-plugins
Stats
36,656
Stars
4,529
Forks
Active
Maintenance
TypeScript
Language
MIT
License
8h ago
Last commit
3y ago
Created
Repo: CopilotKit/CopilotKit
What's inside
Skills
17/a2ui-rendererRender A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via <CopilotKit a2ui={{ theme }}>. Auto-activates via /info — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer/react-core@copilotkit/react-core — mount the CopilotKit provider (from @copilotkit/react-core/v2) in a Next.js App Router / React Router v7 / TanStack Start / SPA app, drop in CopilotChat/CopilotPopup/CopilotSidebar (v2 chat components ship from react-core/v2 — NOT react-ui, which is/runtime@copilotkit/runtime — mount a fetch-native CopilotRuntime on any JS server, wire middleware, pick an AgentRunner, instantiate BuiltInAgent (Factory Mode with TanStack AI is the preferred default) or plug in any of 12 external agent frameworks (Mastra, LangGraph, CrewAI/a2ui-rendererRender A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via <CopilotKit a2ui={{ theme }}>. Auto-activates via /info — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer/channels-setupUse when a developer wants to build their first CopilotKit Channels agent and get it answering in Slack or Microsoft Teams — "set up a channel", "connect my agent to Slack", "get my agent into Teams", or starting from nothing and wanting a working channel end to end. Covers the/copilotkit-aguiUse when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent/HttpAgent patterns, state synchronization, tool calls, and
Show all 17 skillsShow fewer
/copilotkit-channelsUse for the CODE half of a managed Intelligence Channel with Slack or Microsoft Teams: customising the Channel a CLI-scaffolded project already ships, or — for a project the CLI did not generate — writing the Channel declaration, the long-running host, and the awaited activation/copilotkit-contributeUse when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit/CopilotKit./copilotkit-debugUse when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing./copilotkit-developUse when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime./copilotkit-integrationsUse when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol./copilotkit-self-updateUse when the user wants to update, refresh, or reinstall the CopilotKit agent SKILLS (the SKILL.md files that teach this agent about CopilotKit). NOT for updating the CopilotKit codebase or project — this is specifically about refreshing the skills/knowledge this agent has/copilotkit-setupUse when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring (managed Intelligence or self-hosted SSE), provider setup, and first working chat integration./copilotkit-upgradeUse when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes./react-core@copilotkit/react-core — mount the CopilotKit provider (from @copilotkit/react-core/v2) in a Next.js App Router / React Router v7 / TanStack Start / SPA app, drop in CopilotChat/CopilotPopup/CopilotSidebar (v2 chat components ship from react-core/v2 — NOT react-ui, which is/runtime@copilotkit/runtime — mount a fetch-native CopilotRuntime on any JS server, wire middleware, pick an AgentRunner, instantiate BuiltInAgent (Factory Mode with TanStack AI is the preferred default) or plug in any of 12 external agent frameworks (Mastra, LangGraph, CrewAI/setup-slack-channelUse for the PROVIDER half of getting a locally running CopilotKit Channels agent to answer in Slack, when no Slack app exists yet — setting up a Channels bot in Slack for the first time, creating the Slack app and its tokens, attaching it to a managed Intelligence Channel, or
Badges
1README
1CopilotKit
Docs · Examples · Enterprise Intelligence Platform · 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 beyond the browser.
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 a multi-platform agentic framework: the same agent can power your web app, your mobile app, and your team's Slack 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 / MS Teams / Discord / Google Chat | 🟡 Beta | Request early access |
Your agent logic stays the same — AG-UI handles the wire protocol, CopilotKit handles the UI layer for each framework.
💬 Beyond the Browser: Slack & Microsoft Teams (Discord, Google Chat coming soon...)
Your agents can run and generate Generative UI beyond the web app (Learn more).
CopilotKit now lets you deploy the same agent to the places your users already work:
- 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.
🔒 Early access: We're onboarding teams now.
🧠 Self-Learning Agents
Improve your product by learning over time.
With Continuous Learning from Human Feedback (CLHF), part of the CopilotKit Intelligence Platform, 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.
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.
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
🙋🏽♂️ 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.
File tree
1569CopilotKit/CopilotKitView on GitHub
.browserslistrc
.changeset/
enable-mcp-apps-tool-filters.md
.claude/
.claude-plugin/
marketplace.json
plugin.json
docs/
architecture.md
documentation.md
git.md
hooks.md
workflow.md
.cursor/
rules/
agent-development.mdc
copilotkit-architecture.mdc
development-workflow.mdc
examples-and-demos.mdc
frontend-development.mdc
quick-reference.mdc
suggestions-development.mdc
working-with-rules.mdc
.dockerignore
.gitattributes
.github/
CODEOWNERS
config-allowlist.txt
ISSUE_TEMPLATE/
1-bug-report.yml
2-feature-request.yml
3-documentation.yml
config.yml
issue_template.md
PULL_REQUEST_TEMPLATE.md
scripts/
check-config-allowlist.sh
workflows/
auto_merge_showcases.yml
canary.yml
cleanup_pr-caches.yml
ghcr_unlinked_packages.yml
integrations_parity.yml
lint-release-workflows.yml
plugin-skills-check.yml
publish-commit.yml
publish-release.yml
security_fork-pr-alert.yml
security_zizmor.yml
showcase_autoupdate_drift.yml
showcase_build_check.yml
showcase_build.yml
showcase_capture-previews.yml
showcase_deploy.yml
showcase_eval_check.yml
showcase_eval-webhook_build.yml
showcase_eval.yml
showcase_keep-alive.yml
showcase_lint_prod.yml
showcase_promote_notify.dry-run.sh
showcase_promote_notify.yml
showcase_promote.yml
showcase_reconcile_staging.yml
showcase_reconcile.yml
showcase_validate-wiring.yml
showcase_validate.yml
stable-release.yml
static_bundle_size.yml
static_check-binaries.yml
static_compat.yml
static_danger.yml
static_quality.yml
telemetry-docs-fragment.yml
telemetry-runtime-fragment.yml
test_e2e-dojo.yml
test_e2e-legacy-v1.yml
test_e2e-showcase-on-demand.yml
test_integration-docs.yml
test_integration-runtime.yml
test_showcase-frontend-matrix.yml
test_smoke-starter.yml
test_unit-python-sdk.yml
test_unit-showcase.yml
test_unit-spring-ai.yml
test_unit.yml
update-branch.yml
zizmor.yml
.gitignore
.kodiak.toml
.mcp.json
.npmrc
.nvmrc
.oxfmtrc.json
.oxlintrc.json
.pnpmfile.cjs
.superset/
config.json
AGENTS.md
assets/
animated-banner.gif
CopilotTextarea_old.gif
CopilotTextarea.gif
demo.gif
license-badge.svg
proejct-perplexity-clone.png
project-canvas-demo.png
spreadsheet-demo-big-file.gif
travel-planner-gif.gif
changelog.txt
CLAUDE.md
CODE_OF_CONDUCT.md
codemods/
__tests__/
migrate-attachments.test.ts
migrate-attachments.ts
commitlint.config.js
community/
content/
CONTRIBUTING.md
README.md
TEMPLATE.md
demos_2024/
anshuman-language-translator.md
anshuman-recipe-modifier.md
anshumanrai-Cutom-Content.md
cal-buddy.md
code-snippet-generator.md
content-summary-tool.md
cookbook.md
copilotkit-browser-extension.md
copilotkit-task-manager.md
Copilotkit-weather-bot.md
copilotmate.md
daily-quote-app.md
daily-quote-generator.md
Email-Organizer.md
emotion-reads.md
event-management.md
EventPlanner.md
EventTimer.md
example-template.md
expense-tracker.md
financial-tracker.md
Flashcards_Quiz_ai.md
github-pull-request-tracker.md
habittracker.md
language-translator.md
legal-document-reviewer.md
mayank_news_generator.md
mayank-mohapatra-language-translator.md
mayank-receipe-generator.md
mayankmohapatra-Custom-Content.md
meal-prep-planner.md
Meditation Companion.md
mini-faq-bot.md
movie-bot.md
movie-suggestion-bot.md
music_lyrics_finder.md
music-lyric-finder.md
news-aggregator.md
priority-todolist.md
priyanshu-language-translator.md
priyanshu-new-aggregrator.md
quizflip.md
Recipe_Generator.md
Recipe-Modifier.md
snippetsorcerer.md
snippy.md
stocks-assistent.md
study-buddy.md
study-sphere.md
summarify.md
SwiftSupport.md
task-manager.md
TravelTally.md
VedantCustomContent.md
demos_2025/
email-summarizer.md
examples.md
femtracker-agent.md
finance_ai.md
meal-planner-direct-to-llm.md
meal-planner.md
CONTRIBUTING.md
dangerfile.js
deploy-starter.sh
dev-docs/
architecture/
ARCHITECTURE.md
multi-agent.md
plugin-points.md
setup-angular.md
setup-intelligence.md
setup-react.md
setup-runtime.md
setup-vanilla.md
browser-compat.md
bundle-size.md
langgraph-python-column-wave1-bugs.md
docs
examples/
canvas/
gemini/
.gitignore
agent/
main.py
poetry.lock
posts_generator_agent.py
prompts.py
pyproject.toml
README.md
stack_agent.py
app/
api/
copilotkit/
route.ts
contexts/
LayoutContext.tsx
globals.css
layout.tsx
page.tsx
post-generator/
page.tsx
prompts/
prompts.ts
stack-analyzer/
page.tsx
wrapper.tsx
assets/
example1.gif
example2.gif
components/
components.json
theme-provider.tsx
ui/
accordion.tsx
alert-dialog.tsx
alert.tsx
aspect-ratio.tsx
avatar.tsx
badge.tsx
breadcrumb.tsx
button.tsx
calendar.tsx
card.tsx
carousel.tsx
chart.tsx
checkbox.tsx
collapsible.tsx
command.tsx
context-menu.tsx
dialog.tsx
drawer.tsx
dropdown-menu.tsx
form.tsx
hover-card.tsx
input-otp.tsx
input.tsx
label.tsx
linkedin-post.tsx
menubar.tsx
navigation-menu.tsx
pagination.tsx
popover.tsx
progress.tsx
radio-group.tsx
resizable.tsx
scroll-area.tsx
select.tsx
separator.tsx
sheet.tsx
sidebar.tsx
skeleton.tsx
slider.tsx
sonner.tsx
stack-analysis-cards.tsx
switch.tsx
table.tsx
tabs.tsx
textarea.tsx
toast.tsx
toaster.tsx
toggle-group.tsx
toggle.tsx
tool-logs.tsx
tooltip.tsx
use-mobile.tsx
use-toast.ts
x-post.tsx
hooks/
use-mobile.ts
use-toast.ts
lib/
utils.ts
next-env.d.ts
next.config.mjs
package.json
pnpm-lock.yaml
postcss.config.mjs
public/
favicon.ico
placeholder-logo.png
placeholder-logo.svg
placeholder-user.jpg
placeholder.jpg
placeholder.svg
README.md
scripts/
setup-agent.bat
setup-agent.sh
styles/
globals.css
tsconfig.json
langgraph-python/
.env.local.example
.gitignore
agent/
.env.example
.gitignore
agent.py
langgraph.json
requirements.txt
LICENSE
next.config.ts
package.json
postcss.config.mjs
public/
file.svg
globe.svg
next.svg
vercel.svg
window.svg
README.md
scripts/
setup-agent.bat
setup-agent.sh
src/
app/
api/
copilotkit/
route.ts
favicon.ico
globals.css
layout.tsx
page.tsx
components/
canvas/
AppChatHeader.tsx
CardRenderer.tsx
ItemHeader.tsx
NewItemMenu.tsx
empty-state.tsx
ui/
accordion.tsx
alert-dialog.tsx
alert.tsx
aspect-ratio.tsx
avatar.tsx
badge.tsx
breadcrumb.tsx
button.tsx
calendar.tsx
card.tsx
carousel.tsx
chart.tsx
checkbox.tsx
collapsible.tsx
command.tsx
context-menu.tsx
dialog.tsx
drawer.tsx
dropdown-menu.tsx
form.tsx
hover-card.tsx
input-otp.tsx
input.tsx
label.tsx
menubar.tsx
navigation-menu.tsx
pagination.tsx
popover.tsx
progress.tsx
radio-group.tsx
resizable.tsx
scroll-area.tsx
select.tsx
separator.tsx
sheet.tsx
sidebar.tsx
skeleton.tsx
slider.tsx
sonner.tsx
switch.tsx
table.tsx
tabs.tsx
textarea.tsx
toast.tsx
toaster.tsx
toggle-group.tsx
toggle.tsx
... 1600 moreShowing a partial view of a very large repo.
FAQ
copilotkit is a Claude Code plugin with 17 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes a2ui-renderer, react-core, runtime. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is copilotkit?
- Docs · Examples · Enterprise Intelligence Platform · 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 beyond the browser.
- How do I install copilotkit?
- Run these in Claude Code: /plugin marketplace add CopilotKit/CopilotKit then /plugin install copilotkit@copilotkit-plugins. Then prompt normally.
- Does copilotkit auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is copilotkit free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.