# assistant-ui

> React components for AI chat interfaces

## LLM Documentation Files

- [Full documentation](https://www.assistant-ui.com/llms-full.txt): all docs and examples pages rendered into one large text file.
- Per-page markdown: append `.md` to any docs page URL. `.mdx` is kept as a backwards-compatible alias for agents that request source-style URLs. For example, `/docs/installation.md` and `/docs/installation.mdx` both return markdown for `/docs/installation`.
- Markdown by Accept header: requesting a docs or examples page with `Accept: text/markdown` also returns that page's markdown.
- Use the index below to choose a specific page. Remove the `.md` or `.mdx` suffix to open the human-readable docs page.

## Table of Contents

### architecture

- [Architecture](https://www.assistant-ui.com/docs/architecture.md): How components, runtimes, and cloud services fit together.

### base-ui

- [Radix UI and Base UI](https://www.assistant-ui.com/docs/base-ui.md): How the assistant-ui component registry serves Radix UI and Base UI flavored components for every shadcn style.

### cli

- [CLI](https://www.assistant-ui.com/docs/cli.md): Scaffold projects, add components, and manage updates from the command line.

### devtools

- [DevTools](https://www.assistant-ui.com/docs/devtools.md): Inspect runtime state, context, and events in the browser.

### root

- [Documentation](https://www.assistant-ui.com/docs.md): Build production-grade AI chat experiences in React with assistant-ui — components, runtimes, and primitives for ChatGPT

### installation

- [Installation](https://www.assistant-ui.com/docs/installation.md): Get assistant-ui running in 5 minutes with npm and your first chat component.

### llm

- [Agent Skills](https://www.assistant-ui.com/docs/llm.md): Use AI tools to build with assistant-ui faster. AI-accessible documentation, Claude Code skills, and MCP integration.

### rtl

- [RTL Support](https://www.assistant-ui.com/docs/rtl.md): Use assistant-ui with right-to-left languages like Arabic, Hebrew, and Persian.

### cloud

- [AI SDK + assistant-ui](https://www.assistant-ui.com/docs/cloud/ai-sdk-assistant-ui.md): Integrate cloud persistence using assistant-ui runtime and pre-built components.
- [AI SDK](https://www.assistant-ui.com/docs/cloud/ai-sdk.md): Add cloud persistence to your existing AI SDK app with a single hook.
- [User Authorization](https://www.assistant-ui.com/docs/cloud/authorization.md): Configure workspace auth tokens and integrate with auth providers.
- [Cloud Persistence](https://www.assistant-ui.com/docs/cloud.md): Add managed thread persistence and chat history to your AI app in minutes — assistant-ui Cloud handles thread sync, sear
- [LangGraph + assistant-ui](https://www.assistant-ui.com/docs/cloud/langgraph.md): Integrate cloud persistence and thread management with LangGraph Cloud.

### copilots

- [Assistant Frame API](https://www.assistant-ui.com/docs/copilots/assistant-frame.md): Share model context across iframe boundaries
- [makeAssistantVisible](https://www.assistant-ui.com/docs/copilots/make-assistant-visible.md): Make React components visible and interactive to assistants via higher-order component wrapping.
- [Model Context](https://www.assistant-ui.com/docs/copilots/model-context.md): Configure assistant behavior through system instructions, tools, and context providers.
- [Intelligent Components](https://www.assistant-ui.com/docs/copilots/motivation.md): Add intelligence to React components through readable interfaces and assistant tools.
- [useAssistantInstructions](https://www.assistant-ui.com/docs/copilots/use-assistant-instructions.md): React hook for setting system instructions to guide assistant behavior.

### guides

- [File Attachments](https://www.assistant-ui.com/docs/guides/attachments.md): Let users attach images, PDFs, and other files to AI chat messages in React. Drag-drop, paste, and vision-model support,
- [Message Branching](https://www.assistant-ui.com/docs/guides/branching.md): Edit messages or regenerate AI responses, then switch between alternative replies. Branching navigation built into assis
- [Chain of Thought UI](https://www.assistant-ui.com/docs/guides/chain-of-thought.md): Show AI reasoning steps and tool calls in a collapsible thinking accordion. Build chain-of-thought visualizations in Rea
- [ChatGPT Subscription](https://www.assistant-ui.com/docs/guides/chatgpt-subscription.md): Run your assistant-ui app on your ChatGPT Plus or Pro subscription via Codex OAuth. Local development without an OpenAI 
- [Assistant Context API](https://www.assistant-ui.com/docs/guides/context-api.md): Read and update assistant state to build custom React components in your chat UI — composable context API for thread, me
- [Speech-to-Text Dictation](https://www.assistant-ui.com/docs/guides/dictation.md): Add voice dictation to your AI chat composer with the Web Speech API or a custom adapter. Speech-to-text in React, integ
- [Message Editing](https://www.assistant-ui.com/docs/guides/editing.md): Let users edit their messages and regenerate AI responses with custom editor interfaces. Edit-and-resubmit patterns for 
- [Headless Composer Input](https://www.assistant-ui.com/docs/guides/headless-composer-input.md): Build a custom composer input while keeping assistant-ui composer state and send gating.
- [Image Generation](https://www.assistant-ui.com/docs/guides/image-generation.md): Generate images in your backend and render them inline in an assistant-ui thread.
- [Guides](https://www.assistant-ui.com/docs/guides.md): Practical recipes for building AI chat features in React with assistant-ui — attachments, branching, multi-agent, voice,
- [Input History](https://www.assistant-ui.com/docs/guides/input-history.md): Terminal-style ArrowUp/ArrowDown recall of previously sent messages in the assistant-ui React composer.
- [LaTeX in Chat Messages](https://www.assistant-ui.com/docs/guides/latex.md): Render LaTeX math expressions in AI chat messages with KaTeX — drop-in equation support for React chat UIs built on assi
- [Mentions in Chat](https://www.assistant-ui.com/docs/guides/mentions.md): Let users @-mention tools or custom items in the AI chat composer to guide the LLM. Mention picker built into assistant-
- [Message Timing & Token Stats](https://www.assistant-ui.com/docs/guides/message-timing.md): Display stream metadata in AI chat — generation duration, tokens per second, and time to first token, rendered via assis
- [Quote Selected Text](https://www.assistant-ui.com/docs/guides/quoting.md): Let users select text from AI messages and quote it back into the composer. Full quoting flow with backend handling and 
- [Resumable Stream Deployment](https://www.assistant-ui.com/docs/guides/resumable-stream-deployment.md): Production hardening for resumable streams. Authorization, serverless lifetimes, TTLs, key isolation, observability, res
- [Custom Resumable Stream Stores](https://www.assistant-ui.com/docs/guides/resumable-stream-stores.md): Implement the ResumableStreamStore interface to back resumable streams with Postgres, Cloudflare Durable Objects, Upstas
- [Resumable Streams](https://www.assistant-ui.com/docs/guides/resumable-streams.md): Persist an in-flight LLM response on the server so the client can reload, lose its connection, or open a new tab and pic
- [Slash Commands](https://www.assistant-ui.com/docs/guides/slash-commands.md): Trigger predefined actions in your AI chat by typing / — slash command palette with popover, search, and action handlers
- [Text-to-Speech for Chat](https://www.assistant-ui.com/docs/guides/speech.md): Read AI chat messages aloud with the Web Speech API or a custom TTS adapter. Speech synthesis for React chat UIs, integr
- [Suggested Prompts](https://www.assistant-ui.com/docs/guides/suggestions.md): Display suggested starter prompts in your AI chat to onboard users faster. Configurable suggestion components for React,
- [Thread Virtualization](https://www.assistant-ui.com/docs/guides/virtualization.md): Render very long threads with @tanstack/react-virtual, with ThreadPrimitive.Unstable_MessageById and ThreadPrimitive.Mes
- [Realtime Voice Chat](https://www.assistant-ui.com/docs/guides/voice.md): Build bidirectional voice conversations with AI in React. Realtime audio streaming, interruption handling, and visual st

### ink

- [Adapters](https://www.assistant-ui.com/docs/ink/adapters.md): Attachment, title generation, and storage adapters for React Ink.
- [Custom Backend](https://www.assistant-ui.com/docs/ink/custom-backend.md): Connect your terminal app to your own backend API.
- [Hooks](https://www.assistant-ui.com/docs/ink/hooks.md): Reactive hooks for accessing runtime state in React Ink.
- [Terminal AI Chat with Ink](https://www.assistant-ui.com/docs/ink.md): Build AI chat interfaces for the terminal in TypeScript with @assistant-ui/react-ink — streaming, tool calls, and keyboa
- [Migration from Web](https://www.assistant-ui.com/docs/ink/migration.md): Migrate an existing @assistant-ui/react app to the terminal with React Ink.
- [Primitives](https://www.assistant-ui.com/docs/ink/primitives.md): Composable terminal components for building chat UIs with Ink.

### integrations

- [Integrations](https://www.assistant-ui.com/docs/integrations.md): Adapters for Vercel AI SDK, LangChain, LangGraph, Mastra, plus auth, persistence, observability, and tool services — dro
- [Custom attachment uploads](https://www.assistant-ui.com/docs/integrations/attachments/custom-adapter.md): Upload chat attachments to object storage with a presigned-URL AttachmentAdapter.
- [better-auth](https://www.assistant-ui.com/docs/integrations/auth/better-auth.md): TypeScript-first auth with database-owned sessions; gate the chat route and scope threads to the signed-in user.
- [Clerk](https://www.assistant-ui.com/docs/integrations/auth/clerk.md): Gate the chat route and scope thread persistence to the signed-in user with Clerk.
- [Auth.js (next-auth)](https://www.assistant-ui.com/docs/integrations/auth/next-auth.md): Gate the chat route and scope thread persistence to the signed-in user with Auth.js v5.
- [Vercel AI SDK Integration](https://www.assistant-ui.com/docs/integrations/frameworks/ai-sdk.md): Wire the Vercel AI SDK into a React chat UI with assistant-ui — useChat, streaming, tools, attachments, multi-step agent
- [LLM Gateway Integrations](https://www.assistant-ui.com/docs/integrations/gateways.md): Route AI chat traffic through OpenAI-compatible LLM gateways (OpenRouter, LiteLLM, Portkey, etc.) for cost, fallback, an
- [Helicone](https://www.assistant-ui.com/docs/integrations/observability/helicone.md): Log and monitor LLM calls by routing them through the Helicone proxy.
- [Langfuse](https://www.assistant-ui.com/docs/integrations/observability/langfuse.md): Trace AI SDK calls into Langfuse via OpenTelemetry for tracing, evals, and prompt management.
- [LangSmith](https://www.assistant-ui.com/docs/integrations/observability/langsmith.md): Trace AI SDK calls into LangSmith with the wrapAISDK helper.
- [Custom thread persistence](https://www.assistant-ui.com/docs/integrations/persistence/custom-adapter.md): Persist threads and messages to your own database with RemoteThreadListAdapter and ThreadHistoryAdapter.
- [Full-stack integration](https://www.assistant-ui.com/docs/integrations/frameworks/mastra/full-stack.md): Run Mastra agents inside your Next.js API routes.
- [Mastra Integration](https://www.assistant-ui.com/docs/integrations/frameworks/mastra/overview.md): Wire the Mastra TypeScript agent framework into a React chat UI with assistant-ui — full streaming, tool calling, multi-
- [Separate server integration](https://www.assistant-ui.com/docs/integrations/frameworks/mastra/separate-server.md): Run Mastra as a standalone server with assistant-ui as a separate frontend.
- [Cloudflare Agents Integration](https://www.assistant-ui.com/docs/integrations/frameworks/cloudflare-agents/overview.md): Wire Cloudflare's stateful agent framework into a React chat UI with assistant-ui via the standard AI SDK runtime. WebSo

### migrations

- [Deprecation Policy](https://www.assistant-ui.com/docs/migrations/deprecation-policy.md): Stability guarantees and deprecation timelines for assistant-ui features.
- [Migration Guides](https://www.assistant-ui.com/docs/migrations.md): Upgrade assistant-ui versions and migrate deprecated APIs and integrations.
- [Using old React versions](https://www.assistant-ui.com/docs/migrations/react-compatibility.md): Compatibility notes for React 18 and 19.
- [Migrating to react-langgraph v0.7](https://www.assistant-ui.com/docs/migrations/react-langgraph-v0-7.md): Guide to upgrading to the simplified LangGraph integration API.
- [Migrating Tools to Toolkits](https://www.assistant-ui.com/docs/migrations/toolkit-tools.md): Move makeAssistantTool, useAssistantTool, makeAssistantToolUI, and useAssistantToolUI registrations to the toolkit API.
- [Migration to v0.11](https://www.assistant-ui.com/docs/migrations/v0-11.md): ContentPart renamed to MessagePart for better semantic clarity.
- [Migration to v0.12](https://www.assistant-ui.com/docs/migrations/v0-12.md): Unified state API replaces individual context hooks.
- [Migration to v0.14](https://www.assistant-ui.com/docs/migrations/v0-14.md): Drops APIs deprecated since v0.11/v0.12, and primitives migrate from components prop to children render functions.

### primitives

- [ActionBar](https://www.assistant-ui.com/docs/primitives/action-bar.md): Build message action buttons with auto-hide, copy state, and intelligent disabling.
- [AssistantModal](https://www.assistant-ui.com/docs/primitives/assistant-modal.md): A floating chat popover with a fixed-position trigger button that opens a chat panel.
- [Attachment](https://www.assistant-ui.com/docs/primitives/attachment.md): File and image attachment rendering for the composer and messages.
- [BranchPicker](https://www.assistant-ui.com/docs/primitives/branch-picker.md): Navigate between message branches, which are alternative responses the user can flip through.
- [ChainOfThought](https://www.assistant-ui.com/docs/primitives/chain-of-thought.md): Collapsible accordion for grouping reasoning steps and tool calls.
- [Composer](https://www.assistant-ui.com/docs/primitives/composer.md): Build custom message input UIs with full control over layout and behavior.
- [Error](https://www.assistant-ui.com/docs/primitives/error.md): Accessible error display for messages with automatic error text extraction.
- [Headless Chat Primitives](https://www.assistant-ui.com/docs/primitives.md): Unstyled, accessible Radix-style building blocks for React AI chat interfaces — Thread, Composer, Message, and more, rea
- [Message](https://www.assistant-ui.com/docs/primitives/message.md): Build custom message rendering with content parts, attachments, and hover state.
- [SelectionToolbar](https://www.assistant-ui.com/docs/primitives/selection-toolbar.md): A floating toolbar that appears when text is selected within a message.
- [Suggestion](https://www.assistant-ui.com/docs/primitives/suggestion.md): Suggested prompts that users can click to quickly send or populate the composer.
- [ThreadList](https://www.assistant-ui.com/docs/primitives/thread-list.md): Multi-thread management for listing, creating, switching, archiving, and deleting conversations.
- [Thread](https://www.assistant-ui.com/docs/primitives/thread.md): Build custom scrollable message containers with auto-scroll, empty states, and message rendering.

### react-native

- [Adapters](https://www.assistant-ui.com/docs/react-native/adapters.md): Persistence and title generation adapters for React Native.
- [Custom Backend](https://www.assistant-ui.com/docs/react-native/custom-backend.md): Connect your React Native app to your own backend API.
- [Hooks](https://www.assistant-ui.com/docs/react-native/hooks.md): Reactive hooks for accessing runtime state in React Native.
- [React Native AI Chat](https://www.assistant-ui.com/docs/react-native.md): Build AI chat for iOS and Android with @assistant-ui/react-native — streaming, tools, attachments, and platform-native c
- [Migration from Web](https://www.assistant-ui.com/docs/react-native/migration.md): Migrate an existing @assistant-ui/react app to React Native.
- [Primitives](https://www.assistant-ui.com/docs/react-native/primitives.md): Composable React Native components for building chat UIs.

### runtimes

- [LangChain React Runtime](https://www.assistant-ui.com/docs/runtimes/langchain.md): Use LangChain's useStream hook with a React chat UI through assistant-ui — a lighter LangGraph adapter that delegates st
- [Picking a runtime](https://www.assistant-ui.com/docs/runtimes/pick-a-runtime.md): Decision guide for choosing the right runtime, by framework or by feature.
- [Client and hooks](https://www.assistant-ui.com/docs/runtimes/a2a/client-and-hooks.md): A2AClient, useA2ARuntime options, hooks, task states, artifacts, errors.
- [A2A Agent Runtime](https://www.assistant-ui.com/docs/runtimes/a2a/overview.md): Connect any A2A v1.0 protocol-compliant agent server to a React chat UI with assistant-ui — full streaming, tool calls, 
- [Quickstart](https://www.assistant-ui.com/docs/runtimes/a2a/quickstart.md): Minimal runtime and Thread setup against an A2A server.
- [Agent state](https://www.assistant-ui.com/docs/runtimes/ag-ui/agent-state.md): Read and optimistically update agent-owned state with useAgUiState and useAgUiSetState over AG-UI.
- [AG-UI Agent Runtime](https://www.assistant-ui.com/docs/runtimes/ag-ui/overview.md): Wire AG-UI (Agent-User Interaction) protocol agents into a React chat UI with assistant-ui — bidirectional events, gener
- [Quickstart](https://www.assistant-ui.com/docs/runtimes/ag-ui/quickstart.md): Minimal HttpAgent + useAgUiRuntime setup against an AG-UI server.
- [Runtime options](https://www.assistant-ui.com/docs/runtimes/ag-ui/runtime-options.md): useAgUiRuntime options, adapters, supported events, thread list.
- [Vercel AI SDK Runtime](https://www.assistant-ui.com/docs/runtimes/ai-sdk/overview.md): Connect the Vercel AI SDK to a React chat UI via assistant-ui — useChat hooks, custom transports, frontend tools, attach
- [AI SDK v4 (legacy)](https://www.assistant-ui.com/docs/runtimes/ai-sdk/v4-legacy.md): Reference for projects still on AI SDK v4. New projects should use v7.
- [AI SDK v5 (legacy)](https://www.assistant-ui.com/docs/runtimes/ai-sdk/v5-legacy.md): Reference for projects still on AI SDK v5. New projects should use v7.
- [AI SDK v6 (legacy)](https://www.assistant-ui.com/docs/runtimes/ai-sdk/v6-legacy.md): Reference for projects still on AI SDK v6. New projects should use v7.
- [AI SDK v7](https://www.assistant-ui.com/docs/runtimes/ai-sdk/v7.md): Integrate Vercel AI SDK v7 with assistant-ui for streaming chat.
- [Adapters](https://www.assistant-ui.com/docs/runtimes/concepts/adapters.md): Reusable extension points for attachments, speech, feedback, history, and suggestions.
- [Runtime architecture](https://www.assistant-ui.com/docs/runtimes/concepts/architecture.md): How core runtimes, protocol layers, and framework adapters fit together.
- [Stability](https://www.assistant-ui.com/docs/runtimes/concepts/stability.md): What unstable_ means, when APIs become stable, and how to track changes.
- [Threads](https://www.assistant-ui.com/docs/runtimes/concepts/threads.md): Single-thread, cloud, and custom-database thread management.
- [Assistant Transport](https://www.assistant-ui.com/docs/runtimes/custom/assistant-transport.md): Stream agent state to the frontend and handle user commands for custom agents.
- [Data Stream Protocol](https://www.assistant-ui.com/docs/runtimes/custom/data-stream.md): Standard message-streaming protocol on top of LocalRuntime.
- [ExternalStoreRuntime](https://www.assistant-ui.com/docs/runtimes/custom/external-store.md): Bring your own redux, zustand, or state manager.
- [LocalRuntime](https://www.assistant-ui.com/docs/runtimes/custom/local-runtime.md): Quickest path to a working chat. Handles state while you handle the API.
- [Custom Runtime](https://www.assistant-ui.com/docs/runtimes/custom/overview.md): Build a React chat UI for any AI backend with assistant-ui — four runtime patterns covering local state, REST, custom pr
- [Eve Runtime](https://www.assistant-ui.com/docs/runtimes/eve/overview.md): Connect an Eve agent to assistant-ui with useEveAgentRuntime, eve/next, durable sessions, streaming messages, and human-
- [Quickstart](https://www.assistant-ui.com/docs/runtimes/eve/quickstart.md): From-template and manual setup paths to a working Eve agent chat in assistant-ui.
- [API reference](https://www.assistant-ui.com/docs/runtimes/google-adk/api.md): createAdkStream, server helpers, session adapter, threads, message editing.
- [Hooks](https://www.assistant-ui.com/docs/runtimes/google-adk/hooks.md): Tool confirmations, auth, input requests, artifacts, escalation, metadata, structured events.
- [Google ADK Runtime](https://www.assistant-ui.com/docs/runtimes/google-adk/overview.md): Connect Google's Agent Development Kit (ADK) to a React chat UI with assistant-ui — streaming, tool calls, and multi-age
- [Quickstart](https://www.assistant-ui.com/docs/runtimes/google-adk/quickstart.md): Minimal API route and client setup with createAdkApiRoute.
- [Agent state](https://www.assistant-ui.com/docs/runtimes/langgraph/agent-state.md): Read and optimistically update graph state with useLangGraphState and useLangGraphSetState in LangGraph.
- [LangGraph Generative UI](https://www.assistant-ui.com/docs/runtimes/langgraph/generative-ui.md): Render structured UI components emitted by LangGraph alongside assistant messages.
- [Interrupts and message editing](https://www.assistant-ui.com/docs/runtimes/langgraph/interrupts.md): Interrupt persistence and checkpoint-based message editing.
- [LangGraph UI Runtime](https://www.assistant-ui.com/docs/runtimes/langgraph/overview.md): Build a chat UI for LangGraph agents in React with assistant-ui — streaming, subgraph events, UI messages, interrupts, a
- [Quickstart](https://www.assistant-ui.com/docs/runtimes/langgraph/quickstart.md): From-template and manual setup paths to a working LangGraph chat.
- [Streaming](https://www.assistant-ui.com/docs/runtimes/langgraph/streaming.md): Event handlers, message accumulator, conversion, metadata, and generative UI.
- [Threads](https://www.assistant-ui.com/docs/runtimes/langgraph/threads.md): Basic thread support, AssistantCloud, and custom thread list adapter.
- [Hooks](https://www.assistant-ui.com/docs/runtimes/opencode/hooks.md): Permissions, questions, session state, runtime extras.
- [OpenCode Runtime](https://www.assistant-ui.com/docs/runtimes/opencode/overview.md): Build a React chat UI for OpenCode coding agents with assistant-ui — streaming, tool calls, file edits, and terminal out
- [Quickstart](https://www.assistant-ui.com/docs/runtimes/opencode/quickstart.md): Minimal useOpenCodeRuntime setup against a local OpenCode server.
- [Introduction](https://www.assistant-ui.com/docs/runtimes/langgraph/tutorial/introduction.md): Build a stockbroker assistant with LangGraph and assistant-ui.
- [Part 1: Setup frontend](https://www.assistant-ui.com/docs/runtimes/langgraph/tutorial/part-1.md): Create a Next.js project with the LangGraph assistant-ui template.
- [Part 2: Generative UI](https://www.assistant-ui.com/docs/runtimes/langgraph/tutorial/part-2.md): Display stock ticker information with generative UI components.
- [Part 3: Approval UI](https://www.assistant-ui.com/docs/runtimes/langgraph/tutorial/part-3.md): Add human-in-the-loop approval for tool calls.

### tools

- [Backend Tools](https://www.assistant-ui.com/docs/tools/backend.md): Wire assistant-ui toolkits into your server with the AI SDK — AISDKToolkit, frontendTools, mixing client and server tool
- [Defining Tools](https://www.assistant-ui.com/docs/tools/defining-tools.md): Define tools for your AI chat with assistant-ui toolkits and the "use generative" directive — frontend, backend, human, 
- [Dynamic Tools](https://www.assistant-ui.com/docs/tools/dynamic-tools.md): Tools whose executor closes over React state — declare the contract with stubTool() in a "use generative" file and suppl
- [Generative UI (JSON spec)](https://www.assistant-ui.com/docs/tools/generative-ui.md): Render agent-described React UI from a JSON spec with a consumer-provided component allowlist.
- [Tools](https://www.assistant-ui.com/docs/tools.md): Give the model callable capabilities with assistant-ui toolkits — define frontend, backend, human, and provider tools, r
- [Interactables (legacy)](https://www.assistant-ui.com/docs/tools/interactables-legacy.md): Build persistent UI elements whose state the AI can read and update — copilot interactables in React with assistant-ui f
- [Interactable Tool UIs](https://www.assistant-ui.com/docs/tools/interactables.md): Build stateful components and tool UIs that both the user and the model can read and edit. Render them beside the thread
- [MCP Apps](https://www.assistant-ui.com/docs/tools/mcp-apps.md): Render MCP App UI resources inline in chat. Native renderer for the Model Context Protocol Apps spec — sandboxed iframes
- [Model Context Protocol (MCP)](https://www.assistant-ui.com/docs/tools/mcp.md): Connect MCP servers as a tool catalog in your assistant-ui app.
- [Multi-Agent Chat UI](https://www.assistant-ui.com/docs/tools/multi-agent.md): Render sub-agent conversations and handoffs inside tool calls. Build supervisor and multi-agent patterns in a React chat
- [Tool UI](https://www.assistant-ui.com/docs/tools/tool-ui.md): Render AI tool calls as custom React components — show loading, result, and interactive states for each tool invocation 
- [User-managed MCP servers](https://www.assistant-ui.com/docs/tools/user-managed-mcp.md): Let end users add and authenticate MCP servers from the browser with @assistant-ui/react-mcp.

### utilities

- [heat-graph](https://www.assistant-ui.com/docs/utilities/heat-graph.md): Headless, composable activity heatmap components for React.
- [react-o11y](https://www.assistant-ui.com/docs/utilities/react-o11y.md): Headless primitives for visualizing observability spans as collapsible trace trees, waterfalls, and agent and LLM call t
- [tw-shimmer](https://www.assistant-ui.com/docs/utilities/tw-shimmer.md): Tailwind CSS v4 plugin for shimmer effects.

### ui

- [Accordion](https://www.assistant-ui.com/docs/ui/accordion.md): A vertically stacked set of interactive headings that reveal or hide content sections.
- [AssistantModal](https://www.assistant-ui.com/docs/ui/assistant-modal.md): Floating chat bubble for support widgets and help desks.
- [AssistantSidebar](https://www.assistant-ui.com/docs/ui/assistant-sidebar.md): Side panel chat for co-pilot experiences and inline assistance.
- [Attachment](https://www.assistant-ui.com/docs/ui/attachment.md): UI components for attaching and viewing files in messages.
- [Badge](https://www.assistant-ui.com/docs/ui/badge.md): A small label component for displaying status, categories, or metadata.
- [Composer Trigger Popover](https://www.assistant-ui.com/docs/ui/composer-trigger-popover.md): Reusable picker UI for @ mentions, / slash commands, and any other character-triggered popover.
- [Context Display](https://www.assistant-ui.com/docs/ui/context-display.md): Visualize token usage relative to a model's context window — ring, bar, or text — with a detailed hover popover.
- [Diff Viewer](https://www.assistant-ui.com/docs/ui/diff-viewer.md): Render code diffs with syntax highlighting for additions and deletions.
- [Directive Text](https://www.assistant-ui.com/docs/ui/directive-text.md): Render mention directives as inline chips in user messages.
- [Dot Matrix](https://www.assistant-ui.com/docs/ui/dot-matrix.md): Tiny 5x5 dot-matrix indicator with 20 state-specific blink patterns.
- [File](https://www.assistant-ui.com/docs/ui/file.md): Display file message parts with icon, name, size, and download button.
- [Follow-Up Suggestions](https://www.assistant-ui.com/docs/ui/follow-up-suggestions.md): Render runtime-generated follow-up prompt chips after an assistant response.
- [Image](https://www.assistant-ui.com/docs/ui/image.md): Display image message parts with preview, loading states, and fullscreen dialog.
- [Markdown](https://www.assistant-ui.com/docs/ui/markdown.md): Display rich text with headings, lists, links, and code blocks.
- [MCP Config Dialog](https://www.assistant-ui.com/docs/ui/mcp-config.md): Drop-in shadcn dialog that lists MCP connectors and custom servers, with inline OAuth/bearer auth controls and an add fo
- [Mermaid Diagrams](https://www.assistant-ui.com/docs/ui/mermaid.md): Render Mermaid diagrams in chat messages with streaming support.
- [Message Timing](https://www.assistant-ui.com/docs/ui/message-timing.md): Display streaming performance stats — TTFT, total time, tok/s, and chunk count — as a badge with hover popover.
- [Model Selector](https://www.assistant-ui.com/docs/ui/model-selector.md): Composable model picker with reasoning effort levels, search, and runtime integration.
- [Number Roll](https://www.assistant-ui.com/docs/ui/number-roll.md): Animated number that rolls digits odometer-style when the value changes.
- [Message Part Grouping](https://www.assistant-ui.com/docs/ui/part-grouping.md): Organize message parts into custom groups with flexible grouping functions.
- [Quote](https://www.assistant-ui.com/docs/ui/quote.md): Let users select and quote text from messages with a floating toolbar, composer preview, and inline quote display.
- [Reasoning](https://www.assistant-ui.com/docs/ui/reasoning.md): Collapsible UI for displaying AI reasoning and thinking messages.
- [Custom Scrollbar](https://www.assistant-ui.com/docs/ui/scrollbar.md): Replace the default scrollbar with a custom Radix UI scroll area.
- [Select](https://www.assistant-ui.com/docs/ui/select.md): A dropdown select component with composable sub-components.
- [Sources](https://www.assistant-ui.com/docs/ui/sources.md): Display URL sources with favicon, title, and external link.
- [Streamdown Markdown Renderer](https://www.assistant-ui.com/docs/ui/streamdown.md): Stream markdown into a React chat UI with syntax highlighting, math, and Mermaid diagrams. Powered by Vercel Streamdown,
- [Syntax Highlighting](https://www.assistant-ui.com/docs/ui/syntax-highlighting.md): Code block syntax highlighting with react-shiki or react-syntax-highlighter.
- [Tabs](https://www.assistant-ui.com/docs/ui/tabs.md): A multi-variant tabs component for organizing content into switchable panels.
- [Thread List Component](https://www.assistant-ui.com/docs/ui/thread-list.md): Sidebar or dropdown component for switching between AI chat conversations. Persistent thread state, search, and active s
- [Thread Component](https://www.assistant-ui.com/docs/ui/thread.md): Stream-ready React chat container with message list, composer, auto-scroll, and accessibility built in. Drop into any AI
- [ToolFallback](https://www.assistant-ui.com/docs/ui/tool-fallback.md): Default UI component for tools without dedicated custom renderers.
- [ToolGroup](https://www.assistant-ui.com/docs/ui/tool-group.md): Wrapper for consecutive tool calls with collapsible and styled options.
- [Voice](https://www.assistant-ui.com/docs/ui/voice.md): Realtime voice session controls with connect, mute, and status indicator.

### api-reference

- [API Reference](https://www.assistant-ui.com/docs/api-reference/overview.md): Complete assistant-ui React API reference for building AI chat UIs with primitives, hooks, runtimes, adapters, tools, tr
- [Attachment Adapters](https://www.assistant-ui.com/docs/api-reference/adapters/attachments.md): Attachment adapters for uploading files, handling lifecycle events, and bringing app-owned content into assistant-ui com
- [Feedback Adapter](https://www.assistant-ui.com/docs/api-reference/adapters/feedback.md): Capture and respond to message feedback submitted through action primitives or runtime actions.
- [Adapters API Reference](https://www.assistant-ui.com/docs/api-reference/adapters.md): Adapter interfaces for connecting chat models, persistence, file attachments, feedback, and suggestions to assistant-ui 
- [Model Adapters](https://www.assistant-ui.com/docs/api-reference/adapters/model.md): Adapter interfaces for connecting chat models, streaming responses, and model execution to assistant-ui runtimes.
- [Persistence Adapters](https://www.assistant-ui.com/docs/api-reference/adapters/persistence.md): Persistence adapters for saving assistant-ui message history, remote thread lists, and long-running chat sessions across
- [Runtime Adapter Context](https://www.assistant-ui.com/docs/api-reference/adapters/runtime.md): Provide assistant-ui runtime adapters through React context for model, attachment, speech, and feedback behavior.
- [Suggestion Adapters](https://www.assistant-ui.com/docs/api-reference/adapters/suggestions.md): Suggestion adapters for providing starter prompts, contextual actions, and guided composer options to assistant-ui runti
- [AssistantRuntimeProvider](https://www.assistant-ui.com/docs/api-reference/context-providers/assistant-runtime-provider.md): Root React provider that connects an assistant-ui runtime to primitives, hooks, threads, and composer state.
- [Context Providers API Reference](https://www.assistant-ui.com/docs/api-reference/context-providers.md): React context providers including AssistantRuntimeProvider that scope assistant-ui runtime, thread, message part, and at
- [Scoped Providers](https://www.assistant-ui.com/docs/api-reference/context-providers/scoped-providers.md): Lower-level assistant-ui providers for custom renderers, scoped message parts, attachments, and advanced composition.
- [External Store API Reference](https://www.assistant-ui.com/docs/api-reference/external-store.md): External store runtime, message conversion helpers, and adapters for assistant-ui React apps that own their chat state o
- [Message Conversion](https://www.assistant-ui.com/docs/api-reference/external-store/message-conversion.md): Convert external message formats into assistant-ui's message and thread state for the external store runtime.
- [External Store Runtime](https://www.assistant-ui.com/docs/api-reference/external-store/runtime.md): Runtime components, options, and adapters for using assistant-ui with externally owned chat state.
- [Generative UI Actions](https://www.assistant-ui.com/docs/api-reference/generative-ui/actions.md): Register handlers for model-emitted $action payloads and dispatch them from interactive generative UI components.
- [Generative UI Components](https://www.assistant-ui.com/docs/api-reference/generative-ui/components.md): Define the component library JSONGenerativeUI can render, including schemas, render functions, and the default vocabular
- [Generative UI API Reference](https://www.assistant-ui.com/docs/api-reference/generative-ui.md): Spec-driven generative UI for assistant-ui. The data format an assistant streams, the component registry that resolves i
- [JSONGenerativeUI](https://www.assistant-ui.com/docs/api-reference/generative-ui/json-generative-ui.md): Create present and prompt_user tools from a generative UI component library, with options for display mode and action di
- [Generative UI Rendering](https://www.assistant-ui.com/docs/api-reference/generative-ui/rendering.md): Render generative UI trees, build present-tool schemas, and inspect or serialize model-produced UI nodes.
- [Slack Block Kit](https://www.assistant-ui.com/docs/api-reference/generative-ui/slack.md): Convert generative UI trees to Slack Block Kit payloads and decode block_actions interactions back into $action payloads
- [Generative UI Spec](https://www.assistant-ui.com/docs/api-reference/generative-ui/spec.md): The serializable node tree an assistant emits to describe generative UI. Covers the GenerativeUISpec format, its nodes, 
- [Microsoft Teams](https://www.assistant-ui.com/docs/api-reference/generative-ui/teams.md): Convert generative UI trees to Teams Adaptive Cards and decode Action.Submit payloads back into $action payloads.
- [Generative UI Tokens](https://www.assistant-ui.com/docs/api-reference/generative-ui/tokens.md): Shared token arrays used by the default generative UI vocabulary for sizing, color, alignment, and component variants.
- [Composer Trigger Hooks](https://www.assistant-ui.com/docs/api-reference/hooks/composer-triggers.md): Unstable assistant-ui hooks for mention menus, slash commands, and custom composer trigger popovers.
- [Hooks API Reference](https://www.assistant-ui.com/docs/api-reference/hooks.md): React hooks for assistant-ui: useAui, useAuiState, runtime creation, model context registration, and helpers for buildin
- [Model Context Hooks](https://www.assistant-ui.com/docs/api-reference/hooks/model-context.md): React hooks for registering assistant-ui tools, data renderers, instructions, and model context providers.
- [Primitive Hooks](https://www.assistant-ui.com/docs/api-reference/hooks/primitives.md): Primitive hooks for reading scoped assistant-ui runtime state, viewport behavior, timing, and message part data inside R
- [Runtime Hooks](https://www.assistant-ui.com/docs/api-reference/hooks/runtimes.md): Runtime creation hooks for local, remote, cloud, external-store, and AI SDK powered assistant-ui chat experiences.
- [State Hooks](https://www.assistant-ui.com/docs/api-reference/hooks/state.md): State selector and action hooks for reading assistant-ui runtime state and controlling threads, composers, messages, and
- [@assistant-ui/cloud-ai-sdk](https://www.assistant-ui.com/docs/api-reference/integrations/cloud-ai-sdk.md): Assistant Cloud AI SDK hooks for connecting cloud-backed threads, persistence, and chat state to assistant-ui React runt
- [@assistant-ui/eve](https://www.assistant-ui.com/docs/api-reference/integrations/eve.md): Eve runtime hook and message conversion utilities for assistant-ui React applications.
- [Integrations API Reference](https://www.assistant-ui.com/docs/api-reference/integrations.md): Package-level APIs for connecting assistant-ui React to the Vercel AI SDK, Assistant Cloud, and adjacent chat ecosystem 
- [@assistant-ui/react-ai-sdk](https://www.assistant-ui.com/docs/api-reference/integrations/react-ai-sdk.md): Vercel AI SDK runtime hooks, chat transports, and message conversion utilities for assistant-ui React applications.
- [@assistant-ui/react-data-stream](https://www.assistant-ui.com/docs/api-reference/integrations/react-data-stream.md): Data stream runtime hook and message conversion utilities for custom assistant-ui streaming backends.
- [Model Context](https://www.assistant-ui.com/docs/api-reference/model-context/context.md): Provide model instructions, contextual state, and inline renderers to assistant-ui runtimes.
- [Model Context API Reference](https://www.assistant-ui.com/docs/api-reference/model-context.md): Model instructions, contextual state, provider registries, and renderers for giving assistant-ui runtimes app-aware cont
- [Model Context Registry](https://www.assistant-ui.com/docs/api-reference/model-context/registry.md): Register and manage assistant-ui model context providers that contribute instructions and app state.
- [ActionBarMorePrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/action-bar-more.md): Overflow menu primitives for grouping secondary assistant message actions in a custom React UI.
- [ActionBarPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/action-bar.md): Composable message action controls for copy, edit, reload, speech, and feedback in assistant-ui chat interfaces.
- [AuiIf](https://www.assistant-ui.com/docs/api-reference/primitives/assistant-if.md): Conditional rendering primitive for showing React UI from assistant-ui thread, message, composer, and runtime state.
- [AssistantModalPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/assistant-modal.md): Floating assistant modal primitives for building support chat, copilot, and embedded assistant experiences.
- [AttachmentPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/attachment.md): Attachment primitives for rendering file previews, names, thumbnails, and remove controls in assistant-ui messages and c
- [BranchPickerPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/branch-picker.md): Branch picker primitives for navigating regenerated assistant responses and alternate message paths inside a chat thread
- [ChainOfThoughtPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/chain-of-thought.md): Chain of thought primitives for rendering assistant reasoning, step lists, and collapsible disclosure UI in message cont
- [ComposerPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/composer.md): Composable input primitives for assistant-ui prompts, send controls, cancellation, attachments, and composer state.
- [Composition](https://www.assistant-ui.com/docs/api-reference/primitives/composition.md): How to compose primitives with custom components using asChild.
- [ErrorPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/error.md): Error primitives for rendering assistant-ui runtime, thread, and message failures inside custom chat interfaces.
- [Primitives API Reference](https://www.assistant-ui.com/docs/api-reference/primitives.md): Composable React primitives for assistant-ui chat UIs: Thread, Composer, Message, BranchPicker, ActionBar, and the parts
- [MessagePartPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/message-part.md): Message part primitives for rendering text, tool calls, data parts, reasoning, source content, and custom assistant outp
- [MessagePrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/message.md): Message primitives for rendering assistant and user turns, message parts, attachments, actions, editing, and branch cont
- [QueueItemPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/queue-item.md): Queue item primitives for rendering pending assistant-ui thread operations, optimistic work, and runtime queue state.
- [SelectionToolbarPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/selection-toolbar.md): Selection toolbar primitives for quote, copy, and contextual actions on selected chat text.
- [SuggestionPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/suggestion.md): Suggestion primitives for rendering starter prompts, follow-up actions, and composer suggestions in assistant-ui threads
- [ThreadListItemMorePrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/thread-list-item-more.md): Overflow menu primitives for secondary thread list item actions in custom assistant-ui sidebars.
- [ThreadListItemPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/thread-list-item.md): Thread list item primitives for rendering selectable conversation rows with titles, archive controls, delete actions, an
- [ThreadListPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/thread-list.md): Thread list primitives for rendering conversation navigation, new thread actions, and custom assistant sidebars.
- [ThreadPrimitive](https://www.assistant-ui.com/docs/api-reference/primitives/thread.md): Thread primitives for rendering chat transcripts, message lists, viewport state, suggestions, and composers in assistant
- [AssistantRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/assistant-runtime.md): Top-level assistant-ui runtime actions and state for tools, threads, composers, messages, and assistant behavior.
- [AttachmentRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/attachment-runtime.md): AttachmentRuntime state and actions for reading attachment data and controlling files inside assistant-ui messages and c
- [ComposerRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/composer-runtime.md): ComposerRuntime state and actions for controlling assistant-ui composer text, attachments, submission, cancellation, and
- [Runtime State API Reference](https://www.assistant-ui.com/docs/api-reference/runtimes.md): Runtime state and actions exposed through useAui and useAuiState, covering AssistantRuntime, ThreadRuntime, ThreadListRu
- [MessagePartRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/message-part-runtime.md): MessagePartRuntime state and helpers for inspecting assistant-ui text, tool calls, data parts, reasoning, and custom mes
- [MessageRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/message-runtime.md): MessageRuntime state and actions for editing, reloading, copying, rating, speaking, and branching assistant-ui messages.
- [QueueItemState](https://www.assistant-ui.com/docs/api-reference/runtimes/queue-state.md): State shape for queued assistant-ui thread operations and pending runtime work.
- [ThreadListItemRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/thread-list-item-runtime.md): ThreadListItemRuntime state and actions for selecting, archiving, unarchiving, deleting, and renaming assistant-ui conve
- [ThreadListRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/thread-list-runtime.md): ThreadListRuntime state and actions for managing remote assistant-ui conversations, active thread selection, and new thr
- [ThreadRuntime](https://www.assistant-ui.com/docs/api-reference/runtimes/thread-runtime.md): ThreadRuntime state and actions for controlling assistant-ui messages, composers, suggestions, model context, and the fu
- [Component Tools](https://www.assistant-ui.com/docs/api-reference/tools/component-tools.md): Register assistant tools from mounted React components, scoped to the lifetime of part of the UI tree.
- [Tools API Reference](https://www.assistant-ui.com/docs/api-reference/tools.md): Tool definitions, React renderers, status helpers, and toolkits for exposing callable app capabilities to assistant-ui c
- [Interactables (legacy)](https://www.assistant-ui.com/docs/api-reference/tools/interactables-legacy.md): Deprecated legacy interactables APIs for registering model-editable components with per-instance update tools.
- [Interactables](https://www.assistant-ui.com/docs/api-reference/tools/interactables.md): Unstable interactables APIs for model-editable app and message state, including hooks, resources, toolkit helpers, and s
- [Tool Rendering](https://www.assistant-ui.com/docs/api-reference/tools/rendering.md): Register React renderers for assistant-ui tool calls, tool results, and model data parts.
- [Tool Status](https://www.assistant-ui.com/docs/api-reference/tools/status.md): Read tool arguments, execution status, and result state inside assistant-ui tool UI components.
- [Toolkits](https://www.assistant-ui.com/docs/api-reference/tools/toolkits.md): Define model-facing tools and compose them into named toolkits registered with an assistant-ui runtime scope.
- [Assistant Transport](https://www.assistant-ui.com/docs/api-reference/transport/assistant-transport.md): Command, protocol, and transport types for connecting assistant-ui runtimes across execution boundaries.
- [Assistant Frame](https://www.assistant-ui.com/docs/api-reference/transport/frame.md): Frame bridge APIs and serialized message types for embedding assistant-ui runtimes in external contexts.
- [Transport API Reference](https://www.assistant-ui.com/docs/api-reference/transport.md): Transport commands, frame messages, and protocol types for synchronizing assistant-ui runtimes across process or iframe 
- [Utilities API Reference](https://www.assistant-ui.com/docs/api-reference/utilities.md): Utility exports for custom rendering, composition, and advanced assistant-ui behavior that does not fit a larger API fam
- [Utilities](https://www.assistant-ui.com/docs/api-reference/utilities/miscellaneous.md): Miscellaneous @assistant-ui/react utilities for custom rendering, composition, and advanced assistant UI behavior.
- [Voice API Reference](https://www.assistant-ui.com/docs/api-reference/voice.md): Realtime voice, speech synthesis, and dictation contracts for wiring spoken assistant flows into React chat UIs.
- [Voice Sessions](https://www.assistant-ui.com/docs/api-reference/voice/session.md): Create and control realtime assistant-ui voice sessions, state, controls, and helpers.
- [Speech and Dictation](https://www.assistant-ui.com/docs/api-reference/voice/speech-dictation.md): Connect speech synthesis and dictation adapters to assistant-ui voice and composer workflows.

### examples

- [AI SDK Chat Persistence](https://www.assistant-ui.com/examples/ai-sdk.md): Vercel AI SDK chat with thread persistence — open-source React example combining the AI SDK and assistant-ui for streami
- [Claude Artifacts Example](https://www.assistant-ui.com/examples/artifacts.md): Open-source Claude Artifacts implementation in React — generate websites and components in a side panel from chat messag
- [ChatGPT Clone Example](https://www.assistant-ui.com/examples/chatgpt.md): Open-source ChatGPT clone built in React with assistant-ui — centered welcome composer, high-contrast user bubbles, tool
- [Claude Clone](https://www.assistant-ui.com/examples/claude.md): Open-source Claude clone in React — warm cream theme, serif typography, hover-only action bars, and a clean minimal-shad
- [Expo React Native AI Chat](https://www.assistant-ui.com/examples/expo.md): Native iOS and Android AI chat app with Expo — drawer navigation, thread persistence, and the assistant-ui React Native 
- [Form-Filling AI Copilot](https://www.assistant-ui.com/examples/form-demo.md): Open-source AI copilot that fills forms for users — sidebar UI, field-aware tool calls, and a working React example buil
- [Gemini Clone](https://www.assistant-ui.com/examples/gemini.md): Open-source Gemini clone in React with a centered greeting over an ambient glow, a single-row pill composer, avatar-free
- [Generative UI Example (Tool UI)](https://www.assistant-ui.com/examples/generative-ui.md): Live demo of toolkit Tool UI patterns — charts, date pickers, contact forms, and maps. For the GenerativeUI JSON-spec pr
- [Grok Clone](https://www.assistant-ui.com/examples/grok.md): Open-source Grok clone in React — pill composer with paperclip, animated Mic↔Send, functional model picker dropdown, and
- [Examples](https://www.assistant-ui.com/examples.md): Production-ready examples of AI chat in React — ChatGPT clones, copilots, generative UI, artifacts, multimodal, and more
- [Mem0 Memory Chat](https://www.assistant-ui.com/examples/mem0.md): AI chat with persistent memory powered by Mem0 — remembers user preferences, facts, and history across sessions. Open-so
- [Floating Modal Chat](https://www.assistant-ui.com/examples/modal.md): Embeddable AI assistant in a floating button modal — drop into any React app for in-product copilots or support chat, bu
- [Perplexity Clone](https://www.assistant-ui.com/examples/perplexity.md): Open-source Perplexity-style chat in React — theme-aware composer, functional Search and Model dropdowns, four-state pri
- [LangGraph Stockbroker Demo](https://www.assistant-ui.com/examples/stockbroker.md): Human-in-the-loop AI stockbroker built on LangGraph and assistant-ui — interrupt handling, tool approval, and an interac