Practical patterns for building features with assistant-ui.
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.
Let users attach files, images, and documents to messages. Covers upload adapters, validation, and the typed attachmentAddError event.
@-style triggers that insert directives into the composer. Sync and async search patterns.
/-style commands with arguments, async loading, and combining with mentions.
Selection toolbar, programmatic setQuote, and forwarding quote context to the LLM.
Speech-to-text into the composer using DictationAdapter and ComposerPrimitive.Dictate.
Messages
Customize how messages render, are edited, branched, and suggested.
Welcome-screen prompts, dynamic suggestions, and the AuiIf empty-thread pattern.
Edit user messages with UserEditComposer, beginEdit(), and edit-during-streaming behavior.
Navigate alternative message versions with BranchPickerPrimitive, reload, and direct branch-id navigation.
Display response duration and stream timing with useMessageTiming (experimental).
Tools & Generative UI
Connect tools to the LLM and render their outputs as interactive UI.
Define tools with the Toolkit API, stream args, handle cancellation, and integrate with AI SDK / LangGraph / LangChain.
Tool UIRender tool calls and DataMessagePart into custom components, with fallback handling.
Persisted, schema-validated interactive UI driven by AI state.
Multi-AgentSub-agent message attribution via ToolCallMessagePart.messages and LangGraph subgraph events.
Display
Render specialized message content.
Display the assistant's reasoning steps in a collapsible accordion.
LaTeXRender math via React Markdown or Streamdown, with streaming-safe escape rules.
Audio
Voice input and output.
Realtime bidirectional audio with RealtimeVoiceAdapter and createVoiceSession.
Text-to-speech for assistant messages via SpeechSynthesisAdapter.
Programmatic
Read and drive runtime state from your own code.