React Model Picker
“Which model” is really “which set of constraints can I live with for this task.” So the picker puts the trade-off on every option — context window, price per million tokens, relative speed, and the capabilities that actually gate a use case — instead of hiding it behind a name.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| models | ModelOption[] | { id, name, vendor?, contextTokens, inputPer1M?, outputPer1M?, speed?, capabilities?, recommended? } |
| value | string | Selected model id |
| onChange | (id) => void | Fires on selection |
The trade-off, on every row
A model name means nothing to someone deciding between them; the numbers do. Each option carries its context window, its price as input/output per million tokens (the two rates that dominate a bill), a speed indicator, and capability chips — vision, tools, JSON, reasoning — because a task that needs image input or guaranteed JSON rules out half the list before cost even enters. Marking one Recommended gives a sensible default without hiding the alternatives.
Rendered as an accessible radiogroup, so arrow keys move between options and the selection is announced. Pair it with the Context Meter and Sampling Controls to make a complete model configuration panel, or drop it into the Prompt Composer as its model dropdown.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.