Guides

Practical recipes for building AI chat features in React with assistant-ui — attachments, branching, multi-agent, voice, slash commands, generative UI, and more.

Guides are task-oriented walkthroughs for building specific features on top of assistant-ui. They sit between the Primitives (low-level building blocks) and Components (pre-styled installs) — pick a guide when you know what you want to build and need the recommended pattern.

Composer

Extend the message input with file attachments, mentions, slash commands, voice, and quoting.

Attachments

Let users attach files, images, and documents to messages. Covers upload adapters, validation, and the typed attachmentAddError event.

Mentions

@-style triggers that insert directives into the composer. Sync and async search patterns.

Slash Commands

/-style commands with arguments, async loading, and combining with mentions.

Quoting

Selection toolbar, programmatic setQuote, and forwarding quote context to the LLM.

Dictation

Speech-to-text into the composer using DictationAdapter and ComposerPrimitive.Dictate.

Messages

Customize how messages render, are edited, branched, and suggested.

Suggestions

Welcome-screen prompts, dynamic suggestions, and the AuiIf empty-thread pattern.

Editing

Edit user messages with UserEditComposer, beginEdit(), and edit-during-streaming behavior.

Branching

Navigate alternative message versions with BranchPickerPrimitive, reload, and direct branch-id navigation.

Message Timing

Display response duration and stream timing with useMessageTiming (experimental).

Tools & Generative UI

Tool calling and generative UI have their own Tools section — defining toolkits, rendering tool calls, interactables, MCP, and multi-agent UIs.

Tools

Define toolkits, render tool calls, connect MCP servers, and build generative UI.

Display

Render specialized message content.

Chain of Thought

Display the assistant's reasoning steps in a collapsible accordion.

LaTeX

Render math via React Markdown or Streamdown, with streaming-safe escape rules.

Thread Virtualization

Render very long threads with @tanstack/react-virtual and per-index message rendering.

Audio

Voice input and output.

Voice

Realtime bidirectional audio with RealtimeVoiceAdapter and createVoiceSession.

Speech

Text-to-speech for assistant messages via SpeechSynthesisAdapter.

Programmatic

Read and drive runtime state from your own code.

Context API

Access threads, messages, composer, and tool state via useAui and the runtime scope tree.