Patterns

Browse production-ready AI interface design patterns. Each pattern includes examples, best practices, and implementation guidance.

24 patterns

Outputs

Streaming

Token by token display of AI responses as they generate

Chatbot

Chat Artifacts

Side panel for code, documents, and rich content

Chatbot

Thread Branching

Edit messages and fork conversations into new paths

Inputs

Follow-up Chips

Suggested next actions or questions after AI response

Trust

Progress Steps

Collapsible thinking traces and tool execution status

Chatbot

Regeneration Carousel

Swipe through multiple AI response alternatives

Trust

Citation Tooltips

Hover to preview sources inline

Audio

Live Transcript

Real-time text transcription from audio

Design Tools

In-painting

Modify specific areas of generated images

Design Tools

Variation Picker

4-grid selection for image variations

Outputs

Generative UI

AI-generated interactive UI components

Collaboration

Smart Diff

Track and visualize AI-made changes

Collaboration

Human in Loop

Approval flows for AI actions

Inputs

Tool Switching in Composer

Switch between AI capabilities within input

Inputs

Context Chip Management

Add and remove context sources via chips

Commerce

Instant Buy

One-click purchase from AI recommendations

Audio

Voice Visualizer

Visual feedback for voice input

Outputs

Skeleton Prediction

Structure prediction while loading

Chatbot

Response Refinement

Contextual actions to modify AI responses

Agents

Agent Handoff

Seamless transfer between AI and human agents

Agents

Task Decomposition

Breaking complex tasks into visible steps

Trust

Confidence Indicators

Visual cues showing AI certainty levels

Trust

Memory Management

User control over AI memory and context

Outputs

Smart Code Blocks

Interactive code with copy, run, and edit

Built with v0