📄 ai-sdk/elements/components/model-selector
File: model-selector.md | Updated: 11/15/2025
Source: https://ai-sdk.dev/elements/components/model-selector
Slash Forward
Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway
Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel
Chatbot
Model Selector
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.
Preview
Code
GPT-4o
AI Elements
shadcn CLI
Manual
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
- Support for both inline and dialog modes
- TypeScript support with proper type definitions
<ModelSelector />
Prop
Type
...props?React.ComponentProps<typeof Dialog>
<ModelSelectorTrigger />
Prop
Type
...props?React.ComponentProps<typeof DialogTrigger>
<ModelSelectorContent />
Prop
Type
...props?React.ComponentProps<typeof DialogContent>
<ModelSelectorDialog />
Prop
Type
...props?React.ComponentProps<typeof CommandDialog>
<ModelSelectorInput />
Prop
Type
...props?React.ComponentProps<typeof CommandInput>
<ModelSelectorList />
Prop
Type
...props?React.ComponentProps<typeof CommandList>
<ModelSelectorEmpty />
Prop
Type
...props?React.ComponentProps<typeof CommandEmpty>
<ModelSelectorGroup />
Prop
Type
...props?React.ComponentProps<typeof CommandGroup>
<ModelSelectorItem />
Prop
Type
...props?React.ComponentProps<typeof CommandItem>
<ModelSelectorShortcut />
Prop
Type
...props?React.ComponentProps<typeof CommandShortcut>
<ModelSelectorSeparator />
Prop
Type
...props?React.ComponentProps<typeof CommandSeparator>
<ModelSelectorLogo />
Prop
Type
providerstring
...props?Omit<React.ComponentProps<"img">, "src" | "alt">
<ModelSelectorLogoGroup />
Prop
Type
...props?React.ComponentProps<"div">
<ModelSelectorName />
Prop
Type
...props?React.ComponentProps<"span">
Message
A comprehensive suite of components for displaying chat messages, including message rendering, branching, actions, and markdown responses.
Plan
A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
On this page
Installation
Features
Props
<ModelSelector />
<ModelSelectorTrigger />
<ModelSelectorContent />
<ModelSelectorDialog />
<ModelSelectorInput />
<ModelSelectorList />
<ModelSelectorEmpty />
<ModelSelectorGroup />
<ModelSelectorItem />
<ModelSelectorShortcut />
<ModelSelectorSeparator />
<ModelSelectorLogo />
<ModelSelectorLogoGroup />
<ModelSelectorName />
GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat