CopilotKit v1.0 Generative UI: Building Agentic React Apps with AG-UI Protocol

By Nathan Tarbert, AI Frontend Architect at CopilotKit. I lead the development of the CopilotKit v1.0 SDK and the AG-UI Protocol specification adopted by Google, LangChain, AWS, Microsoft, Mastra, and PydanticAI.

The biggest lie in AI application development is that users want to chat with your app. They don't. They want to accomplish tasks. Chat is just one interaction modality, and often the least efficient one. When an AI agent needs to display a data table, render a chart, show a form for user input, or present a multi-step approval workflow, a text-based chat interface is the wrong tool. CopilotKit v1.0, released with 35,000+ GitHub stars and adopted by six major platforms through the AG-UI Protocol, solves this by providing standardized protocols and React hooks that let your agents render any UI component inline with the conversation.

What Is Generative UI Generative UI is the set of primitives that let an AI agent decide what appears on the screen — from rendering a specific React component you have built, to composing layouts from a declarative JSON schema, to embedding sandboxed UI shipped by an MCP server. CopilotKit v1.0 implements six Generative UI primitives: Components as Tools (register any React component via useComponent for agent-controlled rendering), Tool Call Rendering (custom UI cards for backend tool calls via useRenderTool), State Rendering (subscribe to streaming agent state for live dashboards), Reasoning (render model thinking tokens inline), A2UI (agent emits declarative JSON schema that the frontend composes into UI from a registered catalog), and MCP Apps (MCP server ships sandboxed HTML/JS alongside tool definitions). These six primitives sit on a spectrum from developer-controlled to agent-invented, and the choice is per-feature rather than per-product.

The Problem in Numbers According to CopilotKit's v1.0 launch analysis, teams building AI features spend 40-60% of their development time on frontend integration work that connects agent outputs to UI components. A typical AI feature requires building an agent backend, a chat interface, custom UI components for each tool output, approval flows, and state synchronization between agent and frontend. Without standardized GenUI protocols, each team rebuilds this integration layer from scratch. The result is that most AI features converge to text-only chat interfaces regardless of what interaction pattern would serve the user best. The AG-UI Protocol, now adopted by Google, LangChain, AWS, Microsoft, Mastra, and PydanticAI, standardizes the agent-to-frontend communication layer so that any AG-UI-compatible agent can render UI in any AG-UI-compatible frontend without custom integration code.

Who This Is Built For For the full-stack React developer building an AI copilot for a SaaS product. Situation: you need the agent to render data tables, charts, and approval forms inline with the chat, but building custom UI for each agent tool takes as long as building the agent itself. Payoff: register your React components as tools via useComponent, and the agent calls them directly with no frontend integration code. For the frontend engineering lead shipping AI features for a team of 5 developers. Situation: every AI feature requires parallel backend and frontend work, doubling the feature delivery time. Payoff: standardize on AG-UI Protocol and one agent powers web, mobile, and Slack without separate frontend implementations. For the product engineer embedding an AI assistant in an existing React app. Situation: you need human-in-the-loop approval for agent actions that change data, but building approval UIs for every tool is impractical. Payoff: useHumanInTheLoop handles approval flows for any agent tool call automatically.

Setup Guide Total honest setup time: 30 minutes for basic GenUI integration, 2 hours for full A2UI and MCP Apps support.

Tool [version] Role in workflow Cost / tier CopilotKit v1.0 GenUI SDK for React Free (MIT, 35K stars) AG-UI Protocol Agent-to-frontend standard Open protocol A2UI Declarative JSON UI schema Open spec MCP Apps Sandboxed iframe UI Open spec LangGraph / Mastra Agent backend Free / MIT Node.js 22+ Runtime Free

The GOTCHA: useComponent works brilliantly for controlled GenUI where you have pre-built components. The trap is assuming all agent interactions can be controlled. For truly dynamic interfaces, A2UI or MCP Apps are better suited, but they require either an A2UI-compatible agent or an MCP server that ships UI assets. If your agent has no A2UI or MCP Apps support, you are limited to the controlled GenUI pattern (Components as Tools), which means you must build every possible UI component in advance.

ROI Case

Metric Without CopilotKit With CopilotKit v1.0 Source Frontend dev time per AI feature 40-60% of total 15-25% of total (Community estimate) Agent platforms supported 1 (web only) 5 (web/mobile/Slack/Teams/Discord) (CopilotKit docs) Human-in-the-loop impl time 2-3 days per tool 10 minutes (useHumanInTheLoop) (Community estimate) A2UI dynamic rendering Not available Declarative JSON from agent (CopilotKit v1.0)

Week-1 win: Install @copilotkit/react-core and @copilotkit/react-ui, wrap your app with CopilotKitProvider, and register one React component via useComponent. Within 30 minutes, your agent will be rendering that component inline with its tool call output. Strategic close: Generative UI converts AI agents from text-based assistants into interactive application components. The six-primitive architecture lets you start with controlled GenUI and progressively adopt declarative and open-ended patterns as your agent capabilities grow.

Honest Limitations

1. MEDIUM - React is the primary platform; Angular, Vue, and React Native support is GA but less mature than the React SDK.
2. LOW - GenUI quality depends on the underlying agent model's ability to produce correct tool calls and UI data structures.
3. MEDIUM - MCP Apps sandboxed iframes have limited interactivity compared to native React components.
4. MODERATE - Copilot Cloud managed deployment is in beta; production deployments should implement custom backend integration for full control.

Start in 10 Minutes

1. (2 min) npx create-next-app my-genui-app && cd my-genui-app.
2. (3 min) npm install @copilotkit/react-core @copilotkit/react-ui.
3. (3 min) Wrap your layout: <CopilotKitProvider runtimeUrl="/api/copilotkit"><CopilotSidebar>{children}</CopilotSidebar></CopilotKitProvider>.
4. (2 min) Register a component: useComponent({ name: "weatherCard", parameters: WeatherProps, render: WeatherCard }).
5. Your agent can now render weather cards inline with the conversation. Type "Show me the weather in San Francisco" to see it in action.

Q: How much does CopilotKit cost per month? A: CopilotKit is free and open-source under MIT license. Copilot Cloud (managed deployment, beta) will have paid tiers for enterprise features. Self-hosted infrastructure costs are limited to your agent backend hosting.

Q: Is CopilotKit compliant with data privacy requirements? A: Yes. CopilotKit runs entirely on your infrastructure. Agent communications flow through your backend, not through CopilotKit's servers. AG-UI Protocol is a wire format that stays within your deployment boundary.

Q: Can I use CopilotKit with any agent framework? A: Yes. CopilotKit works with LangGraph, Mastra, PydanticAI, Python agents via HTTP, and any OpenAI-compatible API. The AG-UI Protocol is framework-agnostic.

Q: What happens when a Generative UI component fails to render? A: CopilotKit falls back to a text-based tool call result display. The conversation continues with the agent's text output instead of the interactive component.

Q: How long does it take to add Generative UI to an existing app? A: Basic integration takes 30 minutes for a developer familiar with React. Full A2UI and MCP Apps support takes approximately 2 hours including agent backend configuration.

Related on DailyAIWorld Otari LLM Control Plane — routing and monitoring for the agent backend that powers CopilotKit GenUI. AI SDK 7 WorkflowAgent — durable agent execution that pairs with CopilotKit for long-running GenUI workflows. Fara-7B Computer Use Agent — on-device browser automation that can be surfaced through CopilotKit GenUI interfaces.