AI Model Selector

AI
Settings

Dropdown selector for AI model selection with capabilities and pricing

Interactive Preview

Select between different AI models with detailed specifications

Features

  • Multiple model options (Claude Opus, Sonnet, Haiku, GPT-4o)
  • Provider information and branding
  • Speed and context window specifications
  • Badge labels (Premium, Recommended)
  • Visual selection state with checkmarks
  • Expandable/collapsible dropdown interface

Installation

This component uses TypeScript with React state management for model selection. It integrates with the Eidetic design system tokens for consistent styling.

// Required imports
import { Brain, ChevronDown, CheckCircle2 } from 'lucide-react'
import { useState } from 'react'