/react-core

name: react-core
description: >
  @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 useFrontendTool, render tool calls with useRenderTool /
  useComponent / useDefaultRenderTool, gate execution with useHumanInTheLoop, wire file
  attachments with useAttachments, configure suggestion pills, and register activity- and
  custom-message renderers. publicLicenseKey is canonical (publicApiKey is deprecated
  alias). Load the reference under references/ that matches your task.
type: framework
library: copilotkit
library_version: "1.56.2"
requires:
  - copilotkit/runtime
sources:
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/providers/CopilotKitProvider.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/index.ts"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/components/chat/index.ts"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/components/chat/CopilotChat.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/components/chat/CopilotChatView.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/components/CopilotKitInspector.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-agent.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-agent-context.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-capabilities.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-threads.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-frontend-tool.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-render-tool.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-render-tool-call.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-default-render-tool.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-component.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-human-in-the-loop.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-attachments.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-configure-suggestions.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-suggestions.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-render-activity-message.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/hooks/use-render-custom-messages.tsx"
  - "CopilotKit/CopilotKit:packages/react-core/src/v2/lib/slots.tsx"
  - "CopilotKit/CopilotKit:packages/core/src/core/core.ts"
  - "CopilotKit/CopilotKit:packages/core/src/core/agent-registry.ts"
  - "CopilotKit/CopilotKit:packages/core/src/core/run-handler.ts"
  - "CopilotKit/CopilotKit:packages/core/src/types.ts"

CopilotKit React Core

`@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.

Mental model — three shells you compose

1. **Provider shell** — the `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`. 2. **Chat shell** — `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. 3. **Hook shell** — inside any component under the provider, call `useAgent`, `useFrontendTool`, `useRenderTool`, etc. Every hook takes optional `{ agentId }` for agent-scoped registration.

When to load which reference

| 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` | | Buil