Patterns
Copy-paste animated UI patterns for AI products, organized by category.
Filter by the job a pattern does for the user, across categories.
agents
10 patternsCreate Agent
A two-step wizard card for naming an agent, picking its icon, and selecting which event sources activate it.
Agent Triggers
A configuration panel for listing and toggling the external events that activate an agent, with a manual run control.
Human in the Loop Question
A compact dialog that pauses an agent mid-task to collect a structured choice — radio options, a free-text fallback, skip/continue controls, and multi-step pagination.
Background Tasks Drawer
A side drawer that tracks an agent's background work live — running tasks with elapsed time, stats, and stop controls, plus an expandable history of finished commands and output.
Instruction Tool Insert
A numbered instruction editor where typing / opens a two-step inline picker — choose a tool, then its connector or target — inserting an atomic, editable chip into the prose.
Procedure Builder
A doc-style editor for an agent's step-by-step procedure — a / step picker, IF / ELSE branches with plain-language or code conditions, section jumps, and escalate / switch actions.
Task List
A live, agent-authored plan — an ordered list of steps marked pending, in progress, or completed as the agent works through them.
Agent Run Card
A compact run card with the agent's current step and a timer, a segmented progress bar, and a list of finished steps that stacks up as it reads, edits, tests and pushes.
Wait Time Handoff
A collapsible settings card for what an agent does when the customer goes quiet — a wait duration, a Team / Workflow handoff target, the handoff message, and a working-hours option.
- New
Plan Review
An editable plan shown before an agent runs — reword, reorder, remove or add steps, or ask for a new plan — that locks once approved.
traces
3 patternsMulti-Agent Trace
A tree of parallel sub-agent tasks, each with its own status and step list.
Expandable Trace
A collapsible "Thought for Xs" summary that expands into a step-by-step trace.
Stream of Thought
A live, timed header over reasoning that streams in as a step timeline, then folds into a "Thought for Ns" trace when the answer starts.
loaders
4 patternsThinking Loader
A loader with a shimmering label and a live elapsed-time counter.
Drawing Icon
A line icon that draws itself stroke by stroke while the step it stands for is running.
Tool Call Chip
An inline pill naming an in-flight tool call that resolves into a result summary.
Analysis List
A full-width indeterminate progress bar over a list whose items resolve from skeletons one by one.
text
7 patternsStreaming Text
A streamed answer with inline sources, actions, and follow-ups.
Inline Citation
A hoverable, clickable footnote-style source marker inline within text.
Sources Stack
An overlapping stack of source favicons with a count, expanding into a linked source list.
Source Trust Card
A paginated single-source card with a trust badge and domain pills for jumping between sources.
Follow-Up List
A vertical list of suggested next questions shown after a response, each sendable with a tap.
Selection Actions
A floating toolbar on text selection for describing edits, explaining, or improving a passage.
Refinement Controls
One-tap adjustments (Rephrase, Shorten, More formal, Bulletize…) and a free-form instruction field docked under an AI output, with every result kept as a steppable version.
composer
8 patternsPrompt Bar
A composer with @ sources, / commands, a model picker, and dictation.
Prompt Bar Pro
A first-run composer with suggestion chips, @ sources, / commands, an environment picker, and an orchestrator picker.
Quick Chat Dock
A hidden bottom-edge handle that wakes into an action dock on hover and summons a floating prompt bar.
Message Queue
A composer that keeps working mid-turn: ⌘Enter queues follow-ups above the input to send now, edit, or auto-send when the agent finishes.
- New
Model Picker
A composer chip that opens a list of models, each with a one-line description, plan-locked options that lead to an upgrade, and an extended-thinking switch.
- New
Incognito Toggle
A header control that starts a temporary chat, with a persistent banner stating exactly what won't be saved, remembered or used for training.
- New
Prompt Enhancer
An Enhance button that rewrites a short prompt into a specific one in place, highlighting what it added, with one-click undo.
- New
Prompt Template
A prompt written as a sentence with inline blanks — free-text slots that grow as you type and choice slots — that runs once the blanks are filled.
code
4 patternsDiff Summary Card
A collapsed summary of a batch of file edits, with undo and an overflow list.
Diff Tabs
Per-file chips that switch an inline diff viewer between a batch of changed files.
Code Preview Block
A code block that flips between the source and a sandboxed live rendering of it.
Terminal Stream
An auto-scrolling, collapsible panel streaming raw command output line by line.
flowcharts
1 patternmessages
3 patternsChat Bubble with Actions
A message bubble with feedback thumbs, edit-and-resubmit, retry/regenerate, and a version stepper.
- New
Clarifying Questions
A short card of questions before an ambiguous task, each pre-filled with the assistant's suggested answer, that collapses into a summary once started.
- New
Conversation Branches
Editing a sent message creates a new branch instead of overwriting it, with a ‹ 2 / 3 › switcher that swaps the message and its reply together.
permissions
3 patternsTool Approval
A pending tool-call prompt with allow, always-allow, and deny actions.
Connector Panel
A settings panel for connecting an app or MCP server — shows capabilities overview, groups tools by type, and lets users set per-tool permission levels.
- New
Memory Panel
A panel listing what the assistant remembers about the user — edit or forget each memory with undo, switch memory off, forget all — plus a memory-updated notice for the chat.
uploads
1 patternmedia
1 patternerrors
5 patternsRate Limit
A quota-exceeded state with a live countdown to when the user can send again.
Partial Response
A cut-short assistant reply with Continue and Retry actions.
Generation Error
A console-style error card for a failed generation, with details and retry.
Console Error Card
A structured card surfacing a browser console error with a code frame, call stack, and navigation.
Connectivity Error
A dismissible card surfacing a network connection failure with a description and retry/details actions.
compare
1 patternindicators
4 patternsConfidence Indicator
A badge or inline dot signaling how sure an AI answer or extraction is.
- New
AI Disclosure Badge
An AI-generated label in chip, image-overlay and inline forms that opens a provenance card: model, time, and whether a person edited it.
Cost Estimate
A pre-run estimate of what a task will cost, with a live balance meter, a low-balance warning, a top-up when the balance can't cover it and a breakdown.
- New
Context Usage
A context-window meter: tokens used against the limit, a segmented bar of what fills it, a legend to inspect each source and a Compact action to free space.
voice
4 patternsVoice Waveform
A live amplitude waveform while the AI listens or speaks.
Voice Orb
A 3D particle sphere that breathes and spins with the voice conversation.
Listening State
A pulsing mic indicator showing the AI is actively listening.
Live Transcript
A streaming, speaker-labeled transcription of a voice conversation.
collaboration
1 patternaccess
1 patternonboarding
2 patternsPrompt-Driven Onboarding
A setup screen that hands users a pre-filled prompt to paste into their AI coding agent, with a snippet fallback and a live listener that confirms the first event.
Agent Setup Pill
A floating pill that copies a setup prompt for the user's AI coding agent in one click — outcome label, a row of supported agents, a tooltip that says what the click does, and a separate dismiss button.
tables
3 patternsDescribe Filters
A Describe button in a table toolbar that turns a plain-language request into removable filter chips — column filters where a column exists, marked semantic matches where none does.
AI Fill Drawer
A record drawer of key/value fields where the model fills the empty values — each arrives as a sourced suggestion to accept, edit or reject.
Natural Language Query
A SQL-first query bar that also takes plain language — the mode badge flips to Ask, and Enter translates the request into a visible, editable WHERE clause before running it.
