29 AI UI Components

The core input for AI chat products — with attachments, model selector, tools, voice and loading states.

Prompt input with file attachment chips, upload progress and removal.

Prompt input with an inline model picker and capability badges.

Assistant message that renders token-by-token with a cursor and stop control.

The user's turn — right-aligned bubble with copy, edit and regenerate actions.

Action row under a message — copy, regenerate, share and feedback.

Assistant error state with a plain explanation and a retry or countdown action.

Rendered assistant reply — code blocks with copy, tables, lists and links.

Collapsible reasoning trace with elapsed time and step indicators.

Animated pre-stream indicator — bouncing dots, a caret, or a labeled status line.

Collapsible multi-step reasoning trace with per-step status and an elapsed timer.

Generic tool call row with inputs, outputs, status and expand/collapse.

Web search tool call with query, result count and source previews.

Code execution tool call — the snippet, run state, stdout and error output.

A cited source with favicon, title, domain and snippet.

Inline citation markers with hover preview cards.

Status UI for autonomous AI agents — running, waiting, completed and failed.

Human-in-the-loop approval card with action details and allow/deny controls.

File upload dropzone with progress, type icons and error states.

Panel of files in context with sizes, token usage and inline removal.

A voice input control that expands into a recording panel with waveform and transcript.

Animated waveform bars with listening, recording and speaking states.

A voice conversation transcript with speaking indicators and per-turn replay.

A memory panel — saved facts the assistant holds about the user, with add and forget.

Want me to remember this? — the assistant proposes saving a fact before doing it.

A compact inline chip confirming something was saved to memory.

A standalone model picker with capability badges for choosing the right model.

Controls how much the model thinks before answering — light, balanced or deep.

On/off switches for tools — web search, code execution, file access and more.