Overview
Variations
Side-by-side comparison of generation alternatives
comparisonalternativesselection
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variations | VariationItem[] | required | Array of variation items with id, content, optional label, and metadata |
selectedId | string | undefined | ID of the currently selected variation |
onSelect | (id: string) => void | undefined | Callback fired when a variation is selected |
layout | "grid" | "list" | "tabs" | "grid" | Layout style for displaying variations |
columns | 2 | 3 | 2 | Number of columns in grid layout |
Docs
Generative AI is probabilistic by nature, meaning every run can produce a different result. The Variations pattern embraces this by generating multiple outputs from a single prompt and presenting them side by side for comparison. Users can browse divergent options — some closely matching their intent, others offering unexpected directions — and select the one that works best. This turns the model's inherent randomness from a liability into a creative advantage, supporting both exploratory brainstorming and convergent decision-making.
Variants
- Branched variations — Multiple outputs generated simultaneously from the same seed, displayed as a grid of thumbnails or cards. Users can refine any individual variation further.
- Convergent variations — A shortlist of alternatives presented inline within content or code. The user picks one, and it merges into the main output. Often triggered on demand or when model confidence is low.
- Preset variations — Outputs with pre-applied stylistic or tonal adjustments — e.g. formal vs. casual, concise vs. detailed — grouped together for quick comparison.
Use Cases
- Image generation where visual style exploration is key
- Copywriting to compare different tones and angles
- Code generation to evaluate alternative implementations
- Design tools offering multiple layout or color options
- Translation tools presenting equivalent phrasing options
Best Practices
- Keep follow-up actions close at hand — once a user selects a variation, the next step (edit, refine, export) should be immediately accessible.
- Allow regeneration of the entire variation set when none of the options hit the mark.
- Expose controls for variation count, seed consistency, and divergence level so users can tune the spread of results.
- Track metadata about how each variation was produced so users can understand why outputs differ.
- Never overwrite the original output without explicit confirmation — accidental loss of a preferred version breaks trust quickly.