AI UI Resources
Beautiful UI patterns and components for AI products. Prompt inputs, agent states, tool calls, citations, reasoning, voice, memory and more.
Every component on this site is live, interactive and copy-ready.
Tools
Free, in-browser tools for designing AI interfaces.
Design the control people use to pick a model — dropdown, segmented, pills or command list — and copy a dependency-free React component.
Compose a realistic AI chat screen — streaming, reasoning, tool calls, citations — and export it as a PNG for your landing page or deck.
Pick a brand color and generate a complete AI chat interface color scheme with live preview. Export as CSS variables or Tailwind config.
Popular Components
View all →The core input for AI chat products — with attachments, model selector, tools, voice and loading states.
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.
Rendered assistant reply — code blocks with copy, tables, lists and links.
Generic tool call row with inputs, outputs, status and expand/collapse.
Code execution tool call — the snippet, run state, stdout and error output.
Browse by Category
Prompt inputs, attachments, model selectors, voice and tool controls.
User and assistant messages, streaming, markdown, code and errors.
Thinking indicators, reasoning steps, agent progress and task states.
Search, browser, code execution and other tool call UIs.
Inline citations, source cards, and research source panels.
Agent status, queues, handoffs and human-in-the-loop approvals.
File uploads, attachments, context and token usage.
Voice input, waveforms, recording and conversation states.
Saved memories, remember-this suggestions, and persistent user context.
Model selectors, reasoning levels, tool toggles and generation controls.
Recently Added
View all →A voice conversation transcript with speaking indicators and per-turn replay.
Animated waveform bars with listening, recording and speaking states.
A voice input control that expands into a recording panel with waveform and transcript.
On/off switches for tools — web search, code execution, file access and more.
Controls how much the model thinks before answering — light, balanced or deep.
A standalone model picker with capability badges for choosing the right model.
AI Patterns
Complete, remix-ready interfaces — not just single components.
The canonical chat interface — sidebar, streaming messages, prompt input with model selector, and sources.
Open pattern →AI Research AssistantA research flow that shows search tool calls, reasoning, sources and a cited final answer.
Open pattern →AI Coding AgentA coding run with agent status, tool calls, diffs and a human-in-the-loop approval gate.
Open pattern →AI Voice AssistantA voice-first conversation — live waveform states, a recording input, a spoken transcript and a typed fallback.
Open pattern →Model & Memory PreferencesA preferences screen that picks the model, reasoning level and tools, and manages persistent memory.
Open pattern →Resources
A curated directory of libraries, generators and guides for building AI interfaces.
Inspiration
Product breakdowns and decision guides for AI interfaces — grounded in official docs, with a live demo of each pattern you can copy.
Most AI products stream by default — but streaming is a UX decision, not a protocol one. Here is when a streaming reveal earns its place, when a single rendered answer is better, and how to tell the difference.
GuideWhen should an AI agent pause for approval?The moment a tool call becomes consequential, an agent needs a human gate. Here is when to pause, what to show in the approval prompt, and how to keep approval from turning into a rubber stamp.
GuideKeeping users oriented during long-running agent tasksA task that runs for minutes needs more than a spinner: live progress, visible steps, and an escape hatch. Here is how the products that ship long-running agents keep users oriented — and in control.
GuideInterrupting the agent: stop controls done rightEvery long-running agent needs a way out — but a stop button that discards work is as bad as none. Here is how real products handle interruption: non-destructively, cleanly, and with the partial work kept.