Model Picker

Choose the model for the next message. A quiet trigger for the prompt toolbar; the menu says what each model is for.

Installation

pnpm dlx shadcn@latest add @jds/model-picker

Usage

import { ModelPicker } from "@/components/ai/model-picker"

<ModelPicker
  models={[
    { id: "sonnet", name: "Claude Sonnet 5.5", description: "Balanced", capabilities: ["reasoning", "vision"], meta: "$$" },
    { id: "haiku", name: "Claude Haiku 4.5", description: "Quick answers", capabilities: ["fast"], meta: "$" },
  ]}
  value={model}
  onValueChange={setModel}
/>

API Reference

ModelPicker

Prop	Type	Default
`models` capabilities show as small icons after the name: "reasoning" \| "vision" \| "fast" \| "web". meta is appended to the description, like "$$" or "200k".	{ id, name, description?, capabilities?, meta? }[]	–
`value` Controlled model id. Or use defaultValue.	string	–
`onValueChange`	(id: string) => void	–
`label` Optional menu heading.	string	–

Message Prompt Input