assistant-ui

The Thread component, the runtime that binds it to your backend, and a chat route that streams from your model provider. Pick the Vercel AI SDK, Mastra or LangGraph during setup; everything installs into your project as source you own.

MIT · Open source · For new and existing React apps. Agent time 5–15 min.

$0.00

How can I help you today?

fig. 01 · Thread, live

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

Thread installs with these elements, each as source in your project.

  • 02

    Markdown text

    Assistant markdown with headings, lists, links, tables, and code blocks.

  • 03

    Reasoning

    A collapsible renderer for assistant reasoning that follows the active message part.

  • 04

    Tool fallback

    The default runtime renderer for tool calls that do not have dedicated UI.

  • 05

    Tool group

    A collapsible runtime wrapper around consecutive tool calls in one assistant turn.

  • 06

    Attachment

    Runtime attachments for the composer and messages, with previews, progress, and removal.

  • 07

    File

    File message parts with type-aware icons, filename, size, and download actions.

  • 08

    Image

    Image message parts with preview, loading states, actions, and a fullscreen view.

  • 09

    Follow-up suggestions

    Prompt chips populated from the runtime's generated follow-up suggestions.

  • 10

    Tooltip icon button

    An accessible icon button with a tooltip label and shared interaction states.

What you get

  • Thread, composer, and message components as editable source
  • A runtime for the Vercel AI SDK, Mastra or LangGraph
  • A streaming chat route with tool calling
  • Markdown rendering, attachments, and frontend tools

Requires

  • React 18 or newer
  • Tailwind CSS v3 or v4
  • A model provider key

How it installs

Start setup and your coding agent works through these steps. You can also follow them by hand.

Scaffold the UI and runtime

Adds the Thread component under components/assistant-ui, an Assistant provider, and the chat route to a Next.js App Router project.

npx assistant-ui@latest init --yes

Add a provider key

Put the key for your model provider into .env.local and restart the dev server.

Render the assistant

Import Assistant from app/assistant.tsx into your page. The provider, runtime, and transport are already wired.