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.

01

Reasoning

6 elements
01

Loader

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

Streaming text

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

04

Typing indicator

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

05

Reasoning effort

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

06

Guardrail notice

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

02

Messages

12 elements
07

Message pair

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

08

Message branches

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

09

Message actions

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

10

Error state

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

11

Message queue

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

12

Edit a sent message

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

13

Feedback dialog

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

14

Stopped run

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

15

Timestamps

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

16

Speaker identity

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

17

Regenerate with

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

18

Confidence

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

03

Tool use

12 elements
19

Tool call

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

20

Tool timeline

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

21

Terminal block

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

22

Code diff

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

23

Reviewable diff

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

24

File tree

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

25

Elicitation form

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

26

Server panel

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

27

Tool failure

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

28

Permission grant

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

29

Computer use

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

30

Code runner

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

04

Knowledge

8 elements
31

Web search

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

32

Inline citation

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

33

Image generation

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

34

Retrieval chunks

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

35

Document reference

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

36

Memory

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

37

Research report

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

38

Map

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

05

Structured output

13 elements
39

Data table

A small comparison table the model can answer with directly.

40

Number ticker

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

41

Chart

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

42

Web preview

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

43

Diagram

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

44

Flow graph

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

45

Activity graph

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

46

Math

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

47

Spec sheet

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

48

Comparison

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

49

Timeline

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

50

Job progress

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

51

Score breakdown

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

06

Agents

13 elements
52

Agent plan

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

53

Subagent list

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

54

Task card

AUI

A delegated task with its state, timing, result, and transcript in one card.

55

Agent status

AUI

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

56

Approval card

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

57

Recommendation card

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

58

Artifact card

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

59

Todo list

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

60

Agent card

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

61

Handoff

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

62

Background runs

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

63

Checkpoints

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

64

Schedule

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

07

Observability

3 elements
65

Trace waterfall

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

66

Cost meter

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

67

Quota banner

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

08

Composer

11 elements
68

Composer

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

69

Slash commands

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

70

Mentions

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

71

Attachments

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

72

Models

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

73

Dictation

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

74

Context

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

75

Draft restore

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

76

Context breakdown

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

77

Prompt library

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

78

Command palette

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

09

Voice

2 elements
79

Voice conversation

AUI

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

80

Read aloud

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

10

Thread

12 elements
81

Chat panel

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

82

Empty state

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

83

Scroll anchor

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

84

Canvas

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

85

Connection state

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

86

Shared conversation

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

87

Search in conversation

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

88

Thread search

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

89

Launcher

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

90

Settings

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

91

Onboarding

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

92

Mobile composer

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

11

AUI connected

22 elements
93

Thread

AUI

A complete chat container with messages, composer, auto-scroll, and accessibility built in.

94

Assistant modal

AUI

A floating chat bubble for support widgets, help desks, and embedded assistants, with a thread list and a resizable window.

95

Assistant sidebar

AUI

A resizable side panel for copilot experiences and contextual assistance.

96

Thread list

AUI

Runtime-backed conversation switching with search, active selection, and thread actions.

97

Thread list sidebar

AUI

A complete sidebar shell that places the runtime thread list beside the active conversation.

98

Orb

AUI

The realtime voice orb, with connection, mute, and speaking state controls.

99

Reasoning

AUI

A collapsible renderer for assistant reasoning that follows the active message part.

100

Message timing

AUI

Streaming statistics for the current message, including first token, total time, and speed.

101

Conversation map

AUI

A 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.

102

Context display

AUI

Model context usage as a ring, bar, or text value with a detailed hover view.

103

MCP config dialog

AUI

A dialog for connectors and custom MCP servers, including authentication and connection state.

104

Attachment

AUI

Runtime attachments for the composer and messages, with previews, progress, and removal.

105

Follow-up suggestions

AUI

Prompt chips populated from the runtime's generated follow-up suggestions.

106

Tool fallback

AUI

The default runtime renderer for tool calls that do not have dedicated UI.

107

Tool group

AUI

A collapsible runtime wrapper around consecutive tool calls in one assistant turn.

108

Quote

AUI

Select message text, quote it from a floating toolbar, and carry it into the composer.

109

Sources

AUI

Runtime sources with favicon links for URLs and file badges for documents.

110

Image

AUI

Image message parts with preview, loading states, actions, and a fullscreen view.

111

File

AUI

File message parts with type-aware icons, filename, size, and download actions.

112

Model selector

AUI

A searchable runtime model picker with grouped providers and reasoning effort controls.

113

Composer trigger popover

AUI

A character-triggered picker for mentions, slash commands, and nested composer actions.

114

Directive text

AUI

A message renderer that turns mention directives into inline, runtime-aware chips.

12

Renderers

5 elements
115

Markdown text

AUI

Assistant markdown with headings, lists, links, tables, and code blocks.

116

Syntax highlighter

Prism-based code highlighting for assistant markdown code blocks.

117

Shiki highlighter

AUI

Shiki code highlighting that defers tokenization until a message part settles.

118

Mermaid diagram

Mermaid diagrams rendered inside messages, including partial streaming input.

119

Generative UI

A styled component library for rendering structured generative UI output.

13

Primitives

3 elements
120

Tooltip icon button

An accessible icon button with a tooltip label and shared interaction states.

121

Model logos

Inline SVG marks for OpenAI, Anthropic, and Google model providers.

122

Heat graph

An activity heat map with month labels, weekday labels, legend, and tooltip.

14

Generative

22 elements
123

Riverside Loft

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

124

Table reservation

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

125

Order tracking

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

126

Flight tracker

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

127

Portfolio overview

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

128

Create event

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

129

View event

A compact single-event summary card.

130

Current weather

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

131

Ride status

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

132

Draft email

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

133

Shopping cart

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

134

Playlist

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

135

Channel message

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

136

Purchase receipt

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

137

Weekly active users

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

138

Player card

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

139

Conference session

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

140

Confirm dialog

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

141

Response time

A single-series line chart with axis ticks.

142

Create task

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

143

Software purchase

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

144

Support tickets

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