A
assistant-ui/assistant-ui
Assistant Modalassistant-modalFloating chat bubble for support widgets and help desks.
Assistant Sidebarassistant-sidebarSide panel chat for copilot experiences and inline assistance.
AttachmentattachmentAttach files from the composer and view them inside messages.
Composer Trigger Popovercomposer-trigger-popoverCharacter triggered picker for @ mentions, / commands, and similar popovers.
Context Displaycontext-displayToken usage against a model's context window as a ring, bar, or text, with a hover popover.
Conversation Mapconversation-mapRuntime-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.
Directive Textdirective-textRender mention directives as inline chips in user messages.
Activity graphelements-activity-graphA half-year of runs as a calendar of cells, dense where the work was.
Agent cardelements-agent-cardWho you are about to talk to: its skills, its model, and the endpoint behind it.
Handoffelements-agent-handoffControl passing between agents, with the reason and what came along.
Agent planelements-agent-planA checklist the agent works through, with progress you can glance.
Agent statuselements-agent-statusOne pill that always answers: what is it doing, and for how long.
Approval cardelements-approval-cardHuman in the loop: the agent asks before it runs anything with side effects.
Artifact cardelements-artifact-cardA generated document as a tangible object, written live and versioned.
Background runselements-background-inboxWork still going somewhere else, and the results waiting to be collected.
Canvaselements-canvas-splitThe thread steps aside and the document takes the room, still being written as you read.
Chartelements-chartArea, line, and bars, with points landing one at a time as the series streams in.
Chat panelelements-chat-panelThe whole family working together: a message, a pause, a streamed reply.
Checkpointselements-checkpoint-historyPoints you can fall back to, with what each one would give back.
Code diffelements-code-diffA unified diff with tinted additions and removals, sized for chat.
Code runnerelements-code-runnerA snippet with a run button, and the output it produced attached below it.
Command paletteelements-command-paletteEverything the app can do, one keystroke away and grouped by where it acts.
Comparisonelements-comparison-cardTwo options weighed side by side, with the pick named and argued.
Composerelements-composerThe unified input: attachments, commands, mentions, models, voice, and context in one surface.
Computer useelements-computer-useThe screen the agent is driving, with a cursor trail and what it is doing right now.
Confidenceelements-confidence-markerWhich claims came from a source, which were inferred, and which are guesses.
Connection stateelements-connection-stateThe socket drops, the run keeps going on the server, and the stream is picked back up.
Context breakdownelements-context-breakdownWhere the window actually went: prompt, tools, files, conversation, and what's left.
Context Display Coreelements-context-displayThe props-driven context usage display: ring, bar, and text presets with the usage popover, no runtime required.
Conversation mapelements-conversation-mapA 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.
Search in conversationelements-conversation-searchFind inside a long thread, with every hit marked down the scrollbar.
Cost meterelements-cost-meterWhat the run spent, split by model, against the session total.
Data tableelements-data-tableA small comparison table the model can answer with directly.
Timestampselements-day-separatorChronology in a long thread: days marked, times on hover.
Diagramelements-diagramA drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered graphic.
Directive Textelements-directive-textThe props-driven directive chip renderer: bring your own formatter, no runtime required.
Document referenceelements-document-referenceA document the answer leans on, with the quoted passage and the page to jump to.
Draft restoreelements-draft-restoreCome back to a thread and the sentence you never sent is still waiting.
Edit a sent messageelements-edit-messageRewrite a turn in place, told up front how many replies the edit throws away.
Elicitation formelements-elicitation-formA server pausing mid-tool-call to ask you for the fields it still needs.
Empty stateelements-empty-stateThe first screen: a greeting, three ways in, and the composer front and center.
Error stateelements-error-stateA quiet failure banner with a retry path, not a modal in your face.
Feedback dialogelements-feedback-dialogA thumbs-down that asks why, so the signal arrives with a reason attached.
File treeelements-file-treeEverything a run touched, as a tree, with the churn spelled out per file.
Flow graphelements-flow-graphWork as a graph rather than a list: branches that fan out and rejoin.
Guardrail noticeelements-guardrail-noticeA refusal in its own shape, with the nearest thing it can do instead.
Image generationelements-image-generationA dot grid holds the frame while the image resolves out of a blur.
Inline citationelements-inline-citationNumbered references inside a sentence, each with a hover preview of its source.
Long jobelements-job-progressWork measured in minutes: weighted stages, an ETA, and a way out.
Launcherelements-launcher-bubbleThe floating entry point, and the panel it opens into.
Loading stateelements-loading-stateA pixel matrix that keeps time while the model has nothing to show yet.
Mapelements-map-answerA location answer: pins, a route between them, and the list they came from.
Mathelements-math-blockRendered expressions with the working shown, one step at a time.
Server panelelements-mcp-server-panelWhich servers are connected, what each one brought, and which is still waiting on you.
Memoryelements-memory-chipsWhat it now remembers about you, written during the turn and removable.
Mermaid Diagramelements-mermaid-diagramThe props-driven Mermaid renderer: zoom overlay, skeleton, and error fallback, no runtime required.
Message actionselements-message-actionsCopy, rate, and regenerate. Each action confirms itself with a small state change.
Attachments in a messageelements-message-attachmentFiles as received rather than staged: an image to open, a document with its page count.
Message brancheselements-message-branchesNavigate between regenerated versions of the same answer without losing your place.
Message pairelements-message-pairA user bubble and a streaming assistant reply, with actions that appear on hover.
Message queueelements-message-queueTurns you typed while a run was in flight, stacked and cancelable until it finishes.
Timing footerelements-message-timingWhat the turn cost: time to first token, throughput, tokens, money.
Mobile composerelements-mobile-composerThe bottom sheet: keyboard-aware, quick actions above, thumb-sized targets.
Model pickerelements-model-pickerThe full list rather than the rail: grouped by family, priced, with what each one can do.
Model Selectorelements-model-selectorThe props-driven model picker: search, groups, and reasoning effort levels, no runtime required.
Number tickerelements-number-tickerDigits that roll into place as a count updates in real time.
Onboardingelements-onboardingFirst run: three moves that teach what this assistant is actually for.
Permission grantelements-permission-grantGranting a capability rather than approving one action, with the reach spelled out.
Prompt libraryelements-prompt-libraryPrompts you saved, searchable, with their variables shown before you insert one.
Quotaelements-quota-bannerHow much is left, when it comes back, and the way to get more.
Quote replyelements-quote-replySelect a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.
Elements Rangeelements-rangeRange normalization for the elements family: clamping a caller's counts, indexes, and shares to what the element can render.
Read aloudelements-read-aloudAn answer played back, the spoken word lit as it goes, speed under your thumb.
Reasoning Panelelements-reasoningThe props-driven reasoning disclosure: streaming preview, fades, and variants, no runtime required.
Reasoning effortelements-reasoning-effortHow hard to think, and how much of that budget the run actually spent.
Reasoning panelelements-reasoning-panelA collapsible trace that streams reasoning steps along a timeline, then settles into a summary.
Recommendation cardelements-recommendation-cardThe agent proposes a change with its confidence, and waits for a yes.
Regenerate withelements-regenerate-menuFork the same turn to a different model instead of rolling the same dice.
Research reportelements-research-reportAn outline that fills in section by section, each carrying the sources behind it.
Retrieval chunkselements-retrieval-chunksThe passages a retrieval answer stands on, scored, before the answer itself arrives.
Reviewable diffelements-reviewable-diffThe same diff, but each hunk is a decision: keep it, discard it, apply what survived.
Scheduleelements-schedule-cardA run that repeats on its own, with its cadence and how it has been doing.
Score breakdownelements-score-breakdownA verdict with its arithmetic shown: criteria, weights, and what pulled it down.
Scroll anchorelements-scroll-anchorStreaming never steals your scroll position; a pill offers the way back down.
Settingselements-settings-panelModel, system prompt, temperature, and what the assistant is allowed to do.
Shared conversationelements-shared-conversationA read-only transcript someone sent you, with a way to pick it up yourself.
Shiki Highlighterelements-shiki-highlighterThe props-driven Shiki code block: streaming-aware highlighting, no runtime required.
Sourceselements-sourcesCitations collapsed into a pill, expanding into scannable source cards.
Speaker identityelements-speaker-identityWho is talking, once a thread holds more than a user and one model.
Spec sheetelements-spec-sheetThe most common structured answer after a table: one object, labeled.
Stopped runelements-stopped-runYou pressed stop. The half-written answer stays, and continuing is one tap away.
Streaming textelements-streaming-textTokens arrive softly: the newest words land in blue and settle into ink.
Subagent listelements-subagent-listParallel workers with their own progress, models, and completions.
Follow-up suggestionselements-suggestionsPrompt pills that stagger in after a reply and invite the next turn.
Elements Surfaceselements-surfacesShared design language for the elements family: surface, ink, and motion class recipes plus the shimmer utility.
Terminal blockelements-terminal-blockCommand output that streams line by line and ends with an exit status.
Thinking indicatorelements-thinking-indicatorA live status line that names what the agent is doing right now, with elapsed time.
Thread listelements-thread-listConversation history with unread marks and actions that wait for hover.
Thread searchelements-thread-searchHistory you can actually get back into: pinned first, then grouped by when.
Timelineelements-timelineEvents on a time axis, with what already happened and what is still coming.
Todo listelements-todo-listThe agent's own working list, rewritten mid-run as it discovers what else is needed.
Tool callelements-tool-callOne tool invocation with its request and result tucked behind a disclosure.
Tool failureelements-tool-errorOne call failed. The error, the attempt count, and a retry that doesn't restart the turn.
Parallel toolselements-tool-groupCalls that went out together, collapsed to one row until you want the detail.
Tool timelineelements-tool-timelineA whole working session summarized as verbs, targets, and file stats.
Trace waterfallelements-trace-waterfallEvery span in a run on one time axis, nested, so you can see where it actually went.
Typing indicatorelements-typing-indicatorThe classic three dots, tuned to read as presence rather than noise.
Voice Orbelements-voiceThe props-driven voice orb: five session states and four palettes, no runtime required.
Voice conversationelements-voice-conversationA live call: the orb tracks your voice, the caption names the turn, the transcript follows.
Web previewelements-web-previewChrome for a sandboxed preview: a URL bar, reload, and open-in-new around a frame you isolate.
Web searchelements-web-searchA search query and its results landing one by one as the agent reads.
FilefileDisplay file parts with icon, name, size, and a download button.
Follow Up Suggestionsfollow-up-suggestionsPrompt chips rendered from runtime generated follow up suggestions.
Generative UIgenerative-uiStyled component library for rendering generative UI output.
Heat Graphheat-graphActivity heat map with month and weekday labels.
ImageimageDisplay image parts with preview, loading states, and a fullscreen dialog.
LogoslogosModel provider logos as inline SVG components.
Markdown Textmarkdown-textRender assistant markdown with headings, lists, links, and code blocks.
MCP Config Dialogmcp-configDialog listing MCP connectors and custom servers, with OAuth and bearer auth controls.
Mermaid Diagrammermaid-diagramRender Mermaid diagrams in messages, including while they stream.
Message Timingmessage-timingBadge with streaming stats: time to first token, total time, and tokens per second.
Model Selectormodel-selectorModel picker with reasoning effort levels, search, and runtime integration.
QuotequoteSelect and quote message text with a floating toolbar and a composer preview.
ReasoningreasoningCollapsible panel for assistant reasoning and thinking content.
Shiki Highlightershiki-highlighterCode block highlighting powered by react-shiki.
SourcessourcesDisplay URL sources with favicon, title, and an external link.
Syntax Highlightersyntax-highlighterCode block highlighting powered by react-syntax-highlighter.
ThreadthreadChat container with message list, composer, auto scroll, and accessibility built in.
Thread Listthread-listSidebar or dropdown for switching conversations, with search and active selection.
Thread List Sidebarthreadlist-sidebarSidebar shell that hosts the thread list beside a thread.
Tool Fallbacktool-fallbackDefault renderer for tool calls that have no dedicated UI.
Tool Grouptool-groupCollapsible wrapper around consecutive tool calls.
Tooltip Icon Buttontooltip-icon-buttonIcon button with an accessible tooltip label, shared across the assistant UI components.
VoicevoiceRealtime voice session controls with connect, mute, and a status indicator.