From copilotkit
Provides CopilotKit v2 hooks and components for mounting the provider in Next.js/React Router/TanStack Start/SPA apps, managing agents and threads, registering browser tools, and configuring chat UI.
How this skill is triggered — by the user, by Claude, or both
Slash command
/copilotkit:react-coreThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
`@copilotkit/react-core` is the React frontend half of CopilotKit: it mounts a provider,
references/agent-access.mdreferences/attachments.mdreferences/capabilities.mdreferences/chat-components.mdreferences/client-side-tools.mdreferences/custom-message-renderers.mdreferences/debug-mode.mdreferences/human-in-the-loop.mdreferences/provider-setup.mdreferences/rendering-activity-messages.mdreferences/rendering-tool-calls.mdreferences/suggestions.mdreferences/switching-agents-recipes.mdreferences/switching-agents.mdreferences/threads.md@copilotkit/react-core is the React frontend half of CopilotKit: it mounts a provider,
speaks AG-UI over SSE to a runtime (or directly to CopilotKit Intelligence in SPA mode), and
exposes hooks for every interaction surface.
This SKILL.md is the index. Read the reference under references/ that matches
your task — do not try to absorb the whole package from this file.
CopilotKit provider (from @copilotkit/react-core/v2) at or near the root (inside "use client" for
Next.js App Router). Carries runtimeUrl (or publicLicenseKey for SPA), headers,
credentials, properties, onError, debug, showDevConsole.CopilotChat / CopilotPopup / CopilotSidebar or a composed
CopilotChatView + slot primitives (CopilotChatInput, CopilotChatMessageView, etc.).
All chat components ship from @copilotkit/react-core/v2. CopilotPanel does not
exist — it's a common hallucination.useAgent,
useFrontendTool, useRenderTool, etc. Every hook takes optional { agentId } for
agent-scoped registration.| Task | Reference |
|---|---|
Mount the CopilotKit provider, pick runtimeUrl vs publicLicenseKey, RSC boundary rules | references/provider-setup.md |
Drop in CopilotChat / CopilotPopup / CopilotSidebar, compose CopilotChatView with slot primitives | references/chat-components.md |
File / image attachments via useAttachments — drag-drop, click, paste, custom upload | references/attachments.md |
Client-side debug tooling — showDevConsole, debug prop, lazy-loaded web inspector | references/debug-mode.md |
Read / subscribe to an agent (useAgent) and push global context (useAgentContext) | references/agent-access.md |
Feature-gate UI on declared agent capabilities (useCapabilities) | references/capabilities.md |
Build a multi-agent UI (per-panel useAgent, agent-scoped tools, key-remount pattern) | references/switching-agents.md (+ switching-agents-recipes.md for concrete layouts) |
List / rename / archive / delete durable Intelligence threads (useThreads) | references/threads.md (requires runtime Intelligence mode) |
Register browser-side tools (useFrontendTool) | references/client-side-tools.md |
Render per-tool UI (useRenderTool, useComponent, useDefaultRenderTool, useRenderToolCall) | references/rendering-tool-calls.md |
Gate tool execution behind user approval (useHumanInTheLoop) | references/human-in-the-loop.md |
Configure dynamic or static suggestion pills (useConfigureSuggestions, useSuggestions) | references/suggestions.md |
Render non-chat activity messages (useRenderActivityMessage) | references/rendering-activity-messages.md |
Inject custom UI before/after specific messages (useRenderCustomMessages) | references/custom-message-renderers.md |
publicLicenseKey is canonical. publicApiKey is a deprecated alias — expect it in legacy code.agents__unsafe_dev_only and selfManagedAgents are dev-only aliases of each other. Not production-safe. See packages/a2ui-renderer or the spa-without-runtime lifecycle skill for the supported SPA path.CopilotPanel does not exist. v2 chat components ship from react-core/v2 — not react-ui (v2 react-ui is CSS-only).useAgents() hook exists. Discover agents via copilotkit.subscribe({ onAgentsChanged }).useRenderToolCall is a resolver (for custom chat surfaces), not a registration hook. Register with useRenderTool / useComponent / useDefaultRenderTool.render or tool-call UI MUST reuse the consumer's shadcn / MUI / Chakra / Ant / Mantine primitives before writing raw JSX. This applies across client-side-tools, rendering-tool-calls, and human-in-the-loop.status values are camelCase: 'inProgress' | 'executing' | 'complete'. In-progress args are Partial<T>.useHumanInTheLoop synthesized handler MUST call respond(result) (including reject paths), otherwise the agent run hangs. respond is undefined outside Executing status. Unmounting mid-Executing abandons the run.useThreads errors with 'Runtime URL is not configured' outside Intelligence mode.v1 → v2 migration renames: useCopilotAction → useFrontendTool + useHumanInTheLoop; imageUploadsEnabled → attachments. See the v1-to-v2-migration lifecycle skill.provider-setup — mount the provider.chat-components — wire a chat surface.agent-access — talk to agents.client-side-tools + rendering-tool-calls — add tool-call UI.npx claudepluginhub copilotkit/copilotkit --plugin copilotkitBuilds AI-powered features with CopilotKit v2: chat interfaces, frontend tools, agent context, interrupts, and runtime setup.
Guides on assistant-ui React library for AI chat UI components, covering architecture, runtime adapters like AI SDK and LangGraph, packages, and debugging.
Provides Vercel AI SDK v5 React hooks (useChat, useCompletion, useObject) for streaming AI chat UIs in Next.js apps. Fixes parse stream errors, no responses, and streaming issues.