Model Selector

Pick which model answers. Type to filter, use the arrow keys, and press Enter to choose. The logos are icons shipped with the page; nothing loads from another site.

Sourcecomponents/model-selector.tsx

Answering with Northwind Large

Usage

Model Selector usage

import { useState } from "react";import { Sparkles } from "lucide-react";import { Button } from "@/components/button";import { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorName, ModelSelectorTrigger } from "@/components/model-selector";
const models = [  { id: "acme-large", name: "Acme Large" },  { id: "acme-fast", name: "Acme Fast" },];
export function ModelSelectorUsage() {  const [open, setOpen] = useState(false);  const [model, setModel] = useState(models[0]);  return (    <ModelSelector open={open} onOpenChange={setOpen}>      <ModelSelectorTrigger render={<Button variant="outline" aria-label={`Model: ${model.name}`} />}>        <ModelSelectorLogo provider="acme" icon={<Sparkles />} />        <ModelSelectorName>{model.name}</ModelSelectorName>      </ModelSelectorTrigger>      <ModelSelectorContent>        <ModelSelectorInput placeholder="Search models" />        <ModelSelectorList>          <ModelSelectorEmpty>No models found</ModelSelectorEmpty>          <ModelSelectorGroup heading="Acme">            {models.map((item) => (              <ModelSelectorItem key={item.id} value={item.id} onSelect={() => setModel(item)}>                <ModelSelectorLogo provider="acme" icon={<Sparkles />} />                <ModelSelectorName>{item.name}</ModelSelectorName>              </ModelSelectorItem>            ))}          </ModelSelectorGroup>        </ModelSelectorList>      </ModelSelectorContent>    </ModelSelector>  );}

When to use

Use when

Choosing which model answers from a list long enough to search, grouped by provider, in a dialog. Pass logos as icon or src you host

Don’t use when

A few fixed options inside the composer (use PromptInputSelect); logos fetched from another site (Guibrief never does)