Every state an assistant can be in.
144 interface pieces for AI products: reasoning, tool calls, approvals, artifacts, and the composer itself. Every demo is live; open any element for wiring and API.
Reasoning
6 elementsLoader
A pixel matrix that keeps time while the model has nothing to show yet.
Thinking indicator
A live status line that names what the agent is doing right now, with elapsed time.
Streaming text
Tokens arrive softly: the newest words land in blue and settle into ink.
Typing indicator
The classic three dots, tuned to read as presence rather than noise.
Reasoning effort
How hard to think, and how much of that budget the run actually spent.
Guardrail notice
A refusal in its own shape, with the nearest thing it can do instead.
Messages
12 elementsMessage pair
A user bubble and a streaming assistant reply, with actions that appear on hover.
Message branches
Navigate between regenerated versions of the same answer without losing your place.
Message actions
Copy, rate, and regenerate. Each action confirms itself with a small state change.
Error state
A quiet failure banner with a retry path, not a modal in your face.
Message queue
Turns you typed while a run was in flight, stacked and cancelable until it finishes.
Edit a sent message
Rewrite a turn in place, told up front how many replies the edit throws away.
Feedback dialog
A thumbs-down that asks why, so the signal arrives with a reason attached.
Stopped run
You pressed stop. The half-written answer stays, and continuing is one tap away.
Timestamps
Chronology in a long thread: days marked, times on hover.
Speaker identity
Who is talking, once a thread holds more than a user and one model.
Regenerate with
Fork the same turn to a different model instead of rolling the same dice.
Confidence
Which claims came from a source, which were inferred, and which are guesses.
Tool use
12 elementsTool call
One tool invocation with its request and result tucked behind a disclosure.
Tool timeline
A whole working session summarized as verbs, targets, and file stats.
Terminal block
Command output that streams line by line and ends with an exit status.
Code diff
A unified diff with tinted additions and removals, sized for chat.
Reviewable diff
The same diff, but each hunk is a decision: keep it, discard it, apply what survived.
File tree
Everything a run touched, as a tree, with the churn spelled out per file.
Elicitation form
A server pausing mid-tool-call to ask you for the fields it still needs.
Server panel
Which servers are connected, what each one brought, and which is still waiting on you.
Tool failure
One call failed. The error, the attempt count, and a retry that doesn't restart the turn.
Permission grant
Granting a capability rather than approving one action, with the reach spelled out.
Computer use
The screen the agent is driving, with a cursor trail and what it is doing right now.
Code runner
A snippet with a run button, and the output it produced attached below it.
Knowledge
8 elementsWeb search
A search query and its results landing one by one as the agent reads.
Inline citation
Numbered references inside a sentence, each with a hover preview of its source.
Image generation
A dot grid holds the frame while the image resolves out of a blur.
Retrieval chunks
The passages a retrieval answer stands on, scored, before the answer itself arrives.
Document reference
A document the answer leans on, with the quoted passage and the page to jump to.
Memory
What it now remembers about you, written during the turn and removable.
Research report
An outline that fills in section by section, each carrying the sources behind it.
Map
A location answer: pins, a route between them, and the list they came from.
Structured output
13 elementsData table
A small comparison table the model can answer with directly.
Number ticker
Digits that roll into place as a count updates in real time.
Chart
Area, line, and bars, with points landing one at a time as the series streams in.
Web preview
Chrome for a sandboxed preview: a URL bar, reload, and open-in-new around a frame you isolate.
Diagram
A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered graphic.
Flow graph
Work as a graph rather than a list: branches that fan out and rejoin.
Activity graph
A half-year of runs as a calendar of cells, dense where the work was.
Math
Rendered expressions with the working shown, one step at a time.
Spec sheet
The most common structured answer after a table: one object, labeled.
Comparison
Two options weighed side by side, with the pick named and argued.
Timeline
Events on a time axis, with what already happened and what is still coming.
Job progress
Work measured in minutes: weighted stages, an ETA, and a way out.
Score breakdown
A verdict with its arithmetic shown: criteria, weights, and what pulled it down.
Agents
13 elementsAgent plan
A checklist the agent works through, with progress you can glance.
Subagent list
Parallel workers with their own progress, models, and completions.
Task card
AUIA delegated task with its state, timing, result, and transcript in one card.
Agent status
AUIOne pill that always answers: what is it doing, and for how long.
Approval card
Human in the loop: the agent asks before it runs anything with side effects.
Recommendation card
The agent proposes a change with its confidence, and waits for a yes.
Artifact card
A generated document as a tangible object, written live and versioned.
Todo list
The agent's own working list, rewritten mid-run as it discovers what else is needed.
Agent card
Who you are about to talk to: its skills, its model, and the endpoint behind it.
Handoff
Control passing between agents, with the reason and what came along.
Background runs
Work still going somewhere else, and the results waiting to be collected.
Checkpoints
Points you can fall back to, with what each one would give back.
Schedule
A run that repeats on its own, with its cadence and how it has been doing.
Observability
3 elementsTrace waterfall
Every span in a run on one time axis, nested, so you can see where it actually went.
Cost meter
What the run spent, split by model, against the session total.
Quota banner
How much is left, when it comes back, and the way to get more.
Composer
11 elementsComposer
The unified input: attachments, commands, mentions, models, voice, and context in one surface.
Slash commands
Type a slash and the command menu floats above the input, filtering as you continue.
Mentions
Type @ to pull people and agents into the conversation, filtered as you go.
Attachments
Files stage inside the composer with per-file progress before the message sends.
Models
The model lives in the composer rail, one tap away with context at a glance.
Dictation
The mic morphs the input into a live waveform, then lands the transcript as text.
Context
A token ring in the rail fills as the conversation grows, warning near the limit.
Draft restore
Come back to a thread and the sentence you never sent is still waiting.
Context breakdown
Where the window actually went: prompt, tools, files, conversation, and what's left.
Prompt library
Prompts you saved, searchable, with their variables shown before you insert one.
Command palette
Everything the app can do, one keystroke away and grouped by where it acts.
Voice
2 elementsVoice conversation
AUIA live call: the orb tracks your voice, the caption names the turn, the transcript follows.
Read aloud
An answer played back, the spoken word lit as it goes, speed under your thumb.
Thread
12 elementsChat panel
The whole family working together: a message, a pause, a streamed reply.
Empty state
The first screen: a greeting, three ways in, and the composer front and center.
Scroll anchor
Streaming never steals your scroll position; a pill offers the way back down.
Canvas
The thread steps aside and the document takes the room, still being written as you read.
Connection state
The socket drops, the run keeps going on the server, and the stream is picked back up.
Shared conversation
A read-only transcript someone sent you, with a way to pick it up yourself.
Search in conversation
Find inside a long thread, with every hit marked down the scrollbar.
Thread search
History you can actually get back into: pinned first, then grouped by when.
Launcher
The floating entry point, and the panel it opens into.
Settings
Model, system prompt, temperature, and what the assistant is allowed to do.
Onboarding
First run: three moves that teach what this assistant is actually for.
Mobile composer
The bottom sheet: keyboard-aware, quick actions above, thumb-sized targets.
AUI connected
22 elementsThread
AUIA complete chat container with messages, composer, auto-scroll, and accessibility built in.
Assistant modal
AUIA floating chat bubble for support widgets, help desks, and embedded assistants, with a thread list and a resizable window.
Assistant sidebar
AUIA resizable side panel for copilot experiences and contextual assistance.
Thread list
AUIRuntime-backed conversation switching with search, active selection, and thread actions.
Thread list sidebar
AUIA complete sidebar shell that places the runtime thread list beside the active conversation.
Orb
AUIThe realtime voice orb, with connection, mute, and speaking state controls.
Reasoning
AUIA collapsible renderer for assistant reasoning that follows the active message part.
Message timing
AUIStreaming statistics for the current message, including first token, total time, and speed.
Conversation map
AUIA rail of the whole thread: one tick per turn, the turn being read marked and the ones on screen deepened, a hover preview, and a click that jumps there.
Context display
AUIModel context usage as a ring, bar, or text value with a detailed hover view.
MCP config dialog
AUIA dialog for connectors and custom MCP servers, including authentication and connection state.
Attachment
AUIRuntime attachments for the composer and messages, with previews, progress, and removal.
Follow-up suggestions
AUIPrompt chips populated from the runtime's generated follow-up suggestions.
Tool fallback
AUIThe default runtime renderer for tool calls that do not have dedicated UI.
Tool group
AUIA collapsible runtime wrapper around consecutive tool calls in one assistant turn.
Quote
AUISelect message text, quote it from a floating toolbar, and carry it into the composer.
Sources
AUIRuntime sources with favicon links for URLs and file badges for documents.
Image
AUIImage message parts with preview, loading states, actions, and a fullscreen view.
File
AUIFile message parts with type-aware icons, filename, size, and download actions.
Model selector
AUIA searchable runtime model picker with grouped providers and reasoning effort controls.
Composer trigger popover
AUIA character-triggered picker for mentions, slash commands, and nested composer actions.
Directive text
AUIA message renderer that turns mention directives into inline, runtime-aware chips.
Renderers
5 elementsMarkdown text
AUIAssistant markdown with headings, lists, links, tables, and code blocks.
Syntax highlighter
Prism-based code highlighting for assistant markdown code blocks.
Shiki highlighter
AUIShiki code highlighting that defers tokenization until a message part settles.
Mermaid diagram
Mermaid diagrams rendered inside messages, including partial streaming input.
Generative UI
A styled component library for rendering structured generative UI output.
Primitives
3 elementsTooltip icon button
An accessible icon button with a tooltip label and shared interaction states.
Model logos
Inline SVG marks for OpenAI, Anthropic, and Google model providers.
Heat graph
An activity heat map with month labels, weekday labels, legend, and tooltip.
Generative
22 elementsRiverside Loft
A stay card with a photo, location and rating details, and a booking action.
Table reservation
A booking form collecting party size, date, and seating preference, submitted through the Card form model.
Order tracking
An order status card with a delivery timeline, badges per step, and quick actions.
Flight tracker
A flight card with a live route progress bar between origin and destination.
Portfolio overview
A holdings summary combining key facts, an axis-labeled bar chart, and a table of positions.
Create event
A calendar day summary with three upcoming events and confirm/cancel actions to add it to the calendar.
View event
A compact single-event summary card.
Current weather
A glanceable weather card with a large temperature reading and conditions.
Ride status
A live ride card with a big ETA and pick-up/driver facts.
Draft email
A composer Form with from/to/subject/body fields, submitting the collected values on send.
Shopping cart
A cart summary: line items, a Divider, subtotal/tax/total facts, and purchase actions.
Playlist
A media card with a cover image and a numbered track list, each row playable on its own.
Channel message
A chat message card with a channel/timestamp row, an author row with a round avatar, and a Markdown body.
Purchase receipt
A receipt card (Badge instead of Alert) with the purchased item, delivery/seller/paid facts, and a details link.
Weekly active users
A stacked two-series area chart with axis ticks and a legend.
Player card
A stat card with four Col-laid-out stats beneath the player header.
Conference session
A conference session card with a kicker, title, description, and two speaker rows with a View action.
Confirm dialog
A compact confirmation card with Yes/No buttons carrying distinct actions.
Response time
A single-series line chart with axis ticks.
Create task
A short task-creation Form: title, description, due date, and a submit button.
Software purchase
A plan-purchase Card form with volume/frequency selects, a total fact, and confirm/discard actions.
Support tickets
A stacked three-series bar chart with axis ticks and a legend.