Elements
Every state an assistant can be in.
122 interface pieces for AI products: reasoning, tool calls, approvals, artifacts, and the composer itself. Every demo is live; open any element for its source.
Reasoning
7 elementsThinking indicator
A live status line that names what the agent is doing right now, with elapsed time.
Reasoning panel
A collapsible trace that streams reasoning steps along a timeline, then settles into a summary.
Messages
16 elementsMessage 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.
Message queue
Turns you typed while a run was in flight, stacked and cancelable until it finishes.
Attachments in a message
Files as received rather than staged: an image to open, a document with its page count.
Edit a sent message
Rewrite a turn in place, told up front how many replies the edit throws away.
Quote reply
Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.
Tool use
13 elementsReviewable diff
The same diff, but each hunk is a decision: keep it, discard it, apply what survived.
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.
Knowledge
9 elementsInline citation
Numbered references inside a sentence, each with a hover preview of its source.
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.
Research report
An outline that fills in section by section, each carrying the sources behind it.
Structured output
13 elementsWeb 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.
Score breakdown
A verdict with its arithmetic shown: criteria, weights, and what pulled it down.
Agents
12 elementsObservability
3 elementsTrace waterfall
Every span in a run on one time axis, nested, so you can see where it actually went.
Composer
12 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.
Model picker
The full list rather than the rail: grouped by family, priced, with what each one can do.
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.
Voice
2 elementsVoice conversation
A live call: the orb tracks your voice, the caption names the turn, the transcript follows.
Thread
13 elementsCanvas
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.
Generative
22 elementsTable 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.
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.
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.
Conference session
A conference session card with a kicker, title, description, and two speaker rows with a View action.
Software purchase
A plan-purchase Card form with volume/frequency selects, a total fact, and confirm/discard actions.