AI Docs
Chat & Streaming
Transports
Structured Outputs
Tools
Chat UI Recipes
Interrupts
MCP
Resumable Streams
Persistence
Persistence (Advanced)
Media
Embeddings
Reranking
Evaluate
Code Mode
Sandboxes
- Overview
- Quick Start
- Providers
- Harnesses
- Harness Auth
- Workspace
- Tools
- Policy
- Lifecycle & Snapshots
- Portable Snapshots
- Keep Files After Reload
- Save a Named Version
- Branch From a Version
- Send a Frozen File
- Let the Agent Save and Fork
- Pick Which Files to Keep
- What a Snapshot Stores
- Instance Durability
- Durable Runs
- Events
Sandboxes (Advanced)
Advanced
AI/LLM: This documentation page is available in plain markdown format at/ai/latest/docs/ui/recipes/index.md
Chat UI Recipes
Chat UI recipes
Five short examples. Each one adds a single thing to the one before it.
Start with the first if you have not built a chat here yet.
- A chat box with no tools. A layout, a message, and a text part. Nothing else.
- Make a tool look right. Register one tool and branch on its state, so it never shows raw JSON.
- Ask before a tool runs. Gate a tool behind a yes or no, next to the tool or in a list.
- Ask the user your own question. Define an interrupt with your own schemas and render it.
- Send the current user to the server. Pass a tenant or user id per request, out of the prompt.
The code is React. The Solid, Vue, Svelte, and Remix guides use the same option groups and the same component names, so each example maps across with only the framework syntax changing.
For the full component map in one place, see the React guide.