Model Selector
A searchable command palette for selecting AI models in your chat interface.
Basic Example
Installation
If you prefer using jsrepo, please install via the command below:
Usage
With Dialog
Use the standalone dialog variant for a simpler API:
Select AI Model
Choose a model to use
Component Structure
The Model Selector component is composed of several sub-components:
- ModelSelector - Main wrapper with dialog functionality
- ModelSelectorTrigger - Trigger button to open the selector
- ModelSelectorContent - Dialog content with command palette
- ModelSelectorDialog - Standalone dialog variant (combines ModelSelector + Content)
- ModelSelectorInput - Search input field
- ModelSelectorList - List container for results
- ModelSelectorEmpty - Empty state when no results found
- ModelSelectorGroup - Group models by provider/category
- ModelSelectorItem - Individual model item
- ModelSelectorLogo - Provider logo from models.dev
- ModelSelectorLogoGroup - Container for multiple provider logos
- ModelSelectorName - Model name display
- ModelSelectorSeparator - Visual separator
- ModelSelectorShortcut - Keyboard shortcut display
API Reference
ModelSelector
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state (bindable) |
children | Snippet | - | Selector content (required) |
ModelSelectorDialog
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state (bindable) |
title | string | "Model Selector" | Dialog title |
description | string | "Search for a model" | Dialog description |
children | Snippet | - | Dialog content (required) |
ModelSelectorLogo
| Prop | Type | Default | Description |
|---|---|---|---|
provider | string | - | Provider slug (e.g., "openai", "anthropic") |
class | string | - | Additional CSS classes |
ModelSelectorGroup
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | - | Group heading text |
children | Snippet | - | Group items (required) |
ModelSelectorItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Item value for search/selection |
onSelect | () => void | - | Callback when item is selected |
children | Snippet | - | Item content (required) |
Provider Logos
The ModelSelectorLogo component fetches provider logos from models.dev. Supported providers include:
- OpenAI, Anthropic, Google, Meta (Llama)
- DeepSeek, Mistral, Alibaba, xAI
- Perplexity, Cohere, Amazon Bedrock
- Azure, Groq, Together AI, OpenRouter
- And 50+ more providers
Notes
- Built on top of shadcn-svelte's Dialog and Command components.
- Fully searchable with fuzzy matching.
- Keyboard navigation support (arrow keys, enter, escape).
- Accessible with proper ARIA labels.
- Provider logos are automatically loaded from models.dev CDN.
- Perfect for AI chat applications, model comparison tools, and API playgrounds.