assistant-ui

// Overview

assistant-ui is an open-source TypeScript/React library for building AI chat interfaces. Instead of one monolithic chat widget, it gives you composable primitives such as Thread, Message, Composer, ThreadList, and ActionBar that you arrange and style yourself, so the look and behavior match your own app.

It targets React and Next.js developers who want a ChatGPT-style experience without building streaming, auto-scroll, retries, attachments, markdown, and accessibility from scratch. A CLI can scaffold a new Next.js project or add styled shadcn/ui components to an existing one.

As a generative UI SDK, it can render tool calls and JSON as interactive React components, collect inline human approvals, and connect to many backends through runtime adapters for the Vercel AI SDK, LangGraph/LangChain, and custom HTTP services.

// What it does

• Composable primitives (Thread, Message, Composer, ThreadList, ActionBar) you style yourself or via a shadcn/ui starter theme
• Production chat UX built in: 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
• Runtime adapters for the Vercel AI SDK, LangGraph/LangChain, AG-UI/A2A, Google ADK, and custom data-stream backends
• Broad model support out of the box including OpenAI, Anthropic, Google Gemini, Mistral, AWS Bedrock, Azure, and Ollama via the AI SDK
• End-to-end TypeScript for runtime APIs, tool schemas, message parts, and adapters

// Getting started

The fastest path is the CLI, which scaffolds a Next.js app or adds the styled components to an existing project. You can also install the packages directly and wire up a runtime.

npx assistant-ui@latest create   # new project
npx assistant-ui@latest init     # add to existing project

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>
  );
}

Commands and code are distilled from the project's own documentation — always check the official repo for the latest.

// When to use it

• Add a ChatGPT-style assistant to a Next.js or React app without rebuilding streaming, retries, and accessibility
• Build a generative UI where tool calls and JSON responses render as interactive React components with inline human approvals
• Put a custom chat front end on a LangGraph, LangChain, or Vercel AI SDK backend through a runtime adapter
• Match a chat interface to your own design system by composing primitives and bringing your own styles

// How assistant-ui compares

assistant-ui alongside other open-source generative ui sdks tools AI/TLDR tracks, ranked by GitHub stars.