Every state an assistant can be in.

151 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

13 elements
19

Tool call

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

20

Run activity

Commentary and tools in one disclosure, with the final answer always visible.

21

Tool timeline

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

22

Terminal block

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

23

Code diff

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

24

Reviewable diff

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

25

File tree

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

26

Elicitation form

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

27

Server panel

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

28

Tool failure

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

29

Permission grant

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

30

Computer use

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

31

Code runner

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

04

Knowledge

11 elements
32

Web search

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

33

Inline citation

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

34

Link preview

A returned URL unfurled into a card with enough context to decide whether to open it.

35

Image generation

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

36

Image gallery

A compact grid of returned images that opens each one in a shared lightbox.

37

Retrieval chunks

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

38

Document reference

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

39

Memory

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

40

Research report

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

41

Map

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

42

Geo map

Places and routes on a real tiled map, with an accessible list of every place.

05

Structured output

14 elements
43

Data table

A tool's rows and columns with formatting, sorting, and a card layout in narrow columns.

44

Number ticker

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

45

Chart

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

46

Media player

Audio and video a tool returned, played inline without leaving the thread.

47

Web preview

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

48

Diagram

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

49

Flow graph

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

50

Activity graph

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

51

Math

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

52

Spec sheet

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

53

Comparison

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

54

Timeline

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

55

Job progress

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

56

Score breakdown

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

06

Agents

15 elements
57

Agent plan

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

58

Subagent list

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

59

Task card

AUI

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

60

Agent status

AUI

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

61

Approval card

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

62

Option list

The agent asks a question with a few answers; the pick returns to it and stays as a receipt.

63

Question flow

A few short questions asked one at a time, answered together and kept as a receipt.

64

Recommendation card

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

65

Artifact card

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

66

Todo list

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

67

Agent card

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

68

Handoff

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

69

Background runs

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

70

Checkpoints

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

71

Schedule

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

07

Observability

3 elements
72

Trace waterfall

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

73

Cost meter

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

74

Quota banner

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

08

Composer

11 elements
75

Composer

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

76

Slash commands

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

77

Mentions

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

78

Attachments

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

79

Models

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

80

Dictation

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

81

Context

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

82

Draft restore

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

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

AUI

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

12 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

Scroll anchor

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

91

Canvas

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

92

Connection state

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

93

Shared conversation

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

94

Search in conversation

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

95

Thread search

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

96

Launcher

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

97

Settings

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

98

Onboarding

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

99

Mobile composer

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

11

AUI connected

22 elements
100

Thread

AUI

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

101

Assistant modal

AUI

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

102

Assistant sidebar

AUI

A resizable side panel for copilot experiences and contextual assistance.

103

Thread list

AUI

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

104

Thread list sidebar

AUI

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

105

Orb

AUI

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

106

Reasoning

AUI

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

107

Message timing

AUI

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

108

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.

109

Context display

AUI

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

110

MCP config dialog

AUI

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

111

Attachment

AUI

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

112

Follow-up suggestions

AUI

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

113

Tool fallback

AUI

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

114

Tool group

AUI

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

115

Quote

AUI

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

116

Sources

AUI

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

117

Image

AUI

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

118

File

AUI

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

119

Model selector

AUI

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

120

Composer trigger popover

AUI

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

121

Directive text

AUI

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

12

Renderers

5 elements
122

Markdown text

AUI

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

123

Syntax highlighter

Prism-based code highlighting for assistant markdown code blocks.

124

Shiki highlighter

AUI

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

125

Mermaid diagram

Mermaid diagrams rendered inside messages, including partial streaming input.

126

Generative UI

A styled component library for rendering structured generative UI output.

13

Primitives

3 elements
127

Tooltip icon button

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

128

Model logos

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

129

Heat graph

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

14

Generative

22 elements
130

Riverside Loft

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

131

Table reservation

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

132

Order tracking

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

133

Flight tracker

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

134

Portfolio overview

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

135

Create event

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

136

View event

A compact single-event summary card.

137

Current weather

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

138

Ride status

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

139

Draft email

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

140

Shopping cart

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

141

Playlist

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

142

Channel message

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

143

Purchase receipt

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

144

Weekly active users

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

145

Player card

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

146

Conference session

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

147

Confirm dialog

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

148

Response time

A single-series line chart with axis ticks.

149

Create task

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

150

Software purchase

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

151

Support tickets

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