Choose AI Model Modal

AI model selection modal with comparison features. Perfect for letting users choose between different AI models with detailed information.

Features

Model comparison and selection
Detailed model information display
Model capabilities and specifications
Pricing and usage information
Visual model cards with icons
Selection confirmation

Example

Select AI Model

Click the button below to open the AI model selection modal. Compare different models and choose the one that fits your needs.

Usage

import { ChooseAiModelModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleSelect = (model: AIModel) => {
    console.log('Selected model:', model)
    setIsOpen(false)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Choose AI Model
      </Button>
      
      <ChooseAiModelModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSelect={handleSelect}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onSelect	(model) => void	-	Callback with selected model
models	AIModel[]	default models	Custom list of AI models to display