AI Interfaces.

The surfaces AI products are actually made of. Streaming chat bubbles, prompt composers with attachments and model pickers, agent tool-traces, reasoning panels and permission prompts.

20 componentsHover to copyStreaming-readyTailwind CSS

Buttons Inputs Badges & Chips Cards Forms Loaders Navigation Overlay Feedback Data Display Text Effects Backgrounds Effects Hero Sections Landing Blog & Content Layout Dashboard AI Interfaces E-commerce Auth Settings

Transcript

Chat surfaces

Message pairs, streaming responses with a live caret, hover actions, inline citations and code replies.

6 variants

Build me a pricing page

On it — three tiers, monthly/yearly toggle.

Message pair

tsx

Stateful

Streaming response

tsx

✦

Typing indicator

tsx

Deployed to production in 41s.

Message actions

tsx

Tailwind v4 ships a CSS-first config¹

1tailwindcss.com/blog/v4

Citations

tsx

button.tsx

export const Btn = () => (
  <button>Go</button>
);

Code block reply

tsx

Input

Prompt composers

The input bar is the product. Attachments, tool toggles, model pickers, voice capture and context meters.

6 variants

Signature

Prompt composer

tsx

Opus 5

Most capable

✓

Sonnet 5

Fast + smart

Haiku 4.5

Fastest

Model picker

tsx

Suggestion chips

tsx

PDFspec.pdfPNGhero.png

Attachment row

tsx

Voice input

tsx

Context128k / 200k

Token meter

tsx

Autonomy

Agent surfaces

Tool-call traces, collapsible reasoning, diff previews and permission prompts — the UI an agent needs to stay legible.

8 variants

✓read_file · view.tsx

✓grep · "Variant"

write_file · gallery.tsx

Signature

Tool trace

tsx

▾ Thought for 4s

The user wants a dense gallery. A tile grid keyed off a variant array scales better than one card per component.

Reasoning panel

tsx

🤖

Reviewer

Scanning 14 files

Agent card

tsx

Gallery.tsx

- cols = 3

+ cols = 4

return grid

Diff preview

tsx

Run rm -rf build?

This deletes the build directory.

Approval prompt

tsx

tailwindcss.comreact.devnextjs.org

Sources row

tsx

✦ Generating UI

Generating skeleton

tsx

1,284 tokens · $0.006

Cost badge

tsx

AI Interfaces.

The surfaces AI products are actually made of. Streaming chat bubbles, prompt composers with attachments and model pickers, agent tool-traces, reasoning panels and permission prompts.

20 componentsHover to copyStreaming-readyTailwind CSS

Transcript

Chat surfaces

Message pairs, streaming responses with a live caret, hover actions, inline citations and code replies.

6 variants

Build me a pricing page

On it — three tiers, monthly/yearly toggle.

Message pair

tsx

Stateful

Streaming response

tsx

✦

Typing indicator

tsx

Deployed to production in 41s.

Message actions

tsx

Tailwind v4 ships a CSS-first config¹

1tailwindcss.com/blog/v4

Citations

tsx

button.tsx

export const Btn = () => (
  <button>Go</button>
);

Code block reply

tsx

Input

Prompt composers

The input bar is the product. Attachments, tool toggles, model pickers, voice capture and context meters.

6 variants

Signature

Prompt composer

tsx

Opus 5

Most capable

✓

Sonnet 5

Fast + smart

Haiku 4.5

Fastest

Model picker

tsx

Suggestion chips

tsx

PDFspec.pdfPNGhero.png

Attachment row

tsx

Voice input

tsx

Context128k / 200k

Token meter

tsx

Autonomy

Agent surfaces

Tool-call traces, collapsible reasoning, diff previews and permission prompts — the UI an agent needs to stay legible.

8 variants

✓read_file · view.tsx

✓grep · "Variant"

write_file · gallery.tsx

Signature

Tool trace

tsx

▾ Thought for 4s

The user wants a dense gallery. A tile grid keyed off a variant array scales better than one card per component.

Reasoning panel

tsx

🤖

Reviewer

Scanning 14 files

Agent card

tsx

Gallery.tsx

- cols = 3

+ cols = 4

return grid

Diff preview

tsx

Run rm -rf build?

This deletes the build directory.

Approval prompt

tsx

tailwindcss.comreact.devnextjs.org

Sources row

tsx

✦ Generating UI

Generating skeleton

tsx

1,284 tokens · $0.006

Cost badge

tsx