A model selector with capability tags and speed and cost meters. It follows the listbox pattern with arrow keys, Home, End, typeahead and Escape.
npx shadcn@latest add https://hyperblur.dev/r/agent-model-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-model-picker.tsx.
import { AgentModelPicker } from "@/components/hyperblur/agent-model-picker"
<AgentModelPicker defaultValue="aster-flash" onChange={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| models | { id: string; name: string; maker?: string; tags?: string[]; speed: number; cost: number; context?: string }[] | five sample models | Options to choose from. speed and cost are scores from 1 to 5. |
| value | string | Controlled selected model id. Pair with onChange. | |
| defaultValue | string | Initially selected model id when uncontrolled. Defaults to the first model. | |
| onChange | (id: string, model: ModelOption) => void | Called when a model is chosen. | |
| defaultOpen | boolean | false | Open the list on first render. |
| listMaxHeight | number | 260 | Maximum height of the list in pixels before it scrolls. |
| label | string | "Model" | Visible label above the trigger. An empty string hides it and uses an aria-label instead. |
| accent | string | "#2f7bff" | Color of the speed meter and the focus ring. |