React AI Model Selector

If your app supports multiple AI models—and honestly, it probably should these days—you need a way for users to switch between them. This gives you a nice command palette (like Cmd+K menus) where users can search and pick models. Models are grouped by provider, each with their logo pulled from models.dev. The search is fuzzy so users can just type "claude" or "gpt-4" and find what they want. We use this pattern in AI playgrounds and chat apps where power users want to quickly swap between OpenAI, Anthropic, Google, whatever. Feels native and fast.

Model Selector preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/model-selector.json

npx shadcn@latest add https://www.shadcn.io/registry/model-selector.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/model-selector.json

bunx shadcn@latest add https://www.shadcn.io/registry/model-selector.json

Related Components

FAQ