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.
- Installs
- 600
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/copilotkit/skills --skill copilotkit-develop- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads copilotkit-develop automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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/clientso apps need only one import.
Workflow
1. Set Up the Runtime (Server)
Create a CopilotRuntime (or the explicit CopilotSseRuntime / CopilotIntelligenceRuntime) and expose it via createCopilotEndpoint (Hono) or createCopilotEndpointExpress (Express).
import { CopilotRuntime, createCopilotEndpoint } from "@copilotkit/runtime";
import { LangGraphAgent } from "@ag-ui/langgraph";
const runtime = new CopilotRuntime({
agents: {
myAgent: new LangGraphAgent({ /* ... */ }),
},
});
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
2. Wrap Your App with the Provider (Client)
import { CopilotKitProvider } from "@copilotkit/react";
function App() {
return (
<CopilotKitProvider runtimeUrl="/api/copilotkit">
<YourApp />
</CopilotKitProvider>
);
}
3. Add a Chat UI
Use <CopilotChat>, <CopilotPopup>, or <CopilotSidebar>:
import { CopilotChat } from "@copilotkit/react";
function ChatPage() {
return <CopilotChat agentId="myAgent" />;
}
4. Register Frontend Tools
Let the agent call functions in the browser:
import { useFrontendTool } from "@copilotkit/react";
import { z } from "zod";
useFrontendTool({
name: "highlightCell",
description: "Highlight a spreadsheet cell",
parameters: z.object({ row: z.number(), col: z.number() }),
handler: async ({ row, col }) => {
highlightCell(row, col);
return "done";
},
});
5. Share Application Context
Provide runtime data to the agent:
import { useAgentContext } from "@copilotkit/react";
useAgentContext({
description: "The user's current shopping cart",
value: cart, // any JSON-serializable value
});
6. Handle Agent Interrupts
When an agent pauses for human input:
import { useInterrupt } from "@copilotkit/react";
useInterrupt({
render: ({ event, resolve }) => (
<div>
<p>{event.value.question}</p>
<button onClick={() => resolve({ approved: true })}>Approve</button>
</div>
),
});
7. Render Tool Calls in Chat
Show custom UI when tools execute:
import { useRenderTool } from "@copilotkit/react";
import { z } from "zod";
useRenderTool({
name: "searchDocs",
parameters: z.object({ query: z.string() }),
render: ({ status, parameters, result }) => {
if (status === "executing") return <Spinner>Searching {parameters.query}...</Spinner>;
if (status === "complete") return <Results data={result} />;
return <div>Preparing...</div>;
},
}, []);
Quick Reference: Hooks
| Hook | Purpose |
|---|---|
useFrontendTool | Register a tool the agent can call in the browser |
useComponent | Register a React component as a chat-rendered tool (convenience wrapper around useFrontendTool) |
useAgentContext | Share JSON-serializable application state with the agent |
useAgent | Get the AbstractAgent instance for an agent ID; subscribe to message/state/run-status changes |
useInterrupt | Handle on_interrupt events from agents with render + optional handler/filter |
useHumanInTheLoop | Register a tool that pauses execution until the user responds via a rendered UI |
useRenderTool | Register a renderer for tool calls (by name or wildcard "*") |
useDefaultRenderTool | Register a wildcard "*" renderer using the built-in expandable card UI |
useRenderToolCall | Internal hook returning a function to resolve the correct renderer for a given tool call |
useRenderActivityMessage | Internal hook for rendering activity messages by type |
useRenderCustomMessages | Internal hook for rendering custom message decorators |
useSuggestions | Read the current suggestion list and control reload/clear |
useConfigureSuggestions | Register static or dynamic (LLM-generated) suggestion configs |
useThreads | List, rename, archive, and delete Intelligence platform threads |
Quick Reference: Components
| Component | Purpose |
|---|---|
CopilotKitProvider | Root provider -- configures runtime URL, headers, agents, error handler |
CopilotChat | Full chat interface connected to an agent (inline layout) |
CopilotPopup | Chat in a floating popup with toggle button |
CopilotSidebar | Chat in a collapsible sidebar with toggle button |
CopilotChatView | Headless chat view with slots for message view, input, scroll, suggestions |
CopilotChatInput | Chat input textarea with send/stop/transcribe controls |
CopilotChatMessageView | Renders the message list |
CopilotChatSuggestionView | Renders suggestion pills |
Quick Reference: Runtime
| Export | Purpose |
|---|---|
CopilotRuntime | Auto-detecting runtime (delegates to SSE or Intelligence) |
CopilotSseRuntime | Explicit SSE-mode runtime |
CopilotIntelligenceRuntime | Intelligence-mode runtime with durable threads |
createCopilotEndpoint | Create a Hono app with all CopilotKit routes |
createCopilotEndpointExpress | Create an Express router with all CopilotKit routes |
CopilotKitIntelligence | Intelligence platform client configuration |
FAQ
What does the copilotkit-develop skill do?
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.
How do I install copilotkit-develop?
Run npx skills add https://github.com/copilotkit/skills --skill copilotkit-develop in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/copilotkit-develop/ (personal) or .claude/skills/copilotkit-develop/ (project).
Which AI agents can use copilotkit-develop?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is copilotkit-develop safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains copilotkit-develop?
It is published by copilotkit in copilotkit/skills. It has 600 recorded installs.
More from copilotkit/skills
copilotkit
copilotkit/skills
Use when building with CopilotKit — setup, development, integrations, debugging, upgrading, or contributing. Routes to the appropriate specialized skill based on the task.
copilotkit-agui
copilotkit/skills
Use 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 human-in-the-loop flows.
copilotkit-debug
copilotkit/skills
Use 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-integrations
copilotkit/skills
Use 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-setup
copilotkit/skills
Use when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring, provider setup, and first working chat integration.
copilotkit-upgrade
copilotkit/skills
Use 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.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.