AI Model Selector

Settings

Block

Dropdown selector for AI model selection with provider info, speed indicators, context window sizes, and badge labels. Supports controlled and uncontrolled modes.

Preview

Expandable model selector with detailed specifications

Claude Sonnet

Anthropic

Recommended

Collapsed State

Default collapsed view showing selected model

Claude Sonnet

Anthropic

Recommended

Controlled Selection

External state management with callbacks

Selected model: claude-sonnet

Claude Sonnet

Anthropic

Recommended

Custom Models

Provide your own model configurations

GPT-4 Turbo

OpenAI

Premium

Props

AIModelSelector component API reference

Prop	Type	Default	Description
`models`	`Model[]`	`(Claude & GPT models)`	Array of available AI models to display
`value`	`string`	—	Controlled selected model ID
`defaultValue`	`string`	`'claude-sonnet'`	Default selected model ID (uncontrolled mode)
`onValueChange`	`(modelId: string) => void`	—	Callback when model selection changes
`defaultOpen`	`boolean`	`false`	Initial expanded/collapsed state
`className`	`string`	—	Additional CSS classes for the container

Model Type

Prop	Type	Default	Description
`id*`	`string`	—	Unique model identifier
`name*`	`string`	—	Display name (e.g., "Claude Opus")
`provider*`	`string`	—	Provider name (e.g., "Anthropic", "OpenAI")
`description*`	`string`	—	Model description
`speed*`	`string`	—	Speed indicator (e.g., "Fast", "Fastest", "Slower")
`context*`	`string`	—	Context window size (e.g., "200K", "128K")
`badge`	`string \| null`	—	Optional badge label ("Premium", "Recommended")
`icon`	`LucideIcon`	—	Optional custom icon component

Usage

Import and implementation example

import { AIModelSelector } from '@/blocks/ai-tools/ai-model-selector'
import { Brain, Sparkles, Zap } from 'lucide-react'

export default function Example() {
  const [selectedModel, setSelectedModel] = useState('claude-sonnet')

  const customModels = [
    {
      id: 'gpt-4',
      name: 'GPT-4',
      provider: 'OpenAI',
      description: 'Most capable GPT model',
      speed: 'Fast',
      context: '128K',
      badge: 'Premium',
      icon: Sparkles,
    },
    {
      id: 'gpt-3.5',
      name: 'GPT-3.5 Turbo',
      provider: 'OpenAI',
      description: 'Fast and affordable',
      speed: 'Fastest',
      context: '16K',
      badge: null,
      icon: Zap,
    },
  ]

  return (
    <AIModelSelector
      models={customModels}
      value={selectedModel}
      onValueChange={setSelectedModel}
      defaultOpen={false}
    />
  )
}

Built With

1 component

This block uses the following UI components from the design system:

Badge

Features

Built-in functionality

Multiple models: Support for Claude Opus, Sonnet, Haiku, GPT-4o and custom models
Provider branding: Shows model provider (Anthropic, OpenAI, etc.)
Specifications: Displays speed and context window information
Badge labels: Premium and Recommended badges for highlighting
Visual selection: Checkmarks and highlighting for active model
Expandable dropdown: Collapsible interface with smooth chevron animation
Custom icons: Lucide icons for each model type
Controlled mode: External state management with onValueChange callback
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Toggle button is a native button elementModel options are native button elementsSelected state indicated visually with checkmark

Keyboard Navigation

Key	Action
`Tab`	Navigate between toggle and model options
`Enter / Space`	Toggle dropdown or select model

Notes

Chevron rotation indicates expanded/collapsed state
Selected model has visual checkmark and highlighted background
Provider info gives context about model source
Consider adding aria-expanded to toggle button
Consider adding role="listbox" for model options

Related Components

AI Prompt Input AI Context Panel Select Dropdown Menu