CopilotKit vs assistant-ui vs Vercel AI SDK UI: the open-source AI chat UI for a Next.js SaaS (2026)

Three of the most-starred ways to put an AI chat window in a Next.js app are CopilotKit, assistant-ui, and Vercel AI SDK UI. They get lumped together in every "best AI chat UI library" thread, and that framing is the problem: they do not sit at the same layer, so comparing them feature-for-feature leads you to the wrong pick. We build and ship on Next.js, so we sorted them by the only axis that actually decides the call for a SaaS: how much of the chat UI you want to own versus inherit.

Quick answer (August 2026)

Vercel AI SDK UI is a set of headless React hooks (useChat, useCompletion) that manage streaming and provider calls while you build 100% of the interface yourself. assistant-ui is a library of styled, composable chat primitives (Thread, Message, Composer) that gives you a polished UI fast and runs on top of a runtime, usually the Vercel AI SDK. CopilotKit is a full agent-integration framework: generative UI, shared app state, human-in-the-loop, and deep wiring into agent frameworks like LangGraph and CrewAI. For a plain streaming chat in a Next.js SaaS, start with the AI SDK hooks or assistant-ui. Reach for CopilotKit only when your product is an in-app agent, not just a chat box.

The 30-second version

Why these three are not the same thing

Here is the piece most round-ups miss. These are three different layers of the same stack, not three interchangeable products.

• Transport and state (lowest layer): Vercel AI SDK UI. It handles the stream, the message array, retries, and the provider call. It renders nothing on its own.
• Presentation (middle layer): assistant-ui. It ships the actual chat components and, by default, plugs into a runtime. That default runtime is the Vercel AI SDK.
• Application and agent logic (top layer): CopilotKit. It assumes you are building an agent experience and gives you generative UI, shared state between the app and the model, and connectors to agent frameworks.

So "assistant-ui vs Vercel AI SDK UI" is partly a false choice. assistant-ui's default runtime is the AI SDK, which means for many projects you use both: the SDK moves the tokens, assistant-ui draws the bubbles. That single fact reframes the whole decision.

CopilotKit: the agent-integration framework

CopilotKit is an agent-native frontend framework (@copilotkit/react-core v1.66.4, MIT core, ~36.6k GitHub stars as of August 2026). It is the heaviest and most opinionated of the three, and that is the point: it is built for products where the AI does things, not just answers.

What you get: generative UI (the agent renders and updates real React components at runtime), a shared-state layer so the model and your app see the same data, human-in-the-loop pauses for confirmation, and the open AG-UI protocol for agent-to-UI messaging. It connects to LangGraph, CrewAI, Mastra, and PydanticAI, and runs beyond React (Angular, Vue, React Native).

The honest catch: some capabilities lean on CopilotKit Cloud, a commercial tier. That gating draws consistent community pushback. One Reddit r/AI_Agents thread sums up the trade cleanly: CopilotKit "has more integrations with agent frameworks," while the AI SDK "provides a way to go fully headless." If you only need a chat box, CopilotKit is more framework than you want.

assistant-ui: styled composable chat primitives

assistant-ui (@assistant-ui/react v0.15.8, MIT, ~11.5k stars, August 2026) is the pragmatic middle. It gives you unstyled-but-structured primitives, Thread, Message, and Composer, in the shadcn/ui mold: you own the styling, it owns the hard parts. A CLI scaffolds a starter the same way shadcn add does.

Out of the box you get streaming, auto-scroll, retries, markdown rendering, code syntax highlighting, generative UI (tool calls rendered as React components), voice dictation, keyboard shortcuts, and accessibility. Its runtime/adapter model is the key detail: the default useChatRuntime sits on the Vercel AI SDK, and there are adapters for LangGraph, custom data-stream backends, and the optional managed Assistant Cloud.

If you want a real chat UI in an afternoon without inheriting a whole agent framework, this is usually the fastest honest path for a Next.js SaaS.

Vercel AI SDK UI: headless hooks you build on

Vercel AI SDK UI is the UI slice of the broader AI SDK (ai v7.0.56, @ai-sdk/react v4.0.59, Apache-2.0, ~26.1k stars, August 2026). It is a set of framework-agnostic hooks, useChat and useCompletion, that manage message state and streaming across React, Next.js, Svelte, and Vue, against any provider (OpenAI, Anthropic, Google, and more).

It renders nothing. You bring the components, the styling, and the layout. That is a feature: fewer dependencies, zero design opinions, and the most control of the three. It is also the only one of the three with no managed upsell in the core path, which matters if lock-in is a concern. The cost is real work: you are building the composer, the message list, the scroll behavior, and the retry affordances yourself, or on top of a primitive library like assistant-ui.

How they compare: layer, license, and lock-in

Which one should you ship in your Next.js SaaS?

• A support or docs chat bolted onto an existing app: assistant-ui. You want it to look finished today, and you do not want to hand-build a message list.
• A chat feature where design is a differentiator and you have a design system already: Vercel AI SDK UI. Wire the hooks into your own components and keep the dependency surface tiny.
• A product whose core loop is an agent taking actions in your app (filling forms, running workflows, editing records): CopilotKit. Generative UI and shared state are exactly what you would otherwise reinvent, and the LangGraph/CrewAI connectors save weeks.
• You are not sure yet: start with the AI SDK hooks. They are the substrate the other two lean on, so nothing you learn is wasted.

The migration ladder nobody spells out

Because these compose, you do not have to bet the stack on day one. The path that has aged best for us:

1. Start headless with @ai-sdk/react useChat. Prove the streaming loop and the provider wiring with almost no UI.
2. Add primitives by dropping assistant-ui on top when the hand-rolled UI starts costing you time. Its default runtime is already the AI SDK, so this is additive, not a rewrite.
3. Graduate to the framework only when the chat becomes an agent, when you need generative UI, shared state, or a LangGraph workflow behind it. That is when CopilotKit earns its weight.

Each rung reuses the one below it. That is the whole reason to understand the layers before you pick.

FAQ

Is assistant-ui a replacement for the Vercel AI SDK?
No. assistant-ui is a UI layer that, by default, runs on top of the Vercel AI SDK runtime. For most projects you use both together.

Is CopilotKit free?
The core (@copilotkit/react-core) is MIT-licensed and open source. Some features rely on CopilotKit Cloud, a paid tier, which is the most common community complaint.

Which has the most GitHub stars in 2026?
CopilotKit leads at roughly 36.6k, followed by the Vercel AI SDK at ~26.1k and assistant-ui at ~11.5k, as of August 2026. Stars measure attention, not fit for your use case.

Do I need an agent framework like LangGraph to use these?
No for the AI SDK and assistant-ui, which work with a plain provider call. CopilotKit is where agent-framework integration becomes a first-class feature.

What is the lightest option for a Next.js SaaS?
Vercel AI SDK UI. It is headless hooks with no rendering and no managed tier in the core path, so it adds the least to your bundle and your bill.

Can I switch later?
Yes, and the layered design makes it cheap: hooks first, primitives on top, framework last. Each step builds on the previous one.