Overview
How might we let people trade speed, quality, and cost before send without exposing raw model codenames?
When tier choice changes the outcome
- ChatGPT, Claude, Perplexity, and Gemini where Flash vs Pro or effort tiers change latency and depth.
- Products with paid tiers where premium models need honest locks, not surprise downgrades after send.
- Composer-first apps where spend and wait time should be visible before the first token.
- Threads where switching models mid-conversation should leave a visible indicator in the bar.
When one model serves every job
- Single-model products with no meaningful quality or cost tradeoff.
- Audiences who should never see model names; prefer automatic routing with outcome labels only.
- Every nested dialog; one composer-level control is usually enough.
States
Design the picker and what it promises, not only the model name in a dropdown.
Default
A tier is preselected for the session or thread. The bar shows the current choice in plain language.
Browsing
The picker opens with speed, quality, and cost cues beside each option. Locks appear on gated tiers.
Selected
The person picks a model or effort level. Confirmation copy updates before the next send.
Locked
Free or plan limits block a tier. Upgrade or unlock paths are honest, not hidden until after failure.
Sending
The message goes out on the selected tier. The bar still shows which model handled the turn.
Switched
Mid-thread change applies to the next message. Prior answers stay labeled with the tier that produced them.
Key UX elements
The parts that must be present for model choice to feel fair and legible.
Put tier choice on the composer bar.
One tap to compare options beats burying model names in account settings after a slow answer.
Show the real model name, then explain it.
Use the exact model string people recognize (Sonar, GPT-5.4, Claude Sonnet 4.6). Pair it with a one-line job description so the list stays scannable.
State speed, quality, and cost together.
Each row should say what you gain and what you spend: wait time, credits, or tool access.
Gate premium tiers honestly.
Show locks and upgrade paths in the picker. Do not silently downgrade on free plans after send.
Keep the active model visible after pick.
The bar or message header should still show which model answered, especially after a mid-thread switch.
Remember choice per thread or workspace.
Session-level defaults reduce re-picking on every message without hiding the current model.
Anti-patterns to avoid
Raw internal model IDs with no speed/quality/cost explanation.
Hidden downgrades on free tiers without locks or honest gating.
Changing the model mid-thread without a visible indicator.
Equating “Pro” with quality when it only means higher rate limits.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | Model and mode choices with outcome-oriented labels in menus. |
| Claude | Model and effort on the composer for spend and quality before send. |
| Perplexity | Model picker on the bar; free tiers show locks on premium models. |
| Gemini | Flash nickname on the bar; picker uses plain-language thinking copy. |
Real-world examples
How shipped products implement model selection ui, from our teardown guides.
DeepSeekDeepSeek composer UX: DeepThink, Search & modes
Design the composer
Google AI ModeGoogle AI Mode composer UX: Canvas, Create & Lens
Design the composer
GrokGrok composer UX: skills, models & voice input
Design the composer
ManusManus composer UX: assign tasks, modes & agent tiers
Design the composer
PerplexityPerplexity composer UX: search modes & connectors
Design the composer
PerplexityPerplexity output UX: tabs, follow-ups & export
Output, artifacts & refinement
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Model Selection UI" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is a model selection UI in AI products?
A model selection UI is the control that lets users pick which AI model or tier handles their request, usually exposing tradeoffs between speed, quality, cost, and available tools.
Should I show model names or outcome labels?
Prefer outcome labels (“Faster”, “More reasoning”, “Deep research”) for mainstream users. Show model names for power users and developers who already have a mental model of the lineup.
Where should the model picker live?
Put it on the composer when cost and latency matter before send. Settings-only pickers are fine for defaults, but hide too much when users need per-task control.
How do I handle free vs paid models?
Show locks or upgrade affordances honestly on gated models. Silent fallback to a weaker model after the user picked a stronger one breaks trust.