copilotkit-develop
Use 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.
Security Assessment
About copilotkit-develop
This skill is a development guide for building AI-powered features with CopilotKit v2, the framework layer built on the AG-UI protocol. It addresses the problem of wiring an agent-driven chat experience into a web app end to end — from the server runtime that hosts agents to the React provider, chat UI, frontend tools, and human-in-the-loop flows — by documenting the canonical v2 APIs and the common pitfalls (like single- versus multi-route handlers) that trip developers up.
The skill explains CopilotKit v2's three-layer architecture — Runtime (@copilotkit/runtime), Core (@copilotkit/core), and React (@copilotkit/react-core) — then walks through a concrete workflow: create a CopilotRuntime and expose it via createCopilotHonoHandler or createCopilotExpressHandler; wrap the app in the CopilotKit provider; drop in CopilotChat/CopilotPopup/CopilotSidebar; register browser-side functions with useFrontendTool; share app state with useAgentContext; handle pauses with useInterrupt; and render custom tool-call UI with useRenderTool. It also bundles a live-documentation MCP server (copilotkit-docs) providing search-docs and search-code tools, and reference files covering chat customization, the runtime API surface, and slot-based layout with full label/text customization.
It targets frontend and full-stack developers adopting CopilotKit v2 to add copilots, in-app AI assistants, and agent-backed chat to Next.js, Hono, or Express applications, particularly those who need accurate v2 symbol names and configuration to avoid v1/v2 mismatches.
FAQ
How do I set up the CopilotKit runtime?
Create a CopilotRuntime (or the explicit CopilotSseRuntime / CopilotIntelligenceRuntime) with your agents, then expose it via createCopilotHonoHandler (Hono) or createCopilotExpressHandler (Express). For the default multi-route handler, export GET, POST, PATCH, and DELETE.
How do I register a function the agent can call in the browser?
Use the useFrontendTool hook with a name, description, a Zod parameters schema, and an async handler. The agent can then invoke that function client-side.
How do I handle an agent that pauses for human input?
Use the useInterrupt hook, which gives you the interrupt event and a resolve callback so you can render UI (e.g. an approve button) and return a value to resume the agent.
Is there live documentation access?
Yes. The plugin includes an MCP server (copilotkit-docs) with search-docs and search-code tools. It is auto-configured for Claude Code via the plugin's .mcp.json; Codex requires manual configuration.
Why do I get a 404 against my handler?
The v1-compat CopilotKit bridge defaults useSingleEndpoint to true, which 404s against a multi-route backend. Set useSingleEndpoint={false} on the provider to match a multi-route handler.
Install copilotkit-develop
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
copilotkit/copilotkit