copilotkit
Build AI copilots, chatbots, and agentic UIs in React and Next.js using CopilotKit. Use this skill when the user wants to add an AI assistant, copilot, chat interface, AI-powered textarea, or agentic UI to their app. Covers setup, hooks (useCopilotAction, useCopilotReadable, useCoAgent, useAgent), chat components (CopilotPopup, CopilotSidebar, CopilotChat), generative UI, human-in-the-loop, CoAgents with LangGraph, AG-UI protocol, MCP Apps, and Python SDK integration. Triggers on CopilotKit, copilotkit, useCopilotAction, useCopilotReadable, useCoAgent, useAgent, CopilotRuntime, CopilotChat, Co
npx skills add majiayu000/claude-skill-registry --skill copilotkit-coralshades-acm-ai --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# CopilotKit Full-stack open-source framework (MIT, v1.51.3, Python SDK v0.1.78) for building agentic applications with AI copilots embedded directly in React and Angular UIs. Angular support via `@copilotkitnext/angular` (Angular 18+19). 28k+ GitHub stars. ## When to Use This Skill - User wants to add an AI copilot, assistant, or chatbot to a React/Next.js app - User is working with CopilotKit hooks, components, or runtime - User asks about AI-powered text areas or form completion - User needs to connect a Python agent (LangGraph/CrewAI) to a React frontend - User is implementing human-in-the-loop or generative UI patterns - User asks about AG-UI protocol or MCP Apps - User wants to sync state between a UI and an AI agent ## Architecture ``` ┌─────────────────────────────────────────────────────────────────┐ │ │ │ F R O N T E N D @copilotkit/react-core + react-ui │ │ │ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────┐ │ │ │ <CopilotPopup> │ │ <CopilotSidebar> │ │ <CopilotChat>│ │ │ │ <CopilotTextarea>│ │ Headless UI │ │ Custom UI │ │ │ └────────┬─────────┘ └────────┬─────────┘ └──────┬───────┘ │ │ └──────────────┬──────┘ │ │ │ ▼ │ │ │ ┌──────────────────────────────────
- When to Use This Skill
- Architecture
- Quick Start
- New project
- Existing project
- Environment
- Backend API route (app/api/copilotkit/route.ts)
- Frontend provider (layout.tsx)
- Chat UI (page.tsx)
- Core Hooks
- useCopilotReadable -- Expose app state to LLM
- useCopilotAction -- Define executable actions
- useCopilotChat -- Programmatic chat control
- useCopilotAdditionalInstructions -- Dynamic context-aware prompts
npx copilotkit@latest create -f next npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime or ANTHROPIC_API_KEY, GOOGLE_API_KEY, GROQ_API_KEY
What does the copilotkit skill do?
Build AI copilots, chatbots, and agentic UIs in React and Next.js using CopilotKit. Use this skill when the user wants to add an AI assistant, copilot, chat interface, AI-powered textarea, or agentic UI to their app. Covers setup, hooks (useCopilotAction, useCopilotReadable, useCoAgent, useAgent), chat components (CopilotPopup, CopilotSidebar, CopilotChat), generative UI, human-in-the-loop, CoAgents with LangGraph, AG-UI protocol, MCP Apps, and Python SDK integration. Triggers on CopilotKit, copilotkit, useCopilotAction, useCopilotReadable, useCoAgent, useAgent, CopilotRuntime, CopilotChat, Co
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill copilotkit-coralshades-acm-ai --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.