---
name: "@assistant-ui"
slug: "assistant-ui"
description: "Production-grade open-source React toolkit for building ChatGPT-style AI chat interfaces. Provides Radix-style composable primitives: Thread, Message, Composer, ThreadList, ActionBar, and more — all with streaming, auto-scroll, retries, attachments, markdown, code highlighting, voice dictation, and keyboard shortcuts built in. Adapter packages for Vercel AI SDK, LangGraph/LangChain, AG-UI, A2A, Google ADK, and custom data-stream backends. Supports generative UI (tool-call rendering, inline human approvals). Optional paid Cloud tier for managed thread history, telemetry, and file storage. Y Combinator-backed. Use for: any production AI chat or copilot UI that needs a fully featured, themeable, framework-agnostic chat shell wired to the Vercel AI SDK or LangGraph in minutes."
category: "AI/chat UI"
tags: ["ai", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "design-system", "forms", "hooks", "loaders", "maps", "marketing", "media", "mobile", "navigation", "onboarding", "overlays", "pro-available", "retro", "tables", "theming"]
framework: "react"
license: "MIT"
author: "assistant-ui"
website: "https://www.assistant-ui.com"
github: "https://github.com/assistant-ui/assistant-ui"
registry: "https://r.assistant-ui.com/registry.json"
pro: true
pro_url: "https://www.assistant-ui.com/pricing"
github_stars: 10996
component_count: 156
generated_at: "2026-09-21T01:50:16.753Z"
---

# @assistant-ui

Production-grade open-source React toolkit for building ChatGPT-style AI chat interfaces. Provides Radix-style composable primitives: Thread, Message, Composer, ThreadList, ActionBar, and more — all with streaming, auto-scroll, retries, attachments, markdown, code highlighting, voice dictation, and keyboard shortcuts built in. Adapter packages for Vercel AI SDK, LangGraph/LangChain, AG-UI, A2A, Google ADK, and custom data-stream backends. Supports generative UI (tool-call rendering, inline human approvals). Optional paid Cloud tier for managed thread history, telemetry, and file storage. Y Combinator-backed. Use for: any production AI chat or copilot UI that needs a fully featured, themeable, framework-agnostic chat shell wired to the Vercel AI SDK or LangGraph in minutes.

## Links

- Website: https://www.assistant-ui.com
- GitHub: https://github.com/assistant-ui/assistant-ui
- Registry JSON: https://r.assistant-ui.com/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/assistant-ui
- This file: https://sh4dcn.vercel.app/md/assistant-ui.md
- Pro / pricing: https://www.assistant-ui.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://r.assistant-ui.com/registry.json
pnpm dlx shadcn@latest add https://r.assistant-ui.com/registry.json
bunx shadcn@latest add https://r.assistant-ui.com/registry.json
# clone the source repo
git clone https://github.com/assistant-ui/assistant-ui.git
# fetch the raw registry index
curl -s https://r.assistant-ui.com/registry.json
```

## Components (156)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | The cn class name helper that every assistant-ui component imports from @/lib/utils. | `npx shadcn@latest add https://r.assistant-ui.com/utils.json` |
| elements-surfaces | registry:component | Shared design language for the elements family: surface, ink, and motion class recipes plus the shimmer utility. | `npx shadcn@latest add https://r.assistant-ui.com/elements-surfaces.json` |
| elements-range | registry:component | Range normalization for the elements family: clamping a caller's counts, indexes, and shares to what the element can render. | `npx shadcn@latest add https://r.assistant-ui.com/elements-range.json` |
| elements-task | registry:component | Shared task state, labels, timing, and elapsed time for task elements. | `npx shadcn@latest add https://r.assistant-ui.com/elements-task.json` |
| elements-loading-state | registry:component | A pixel matrix that keeps time while the model has nothing to show yet. | `npx shadcn@latest add https://r.assistant-ui.com/elements-loading-state.json` |
| elements-thinking-indicator | registry:component | A live status line that names what the agent is doing right now, with elapsed time. | `npx shadcn@latest add https://r.assistant-ui.com/elements-thinking-indicator.json` |
| elements-reasoning-panel | registry:component | A collapsible trace that streams reasoning steps along a timeline, then settles into a summary. | `npx shadcn@latest add https://r.assistant-ui.com/elements-reasoning-panel.json` |
| elements-streaming-text | registry:component | Tokens arrive softly: the newest words land in blue and settle into ink. | `npx shadcn@latest add https://r.assistant-ui.com/elements-streaming-text.json` |
| elements-typing-indicator | registry:component | The classic three dots, tuned to read as presence rather than noise. | `npx shadcn@latest add https://r.assistant-ui.com/elements-typing-indicator.json` |
| elements-message-pair | registry:component | A user bubble and a streaming assistant reply, with actions that appear on hover. | `npx shadcn@latest add https://r.assistant-ui.com/elements-message-pair.json` |
| elements-message-branches | registry:component | Navigate between regenerated versions of the same answer without losing your place. | `npx shadcn@latest add https://r.assistant-ui.com/elements-message-branches.json` |
| elements-message-actions | registry:component | Copy, rate, and regenerate. Each action confirms itself with a small state change. | `npx shadcn@latest add https://r.assistant-ui.com/elements-message-actions.json` |
| elements-suggestions | registry:component | Prompt pills that stagger in after a reply and invite the next turn. | `npx shadcn@latest add https://r.assistant-ui.com/elements-suggestions.json` |
| elements-error-state | registry:component | A quiet failure banner with a retry path, not a modal in your face. | `npx shadcn@latest add https://r.assistant-ui.com/elements-error-state.json` |
| elements-tool-call | registry:component | One tool invocation with its request and result tucked behind a disclosure. | `npx shadcn@latest add https://r.assistant-ui.com/elements-tool-call.json` |
| elements-tool-timeline | registry:component | A whole working session summarized as verbs, targets, and file stats. | `npx shadcn@latest add https://r.assistant-ui.com/elements-tool-timeline.json` |
| elements-terminal-block | registry:component | Command output that streams line by line and ends with an exit status. | `npx shadcn@latest add https://r.assistant-ui.com/elements-terminal-block.json` |
| elements-code-diff | registry:component | A unified diff with tinted additions and removals, sized for chat. | `npx shadcn@latest add https://r.assistant-ui.com/elements-code-diff.json` |
| elements-web-search | registry:component | A search query and its results landing one by one as the agent reads. | `npx shadcn@latest add https://r.assistant-ui.com/elements-web-search.json` |
| elements-sources | registry:component | Citations collapsed into a pill, expanding into scannable source cards. | `npx shadcn@latest add https://r.assistant-ui.com/elements-sources.json` |
| elements-inline-citation | registry:component | Numbered references inside a sentence, each with a hover preview of its source. | `npx shadcn@latest add https://r.assistant-ui.com/elements-inline-citation.json` |
| elements-image-generation | registry:component | A dot grid holds the frame while the image resolves out of a blur. | `npx shadcn@latest add https://r.assistant-ui.com/elements-image-generation.json` |
| elements-data-table | registry:component | A small comparison table the model can answer with directly. | `npx shadcn@latest add https://r.assistant-ui.com/elements-data-table.json` |
| elements-number-ticker | registry:component | Digits that roll into place as a count updates in real time. | `npx shadcn@latest add https://r.assistant-ui.com/elements-number-ticker.json` |
| elements-agent-plan | registry:component | A checklist the agent works through, with progress you can glance. | `npx shadcn@latest add https://r.assistant-ui.com/elements-agent-plan.json` |
| elements-subagent-list | registry:component | Parallel workers with their own progress, models, and completions. | `npx shadcn@latest add https://r.assistant-ui.com/elements-subagent-list.json` |
| elements-agent-status | registry:component | One pill that always answers: what is it doing, and for how long. | `npx shadcn@latest add https://r.assistant-ui.com/elements-agent-status.json` |
| elements-task-card | registry:component | A delegated task with its state, timing, result, and transcript in one card. | `npx shadcn@latest add https://r.assistant-ui.com/elements-task-card.json` |
| elements-approval-card | registry:component | Human in the loop: the agent asks before it runs anything with side effects. | `npx shadcn@latest add https://r.assistant-ui.com/elements-approval-card.json` |
| elements-recommendation-card | registry:component | The agent proposes a change with its confidence, and waits for a yes. | `npx shadcn@latest add https://r.assistant-ui.com/elements-recommendation-card.json` |
| elements-artifact-card | registry:component | A generated document as a tangible object, written live and versioned. | `npx shadcn@latest add https://r.assistant-ui.com/elements-artifact-card.json` |
| elements-composer | registry:component | The unified input: attachments, commands, mentions, models, voice, and context in one surface. | `npx shadcn@latest add https://r.assistant-ui.com/elements-composer.json` |
| elements-chat-panel | registry:component | The whole family working together: a message, a pause, a streamed reply. | `npx shadcn@latest add https://r.assistant-ui.com/elements-chat-panel.json` |
| elements-empty-state | registry:component | The first screen: a greeting, three ways in, and the composer front and center. | `npx shadcn@latest add https://r.assistant-ui.com/elements-empty-state.json` |
| elements-thread-list | registry:component | Conversation history with unread marks and actions that wait for hover. | `npx shadcn@latest add https://r.assistant-ui.com/elements-thread-list.json` |
| elements-scroll-anchor | registry:component | Streaming never steals your scroll position; a pill offers the way back down. | `npx shadcn@latest add https://r.assistant-ui.com/elements-scroll-anchor.json` |
| elements-conversation-map | registry:component | A rail of the whole thread: one tick per turn, the turn being read marked and the ones on screen deepened, and a hover preview of what it says. | `npx shadcn@latest add https://r.assistant-ui.com/elements-conversation-map.json` |
| elements-todo-list | registry:component | The agent's own working list, rewritten mid-run as it discovers what else is needed. | `npx shadcn@latest add https://r.assistant-ui.com/elements-todo-list.json` |
| elements-message-queue | registry:component | Turns you typed while a run was in flight, stacked and cancelable until it finishes. | `npx shadcn@latest add https://r.assistant-ui.com/elements-message-queue.json` |
| elements-message-attachment | registry:component | Files as received rather than staged: an image to open, a document with its page count. | `npx shadcn@latest add https://r.assistant-ui.com/elements-message-attachment.json` |
| elements-reviewable-diff | registry:component | The same diff, but each hunk is a decision: keep it, discard it, apply what survived. | `npx shadcn@latest add https://r.assistant-ui.com/elements-reviewable-diff.json` |
| elements-file-tree | registry:component | Everything a run touched, as a tree, with the churn spelled out per file. | `npx shadcn@latest add https://r.assistant-ui.com/elements-file-tree.json` |
| elements-elicitation-form | registry:component | A server pausing mid-tool-call to ask you for the fields it still needs. | `npx shadcn@latest add https://r.assistant-ui.com/elements-elicitation-form.json` |
| elements-retrieval-chunks | registry:component | The passages a retrieval answer stands on, scored, before the answer itself arrives. | `npx shadcn@latest add https://r.assistant-ui.com/elements-retrieval-chunks.json` |
| elements-chart | registry:component | Area, line, and bars, with points landing one at a time as the series streams in. | `npx shadcn@latest add https://r.assistant-ui.com/elements-chart.json` |
| elements-trace-waterfall | registry:component | Every span in a run on one time axis, nested, so you can see where it actually went. | `npx shadcn@latest add https://r.assistant-ui.com/elements-trace-waterfall.json` |
| elements-canvas-split | registry:component | The thread steps aside and the document takes the room, still being written as you read. | `npx shadcn@latest add https://r.assistant-ui.com/elements-canvas-split.json` |
| elements-voice-conversation | registry:component | A live call: the orb tracks your voice, the caption names the turn, the transcript follows. | `npx shadcn@latest add https://r.assistant-ui.com/elements-voice-conversation.json` |
| elements-read-aloud | registry:component | An answer played back, the spoken word lit as it goes, speed under your thumb. | `npx shadcn@latest add https://r.assistant-ui.com/elements-read-aloud.json` |
| elements-mcp-server-panel | registry:component | Which servers are connected, what each one brought, and which is still waiting on you. | `npx shadcn@latest add https://r.assistant-ui.com/elements-mcp-server-panel.json` |
| elements-feedback-dialog | registry:component | A thumbs-down that asks why, so the signal arrives with a reason attached. | `npx shadcn@latest add https://r.assistant-ui.com/elements-feedback-dialog.json` |
| elements-quote-reply | registry:component | Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it. | `npx shadcn@latest add https://r.assistant-ui.com/elements-quote-reply.json` |
| elements-edit-message | registry:component | Rewrite a turn in place, told up front how many replies the edit throws away. | `npx shadcn@latest add https://r.assistant-ui.com/elements-edit-message.json` |
| elements-stopped-run | registry:component | You pressed stop. The half-written answer stays, and continuing is one tap away. | `npx shadcn@latest add https://r.assistant-ui.com/elements-stopped-run.json` |
| elements-message-timing | registry:component | What the turn cost: time to first token, throughput, tokens, money. | `npx shadcn@latest add https://r.assistant-ui.com/elements-message-timing.json` |
| elements-connection-state | registry:component | The socket drops, the run keeps going on the server, and the stream is picked back up. | `npx shadcn@latest add https://r.assistant-ui.com/elements-connection-state.json` |
| elements-agent-card | registry:component | Who you are about to talk to: its skills, its model, and the endpoint behind it. | `npx shadcn@latest add https://r.assistant-ui.com/elements-agent-card.json` |
| elements-web-preview | registry:component | Chrome for a sandboxed preview: a URL bar, reload, and open-in-new around a frame you isolate. | `npx shadcn@latest add https://r.assistant-ui.com/elements-web-preview.json` |
| elements-draft-restore | registry:component | Come back to a thread and the sentence you never sent is still waiting. | `npx shadcn@latest add https://r.assistant-ui.com/elements-draft-restore.json` |
| elements-diagram | registry:component | A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered graphic. | `npx shadcn@latest add https://r.assistant-ui.com/elements-diagram.json` |
| elements-flow-graph | registry:component | Work as a graph rather than a list: branches that fan out and rejoin. | `npx shadcn@latest add https://r.assistant-ui.com/elements-flow-graph.json` |
| elements-activity-graph | registry:component | A half-year of runs as a calendar of cells, dense where the work was. | `npx shadcn@latest add https://r.assistant-ui.com/elements-activity-graph.json` |
| elements-tool-group | registry:component | Calls that went out together, collapsed to one row until you want the detail. | `npx shadcn@latest add https://r.assistant-ui.com/elements-tool-group.json` |
| elements-context-breakdown | registry:component | Where the window actually went: prompt, tools, files, conversation, and what's left. | `npx shadcn@latest add https://r.assistant-ui.com/elements-context-breakdown.json` |
| elements-model-picker | registry:component | The full list rather than the rail: grouped by family, priced, with what each one can do. | `npx shadcn@latest add https://r.assistant-ui.com/elements-model-picker.json` |
| elements-reasoning-effort | registry:component | How hard to think, and how much of that budget the run actually spent. | `npx shadcn@latest add https://r.assistant-ui.com/elements-reasoning-effort.json` |
| elements-guardrail-notice | registry:component | A refusal in its own shape, with the nearest thing it can do instead. | `npx shadcn@latest add https://r.assistant-ui.com/elements-guardrail-notice.json` |
| elements-day-separator | registry:component | Chronology in a long thread: days marked, times on hover. | `npx shadcn@latest add https://r.assistant-ui.com/elements-day-separator.json` |
| elements-speaker-identity | registry:component | Who is talking, once a thread holds more than a user and one model. | `npx shadcn@latest add https://r.assistant-ui.com/elements-speaker-identity.json` |
| elements-regenerate-menu | registry:component | Fork the same turn to a different model instead of rolling the same dice. | `npx shadcn@latest add https://r.assistant-ui.com/elements-regenerate-menu.json` |
| elements-confidence-marker | registry:component | Which claims came from a source, which were inferred, and which are guesses. | `npx shadcn@latest add https://r.assistant-ui.com/elements-confidence-marker.json` |
| elements-tool-error | registry:component | One call failed. The error, the attempt count, and a retry that doesn't restart the turn. | `npx shadcn@latest add https://r.assistant-ui.com/elements-tool-error.json` |
| elements-permission-grant | registry:component | Granting a capability rather than approving one action, with the reach spelled out. | `npx shadcn@latest add https://r.assistant-ui.com/elements-permission-grant.json` |
| elements-computer-use | registry:component | The screen the agent is driving, with a cursor trail and what it is doing right now. | `npx shadcn@latest add https://r.assistant-ui.com/elements-computer-use.json` |
| elements-code-runner | registry:component | A snippet with a run button, and the output it produced attached below it. | `npx shadcn@latest add https://r.assistant-ui.com/elements-code-runner.json` |
| elements-document-reference | registry:component | A document the answer leans on, with the quoted passage and the page to jump to. | `npx shadcn@latest add https://r.assistant-ui.com/elements-document-reference.json` |
| elements-memory-chips | registry:component | What it now remembers about you, written during the turn and removable. | `npx shadcn@latest add https://r.assistant-ui.com/elements-memory-chips.json` |
| elements-research-report | registry:component | An outline that fills in section by section, each carrying the sources behind it. | `npx shadcn@latest add https://r.assistant-ui.com/elements-research-report.json` |
| elements-map-answer | registry:component | A location answer: pins, a route between them, and the list they came from. | `npx shadcn@latest add https://r.assistant-ui.com/elements-map-answer.json` |
| elements-math-block | registry:component | Rendered expressions with the working shown, one step at a time. | `npx shadcn@latest add https://r.assistant-ui.com/elements-math-block.json` |
| elements-spec-sheet | registry:component | The most common structured answer after a table: one object, labeled. | `npx shadcn@latest add https://r.assistant-ui.com/elements-spec-sheet.json` |
| elements-comparison-card | registry:component | Two options weighed side by side, with the pick named and argued. | `npx shadcn@latest add https://r.assistant-ui.com/elements-comparison-card.json` |
| elements-timeline | registry:component | Events on a time axis, with what already happened and what is still coming. | `npx shadcn@latest add https://r.assistant-ui.com/elements-timeline.json` |
| elements-job-progress | registry:component | Work measured in minutes: weighted stages, an ETA, and a way out. | `npx shadcn@latest add https://r.assistant-ui.com/elements-job-progress.json` |
| elements-score-breakdown | registry:component | A verdict with its arithmetic shown: criteria, weights, and what pulled it down. | `npx shadcn@latest add https://r.assistant-ui.com/elements-score-breakdown.json` |
| elements-cost-meter | registry:component | What the run spent, split by model, against the session total. | `npx shadcn@latest add https://r.assistant-ui.com/elements-cost-meter.json` |
| elements-quota-banner | registry:component | How much is left, when it comes back, and the way to get more. | `npx shadcn@latest add https://r.assistant-ui.com/elements-quota-banner.json` |
| elements-agent-handoff | registry:component | Control passing between agents, with the reason and what came along. | `npx shadcn@latest add https://r.assistant-ui.com/elements-agent-handoff.json` |
| elements-background-inbox | registry:component | Work still going somewhere else, and the results waiting to be collected. | `npx shadcn@latest add https://r.assistant-ui.com/elements-background-inbox.json` |
| elements-checkpoint-history | registry:component | Points you can fall back to, with what each one would give back. | `npx shadcn@latest add https://r.assistant-ui.com/elements-checkpoint-history.json` |
| elements-schedule-card | registry:component | A run that repeats on its own, with its cadence and how it has been doing. | `npx shadcn@latest add https://r.assistant-ui.com/elements-schedule-card.json` |
| elements-prompt-library | registry:component | Prompts you saved, searchable, with their variables shown before you insert one. | `npx shadcn@latest add https://r.assistant-ui.com/elements-prompt-library.json` |
| elements-command-palette | registry:component | Everything the app can do, one keystroke away and grouped by where it acts. | `npx shadcn@latest add https://r.assistant-ui.com/elements-command-palette.json` |
| elements-shared-conversation | registry:component | A read-only transcript someone sent you, with a way to pick it up yourself. | `npx shadcn@latest add https://r.assistant-ui.com/elements-shared-conversation.json` |
| elements-conversation-search | registry:component | Find inside a long thread, with every hit marked down the scrollbar. | `npx shadcn@latest add https://r.assistant-ui.com/elements-conversation-search.json` |
| elements-thread-search | registry:component | History you can actually get back into: pinned first, then grouped by when. | `npx shadcn@latest add https://r.assistant-ui.com/elements-thread-search.json` |
| elements-launcher-bubble | registry:component | The floating entry point, and the panel it opens into. | `npx shadcn@latest add https://r.assistant-ui.com/elements-launcher-bubble.json` |
| elements-settings-panel | registry:component | Model, system prompt, temperature, and what the assistant is allowed to do. | `npx shadcn@latest add https://r.assistant-ui.com/elements-settings-panel.json` |
| elements-onboarding | registry:component | First run: three moves that teach what this assistant is actually for. | `npx shadcn@latest add https://r.assistant-ui.com/elements-onboarding.json` |
| elements-mobile-composer | registry:component | The bottom sheet: keyboard-aware, quick actions above, thumb-sized targets. | `npx shadcn@latest add https://r.assistant-ui.com/elements-mobile-composer.json` |
| shimmer-style | registry:style | Keyframes and theme variables for the streaming shimmer animation. | `npx shadcn@latest add https://r.assistant-ui.com/shimmer-style.json` |
| chat/b/ai-sdk-quick-start/json | registry:page | Assistant page wired to the AI SDK chat route, with the thread component installed. | `npx shadcn@latest add https://r.assistant-ui.com/chat/b/ai-sdk-quick-start/json.json` |
| ai-sdk-backend | registry:page | Next.js route handler that streams chat completions through the AI SDK. | `npx shadcn@latest add https://r.assistant-ui.com/ai-sdk-backend.json` |
| ai-sdk-backend-resumable | registry:page | AI SDK route handlers with resumable stream context, so a run survives a reload. | `npx shadcn@latest add https://r.assistant-ui.com/ai-sdk-backend-resumable.json` |
| eve-chat | registry:item | Chat page for an Eve agent, rendering the session through an assistant-ui thread. | `npx shadcn@latest add https://r.assistant-ui.com/eve-chat.json` |
| thread | registry:component | Chat container with message list, composer, auto scroll, and accessibility built in. | `npx shadcn@latest add https://r.assistant-ui.com/thread.json` |
| elements-voice | registry:component | The props-driven voice orb: five session states and four palettes, no runtime required. | `npx shadcn@latest add https://r.assistant-ui.com/elements-voice.json` |
| elements-context-display | registry:component | The props-driven context usage display: ring, bar, and text presets with the usage popover, no runtime required. | `npx shadcn@latest add https://r.assistant-ui.com/elements-context-display.json` |
| voice | registry:component | Realtime voice session controls with connect, mute, and a status indicator. | `npx shadcn@latest add https://r.assistant-ui.com/voice.json` |
| voice-conversation | registry:component | The live call screen bound to the thread's voice session: orb, caption, transcript, mute, and end call. | `npx shadcn@latest add https://r.assistant-ui.com/voice-conversation.json` |
| task-card | registry:component | A runtime task card with nested transcripts, timing, results, and grouped task lanes. | `npx shadcn@latest add https://r.assistant-ui.com/task-card.json` |
| agent-status | registry:component | A runtime task summary chip with an optional tray for every task in the thread. | `npx shadcn@latest add https://r.assistant-ui.com/agent-status.json` |
| use-copy-to-clipboard | registry:hook | Copy text to the clipboard with a temporary copied state. | `npx shadcn@latest add https://r.assistant-ui.com/use-copy-to-clipboard.json` |
| markdown-text | registry:component | Render assistant markdown with headings, lists, links, and code blocks. | `npx shadcn@latest add https://r.assistant-ui.com/markdown-text.json` |
| reasoning | registry:component | Collapsible panel for assistant reasoning and thinking content. | `npx shadcn@latest add https://r.assistant-ui.com/reasoning.json` |
| conversation-map | registry:component | Runtime-backed thread rail: a tick per turn, the turn being read marked and the ones on screen deepened, a hover preview, and a click that scrolls there. | `npx shadcn@latest add https://r.assistant-ui.com/conversation-map.json` |
| elements-reasoning | registry:component | The props-driven reasoning disclosure: streaming preview, fades, and variants, no runtime required. | `npx shadcn@latest add https://r.assistant-ui.com/elements-reasoning.json` |
| message-timing | registry:component | Badge with streaming stats: time to first token, total time, and tokens per second. | `npx shadcn@latest add https://r.assistant-ui.com/message-timing.json` |
| context-display | registry:component | Token usage against a model's context window as a ring, bar, or text, with a hover popover. | `npx shadcn@latest add https://r.assistant-ui.com/context-display.json` |
| thread-list | registry:component | Sidebar or dropdown for switching conversations, with search and active selection. | `npx shadcn@latest add https://r.assistant-ui.com/thread-list.json` |
| mcp-config | registry:component | Dialog listing MCP connectors and custom servers, with OAuth and bearer auth controls. | `npx shadcn@latest add https://r.assistant-ui.com/mcp-config.json` |
| use-attachment-src | registry:hook | Resolve an image attachment to a preview source URL. | `npx shadcn@latest add https://r.assistant-ui.com/use-attachment-src.json` |
| attachment | registry:component | Attach files from the composer and view them inside messages. | `npx shadcn@latest add https://r.assistant-ui.com/attachment.json` |
| follow-up-suggestions | registry:component | Prompt chips rendered from runtime generated follow up suggestions. | `npx shadcn@latest add https://r.assistant-ui.com/follow-up-suggestions.json` |
| tooltip-icon-button | registry:component | Icon button with an accessible tooltip label, shared across the assistant UI components. | `npx shadcn@latest add https://r.assistant-ui.com/tooltip-icon-button.json` |
| syntax-highlighter | registry:component | Code block highlighting powered by react-syntax-highlighter. | `npx shadcn@latest add https://r.assistant-ui.com/syntax-highlighter.json` |
| assistant-modal | registry:component | Floating chat bubble for support widgets and help desks, with a thread list and a resizable window. | `npx shadcn@latest add https://r.assistant-ui.com/assistant-modal.json` |
| assistant-sidebar | registry:component | Side panel chat for copilot experiences and inline assistance. | `npx shadcn@latest add https://r.assistant-ui.com/assistant-sidebar.json` |
| tool-fallback | registry:component | Default renderer for tool calls that have no dedicated UI. | `npx shadcn@latest add https://r.assistant-ui.com/tool-fallback.json` |
| tool-group | registry:component | Collapsible wrapper around consecutive tool calls. | `npx shadcn@latest add https://r.assistant-ui.com/tool-group.json` |
| shiki-highlighter | registry:component | Code block highlighting powered by react-shiki. | `npx shadcn@latest add https://r.assistant-ui.com/shiki-highlighter.json` |
| elements-shiki-highlighter | registry:component | The props-driven Shiki code block: streaming-aware highlighting, no runtime required. | `npx shadcn@latest add https://r.assistant-ui.com/elements-shiki-highlighter.json` |
| mermaid-diagram | registry:component | Render Mermaid diagrams in messages, including while they stream. | `npx shadcn@latest add https://r.assistant-ui.com/mermaid-diagram.json` |
| elements-mermaid-diagram | registry:component | The props-driven Mermaid renderer: zoom overlay, skeleton, and error fallback, no runtime required. | `npx shadcn@latest add https://r.assistant-ui.com/elements-mermaid-diagram.json` |
| diff-viewer | registry:ui | Render code diffs with highlighted additions and deletions. | `npx shadcn@latest add https://r.assistant-ui.com/diff-viewer.json` |
| threadlist-sidebar | registry:component | Sidebar shell that hosts the thread list beside a thread. | `npx shadcn@latest add https://r.assistant-ui.com/threadlist-sidebar.json` |
| quote | registry:component | Select and quote message text with a floating toolbar and a composer preview. | `npx shadcn@latest add https://r.assistant-ui.com/quote.json` |
| sources | registry:component | Display URL sources with favicon, title, and an external link. | `npx shadcn@latest add https://r.assistant-ui.com/sources.json` |
| image | registry:component | Display image parts with preview, loading states, and a fullscreen dialog. | `npx shadcn@latest add https://r.assistant-ui.com/image.json` |
| file | registry:component | Display file parts with icon, name, size, and a download button. | `npx shadcn@latest add https://r.assistant-ui.com/file.json` |
| model-selector | registry:component | Model picker with reasoning effort levels, search, and runtime integration. | `npx shadcn@latest add https://r.assistant-ui.com/model-selector.json` |
| elements-model-selector | registry:component | The props-driven model picker: search, groups, and reasoning effort levels, no runtime required. | `npx shadcn@latest add https://r.assistant-ui.com/elements-model-selector.json` |
| logos | registry:component | Model provider logos as inline SVG components. | `npx shadcn@latest add https://r.assistant-ui.com/logos.json` |
| select | registry:ui | Dropdown select with composable trigger, content, and item components. | `npx shadcn@latest add https://r.assistant-ui.com/select.json` |
| direction | registry:ui | Direction provider and hook for right to left layouts. | `npx shadcn@latest add https://r.assistant-ui.com/direction.json` |
| badge | registry:ui | Small label for status, categories, and metadata. | `npx shadcn@latest add https://r.assistant-ui.com/badge.json` |
| tabs | registry:ui | Tabs for organizing content into switchable panels. | `npx shadcn@latest add https://r.assistant-ui.com/tabs.json` |
| accordion | registry:ui | Stacked headings that reveal or hide content sections. | `npx shadcn@latest add https://r.assistant-ui.com/accordion.json` |
| dot-matrix | registry:ui | 5x5 dot matrix indicator with state specific blink patterns. | `npx shadcn@latest add https://r.assistant-ui.com/dot-matrix.json` |
| number-roll | registry:ui | Animated number that rolls its digits odometer style when the value changes. | `npx shadcn@latest add https://r.assistant-ui.com/number-roll.json` |
| heat-graph | registry:component | Activity heat map with month and weekday labels. | `npx shadcn@latest add https://r.assistant-ui.com/heat-graph.json` |
| composer-trigger-popover | registry:component | Character triggered picker for @ mentions, / commands, and similar popovers. | `npx shadcn@latest add https://r.assistant-ui.com/composer-trigger-popover.json` |
| directive-text | registry:component | Render mention directives as inline chips in user messages. | `npx shadcn@latest add https://r.assistant-ui.com/directive-text.json` |
| elements-directive-text | registry:component | The props-driven directive chip renderer: bring your own formatter, no runtime required. | `npx shadcn@latest add https://r.assistant-ui.com/elements-directive-text.json` |
| generative-ui-style | registry:style | Theme variables and vocabulary CSS for generative UI output. | `npx shadcn@latest add https://r.assistant-ui.com/generative-ui-style.json` |
| generative-ui | registry:component | Styled component library for rendering generative UI output. | `npx shadcn@latest add https://r.assistant-ui.com/generative-ui.json` |

## For AI agents

```text
You are adding components from @assistant-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/assistant-ui.md) for the component list.
2. Fetch the machine-readable index: https://r.assistant-ui.com/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: assistant-ui).
```