Back to Skills

react-core

@copilotkit/react-core — mount the CopilotKit provider (from @copilotkit/react-core/v2) in a Next.js App Router / React Router v7 / TanStack Start / SPA app, drop in CopilotChat/CopilotPopup/CopilotSidebar (v2 chat components ship from react-core/v2 — NOT react-ui, which is CSS-only in v2), access and subscribe to agents with useAgent / useAgentContext / useCapabilities, switch between multiple agents, manage durable Intelligence threads with useThreads, register browser-side tools via useFronte

36,360stars4,489forksUpdated 7/30/2026

Security Assessment

Safe(95/100)
Security Score95/100

About react-core

This skill is a reference index for @copilotkit/react-core, the React frontend half of CopilotKit v2. It mounts a provider, speaks the AG-UI protocol over SSE to a runtime (or directly to CopilotKit Intelligence in SPA mode), and exposes hooks for every interaction surface. It solves the problem of correctly composing CopilotKit's frontend across framework targets (Next.js App Router, React Router v7, TanStack Start, and SPAs) while steering developers away from common hallucinations — for example, that chat components ship from react-core/v2 rather than react-ui, and that CopilotPanel does not exist.

The skill frames the package as three composable shells: a provider shell (the CopilotKit provider carrying runtimeUrl or publicLicenseKey, headers, credentials, properties, onError, and debug options), a chat shell (CopilotChat/CopilotPopup/CopilotSidebar or a composed CopilotChatView with slot primitives), and a hook shell for agent-scoped registration. It indexes a broad set of reference files covering provider setup, chat components, agent access and switching (useAgent, useAgentContext, useCapabilities), durable Intelligence threads (useThreads), browser-side tools (useFrontendTool), tool-call rendering, human-in-the-loop gating, file attachments, suggestion pills, and activity/custom message renderers. The attachments reference, for instance, documents upload configuration, custom S3/presigned-URL backends, and frequent mistakes like passing maxSize in the wrong units.

It targets React developers integrating CopilotKit v2 into production apps who need precise, source-grounded API details and want to load only the reference matching their current task rather than absorbing the whole package.

FAQ

Where do the v2 chat components come from?

CopilotChat, CopilotPopup, and CopilotSidebar all ship from @copilotkit/react-core/v2 — not react-ui, which is CSS-only in v2. CopilotPanel does not exist and is a common hallucination.

How is the skill organized?

SKILL.md is an index. It groups the package into provider, chat, and hook shells and points you to the specific reference file under references/ that matches your task (provider setup, chat components, attachments, threads, tools, etc.).

How do file attachments work?

Enable them via the attachments config on <CopilotChat> or the useAttachments hook. maxSize is in bytes (default 20 MB), you must call consumeAttachments() on submit to drain the queue, and onUpload can replace the default base64 strategy with a custom backend like S3.

What framework targets are supported?

The skill covers mounting the provider in Next.js App Router, React Router v7, TanStack Start, and SPA apps. In SPA mode the provider can use publicLicenseKey to talk directly to CopilotKit Intelligence.

What is the correct key for a public API key?

publicLicenseKey is canonical; publicApiKey is a deprecated alias.

All Files

16 files
references/attachments.md7.0 KB
View
references/debug-mode.md3.6 KB
View
references/suggestions.md4.9 KB
View
references/chat-components.md5.2 KB
View
references/provider-setup.md9.1 KB
View
references/switching-agents.md5.5 KB
View
references/client-side-tools.md8.1 KB
View
references/rendering-activity-messages.md5.4 KB
View
references/threads.md5.4 KB
View
references/capabilities.md3.3 KB
View
references/human-in-the-loop.md7.8 KB
View
references/switching-agents-recipes.md4.5 KB
View
references/agent-access.md6.8 KB
View
references/custom-message-renderers.md6.3 KB
View
references/rendering-tool-calls.md8.5 KB
View
SKILL.md9.3 KB
View

Install react-core

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill