Model Selection UI
Model selection UI lets users choose which model or tier runs a task—balancing speed, quality, cost, and tools—via a picker in the composer or settings. Clear labels beat raw model codenames so people can match the model to the job.
When to use
Perfect for AI platforms, developer tools, and applications where letting users choose models improves performance, cost efficiency, and user satisfaction.
When not to use
- 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.
Anti-patterns
- 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. |
Use this pattern in your project
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: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
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.
Related patterns
- Performance
Token Usage Indicator
API quota display
- Performance
Processing Time Estimates
Expected wait times
- Performance
Cost Transparency
Show operation costs
- Performance
Rate Limit Warnings
API limit alerts
- Performance
Caching Indicators
Show when cached results are used
- Performance
Batch Processing Queue
Queue multiple requests for efficiency