Chat UI you compose, not a black box
assistant-ui is a set of React primitives for building AI chat interfaces. Rather than a single drop-in chat widget you cannot restyle, it gives you composable pieces (the thread, messages, the composer, an action bar) in the Radix and shadcn style, so you own the markup and the look while it handles the hard parts: streaming, auto-scroll, tool-call rendering, markdown, and accessibility. At 10,639 stars as of 2026-06, with a notably small open-issue count, it is a well-maintained way to avoid hand-building a chat UI.
The mental model: the data flow comes from a backend runtime, and assistant-ui is the interface layer on top.
What it does
You wrap your app in a runtime and drop in the primitives. The runtime adapters connect to a backend (the Vercel AI SDK, LangGraph, a data-stream endpoint, or a custom one), and the components render the conversation with streaming, retries, and smooth token-by-token updates out of the box. Tool calls can render as React components rather than raw JSON, which is how you build generative UI. Styling is yours: it follows the shadcn pattern of copying components into your project rather than locking you to an opaque theme.
Install
npx assistant-ui@latest create # new project with a styled starter
npx assistant-ui@latest init # add to an existing projectOr install the packages directly with npm install @assistant-ui/react plus the adapter for your backend (for the Vercel AI SDK, @assistant-ui/react-ai-sdk). It is MIT-licensed, so commercial use is unrestricted.
How it complements the Vercel AI SDK
These two are partners, not competitors, and confusing them wastes effort. The Vercel AI SDK handles the data: model calls, streaming, and tool calling. assistant-ui handles the interface: rendering that stream as a polished, interactive chat. The bridge is a runtime adapter (useChatRuntime for the AI SDK) that feeds the SDK’s stream into assistant-ui’s components. If you are already using the AI SDK and writing your own chat JSX by hand, assistant-ui is the layer that saves you from rebuilding streaming UX, tool rendering, and accessibility yourself.
Where it fits, and where it doesn’t
Reach for assistant-ui when you want a production-quality chat UI without building streaming, auto-scroll, and tool rendering from scratch, when you want full control over styling, or when you need to switch backends (AI SDK, LangGraph) behind one UI through its runtime adapters.
Where it is not the answer: it is React-only, so other frameworks need a different solution. It assumes you are comfortable composing primitives rather than dropping in one finished component, which is more setup than a black-box widget. And because it tracks a fast-moving ecosystem, integration points with the AI SDK, LangGraph, and MCP occasionally need version alignment, as the tracker shows.
assistant-ui versus hand-rolling the UI
| assistant-ui | hand-rolled with useChat | |
|---|---|---|
| Streaming UX | built in, smooth | you implement it |
| Tool-call rendering | tool result to React component | you parse and render |
| Backend flexibility | runtime adapters (AI SDK, LangGraph) | tied to what you wire |
| Styling | full control, shadcn pattern | full control, all manual |
| Setup | compose primitives | build everything |
Using the Vercel AI SDK’s useChat directly gives you the data and total freedom, at the cost of building the entire interface, including streaming animations, tool rendering, and accessibility, yourself. assistant-ui provides those as composable primitives you still fully control. It is the difference between assembling tested pieces and starting from a blank component.
The star curve
The star curve grew alongside the surge in LLM chat apps, as more teams hit the same realization that a good streaming chat UI is more work than it looks. The very low open-issue count and frequent releases point to a tightly maintained project rather than one coasting on early attention.
What the issue tracker warns you about
With only a handful of open issues, the signals are about integration rather than fundamentals. React 19 and bundler (Turbopack) changes have caused hook-order errors that get fixed quickly. Runtime adapters for the AI SDK, LangGraph, and MCP occasionally lose context or need version alignment when a backend updates. The create CLI has had occasional dependency hiccups. And tool-approval support varies by runtime. These are the normal seams of a UI layer riding on fast-moving backends, and the quick issue turnaround is a good maintenance sign.
Related
For the data-layer SDK this pairs with, see vercel/ai. For the agents you would put behind a chat UI, see cline and OpenHands. For agent memory, see Mem0. For what is trending, see LLM tooling, the daily digest, and the weekly report.
FAQ
What is assistant-ui? A set of composable React primitives for building AI chat interfaces, handling streaming, tool-call rendering, markdown, and accessibility while you keep full control of markup and styling. It is not a black-box widget; you assemble it from pieces.
assistant-ui vs building with the Vercel AI SDK directly? They work together. The AI SDK manages the data and streaming; assistant-ui renders it as a polished chat UI. Using the AI SDK alone means building the entire interface yourself; assistant-ui gives you tested primitives for the hard UI parts.
Which backends does assistant-ui support? It connects through runtime adapters to the Vercel AI SDK, LangGraph, a generic data-stream endpoint, and custom runtimes, so you can switch backends behind one UI.
Can I fully customize the styling? Yes. It follows the shadcn pattern of copying components into your project, built on Radix, so you own the markup and styling rather than being locked to a theme.
Is assistant-ui React-only? Yes. It is built for React, so other frameworks need a different chat-UI solution. For data and model handling across frameworks, the Vercel AI SDK is the framework-agnostic layer.