Components
Chat UI
A streaming chat interface, with attachments, voice, and message controls.
Chat Starter
A streaming chat UI wired to the agent framework you already use.
For new and existing React apps. Agent time 4–9 min.
Works out of the box
- Replies that stream token by token, with a stop control
- Markdown rendering with code blocks
- Message editing, with branches to switch between versions
- Copy, regenerate, and export to Markdown on every reply
- Tool calls rendered in the thread, grouped while they run
- Collapsible reasoning
- Scrolling that follows the stream, with a jump to the latest message
In the bundle
Users attach images and files to messages by picker, drag-drop, or paste.
A read-aloud button on every assistant message.
A microphone button that transcribes speech into the composer.
Render LaTeX equations in chat messages with KaTeX.
Starter prompts on the empty thread, with optional generated follow-ups.
Type @ in the composer to pick a tool or custom item and send it as a directive.
Type / in the composer to open a command palette that runs your callbacks.
- Streamdown renderer
Replace react-markdown with Streamdown for built-in Shiki, KaTeX, and Mermaid.
- Chain of thought
Group reasoning and tool calls into one collapsible thinking section.
- RTL support
Right-to-left layout for Arabic, Hebrew, and Persian chat interfaces.
Take actions
Collect user input and approvals, and let agents read and update your application.
Connect agents to your app with interactablesHuman in the loop: the agent asks before it runs anything with side effects.
A server pausing mid-tool-call to ask you for the fields it still needs.
The agent asks a question with a few answers; the pick returns to it and stays as a receipt.
Data visualization and generative UI
Present answers as charts and tables, or let the model compose an interface from your components.
Build generative UIArea, line, and bars, with points landing one at a time as the series streams in.
A tool's rows and columns with formatting, sorting, and a card layout in narrow columns.
A styled component library for rendering structured generative UI output.
Backend
Save conversations, resume interrupted streams, and trace model calls.
Persistence, thread history, and titles for an existing assistant-ui app.
A response keeps streaming after a reload or dropped connection and the client picks it back up.
- Langfuse tracing
One Langfuse trace per chat turn, with LLM and tool-call spans, via OpenTelemetry.
- LangSmith tracing
Trace AI SDK calls into a LangSmith project with wrapAISDK.
Agent tools
Define tools for your agents, connect MCP servers, and inspect the runtime.
An action the model can call, with its own UI in the thread.
End users connect, authenticate, and add MCP servers from a dialog in the browser.
- DevTools
An in-browser panel for inspecting runtime state, model context, and events in development.
- MCP server tools
Connect MCP servers in the chat route so their tools are available to the model.
128 of the 151 elements can be added from their own pages.
Browse elements