Agents
Model Selector
Pick the model: grouped by provider, searchable, with context and tags.
Model Selector picks the model for the next message: a compact pill for the composer toolbar, and a searchable list grouped by provider showing each model's context window and capabilities.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/model-selector.jsonThe CLI also installs the Cuelark theme tokens and the components it builds on. With the @cuelark namespace configured, use @cuelark/model-selector.
Usage
import { ModelSelector } from "@/components/ui/model-selector";
<ModelSelector models={models} value={model} onValueChange={setModel} />API reference
ModelSelector
| Prop | Type | Default | Description |
|---|---|---|---|
| models | { id; name; provider; context?; tags? }[] | — | Choices. |
| value / defaultValue · onValueChange | string | — | Selection. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai model selector · llm model picker react · model dropdown chat · choose ai model ui · shadcn ai model selector