React Sampling Controls
Most people don't think in “temperature 0.2”; they think “give me the precise, repeatable answer” or “let it be creative.” The presets bridge that, and the sliders stay for anyone who does want the dials — with the ranges bounded so no one accidentally asks for temperature 2 on a task that needs determinism.
temperature 0.20 · top-p 0.80 · max 2,048
Installation
Props
| Prop | Type | Description |
|---|---|---|
| value | SamplingValue | { temperature, topP, maxTokens } |
| onChange | (value) => void | Fires on any change |
| maxTokensLimit | number | Upper bound for the response cap |
| presets | SamplingPreset[] | Named intent presets |
Name the intent, keep the dials
The preset row (Precise / Balanced / Creative) is the primary control, because it maps to how people actually reason about output, and it sets temperature and top-p together to a sensible pair rather than leaving a user to guess which combination means "creative." Move a slider by hand and no preset is highlighted — you're off the presets, in manual territory, which is exactly right. The precise ↔ creative label orients the whole panel along the axis that matters.
The sliders use Kelvin's native range styling, so the track and petrol thumb are visible on every surface, and each reads back in mono tabular-nums. Ranges are deliberately bounded — temperature 0–2, top-p 0–1, max tokens stepped in blocks — so the control cannot produce a value the API would reject or a setting that quietly breaks a task that depended on determinism.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.