A searchable command palette for selecting AI models in your chat interface.

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.

See scripts/model-selector.tsx for this example.

npx ai-elements@latest add model-selector

• 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
• TypeScript support with proper type definitions

Prop	Type	Default	Description
...props	React.ComponentProps<typeof Dialog>	-	Any other props are spread to the underlying Dialog component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof DialogTrigger>	-	Any other props are spread to the underlying DialogTrigger component.

Prop	Type	Default	Description
title	ReactNode	-	Accessible title for the dialog (rendered in sr-only).
...props	React.ComponentProps<typeof DialogContent>	-	Any other props are spread to the underlying DialogContent component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandDialog>	-	Any other props are spread to the underlying CommandDialog component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandInput>	-	Any other props are spread to the underlying CommandInput component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandList>	-	Any other props are spread to the underlying CommandList component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandEmpty>	-	Any other props are spread to the underlying CommandEmpty component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandGroup>	-	Any other props are spread to the underlying CommandGroup component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandItem>	-	Any other props are spread to the underlying CommandItem component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandShortcut>	-	Any other props are spread to the underlying CommandShortcut component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CommandSeparator>	-	Any other props are spread to the underlying CommandSeparator component.

Prop	Type	Default	Description
provider	string	Required	The AI provider name. Supports major providers like
...props	Omit<React.ComponentProps<	-	Any other props are spread to the underlying img element (except src and alt which are generated).

Prop	Type	Default	Description
...props	React.ComponentProps<	-	Any other props are spread to the underlying div element.

Prop	Type	Default	Description
...props	React.ComponentProps<	-	Any other props are spread to the underlying span element.