CopilotKit

Type: full-code · Vendor: CopilotKit · Language: TypeScript · License: MIT · Status: active · Status in practice: emerging · First released: 2023

Links: homepage docs repo

CopilotKit gives a web frontend the components and protocol to connect to an agent backend so the agent can stream text, render UI, share state, and pause for the user.

Description. CopilotKit is an open-source frontend stack for agent-powered user interfaces, built by the CopilotKit team. It supplies React components and hooks plus the AG-UI protocol, which carries events in both directions between the application and any agentic backend. Over that channel the agent streams responses, renders React components as tool output, syncs shared state with the page, and can pause execution to ask the user for input or approval.

Agent loop shape. A bidirectional event stream between frontend and agent: the application POSTs user input and state to the agent, and the agent emits a stream of typed events (text, tool calls, state deltas) over AG-UI. The agent's loop runs on the backend; CopilotKit drives the UI from the event stream and can send the agent back into the loop after a human responds.

Primary use cases

in-app copilot and chat interfaces
generative UI rendered from agent tool calls
shared state between frontend and agent
human-in-the-loop approval and confirmation flows
connecting React/Angular/mobile frontends to agent backends

flowchart TD fw["CopilotKit"] fw --> p1["Streaming Typed Events (core)"] fw --> p2["Bidirectional Impulse Channel (first-class)"] fw --> p3["Generative UI (first-class)"] fw --> p4["Human-in-the-Loop (first-class)"] fw --> p5["Blackboard (first-class)"]

Key concepts

AG-UI Protocol → bidirectional-impulse-channel (docs) — The open event protocol CopilotKit defines and maintains for connecting a user-facing application to any agentic backend; the agent and the app exchange typed events over it in both directions.
useCopilotAction → generative-ui (docs) — A React hook that registers a frontend action the agent can call as a tool; the action can render a React component as its result, which is how generative UI reaches the page.
useCopilotReadable → blackboard (docs) — A hook that exposes a slice of application state to the agent as readable context, so the agent reasons over what the user currently sees on the page.
CoAgents → blackboard (docs) — CopilotKit's integration layer for agentic backends (LangGraph, CrewAI, and others) that streams the agent's intermediate state into the UI and syncs shared state between the running agent and the page.