Elements

Every state an assistant can be in.

37 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

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

02

Messages

5 elements
06

Message pair

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

07

Message branches

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

08

Message actions

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

09

Follow-up suggestions

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

10

Error state

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

03

Tool use

4 elements
11

Tool call

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

12

Tool timeline

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

13

Terminal block

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

14

Code diff

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

04

Knowledge

4 elements
15

Web search

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

16

Sources

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

17

Inline citation

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

18

Image generation

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

05

Structured output

2 elements
19

Data table

A small comparison table the model can answer with directly.

20

Number ticker

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

06

Agents

6 elements
21

Agent plan

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

22

Subagent list

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

23

Agent status

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

24

Approval card

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

25

Recommendation card

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

26

Artifact card

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

07

Composer

7 elements
27

Composer

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

28

Slash commands

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

29

Mentions

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

30

Attachments

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

31

Model picker

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

32

Voice

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

33

Context

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

08

Thread

4 elements
34

Chat panel

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

35

Empty state

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

36

Thread list

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

37

Scroll anchor

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