assistant-ui
A TypeScript/React library for building AI chat interfaces in your app.
- Stars
- 12.9k
- Forks
- 1.3k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
assistant-ui is an open-source TypeScript and React library for building chat interfaces like ChatGPT inside your own web app. It provides composable chat pieces such as threads, messages, and a composer, and connects them to backends like the Vercel AI SDK, LangGraph, or your own custom backend.
- Scaffold a new Next.js project with a chat UI using the CLI
- Add a styled chat thread to an existing React app
- Render tool call results as React components such as a weather card
- Collect inline user approvals before an AI action runs
- Connect the chat UI to a LangGraph or custom data-stream backend
Great for
- React or Next.js developers adding an AI chat panel to an existing app
- Teams that want to style chat UI with their own design system or shadcn/ui
- Developers who need tool-call rendering or inline human approval in a chat
- Projects already using the Vercel AI SDK or LangGraph
Not ideal for
- People who want a finished chat app without writing any code, since it is a library for developers
- Projects not using React, because the library is built for React and TypeScript
- Teams that need a single drop-in component with no customization, since the README describes composing primitives instead
How to get it
- 1
Install with a package manager
You'll need: Node.js · npm or another JavaScript package manager
Create a new project with the CLI
npx assistant-ui@latest createAdd to an existing project with the CLI
npx assistant-ui@latest initInstall the packages directly
npm install @assistant-ui/react @assistant-ui/ai-sdk ai - 2
Run it
- Run the CLI create command to scaffold a Next.js app, or run init in an existing project
- Choose the Base UI (default) or Radix UI styling flavor when the CLI asks
- Wire the Chat component using useChatRuntime and AssistantRuntimeProvider as shown in the README
- Start your dev server and open the page to see the chat thread
- 3
Get the most out of it
- Swap useChatRuntime for useLangGraphRuntime or useDataStreamRuntime to connect your own backend
- Use makeAssistantToolUI to render tool calls as custom React components
- Use the CLI-provided shadcn/ui theme as a starting point, then restyle the primitives
- Explore the documentation and examples linked from the project homepage
Downloads
Strengths
- Composable primitives let you build custom chat layouts instead of using one fixed component
- Includes streaming, attachments, markdown, and accessibility features according to the README
- Typed TypeScript APIs for runtimes, tool schemas, and message parts
Trade-offs
- Requires React and TypeScript knowledge, so it is not beginner-friendly for non-developers
- The README is truncated and does not fully document every backend or setup detail
- Being a library, you still need to supply and pay for your own model provider and backend
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| assistant-ui (this) | 12.9k | Library | intermediate | 4 days ago | React or Next.js developers adding an AI chat panel to an existing app |
| CopilotKit | 38.5k | Library | intermediate | 4 days ago | Developers adding an AI assistant or agent interface to a React or Next.js app |
| ui | 127k | Library | intermediate | 4 days ago | Developers building React or Next.js interfaces who want full control over component code |
| primitives | 19.5k | Library | intermediate | 22 days ago | Developers building a custom design system who want accessible base components |
| tambo | 11.2k | Library | intermediate | 5 days ago | React developers who want an AI chat to show charts, forms, or boards instead of only text |
| Semantic-UI | 51k | Library | beginner | 1.9 years ago | Front-end developers who want prebuilt UI components they can restyle with themes |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.