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.

See what it installs

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

  • File attachments

    Users attach images and files to messages by picker, drag-drop, or paste.

  • Text-to-speech

    A read-aloud button on every assistant message.

  • Voice dictation

    A microphone button that transcribes speech into the composer.

  • LaTeX math

    Render LaTeX equations in chat messages with KaTeX.

  • Suggested prompts

    Starter prompts on the empty thread, with optional generated follow-ups.

  • @-mentions

    Type @ in the composer to pick a tool or custom item and send it as a directive.

  • Slash commands

    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 interactables

  • Approval card

    Human in the loop: the agent asks before it runs anything with side effects.

  • Elicitation form

    A server pausing mid-tool-call to ask you for the fields it still needs.

  • Option list

    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 UI

  • Chart

    Area, line, and bars, with points landing one at a time as the series streams in.

  • Data table

    A tool's rows and columns with formatting, sorting, and a card layout in narrow columns.

  • Generative UI

    A styled component library for rendering structured generative UI output.

Backend

Save conversations, resume interrupted streams, and trace model calls.

  • Assistant Cloud

    Persistence, thread history, and titles for an existing assistant-ui app.

  • Resumable streams

    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.

  • Agent tools

    Tools the model can call, each with its own UI in the thread.

  • User-managed MCP servers

    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.

127 elements can be added from their own pages.

Browse elements