Model Selector

A searchable dialog for picking an AI model — grouped by chef, with provider logos and a compact trigger.

Default

Searchable dialog of models grouped by provider, with chef and host logos.

Loading…

Installation

CLI

npx @sonojs/ui@latest add model-selector

Also needsnpx @sonojs/ui@latest add command dialog && npm i lucide-react

Usage

model-selector.tsx

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  ModelSelector,
  ModelSelectorContent,
  ModelSelectorInput,
  ModelSelectorList,
  ModelSelectorEmpty,
  ModelSelectorGroup,
  ModelSelectorItem,
  ModelSelectorLogo,
  ModelSelectorName,
  ModelSelectorTrigger,
} from "@/components/sonojs/model-selector"

export function Example() {
  const [open, setOpen] = useState(false)
  const [selected, setSelected] = useState("gpt-4o")

  return (
    <ModelSelector open={open} onOpenChange={setOpen}>
      <ModelSelectorTrigger asChild>
        <Button variant="outline" className="w-[200px] justify-between">
          <ModelSelectorLogo provider="openai" />
          <ModelSelectorName>GPT-4o</ModelSelectorName>
        </Button>
      </ModelSelectorTrigger>
      <ModelSelectorContent>
        <ModelSelectorInput placeholder="Search models..." />
        <ModelSelectorList>
          <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
          <ModelSelectorGroup heading="OpenAI">
            <ModelSelectorItem
              value="gpt-4o"
              onSelect={() => {
                setSelected("gpt-4o")
                setOpen(false)
              }}
            >
              <ModelSelectorLogo provider="openai" />
              <ModelSelectorName>GPT-4o</ModelSelectorName>
            </ModelSelectorItem>
          </ModelSelectorGroup>
        </ModelSelectorList>
      </ModelSelectorContent>
    </ModelSelector>
  )
}

Props

Prop	Type	Default	Description
ModelSelector	Dialog props	—	`open` / `onOpenChange` and other Dialog root props.
ModelSelectorTrigger	DialogTrigger props	—	Usually `asChild` wrapping a Button.
ModelSelectorContent	DialogContent + title?	title="Model Selector"	Dialog shell with Command inside. `title` is screen-reader only.
ModelSelectorInput	CommandInput props	—	Search field for filtering models.
ModelSelectorList / Group / Item / Empty	Command* props	—	List chrome — same API as Command.
ModelSelectorLogo	{ provider: string }	—	12×12 logo from `models.dev/logos/{provider}.svg`.
ModelSelectorLogoGroup	div props	—	Overlapping host provider logos.
ModelSelectorName	span props	—	Truncated model label.