TL;DR:

  • CopilotKit is an open-source React framework for building AI copilots that are context-aware — they know what’s on screen and can take actions in your application, not just chat
  • The key primitives are useCopilotReadable (share app state with the AI), useCopilotAction (let the AI invoke UI actions), and CopilotChat (the conversation interface)
  • CoAgents extends this to multi-agent workflows with LangGraph integration, letting you run complex backend agent graphs that surface results in the React frontend

Most product teams discover the limits of the sidebar chatbot pattern fairly quickly. A chat interface that knows nothing about what the user is currently doing, can’t take actions in the application, and requires the user to context-switch into a conversation window is marginally better than opening a separate browser tab with ChatGPT. The bar for “AI integration” is higher than that now.

CopilotKit is built around a different assumption: the AI copilot should be a genuine participant in the application, with read access to what the user is working on and the ability to take actions on their behalf. It’s been the fastest-growing open-source framework for this pattern in 2025-2026, and mid-2026 it’s mature enough to be the default choice for teams who want to add in-app AI to a React product without building the plumbing themselves.

The Core Model

CopilotKit’s architecture is built on three primitives that map directly to what a useful in-app AI needs.

Context awareness with useCopilotReadable

This hook lets you expose any piece of application state to the AI model. You call it with a description and a value, and CopilotKit includes that context in the system prompt when the user asks a question.

useCopilotReadable({
  description: "The current project being edited",
  value: { 
    name: project.name, 
    status: project.status, 
    tasks: project.tasks 
  }
});

The AI now knows which project is open, what its status is, and what tasks exist — without the user having to explain any of it. This is the difference between an AI that answers generic questions about project management and one that can say “I can see you have three tasks marked as blocked — want me to draft an update email for those?”

Action execution with useCopilotAction

This hook registers a function that the AI can call as a tool. You define the name, description, parameters, and handler, and CopilotKit handles the tool-calling plumbing between the frontend and the LLM.

useCopilotAction({
  name: "createTask",
  description: "Create a new task in the current project",
  parameters: [
    { name: "title", type: "string", description: "Task title" },
    { name: "assignee", type: "string", description: "Team member name" },
    { name: "dueDate", type: "string", description: "Due date in ISO format" }
  ],
  handler: async ({ title, assignee, dueDate }) => {
    await createTask({ title, assignee, dueDate });
  }
});

When the user says “create a task for Alice to review the proposal by Friday,” the AI identifies the relevant action, extracts the parameters, and calls the handler. The task gets created in the actual application state, not just described in a chat window.

CopilotChat and CopilotSidebar

CopilotKit provides pre-built UI components for the conversation interface. These connect to the registered context and actions automatically. You can use the defaults or style them to match your application.

Backend and LLM Configuration

CopilotKit is model-agnostic. It ships adapters for Anthropic Claude, OpenAI, Google Gemini, Groq, and others. On the backend, you add a CopilotKit runtime endpoint to your Next.js (or Express/Fastify) application:

// app/api/copilotkit/route.ts
import { CopilotRuntime, AnthropicAdapter } from "@copilotkit/runtime";

export const POST = async (req: Request) => {
  const runtime = new CopilotRuntime();
  return runtime.response(req, new AnthropicAdapter());
};

The runtime handles the message protocol, tool calling, and streaming between your frontend and the LLM provider. You point the frontend at your endpoint, and the rest connects automatically.

CoAgents: Multi-Agent Workflows with LangGraph

CoAgents is CopilotKit’s answer to the question of what happens when the AI needs to do something more complex than a single tool call — research across multiple sources, run a multi-step workflow, or coordinate across sub-agents.

CoAgents bridges LangGraph backend agents with the CopilotKit frontend. You define a LangGraph workflow on the backend — with nodes for planning, execution, tool use, and result synthesis — and CopilotKit streams the agent’s state back to the React frontend as the workflow runs.

This means you get real-time visibility into what the agent is doing: which step it’s on, what it found, and when it’s ready. The frontend can surface this as a progress indicator, intermediate results, or a step-by-step trace — rather than a loading spinner followed by a wall of text.

// Frontend hook that subscribes to agent state
const { state, run } = useCoAgent({
  name: "research_agent",
  initialState: { query: "", results: [] }
});

What It’s Good For

CopilotKit fits best in product categories where the user is working with structured data that the AI can understand and act on: project management tools, CRMs, document editors, data dashboards, and internal tools. It’s also increasingly used for admin interfaces where operators need to perform repetitive actions at scale — the AI can handle batches of updates that would take hours to do manually through a UI.

It’s less suited for use cases where the AI interaction is primarily a retrieval layer — if you just need RAG over a document store with a chat interface, CopilotKit adds overhead you don’t need. In that case a lighter approach (direct streaming API calls with a custom chat component) is simpler.

Getting Started

The setup is straightforward: install @copilotkit/react-core, @copilotkit/react-ui, and @copilotkit/runtime, configure your backend endpoint, wrap your application in <CopilotKit url="/api/copilotkit">, and start registering context and actions.

The CopilotKit documentation has working examples for Next.js 14, React Router, and standalone React apps. The CoAgents examples include a complete research agent built on LangGraph that’s worth reading as a reference architecture for the multi-agent pattern.

For teams building products where the AI should know what’s happening in the application and be able to do things — rather than just answer questions — CopilotKit is the most complete open-source option available for React in 2026.