Model Selector

The ModelSelector component provides a searchable command palette interface for selecting AI models. It's built on top of the cmdk library and provides a keyboard-navigable interface with search functionality.

Preview

Code

GPT-4o

Installation

npx ai-elements@latest add model-selector

Features

• Searchable interface with keyboard navigation
• Fuzzy search filtering across model names
• Grouped model organization by provider
• Keyboard shortcuts support
• Empty state handling
• Customizable styling with Tailwind CSS
• Built on cmdk for excellent accessibility
• Support for both inline and dialog modes
• TypeScript support with proper type definitions

Props

<ModelSelector />

<ModelSelectorTrigger />

<ModelSelectorContent />

<ModelSelectorDialog />

<ModelSelectorInput />

<ModelSelectorList />

<ModelSelectorEmpty />

<ModelSelectorGroup />

<ModelSelectorItem />

<ModelSelectorShortcut />

<ModelSelectorSeparator />

<ModelSelectorLogo />

<ModelSelectorLogoGroup />

<ModelSelectorName />