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.

01

Reasoning

7 elements
01

Loading state

A pixel matrix that keeps time while the model has nothing to show yet.

02

Thinking indicator

A live status line that names what the agent is doing right now, with elapsed time.

03

Reasoning panel

A collapsible trace that streams reasoning steps along a timeline, then settles into a summary.

04

Streaming text

Tokens arrive softly: the newest words land in blue and settle into ink.

05

Typing indicator

The classic three dots, tuned to read as presence rather than noise.

06

Reasoning effort

How hard to think, and how much of that budget the run actually spent.

07

Guardrail notice

A refusal in its own shape, with the nearest thing it can do instead.

02

Messages

16 elements
08

Message pair

A user bubble and a streaming assistant reply, with actions that appear on hover.

09

Message branches

Navigate between regenerated versions of the same answer without losing your place.

10

Message actions

Copy, rate, and regenerate. Each action confirms itself with a small state change.

11

Follow-up suggestions

Prompt pills that stagger in after a reply and invite the next turn.

12

Error state

A quiet failure banner with a retry path, not a modal in your face.

13

Message queue

Turns you typed while a run was in flight, stacked and cancelable until it finishes.

14

Attachments in a message

Files as received rather than staged: an image to open, a document with its page count.

15

Edit a sent message

Rewrite a turn in place, told up front how many replies the edit throws away.

16

Quote reply

Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.

17

Feedback dialog

A thumbs-down that asks why, so the signal arrives with a reason attached.

18

Stopped run

You pressed stop. The half-written answer stays, and continuing is one tap away.

19

Timing footer

What the turn cost: time to first token, throughput, tokens, money.

20

Timestamps

Chronology in a long thread: days marked, times on hover.

21

Speaker identity

Who is talking, once a thread holds more than a user and one model.

22

Regenerate with

Fork the same turn to a different model instead of rolling the same dice.

23

Confidence

Which claims came from a source, which were inferred, and which are guesses.

03

Tool use

13 elements
24

Tool call

One tool invocation with its request and result tucked behind a disclosure.

25

Tool timeline

A whole working session summarized as verbs, targets, and file stats.

26

Terminal block

Command output that streams line by line and ends with an exit status.

27

Code diff

A unified diff with tinted additions and removals, sized for chat.

28

Reviewable diff

The same diff, but each hunk is a decision: keep it, discard it, apply what survived.

29

File tree

Everything a run touched, as a tree, with the churn spelled out per file.

30

Elicitation form

A server pausing mid-tool-call to ask you for the fields it still needs.

31

Server panel

Which servers are connected, what each one brought, and which is still waiting on you.

32

Parallel tools

Calls that went out together, collapsed to one row until you want the detail.

33

Tool failure

One call failed. The error, the attempt count, and a retry that doesn't restart the turn.

34

Permission grant

Granting a capability rather than approving one action, with the reach spelled out.

35

Computer use

The screen the agent is driving, with a cursor trail and what it is doing right now.

36

Code runner

A snippet with a run button, and the output it produced attached below it.

04

Knowledge

9 elements
37

Web search

A search query and its results landing one by one as the agent reads.

38

Sources

Citations collapsed into a pill, expanding into scannable source cards.

39

Inline citation

Numbered references inside a sentence, each with a hover preview of its source.

40

Image generation

A dot grid holds the frame while the image resolves out of a blur.

41

Retrieval chunks

The passages a retrieval answer stands on, scored, before the answer itself arrives.

42

Document reference

A document the answer leans on, with the quoted passage and the page to jump to.

43

Memory

What it now remembers about you, written during the turn and removable.

44

Research report

An outline that fills in section by section, each carrying the sources behind it.

45

Map

A location answer: pins, a route between them, and the list they came from.

05

Structured output

13 elements
46

Data table

A small comparison table the model can answer with directly.

47

Number ticker

Digits that roll into place as a count updates in real time.

48

Chart

Area, line, and bars, with points landing one at a time as the series streams in.

49

Web preview

Chrome for a sandboxed preview: a URL bar, reload, and open-in-new around a frame you isolate.

50

Diagram

A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered graphic.

51

Flow graph

Work as a graph rather than a list: branches that fan out and rejoin.

52

Activity graph

A half-year of runs as a calendar of cells, dense where the work was.

53

Math

Rendered expressions with the working shown, one step at a time.

54

Spec sheet

The most common structured answer after a table: one object, labeled.

55

Comparison

Two options weighed side by side, with the pick named and argued.

56

Timeline

Events on a time axis, with what already happened and what is still coming.

57

Long job

Work measured in minutes: weighted stages, an ETA, and a way out.

58

Score breakdown

A verdict with its arithmetic shown: criteria, weights, and what pulled it down.

06

Agents

12 elements
59

Agent plan

A checklist the agent works through, with progress you can glance.

60

Subagent list

Parallel workers with their own progress, models, and completions.

61

Agent status

One pill that always answers: what is it doing, and for how long.

62

Approval card

Human in the loop: the agent asks before it runs anything with side effects.

63

Recommendation card

The agent proposes a change with its confidence, and waits for a yes.

64

Artifact card

A generated document as a tangible object, written live and versioned.

65

Todo list

The agent's own working list, rewritten mid-run as it discovers what else is needed.

66

Agent card

Who you are about to talk to: its skills, its model, and the endpoint behind it.

67

Handoff

Control passing between agents, with the reason and what came along.

68

Background runs

Work still going somewhere else, and the results waiting to be collected.

69

Checkpoints

Points you can fall back to, with what each one would give back.

70

Schedule

A run that repeats on its own, with its cadence and how it has been doing.

07

Observability

3 elements
71

Trace waterfall

Every span in a run on one time axis, nested, so you can see where it actually went.

72

Cost meter

What the run spent, split by model, against the session total.

73

Quota

How much is left, when it comes back, and the way to get more.

08

Composer

12 elements
74

Composer

The unified input: attachments, commands, mentions, models, voice, and context in one surface.

75

Slash commands

Type a slash and the command menu floats above the input, filtering as you continue.

76

Mentions

Type @ to pull people and agents into the conversation, filtered as you go.

77

Attachments

Files stage inside the composer with per-file progress before the message sends.

78

Model picker

The model lives in the composer rail, one tap away with context at a glance.

79

Voice

The mic morphs the input into a live waveform, then lands the transcript as text.

80

Context

A token ring in the rail fills as the conversation grows, warning near the limit.

81

Draft restore

Come back to a thread and the sentence you never sent is still waiting.

82

Model picker

The full list rather than the rail: grouped by family, priced, with what each one can do.

83

Context breakdown

Where the window actually went: prompt, tools, files, conversation, and what's left.

84

Prompt library

Prompts you saved, searchable, with their variables shown before you insert one.

85

Command palette

Everything the app can do, one keystroke away and grouped by where it acts.

09

Voice

2 elements
86

Voice conversation

A live call: the orb tracks your voice, the caption names the turn, the transcript follows.

87

Read aloud

An answer played back, the spoken word lit as it goes, speed under your thumb.

10

Thread

13 elements
88

Chat panel

The whole family working together: a message, a pause, a streamed reply.

89

Empty state

The first screen: a greeting, three ways in, and the composer front and center.

90

Thread list

Conversation history with unread marks and actions that wait for hover.

91

Scroll anchor

Streaming never steals your scroll position; a pill offers the way back down.

92

Canvas

The thread steps aside and the document takes the room, still being written as you read.

93

Connection state

The socket drops, the run keeps going on the server, and the stream is picked back up.

94

Shared conversation

A read-only transcript someone sent you, with a way to pick it up yourself.

95

Search in conversation

Find inside a long thread, with every hit marked down the scrollbar.

96

Thread search

History you can actually get back into: pinned first, then grouped by when.

97

Launcher

The floating entry point, and the panel it opens into.

98

Settings

Model, system prompt, temperature, and what the assistant is allowed to do.

99

Onboarding

First run: three moves that teach what this assistant is actually for.

100

Mobile composer

The bottom sheet: keyboard-aware, quick actions above, thumb-sized targets.

11

Generative

22 elements
101

Riverside Loft

A stay card with a photo, location and rating details, and a booking action.

102

Table reservation

A booking form collecting party size, date, and seating preference, submitted through the Card form model.

103

Order tracking

An order status card with a delivery timeline, badges per step, and quick actions.

104

Flight tracker

A flight card with a live route progress bar between origin and destination.

105

Portfolio overview

A holdings summary combining key facts, an axis-labeled bar chart, and a table of positions.

106

Create event

A calendar day summary with three upcoming events and confirm/cancel actions to add it to the calendar.

107

View event

A compact single-event summary card.

108

Current weather

A glanceable weather card with a large temperature reading and conditions.

109

Ride status

A live ride card with a big ETA and pick-up/driver facts.

110

Draft email

A composer Form with from/to/subject/body fields, submitting the collected values on send.

111

Shopping cart

A cart summary: line items, a Divider, subtotal/tax/total facts, and purchase actions.

112

Playlist

A media card with a cover image and a numbered track list, each row playable on its own.

113

Channel message

A chat message card with a channel/timestamp row, an author row with a round avatar, and a Markdown body.

114

Purchase receipt

A receipt card (Badge instead of Alert) with the purchased item, delivery/seller/paid facts, and a details link.

115

Weekly active users

A stacked two-series area chart with axis ticks and a legend.

116

Player card

A stat card with four Col-laid-out stats beneath the player header.

117

Conference session

A conference session card with a kicker, title, description, and two speaker rows with a View action.

118

Confirm dialog

A compact confirmation card with Yes/No buttons carrying distinct actions.

119

Response time

A single-series line chart with axis ticks.

120

Create task

A short task-creation Form: title, description, due date, and a submit button.

121

Software purchase

A plan-purchase Card form with volume/frequency selects, a total fact, and confirm/discard actions.

122

Support tickets

A stacked three-series bar chart with axis ticks and a legend.