CopilotKit is the frontend layer for agent-powered apps. Where most agent frameworks live on the backend, CopilotKit answers the question they leave open: how does the user actually see and steer the agent? It ships React, Angular, and React Native components (chat, sidebar, generative UI) plus a runtime that connects them to your agent backend, and it is the maker of the AG-UI protocol that standardizes agent-to-UI communication. The reason to read past the README is understanding what it does versus what your agent framework already does, and the open-core reality underneath.

What it actually gives you

The pieces fit together as a stack:

  • UI components (CopilotChat, CopilotSidebar) that stream messages, tool calls, and agent responses, fully customizable.
  • Generative UI: agents can render and update UI components at runtime based on state and intent.
  • Shared state: a two-way layer both the agent and the UI can read and write, kept in sync.
  • Human-in-the-loop: the agent can pause for user input, confirmation, or edits, then continue.
  • AG-UI protocol: a standard adopted by LangGraph, CrewAI, Mastra, and PydanticAI, so one agent backend can drive React, Angular, Slack, or Teams.

The mental model: your agent logic stays in LangGraph or CrewAI; CopilotKit is the part that turns it into an interface users can touch.

Install

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";

export default function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <CopilotSidebar defaultOpen />
      {/* your app */}
    </CopilotKit>
  );
}

The runtime runs on Node via Express or Hono, wraps multiple model providers, and has LangGraph middleware. As of 2026-06 it ships patch releases every day or two (the v1.59.x line).

When it fits, and when it does not

It fits teams building user-facing agent products in React or Angular who want chat UI, generative UI, and human-in-the-loop without building that layer themselves, especially if their backend is LangGraph or CrewAI. It fits less well for a backend-only or CLI agent (you do not need a frontend stack), or for a minimal chat box where a lighter library is enough. And the bundle is heavy, which matters for size-sensitive apps (see gotchas).

How it compares

ProjectLayerStars (2026-06)
CopilotKit/CopilotKitFrontend stack + runtime, agent UI~35k
vercel/aiModel SDK abstraction~25k
assistant-ui/assistant-uiReact chat UI library~11k
langchain-ai/langchainBackend agent framework~139k

vercel/ai is a lighter SDK without a UI component stack; assistant-ui is UI-first without an agent runtime or shared state; LangChain is the backend, which CopilotKit complements rather than competes with. CopilotKit’s distinct bet is being the full frontend stack plus the AG-UI standard.

Gotchas from the issue tracker

The fast release cadence shows up as integration sharp edges in the open issues:

  • Published packages shipped workspace:* protocol references that broke pnpm installs (#4919, #4911), a packaging regression worth pinning around.
  • The A2UI generative-UI context could inject around 30KB of metadata into every agent run regardless of use (#5369), and @copilotkit/react-core was reported to add roughly 15MB to a production bundle (#4893).
  • Edge cases: useFrontendTool tools silently dropped when generative UI is enabled (#4952), and human-in-the-loop could fail silently under the default multi-route transport (#4953).

The throughline: the capabilities are broad, the cost is bundle size and a fast-moving API where upgrades occasionally break installs or drop features quietly. Pin versions and test HITL and generative UI paths after upgrades.

The open-core reality

Worth stating plainly: the MIT-licensed repo gives you the runtime and the React/Angular/Vue components, while CopilotKit Inc. sells a separate cloud and enterprise tier (persistence, per-user adaptation, analytics, learning from feedback). That is a normal open-core model, but know which half you are adopting before you build production assumptions on it.

FAQ

Is CopilotKit free? Yes for the core: the MIT-licensed repo gives you the runtime and the React, Angular, and Vue components. CopilotKit Cloud and Enterprise are separate paid tiers.

What is CopilotKit used for? Building the frontend of agent-powered apps: chat and sidebar UI, generative UI, shared state between agent and interface, and human-in-the-loop, across React, Angular, and React Native, with the same agent backend also able to surface in Slack and Microsoft Teams.

Does CopilotKit work with LangGraph and CrewAI? Yes. CopilotKit makes the AG-UI protocol, which LangGraph, CrewAI, Mastra, and PydanticAI have adopted, so one agent backend can drive its UI.

How do I install CopilotKit? Run npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime, then wrap your app in the CopilotKit provider pointing at your runtime URL.

For the backend orchestration these UIs sit on top of, the multi-agent patterns in TauricResearch/TradingAgents show the LangGraph style CopilotKit integrates with.