CopilotKit review: the open-source agent UI for Next.js (2026)

Quick answer

In June 2026, CopilotKit is the most production-ready open-source agent UI for Next.js. It is React-first, ships the AG-UI streaming protocol, and works with any agent backend, including your own. ShipGarden recommends it for teams that need to bolt a copilot onto an existing Next.js app within a sprint. Teams starting from a blank slate may prefer the Vercel ai-chatbot template (simpler) or a full agent framework like Mastra (one less moving part).

What is CopilotKit?

CopilotKit is an open-source SDK for putting AI copilots, agent UIs, and generative-UI components inside React apps. The project started in late 2023 as a React library for chat and in-app assistants. By June 2026 it has grown into a stack of React hooks, a Node runtime route, an MCP client, the open AG-UI streaming protocol, and a paid Enterprise Intelligence tier. The company raised a $27M Series A in May 2026, per public reporting at the time.

The core open-source package lives on GitHub at CopilotKit/CopilotKit, MIT-licensed, with first-party React 19 and Next.js App Router support. Public Reddit chatter from builders shipping with the MCP client describes it as "surprisingly robust and extensible" (r/mcp, August 2025).

What does the install look like (June 2026 walkthrough)

ShipGarden's curator timed a fresh CopilotKit install into a Next.js 15 App Router app on June 24, 2026. Total time to a working sidebar copilot calling one tool: fifteen minutes.

The install is three packages, one route, one provider, one component, one hook:

pnpm add @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

Scaffold the runtime route at app/api/copilotkit/route.ts:

import { CopilotRuntime, OpenAIAdapter, copilotRuntimeNextJSAppRouterEndpoint } from '@copilotkit/runtime'
import { NextRequest } from 'next/server'

const runtime = new CopilotRuntime()
const adapter = new OpenAIAdapter({ apiKey: process.env.OPENAI_API_KEY! })

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime, serviceAdapter: adapter, endpoint: '/api/copilotkit',
  })
  return handleRequest(req)
}

Wrap the page tree in . Drop somewhere visible. Register one tool with useCopilotAction and ship.

The sidebar opens, streams a reply, and calls the tool on the first try. The curator's only stumble was a model-name typo. The framework did not crash, the error surface was readable, and the rebuild was a one-line fix. Replacing OpenAIAdapter with an Anthropic adapter for Claude (or with the built-in custom adapter for a self-hosted model) was a five-line change, no other code touched. That portability is the whole reason the runtime route abstraction exists, and on June 24, 2026 it held up under casual swapping.

The useCopilotAction hook is where most teams spend the next hour. It is a typed function-registration pattern: declare a name, a schema (Zod or JSON schema), and a handler. The agent decides when to call it, the runtime validates the arguments, and the React side gets a tool invocation it can render however it wants. Pairing it with useCopilotReadable (which exposes app state to the agent as context) is how you go from a chat that knows nothing about your app to a copilot that can actually act on the user's data. Both hooks worked first try on the curator's install; the rough edges live in the docs, not the runtime.

How does CopilotKit compare on the four axes that matter?

ShipGarden evaluates agent UIs on four axes drawn from what builders actually ask about on Reddit r/AI_Agents and Hacker News: time-to-first-message, custom agent backend support, production deploy paths, and styling and customization surface. Year-tagged scoring below as of June 26, 2026.

Scroll to see more

Axis	CopilotKit	Vercel ai-chatbot	Mastra agents UI
Time-to-first-message	~15 min from blank Next.js	~10 min via vercel deploy	~20 min, requires Mastra agent first
Custom agent backend	Any (AG-UI protocol)	Vercel AI SDK only	Mastra-native, others via adapter
Deploy paths	Vercel, self-host, anywhere	Vercel-optimised	Vercel, self-host (Node 20+)
Styling surface	Highest control (per third-party comparison, Feb 2026)	Tailwind defaults, light theming	Tailwind defaults, less mature
Open-source license	MIT	Apache 2.0 (template)	Elastic License 2.0
Generative UI primitives	Yes (Open Generative UI, May 2026)	Tools and components	Limited
MCP client	First-party	Via Vercel AI SDK MCP	Yes

A February 2026 independent comparison by Speakeasy.com scored CopilotKit highest on appearance control among three chat builder kits; that ranking matches the curator's hands-on experience in June 2026.

Three ways to ship this stack

ShipGarden gallery posts always end with the three ways a reader could pick this stack up today, ordered by lock-in. Lower lock-in is up the list.

Scroll to see more

Path	What you get	Time-to-ship	When to choose
GitHub clone of the open-source CopilotKit repo	Owned codebase, any host	30 min to local, hours to prod	You want full control and a self-host plan
Deploy on Vercel	Hosted demo, Vercel ecosystem	5 min to live URL	You already live on Vercel and want a working sandbox
Wire a CopilotKit UI to a managed agent backend, per the Claude Agent SDK pattern on Totalum	UI on Next.js, agent runtime on Totalum's API + MCP	A weekend	You want a deployable, owned Next.js app and a managed agent backend that the agent itself can edit

The third row is the one most ShipGarden readers ask about: CopilotKit ships the UI layer, but the agent backend is still a problem to solve. The Totalum editorial on the Claude Agent SDK pattern shows the API and MCP surface you would wire CopilotKit to, year-tagged June 2026.

Where CopilotKit wins

It is the most flexible UI layer for arbitrary agents. That is the whole pitch of the AG-UI protocol, and it is the reason CopilotKit has more integrations with agent frameworks than its peers. As one 2025 r/AI_Agents commenter put it (still accurate in June 2026): "CopilotKit has more integrations with agent frameworks."

The MCP client is good. If part of your roadmap is making tools available over MCP, CopilotKit's client is the path of least resistance from a Next.js codebase.

Generative UI is real, not a demo. The Open Generative UI release in May 2026 added a Claude-Artifacts-style surface where the agent can render its own charts, tables, and live components inside the host app. Other libraries talk about generative UI; CopilotKit ships it as React primitives you mount.

It is genuinely open-source. Self-host the runtime, swap the model adapter, fork the React components. There is a managed Enterprise tier, but the open core is enough for most production apps.

Where CopilotKit loses

Honest part. Pick another tool when:

• You only need a simple chat for OpenAI. The Vercel ai-chatbot template (linked above and below) is faster to deploy and easier to operate if you live on Vercel and do not need a custom agent backend.
• You already chose Mastra (or LangGraph, or PydanticAI) as the agent framework. Mastra's own agents UI is tighter if you do not need CopilotKit's React-component surface. Use its UI; come back to CopilotKit when you need generative components.
• You want zero opinion on styling. CopilotKit's components are themable but they are components, not Tailwind primitives. If you want pixel-level control from minute one, build on @assistant-ui/react or roll your own on the Vercel AI SDK.
• You are allergic to commercial open-source. CopilotKit has a paid Enterprise tier and a managed service. A vocal Hacker News strand has called the commercial side vendor-lock-in (October 2025). The curator's reply: the open-source core works, with no managed component required, and the paid tier is opt-in. Read the licence, decide for your team.
• You are operating on a tight token budget. Token cost is the dominant variable across all three UIs in this comparison; the framework choice barely moves the needle. Model the run-cost first, pick the framework second.

Who should pick CopilotKit?

Three audience segments where the curator says yes, today:

1. Teams adding a copilot to an existing Next.js app. CopilotKit drops into an existing App Router project without refactoring routes or rewriting the data layer.
2. Teams that already have an agent backend they want to keep. Custom Python agents, Mastra agents, LangGraph runs, Anthropic Claude Agent SDK pipelines, all stream cleanly into a CopilotKit UI via AG-UI.
3. Teams shipping generative UI surfaces. If your roadmap includes the agent rendering its own charts, tables, or live interactive components inside the app, CopilotKit is ahead of every other UI library in this category as of June 2026.

Adjacent reading the curator has been pointing teams at this week: DevMoment's 7-day Cursor background-agents log for the agent-dev workflow that complements an agent-UI build; and for Spanish-speaking founders, Lanzadoria's guía paso a paso para crear apps con IA en 2026 covers the broader build process in es-ES.

For a direct contrast template, the Vercel ai-chatbot starter lives at vercel/ai-chatbot on GitHub and is worth a side-by-side weekend if your team has not yet committed.

Curator's verdict

CopilotKit earns a ShipGarden gallery slot in June 2026. It is the right answer for the most common shape of agent-UI work this year: take an existing Next.js app, give it a sidebar copilot, let the copilot call tools that already exist, and stream agent state into the page so the user can watch the agent think and approve steps. The setup is short, the licence is real, the protocol is open, and the company is funded enough to outlast the current wave of agent-UI startups.

The honest caveats remain. Styling depth costs hours. The v1.5+ architecture (December 2025) is still settling. The Enterprise tier is opt-in but worth reading before betting a team on it. None of these are dealbreakers for the kind of teams that ship.

The stack is in the gallery. The deploy paths are above. The agent backend, as always, is on you.

Open questions for the next sweep

The gallery curator keeps a running list of what is not yet settled and revisits it on the next pass.

• How does Open Generative UI hold up at scale? The May 2026 release demos beautifully on a single panel. The next sweep tests it in a multi-pane dashboard with concurrent agent renders, which is where Claude Artifacts itself starts to wobble.
• Does the React Native build (announced early June 2026) reach feature parity with the web SDK? As of June 26, 2026 the curator has not shipped it in production. The first reader who does and writes back gets cited in the next revision.
• What is the real, all-in monthly cost for a 5,000-MAU SaaS running a CopilotKit sidebar that calls one Anthropic Claude tool per session? The framework is free; the inference is not. A future ShipGarden cost teardown will quantify it.
• Does the AG-UI protocol stay open as adoption grows, or does it fork into vendor variants the way every wire protocol eventually does? Worth checking at the December 2026 sweep.

None of these block the recommendation today. They are the questions the curator wants answers to before the next gallery refresh.