CopilotKit

CopilotKit is a React framework for building agent-native applications - AI copilots that read and act on your app’s state instead of living in an isolated chat sidebar. @copilotkit/react-core is the flagship package: it ships the CopilotKitProvider that wraps your app, the context/state layer that connects your UI to a backend agent runtime over the AG-UI protocol, and the hooks (useCopilotAction, useCopilotReadable, useCoAgent, useCopilotChat, and more) that let components expose actions, share state, and render generative UI produced by an agent.

What began as a single React chat library is now a multi-platform stack spanning React, Angular, Vue, React Native, and channels like Slack and Microsoft Teams, all speaking the same AG-UI wire protocol so one agent backend can power every surface. It is backed by CopilotKit, the company behind the open AG-UI protocol, which is also adopted by LangChain, Mastra, and PydanticAI.

What You Get

• CopilotKitProvider (and the legacy CopilotKit provider) that establishes the connection to a CopilotKit Runtime backend and manages agent lifecycle for the whole app
• Headless hooks - useCopilotChat, useCopilotAction, useCopilotReadable, useCoAgent, useCoAgentStateRender, useHumanInTheLoop, useLangGraphInterrupt - for wiring agent actions, readable app context, and human-in-the-loop approval into any component
• Generative UI primitives (ReactToolCallRenderer, MCP Apps and A2UI renderers) so an agent can render interactive, app-specific components mid-conversation instead of returning plain text
• Shared state synchronization between the agent and the UI, so both sides read and write the same live state object
• Built-in chat components (CopilotSidebar, CopilotPopup, dev console, toasts) layered on top of the headless hooks for teams that want a ready-made UI
• A dev console and inspector (@copilotkit/web-inspector) for debugging agent runs, tool calls, and state transitions during development

Common Use Cases

• Adding an in-app AI copilot that can read the current page/record and take actions on the user’s behalf (e.g. filling forms, updating records, navigating)
• Building agent-native SaaS features where a LangGraph, CrewAI, Mastra, or custom agent needs a first-class, app-aware frontend instead of a bolted-on chatbot
• Rendering generative UI - letting a backend agent decide what component to show next based on tool results, rather than hardcoding every screen
• Human-in-the-loop workflows where an agent pauses to ask for user confirmation, edits, or missing input before continuing a multi-step task

Under The Hood

Architecture - The package is organized around two provider generations living side by side: a legacy CopilotKit/copilot-context.tsx provider (363 lines, exposing CopilotContext) and the current CopilotKitProvider (src/v2/providers/CopilotKitProvider.tsx, ~887 lines), both ultimately backed by a shared CopilotKitCoreReact runtime client (src/lib/react-core) that talks to @copilotkit/core and @ag-ui/client. Hooks such as useCopilotAction, useCoAgent, and useCoAgentStateRender (in src/hooks/) read/write through this shared context rather than owning their own state, so registering an action or tool in one component is immediately visible to the runtime and any other component. Generative UI is handled by dedicated renderer modules (MCPAppsActivityRenderer, OpenGenerativeUIRenderer, A2UIMessageRenderer) that map agent tool-call payloads to React components, and human-in-the-loop flows are implemented as async hooks (useHumanInTheLoop, useLangGraphInterrupt) that suspend the agent turn until the UI resolves a promise.

Tech Stack - TypeScript throughout, built with the monorepo’s shared tsconfig/react-library.json base config and bundled to dual ESM/CJS output (dist/index.mjs/dist/index.cjs) plus a /v2 subpath export. Runtime dependencies include @ag-ui/client/@ag-ui/core (the AG-UI protocol), sibling workspace packages @copilotkit/core, @copilotkit/runtime-client-gql, @copilotkit/shared, @copilotkit/web-components, and @copilotkit/web-inspector, plus zod/zod-to-json-schema for tool-schema validation, rxjs for stream handling, react-markdown/streamdown/katex for rendering chat content, and Radix UI primitives for accessible dropdowns/tooltips. react, react-dom, and zod are peer dependencies (React 18/19).

Code Quality - The package has 120+ test files under src/**/__tests__ and colocated *.test.ts(x) files, run via Vitest, covering hooks (use-coagent-state-render, use-frontend-tool, use-copilot-chat-internal-connect), context (threads-context), components (CopilotListeners), and dedicated .contract.test.tsx/.e2e.test.tsx suites for cross-cutting behaviors like thread-ID propagation and tool remounting. The monorepo also runs publint and attw (Are The Types Wrong) checks on every package to catch packaging/type-export regressions before release.

API Design - The public API is hook-first and composable: useCopilotAction({ name, parameters, handler }) and useCopilotReadable({ description, value }) follow a consistent object-argument convention that mirrors React’s own idioms, and useCoAgent/useCopilotChat return plain state + setters rather than requiring a class or imperative client. A single CopilotKitProvider at the root is the only mandatory boilerplate; everything else layers on optionally (chat UI components, generative UI renderers, human-in-the-loop hooks), which keeps the barrier to a first working integration low while still exposing lower-level primitives for advanced control.