Patterns
Browse 172 production-ready AI interface design patterns.
Instant Buy
One-click purchase from AI
Tool Switching in Composer
Switch between AI capabilities within composer
Context Chip Management
Adding context sources via menu with removable chips
Input Mode Toggle
Switch between text, voice, and dictation modes
Streaming
Token by token
Chat Artifacts
Side panel for content
Thread Branching
Edit and fork chats
Follow-up Chips
Suggested next turns
Smart Code Blocks
Interactive snippets
Progress Steps
Collapsible thinking and tool traces
Regeneration Carousel
Swipe bot responses
Response Refinement
Modify AI responses with contextual actions
Citation Tooltips
Hover for source
Visual Search
Search by image
Live Transcript
Real-time text from audio
In-painting
Modify specific areas
Variation Picker
4-grid selection
Generative UI
UI Components
Smart Diff
Track changes
Human in Loop
Approval flow
Live Presence
Who is here now
Inline Comment Thread
Discuss selections
Shared Session Link
Shareable AI context
Voice Visualizer
Feedback for voice mode
Skeleton Prediction
Structure prediction
Command Bar
Cmd+K for AI
Context Mentions
Reference files via @
Slash Commands
Quick actions via /
Plan & Execute
Breaking goals into steps
Tool Use
Visualizing AI using external tools
Workflow Builder
Visual drag-and-drop workflows
Memory Management
Viewing what AI remembers
Confidence Score
Probability UI
Magic Edit
Transform selection
Prompt Starters
Zero state examples
Voice Input
Speech-to-text with visual feedback
Multimodal Input
Images & Text
Prompt Templates
Starter prompts
Image Upscaling
AI-powered resolution enhancement
Style Transfer
Applying visual styles
Background Removal
Automatic background removal/transparency
Object Removal
Remove unwanted objects from images
Smart Recommendations
Context-aware product suggestions
Task Queue
Visual queue of agent tasks
Human Handoff
Escalating to humans
Escalation Thresholds
Auto-demote autonomy when risk crosses a line
Error Recovery Strategies
Configurable retry/fallback patterns
Scroll to Bottom
New message alert
Message Reactions
Quick emoji reactions
Conversation Summary
Auto-summarize long chats
Conversation History Search
Search through past conversations
Message Pinning
Pin important messages
Conversation Tags & Labels
Organize conversations with tags
Export Conversation
Export chats as PDF/Markdown/JSON
Conversation Templates
Save and reuse conversation starters
Text-to-Image with Advanced Controls
Advanced generation controls
Style Interpolation
Blend between multiple styles
Self-Correction
Agents fixing errors
Prompt Chaining
Multi-step logic
Conditional Logic & Branching
Branch workflows by conditions
Scheduled Tasks & Recurring Actions
Time-based automation triggers
Multi-step Forms with AI
Adaptive progressive forms
Approval Workflows
Human approval gates
Agent Orchestration
Visual flow for multiple agents
Agent Performance Metrics
Dashboard showing agent success rates
Agent Versioning
A/B test different agent configurations
Agent Marketplace
Browse and install pre-built agents
Voice Cloning
Clone and use custom voices
Real-time Translation
Live translation during voice conversations
Audio Enhancement
Noise reduction, clarity improvement
Voice Commands
Trigger actions via voice commands
Audio Summarization
Summarize long audio recordings
Natural Language Filter
Text to filters
Semantic Search
Search by meaning
Smart Form Fill
Unstructured to structured
Smart Bundles
Contextual upsell
Review Summary
Summarizing feedback
Smart Comparison
Dynamic tables
Price Drop Alerts
Notify users of price changes
Dynamic Pricing
AI-powered real-time price optimization
Inventory Prediction
Predict stock needs based on trends
Return Prediction
Predict likelihood of returns
Personalized Checkout
Custom checkout flow per user
AI-Powered Customer Support
Proactive support suggestions
AI Context Menu
Actions on select
Predictive Type
Ghost text
Tone Sliders
Adjust style
Persona Selector
Change AI role
Dynamic Follow-ups
Suggested questions
Gesture Input
Draw or gesture to trigger AI actions
File Upload with AI Preview
Upload files with AI-generated previews
Voice-to-Action
Voice commands that trigger specific actions
Smart Autocomplete
Context-aware autocomplete beyond text
Batch Input Processing
Process multiple inputs at once
Generative Charts
Text to viz
Instant Translation
Swap language
Feedback
Thumbs up/down
Progressive Disclosure
Gradually reveal complex information
Output Format Selection
Choose output format (JSON, CSV, Markdown)
Output Comparison View
Side-by-side comparison of multiple outputs
Output History
Browse and restore previous outputs
Output Sharing
Share outputs with permissions/links
Output Analytics
Track which outputs users prefer/use most
Knowledge Graph
Visualizing RAG
Fraud Alert
Verify suspicious acts
Citations
Footnotes
Privacy Filters
Masking PII
Source Browser
Side-by-side doc
Chain of Thought
Show reasoning
Confidence Indicators
Visual confidence levels for outputs
Data Ownership & Control
User control over AI data usage
Bias Detection
Flag potentially biased outputs
Fact-Checking Indicators
Real-time fact-checking status
Source Quality Scores
Rate source reliability
Audit Trail
Complete log of AI decisions and data usage
Transparency Report
Periodic reports on AI behavior/accuracy
Auto Tagging
AI metadata
Interactive Tutorials
Step-by-step AI guides
Example Prompts Library
Curated prompt examples
AI Tips & Tricks
Contextual AI guidance
Progressive Feature Unlock
Gradual AI introduction
AI Personality Customization
Customize AI assistant personality
Use Case Wizard
Guided setup based on user goals
First Success Flow
Guaranteed first successful AI interaction
Learning Path Recommendations
Personalized learning paths
Onboarding Progress Tracking
Visual progress through onboarding
Token Usage Indicator
API quota display
Processing Time Estimates
Expected wait times
Cost Transparency
Show operation costs
Rate Limit Warnings
API limit alerts
Caching Indicators
Show when cached results are used
Model Selection UI
Let users choose AI model (speed vs quality)
Batch Processing Queue
Queue multiple requests for efficiency
Performance Optimization Tips
AI suggests ways to improve performance
Resource Usage Dashboard
Visual dashboard of compute/memory usage
Infinite Canvas
Spatial AI organization
Prompt to UI
Text to Component
Theme Generation
Color system creation
Color Palette Generator
Generate color schemes from images/text
Component Variants
Generate multiple UI variations
Blast Radius Visualization
Preview scope before agent executes
Reversibility Marking
Label actions by how easily undone
Time-Delayed Execution
Cancelable countdown before high-impact actions
Suggest / Confirm / Execute
Three autonomy modes for AI agents
Pre-Task Cost Estimate
Forecast tokens, dollars, and time before run
Scope Disclosure
Plain-language agent permissions
Permission Drift Indicator
Surface accumulated agent permissions
Failure Disclosure
Honest signaling of AI limitations
Duration-Bound Consent
Permissions that expire by default
Granular Consent
Per-capability toggles, not bundled grants
Checkpoints and Restore
Named snapshots with one-click restore
Per-Action Autonomy
Autonomy scoped per capability, not per app
Autonomous Mode Display
Persistent signal when agent runs unattended
Autonomy Budgets
Time- or action-bounded unattended runs
Hard Budget Ceilings
Enforceable caps that stop the agent
Running Meters
Live token and cost counters during execution
Cross-Session Budget
Spending caps that persist across chats and devices
Context Portability
Legible payloads across app boundaries
Authentication Chains
Legible identity trails across agent actions
Responsibility Attribution
Trace which agent or human caused each action
Activation Boundaries
Explicit starts and stops for always-on agents
Ambient Presence Displays
Low-attention signals for agent state
Interruptibility
Single gesture to pause or cancel
Voice Confirmation
Spoken approval for high-stakes voice actions
Multi-User Awareness
Identify speaker and scope to their permissions
Agent Identity
Stable name, version, and capabilities per agent
Sandbox Preview
Dry-run plan with explicit side effects before execute
Revocation Affordances
One-click revoke beside the grant
Turn Ownership Indicator
Shows who currently has the turn
Interrupt and Resume
Stop mid-response and continue with context
Memory Scope Toggle
Set memory persistence per message
Repair Contract
Retry with explicit delta and constraints