# CopilotKit: Building Agent-Native AI Features with Generative UI and Shared State [CopilotKit](https://copilotkit.ai/) is an **open-source framework for building AI features that are integrated into application state and UI, rather than isolated in a chat panel**. It provides four core capabilities: a standardized agent-frontend communication protocol (AG-UI), AI rendering of React components as tool calls (Generative UI), bidirectional state synchronization between the agent and the frontend (`useCoAgent`), and human-in-the-loop approval workflows. ## The problem with sidebar AI Most AI features in applications follow a simple pattern: a chat panel on the right, the application on the left. The AI answers questions with text, and the user manually acts on those answers in the main interface. The AI does not have access to application state, cannot update the UI, and cannot take actions directly. This creates friction. If an AI identifies three high-risk accounts, the user still has to navigate to those accounts manually. If the AI recommends creating follow-up tasks, the user has to create them. The AI produces information but does not reduce work. Moving beyond this requires solving several engineering problems: streaming events between frontend and agent backend, synchronizing state so the agent knows what the user is seeing, and building approval flows where the agent proposes actions before executing them. CopilotKit provides standardized solutions to these problems. ## Getting started Prerequisites: Node.js, npx, and an OpenAI API key. ```command npx copilotkit@latest create ``` ![Terminal window showing the npx copilotkit@latest create command being executed](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/45043221-da6f-4aea-18fd-59cd49c36b00/lg1x =1280x720) The interactive wizard asks for a project name and agent framework. Supported frameworks include LangGraph, CrewAI, and others. ![Interactive setup showing the list of selectable agent frameworks including LangGraph and Pydantic AI](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/5ded3bfc-3c94-46b4-3fe9-42e4e16f1100/lg2x =1280x720) After scaffolding, rename `.env.example` to `.env` and add the OpenAI API key: ```text OPENAI_API_KEY="your-api-key-here" ``` ```command npm install && npm run dev ``` This starts both the Next.js frontend and the agent backend concurrently. The scaffolded project has Generative UI, shared state, and AG-UI already wired up. ## Demo: a sales dashboard copilot ### Generative UI Given the prompt "Show me a revenue breakdown by segment and highlight the biggest risk," a standard LLM returns a markdown table. A CopilotKit agent renders a React component directly in the chat. ![The AI chat window displaying a Revenue by Segment component with colored bars and data points instead of plain text](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/308da5e9-fb34-45f2-34fa-e33bda61ad00/md2x =1280x720) The agent treats the frontend's React components as tools. When the LLM determines that visual output is more appropriate than text, it calls the relevant component with data, and CopilotKit renders it in the conversation flow. ### Human-in-the-loop Given a follow-up prompt "Create follow-up tasks for the risky accounts," the agent does not execute immediately. It presents its plan and asks for confirmation. ![Chat interface showing the agent's message "Shall I go ahead and create these tasks?" pausing for user approval](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/68424c39-e2b9-441a-eb12-468be3d39d00/orig =1280x720) CopilotKit renders an approval component: a checklist where the user can review each proposed task and select which ones to approve. ![Approve follow-up tasks component with checkboxes allowing selective approval of proposed actions](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/0f981295-1348-4087-7d72-ce4f635b4a00/md1x =1280x720) ### Shared state When the user approves tasks, the agent executes them and updates the application state directly. The new tasks appear in the main dashboard's task list outside the chat window, without requiring a page refresh or manual state management. This works because the agent and the frontend share the same state object via `useCoAgent`. Actions the user takes in the main UI are visible to the agent without the user restating them, and actions the agent takes are immediately reflected in the UI. ## The four pillars ### AG-UI protocol AG-UI is an open event-based specification for communication between agent backends and frontend applications. ![Diagram showing the AG-UI protocol as the central connector between a CopilotKit application and backend frameworks including LangGraph, CrewAI, and Microsoft Agent Framework](https://imagedelivery.net/xZXo0QFi-1_4Zimer-T0XQ/28bd1316-68b9-47d0-eabe-d372a04af300/lg2x =1280x720) Without a standard, each combination of agent framework (LangGraph, CrewAI, custom) and frontend framework (React, Vue, Angular) requires custom integration code. AG-UI defines a shared vocabulary of events (`message`, `state_update`, `tool_call`, `ui_event`) that both sides understand. This decouples frontend from backend, so swapping the agent framework does not require rewriting UI code. ### Generative UI Front-end React components are registered as LLM tools with a name, description, and typed parameters (props). When the LLM calls a UI tool, CopilotKit intercepts the tool call and renders the corresponding component with the provided data. This replaces text descriptions of complex data with the actual UI components designed to display that data. ### Shared state (Co-agents) `useCoAgent` creates a state object synchronized between the React frontend and the agent backend. Changes from the user side (filtering a table, selecting a map location) are available to the agent without the user restating them. Changes the agent makes are reflected in the UI immediately. This bidirectional sync makes the agent context-aware without additional prompt engineering. ### Human-in-the-loop For actions with real consequences (creating records, sending messages, spending money), the agent is programmed to pause before execution. It presents the proposed action and waits for explicit user confirmation. CopilotKit provides first-class support for this pattern, including rendering custom approval UI components. The agent proposes and prepares; the user approves and executes. ## Final thoughts **CopilotKit is more opinionated than lower-level tools like the Vercel AI SDK, and it is primarily designed for React and Next.js**. The tradeoff is that the hard infrastructure problems (streaming, state sync, approval flows, component rendering) are already solved. Teams building agentic user experiences in React get a significant head start rather than reimplementing these patterns from scratch. The **Generative UI and shared state features are the most distinctive**. They move AI from producing text about application state to directly participating in it, which is a meaningful architectural shift for products where AI is intended to reduce user workload rather than just answer questions. Source code and documentation are at [github.com/CopilotKit/CopilotKit](https://github.com/CopilotKit/CopilotKit).