Help us improve
Share bugs, ideas, or general feedback.
From copilotkit
Mounts CopilotKitProvider in Next.js App Router, React Router v7, TanStack Start, or SPA, provides hooks for agents, threads, tools, file attachments, suggestions, and human-in-the-loop gating.
npx claudepluginhub copilotkit/copilotkit --plugin copilotkitHow 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.mdGuides CopilotKit setup in React projects with Next.js (App/Pages), Vite+React, or Angular: detects framework, installs packages, wires runtime (Hono/Express), configures AI providers, adds chat UI.
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.
Share bugs, ideas, or general feedback.
@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 Cloud 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.
CopilotKitProvider 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 CopilotKitProvider, 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.