Outputs AI UX patterns
Output patterns for formatting, comparison, refinement, sharing, and history of model-generated results.
Essential patterns
Stream answers, refine drafts, compare options, and keep feedback tight.
- Outputs
Streaming
Show replies token-by-token as they generate
- Outputs
Progressive Disclosure
Gradually reveal complex information
- Outputs
Feedback
Collect thumbs and comments to improve answers
- Outputs
Generative UI
Render interactive UI components in the answer
- Outputs
Conversation Summary
Auto-summarize long chats
- Outputs
Output Comparison View
Side-by-side comparison of multiple outputs
17 patterns
Streaming
Show replies token-by-token as they generate
Smart Code Blocks
Interactive snippets
Generative UI
Render interactive UI components in the answer
Skeleton Screens
Show content shape while loading
Scroll to Bottom
New message alert
Message Reactions
Quick emoji reactions
Conversation Summary
Auto-summarize long chats
Generative Charts
Text to viz
Instant Translation
Swap language
Feedback
Collect thumbs and comments to improve answers
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
Auto Tagging
AI metadata
Frequently asked questions
How do output patterns help iteration?
They shorten the loop between first draft and shippable work, refine menus, diffs, version history, and export paths users expect from creative and doc tools.
When should I offer output comparison?
When users choose among models, prompts, or settings and need side-by-side diff, not for every reply, which adds noise to simple Q&A.
What belongs in output history versus chat history?
Output history indexes artifacts (images, code files, slides) with metadata; chat history indexes turns. Split them when artifacts outlive the thread.
How should refinement controls be scoped?
Apply refine actions to selections or blocks, show preview, and preserve undo. Global “make it better” without scope frustrates users editing long documents.
Do output patterns cover sharing and export?
Yes. Sharing links, format selection, and analytics appear here. Align permissions with trust patterns when outputs contain sensitive data.
Which patterns pair with codegen products?
Smart diff, output comparison, and regen carousels map well to code and copy workflows; see examples on individual pattern pages.