Overview
Model Management
Model selector with provider grouping and details
modelsselectionconfiguration
Props
| Prop | Type | Default | Description |
|---|---|---|---|
models | ModelInfo[] | required | Array of model definitions with id, name, provider, description, contextWindow, maxTokens, costPer1kInput, costPer1kOutput, capabilities |
selectedModelId | string | required | ID of the currently selected model |
onSelectModel | (modelId: string) => void | required | Callback fired when a model is selected |
showDetails | boolean | false | Whether to show expanded model details (context window, costs) |
groupByProvider | boolean | false | Group models under their provider headings |
Docs
Different AI models come with different strengths, trade-offs, and price points. Model Management gives users the ability to choose which model powers their generation — whether they're optimizing for accuracy, speed, cost, creative style, or compliance requirements. Users may prototype on a lightweight model and switch to a premium one for final output, benchmark the same prompt across providers, or avoid certain models when handling sensitive data. This pattern surfaces those choices clearly rather than hiding them behind automatic routing.
Variants
- Dropdown selector — A compact picker that lists available models with key metadata like provider, capability tier, and price indicator.
- Grouped catalog — Models organized by provider, tier (free / pro / enterprise), or domain specialization, with expandable detail cards.
- Inline indicator — A persistent label near the input or output area showing the active model, clickable to switch without navigating away.
Use Cases
- Multi-provider platforms offering models from OpenAI, Anthropic, Google, and others
- Development environments where engineers benchmark across models
- Cost optimization workflows where users shift to cheaper models for drafts
- Compliance-sensitive environments restricting certain model providers
- Creative applications where different models produce distinct aesthetic styles
Best Practices
- Always display the active model visibly near the generation point so users know what's powering their output.
- Translate model differences into practical terms — accuracy, speed, creativity, cost, recency — rather than relying on technical model names alone.
- Allow seamless mid-conversation model switching without losing context or chat history.
- Surface usage costs within the selector so users can weigh price against capability before committing.
- Support both automatic routing (system picks the best model) and manual override (user picks explicitly), defaulting to whichever fits the audience.