assistant-ui/assistant-ui — stars, momentum and ranking

Product · Documentation · Examples · Discord · Contact Sales

GitHub License Backed by Y Combinator

The UX of ChatGPT in your React app 💬🚀

assistant-ui is an open-source TypeScript/React library to build production-grade AI chat experiences fast.

Installation

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/ai-sdk ai

Running npx assistant-ui@latest init in a terminal

Usage

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export function Chat() {
  const runtime = useChatRuntime();
  return (
    
      
    
  );
}

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.

What you get

Composable primitives: build any chat UX from 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.
Production UX out of the box: streaming, auto-scroll, retries, attachments, markdown, code highlighting, voice dictation, keyboard shortcuts, and accessibility.
Generative UI: render tool calls and JSON as React components, collect inline human approvals, and expose safe frontend actions to the model.
Strong TypeScript: typed runtime APIs, tool schemas, message parts, and adapters end to end.

A get_weather tool call rendered as a weather card inside an assistant-ui chat

Backends

Integration	Package
Vercel AI SDK	`@assistant-ui/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.

Customization

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.

A chat UI annotated with the primitives that build it: ThreadPrimitive.Viewport, MessagePrimitive.Root and Parts, makeAssistantToolUI, ActionBarPrimitive, BranchPickerPrimitive, and ComposerPrimitive.Input, Send and AddAttachment

Used in production by

…and many more.

Demos

  [![Short Demo](https://img.youtube.com/vi/ZW56UHlqTCQ/hqdefault.jpg)](https://youtu.be/ZW56UHlqTCQ)




  [![Long Demo](https://img.youtube.com/vi/9eLKs9AM4tU/hqdefault.jpg)](https://youtu.be/9eLKs9AM4tU)

Community & Support

License

MIT, with optional Assistant Cloud for managed thread persistence and analytics.

Backed by Y Combinator.