Copilotkit Develop

If you're building AI chat features into a React app, this gets you up and running with CopilotKit v2's full stack. You'll wire up a runtime on the server (Hono or Express), drop the provider and a chat component into your frontend, then register tools the agent can call in the browser with useFrontendTool. The hook library covers the practical stuff: sharing app state with useAgentContext, handling agent interrupts when they need human input, and rendering custom UI for tool calls as they execute. It includes an MCP server for live docs, which is helpful since you're juggling three layers (runtime, core, React) built on the AG-UI protocol. Solid for copilot-style interfaces where the agent needs to read and act on frontend state.

skills.sh installs: 615
GitHub stars: 39
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add copilotkit/skills --skill copilotkit-develop --agent claude-code

Installs into .claude/skills of the current project.

Files

CopilotKit v2 Development Skill

Live Documentation (MCP)

This plugin includes an MCP server (copilotkit-docs) that provides search-docs and search-code tools for querying live CopilotKit documentation and source code.

Claude Code: Auto-configured by the plugin's .mcp.json -- no setup needed.
Codex: Requires manual configuration. See the copilotkit-debug skill for setup instructions.

Architecture Overview

CopilotKit v2 is built on the AG-UI protocol (@ag-ui/client / @ag-ui/core). The stack has three layers:

Runtime (@copilotkit/runtime) -- Server-side. Hosts agents, handles SSE/Intelligence transport, middleware, transcription.
Core (@copilotkit/core) -- Shared state management, tool registry, suggestion engine. Not imported directly by apps.
React (@copilotkit/react) -- Provider, chat components, hooks. Re-exports everything from @ag-ui/client so apps need only one import.