assistant-ui/assistant-ui

assistant‑ui

What it is – An open‑source TypeScript/React component library that lets you add a full‑featured, production‑ready chat UI for AI assistants (ChatGPT‑style) to a web app.

Core idea – Provide composable UI primitives (Thread, Message, Composer, ActionBar, etc.) plus a runtime provider that connects to any LLM backend (Vercel AI SDK, LangChain/LangGraph, custom data‑stream, etc.). The library handles streaming, markdown, code highlighting, voice dictation, retries, accessibility, and a “generative UI” layer that can render tool calls, JSON, and inline approvals as React components.

Key features

• Composable primitives – Build a chat UI from low‑level parts or use the pre‑styled shadcn/ui theme shipped by the CLI.
• Backend‑agnostic runtimes – Out‑of‑the‑box adapters for Vercel AI SDK, LangChain, LangGraph, AG‑UI/A2A, Google ADK, OpenCode, plus a generic data‑stream interface. Swap runtimes with a single hook (useChatRuntime, useLangGraphRuntime, etc.).
• Production‑grade UX – Streaming responses, auto‑scroll, retry handling, file attachments, markdown rendering, syntax‑highlighted code blocks, voice dictation, keyboard shortcuts, and WCAG‑compatible accessibility.
• Generative UI – Turn tool calls (e.g., get_weather) or JSON payloads into custom React components, collect user approvals, and expose safe front‑end actions to the model.
• Strong TypeScript – End‑to‑end typed APIs for runtimes, tool schemas, and message parts.
• CLI scaffolding – npx assistant-ui@latest create builds a Next.js starter; init injects the styled components into an existing project.
• Managed cloud option – Optional assistant‑cloud service for thread persistence, telemetry, and file storage.

Typical use‑cases

• Building a customer‑support chatbot inside a SaaS dashboard.
• Adding a conversational interface to a product that calls external tools (search, booking, data lookup).
• Prototyping AI‑driven assistants that need custom UI for tool results (e.g., weather cards, tables, approval dialogs).
• Integrating LLM backends (OpenAI, Anthropic, Gemini, Mistral, Bedrock, Ollama, etc.) into a React front‑end without writing UI plumbing.

Installation

# Quick start – scaffold a new Next.js app
npx assistant-ui@latest create
# Or add to an existing project
npx assistant-ui@latest init

# Or install the packages manually
npm install @assistant-ui/react @assistant-ui/ai-sdk ai

Basic 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(); // connects to Vercel AI SDK by default
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

Replace useChatRuntime with any other runtime hook to point the UI at a different backend.

License – MIT. A commercial “Assistant Cloud” service is offered for managed thread storage and analytics, but the core library remains free and open source.

Backed by – Y Combinator; used by companies such as Mastra, LangChain, Athena Intelligence, Browser‑Use, Stack, Inconvo, Iterable, Helicone, Gram, Coreviz, and many others.