Model Selector

A modal-based AI model picker with provider filtering, search, starred models, and capability badges.

Installation

Usage

For provider icons, you can use svgl — a beautiful library of SVG logos for popular brands and services.

import {
  ModelSelector,
  ModelSelectorTrigger,
  ModelSelectorModal,
  type Provider,
  type Model,
} from '@/components/odysseyui/model-selector';

const PROVIDERS: Provider[] = [
  { id: 'openai', icon: <OpenAIIcon />, label: 'OpenAI' },
  { id: 'anthropic', icon: <AnthropicIcon />, label: 'Anthropic' },
];

const MODELS: Model[] = [
  {
    id: 'gpt-5.4',
    provider: 'openai',
    name: 'GPT-5.4',
    desc: "OpenAI's latest fast model for everyday chat",
    cost: '2x',
    tag: 'NEW',
    caps: ['vision', 'tools', 'search'],
    starred: true,
  },
  {
    id: 'claude-s-4.6',
    provider: 'anthropic',
    name: 'Claude Sonnet 4.6',
    desc: "Anthropic's latest Sonnet for real-world work",
    cost: '2x',
    tag: null,
    caps: ['vision', 'tools', 'search'],
    starred: false,
  },
];

export default function Page() {
  return (
    <ModelSelector
      providers={PROVIDERS}
      models={MODELS}
      defaultModel={MODELS[0]}
    >
      <ModelSelectorTrigger />
      <ModelSelectorModal />
    </ModelSelector>
  );
}

How It Works

ModelSelector is the root context provider — pass your providers, models, and an optional defaultModel.
ModelSelectorTrigger renders a pill button showing the active model name (with shimmer animation) and its cost multiplier.
ModelSelectorModal opens as a bottom sheet on mobile and a centered dialog on sm+ screens.
The header contains a live search input that filters models by name and description.
The sidebar lists provider icons for filtering by provider; clicking the active provider deselects it (shows all).
Each model row displays the provider icon, model name, optional tag badge, description, cost, capability badges, and a star toggle.
Starring is local state — starred models persist for the session via a Set<string>.
Selecting a model closes the modal and updates the trigger label.

API Reference

ModelSelector

Prop	Type	Default
`providers`	`Provider[]`	-
`models`	`Model[]`	-
`defaultModel?`	`Model`	-
`children`	`React.ReactNode`	-

ModelSelectorTrigger

Prop	Type	Default
`className?`	`string`	-

Provider

Prop	Type	Default
`id`	`string`	-
`icon`	`React.ReactNode`	-
`label`	`string`	-

Model

Prop	Type	Default
`id`	`string`	-
`provider`	`string`	-
`name`	`string`	-
`desc`	`string`	-
`cost`	`string`	-
`tag`	`string \| null`	-
`caps`	`string[]`	-
`starred`	`boolean`	-

Model Selector

On this page