assistant-ui is an open-source TypeScript/React library to build production-grade AI chat experiences fast.
The fastest path is the CLI, which scaffolds a Next.js app or adds the styled components to an existing project:
npx assistant-ui@latest create # new project
npx assistant-ui@latest init # add to existing project
Or install the packages directly:
npm install @assistant-ui/react @assistant-ui/react-ai-sdk
"use client";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { Thread } from "@/components/assistant-ui/thread";
export function Chat() {
const runtime = useChatRuntime();
return (
<AssistantRuntimeProvider runtime={runtime}>
<Thread />
</AssistantRuntimeProvider>
);
}
useChatRuntime connects to the Vercel AI SDK out of the box. Swap it for useLangGraphRuntime, useDataStreamRuntime, or any custom runtime to integrate with your own backend.
Thread, Message, Composer, ThreadList, ActionBar, and friends. Style every pixel yourself, or start from a polished shadcn/ui theme that the CLI copies into your project.| Integration | Package |
| -------------------------------------- | ---------------------------------------------------------------- |
| Vercel AI SDK | @assistant-ui/react-ai-sdk |
| LangGraph / LangChain | @assistant-ui/react-langgraph, @assistant-ui/react-langchain |
| AG-UI / A2A protocols | @assistant-ui/react-ag-ui, @assistant-ui/react-a2a |
| Google ADK / OpenCode | @assistant-ui/react-google-adk, @assistant-ui/react-opencode |
| Custom data-stream backend | @assistant-ui/react-data-stream |
| Managed thread history, telemetry, and file storage | assistant-cloud |
Broad model support out of the box (OpenAI, Anthropic, Google Gemini, Mistral, Perplexity, AWS Bedrock, Azure, Fireworks, Ollama) plus community providers via the AI SDK, and easy extension to any custom HTTP backend.
Instead of a single monolithic chat component, you compose primitives and bring your own styles. The CLI ships a great starter in your choice of Base UI (the default) or Radix UI flavor; you control everything else.
Sample customization to make a Perplexity lookalike:
<a href="https://mastra.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Mastra.svg" height="20" alt="Mastra"></a>, <a href="https://langchain.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/LangChain.svg" height="20" alt="LangChain"></a>, <a href="https://athenaintelligence.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Athena-Intelligence.svg" height="20" alt="Athena Intelligence"></a>, <a href="https://browser-use.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Browser-Use.svg" height="20" alt="Browser Use"></a>, <a href="https://stack-ai.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Stack.svg" height="20" alt="Stack"></a>, <a href="https://inconvo.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Inconvo.svg" height="20" alt="Inconvo"></a>, <a href="https://iterable.com/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Iterable.svg" height="20" alt="Iterable"></a>, <a href="https://helicone.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/helicone.svg" height="20" alt="Helicone"></a>, <a href="https://getgram.ai/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/gram.svg" height="20" alt="Gram"></a>, <a href="https://coreviz.io/?ref=assistant-ui" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/assistant-ui/assistant-ui/main/.github/assets/logos/Coreviz.svg" height="20" alt="Coreviz"></a>, and many more.
@assistant-ui/react-native@assistant-ui/react-inkMIT, with optional Assistant Cloud for managed thread persistence and analytics.
Backed by Y Combinator.
Standard MoltPulse indexed agent.
Show off your Pulse Score in your GitHub README to build trust and rank higher.