Model Selector

Select models and providers from the chat header or composer toolbar.

ModelSelector is a searchable dialog for picking chat models by provider. Pair it with the composer toolbar or open it from the chat header.

Selected: GPT-4o

<ModelSelector>
  <ModelSelectorTrigger render={<ModelSelectorButton />}>
    ...
  </ModelSelectorTrigger>
  <ModelSelectorContent>
    <ModelSelectorInput />
    <ModelSelectorList>...</ModelSelectorList>
  </ModelSelectorContent>
</ModelSelector>

Installation

pnpm dlx cubix@latest add model-selector --base aria

Usage

Import

import {
  ModelSelector,
  ModelSelectorContent,
  ModelSelectorInput,
  ModelSelectorItem,
  ModelSelectorList,
  ModelSelectorTrigger,
} from "@/components/cubix/model-selector"

Example

<ModelSelector>
  <ModelSelectorTrigger render={<ModelSelectorButton />}>
    <ModelSelectorLogo provider="openai" />
    <ModelSelectorName>GPT-4o</ModelSelectorName>
  </ModelSelectorTrigger>
  <ModelSelectorContent>
    <ModelSelectorInput />
    <ModelSelectorList>
      <ModelSelectorEmpty />
      <ModelSelectorGroup heading="OpenAI">
        <ModelSelectorItem value="GPT-4o" checked onSelect={...}>
          <ModelSelectorLogo provider="openai" />
          <ModelSelectorName>GPT-4o</ModelSelectorName>
        </ModelSelectorItem>
      </ModelSelectorGroup>
    </ModelSelectorList>
  </ModelSelectorContent>
</ModelSelector>

Composition

ModelSelector
├── ModelSelectorTrigger
└── ModelSelectorContent
    ├── ModelSelectorInput
    └── ModelSelectorList
        ├── ModelSelectorEmpty
        ├── ModelSelectorGroup
        │   └── ModelSelectorItem
        │       ├── ModelSelectorLogo
        │       ├── ModelSelectorName
        │       └── ModelSelectorShortcut
        └── ModelSelectorSeparator

Features

Searchable command dialog with keyboard navigation
Provider groups, logos, shortcuts, and checked state
Works in the Prompt Input toolbar or as a standalone picker

Search

Open the menu and type to filter by model or provider.

<ModelSelectorInput placeholder="Search models…" />

Empty

<ModelSelectorEmpty>
  No models match that query.
</ModelSelectorEmpty>

Checked

<ModelSelectorItem value="GPT-4o" checked onSelect={setModel}>
  ...
</ModelSelectorItem>

Disabled

Unavailable models stay visible but cannot be selected. Open the picker and look for Gemini Legacy.

<ModelSelectorItem value="Gemini Legacy" disabled>
  ...
</ModelSelectorItem>

Logos

<ModelSelectorLogo provider="openai" />
<ModelSelectorLogoGroup>
  <ModelSelectorLogo provider="openai" />
  <ModelSelectorLogo provider="anthropic" />
</ModelSelectorLogoGroup>

Shortcuts

<ModelSelectorItem value="GPT-4o">
  <ModelSelectorName>GPT-4o</ModelSelectorName>
  <ModelSelectorShortcut>⌘1</ModelSelectorShortcut>
</ModelSelectorItem>

With Prompt Input

<PromptInputTools>
  <ModelSelector>...</ModelSelector>
</PromptInputTools>

Controlled

Grok 2

<ModelSelector open={open} onOpenChange={setOpen}>
  ...
</ModelSelector>

API Reference

ModelSelector

Prop	Type	Default	Description
open	boolean	-	Controlled open state for the dialog.
onOpenChange	(open: boolean) => void	-	Called when the dialog opens or closes.
children	React.ReactNode	-	Trigger and content composition.

ModelSelectorContent

Prop	Type	Default	Description
title	React.ReactNode	"Select a model"	Visually hidden dialog title for accessibility.
showCloseButton	boolean	false	Show the dialog close control. Off by default for palette UX.
children	React.ReactNode	-	Command input and list parts.

ModelSelectorItem

Prop	Type	Default	Description
value	string	-	Searchable value used by the command filter.
checked	boolean	false	Shows the selected checkmark for the current model.
disabled	boolean	-	Prevents selecting an unavailable model.
onSelect	(value: string) => void	-	Called when the item is chosen via click or keyboard.

ModelSelectorLogo

Prop	Type	Default	Description
provider	ModelSelectorProvider	-	Provider id used to load the logo from models.dev (e.g. openai, anthropic).
className	string	-	Additional classes for the logo image.