Model parameters

Sampling controls for prompt playgrounds: temperature, top P, max output tokens, frequency and presence penalty and stop sequences, with presets, reset, help tooltips, typed values and a modified dot.

Markdown

On this page

Presets, sliders with typed values, modified dots and stop sequences.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/model-parameters.json

Usage

tsx

import { ModelParameters, type ModelParametersValue } from "@/components/ui/chatcn/model-parameters"

const [params, setParams] = React.useState<ModelParametersValue>()

<ModelParameters value={params} onValueChange={setParams} />

Uncontrolled with defaultValue, or controlled with value and onValueChange. Either takes a partial value; anything left out comes from defaults, which is also what Reset and the modified dot compare against. The value passed to onValueChange is always complete.

Show only what the model accepts with parameters, and match the provider's ranges with config. A parameter the model ignores gets disabled and a reason.

tsx

<ModelParameters
  density="compact"
  parameters={["temperature", "topP", "maxTokens", "stop"]}
  defaults={{ maxTokens: 8192 }}
  config={{
    temperature: { max: 1 },
    maxTokens: { max: 64000 },
  }}
/>

// A reasoning model with fixed sampling.
<ModelParameters config={{ temperature: { disabled: true, disabledReason: "Fixed at 1 for reasoning models." } }} />

Examples

Compact side panel

density="compact" puts label, slider and value on one 32 px row.

One row per parameter for a playground's side panel, limited to what the provider accepts.

Controlled

The request body follows every drag, typed value and preset.

States

Defaults, a reasoning model with fixed sampling and disabled.

Defaults

Parameter	Range	Default	Notes
`temperature`	0 to 2, step 0.01	1
`topP`	0 to 1, step 0.01	1
`maxTokens`	1 to 128 000	4096	Log scale, so 256 and 64 000 both have room. Arrow keys step by 64 or 256
`frequencyPenalty`	-2 to 2, step 0.01	0
`presencePenalty`	-2 to 2, step 0.01	0
`stop`	Up to 4	`[]`	Type `\n` for a newline. Shown as `\n`, spaces as `␣`

Presets set only the values they name: Precise is temperature 0.2, Balanced 0.7, Creative 1.2 with top P 0.95 and light penalties. A preset reads as pressed while the current values match it. Pass your own with presets, or false to hide the row.

Props

Prop	Type	Notes
`value`, `defaultValue`	`Partial<ModelParametersValue>`	Missing keys come from `defaults`
`onValueChange`	`(value: ModelParametersValue) => void`	Always the full value
`defaults`	`Partial<ModelParametersValue>`	Reset target and modified baseline
`parameters`	`ModelParameterField[]`	Which controls, in order
`config`	`Partial<Record<key, Partial<ModelParameterSpec>>>`	`label`, `help`, `min`, `max`, `step`, `scale`, `unit`, `disabled`, `disabledReason`
`presets`	`ModelParametersPreset[] \| false`	`{ id, label, description?, values }`
`maxStopSequences`	`number`	Defaults to 4
`density`	`"comfortable" \| "compact"`	Defaults to `comfortable`
`disabled`	`boolean`

Keyboard

Key	Action
`ArrowLeft`, `ArrowRight`	On a slider: one step. Reversed in right-to-left layouts
`Home`, `End`	On a slider: minimum or maximum
`ArrowUp`, `ArrowDown`	In a value field: one step, `Shift` for ten
`Enter`	In a value field: commit. Out-of-range values clamp to the nearest limit
`Escape`	In a value field: revert what you typed
`Enter`, `Backspace`	In stop sequences: add, or remove the last one when empty

Accessibility

Each slider is a native range input under the drawn track, so screen readers, the keyboard, touch and right-to-left all behave natively. aria-valuetext reads the formatted value, for example 16,000 tokens on the log-scale slider.
The label names both the slider and the value field. Help is a labelled button that opens a tooltip on hover and focus.
The modified dot is a button: Temperature modified. Reset to 1.00. It is ink, never color alone.
Presets are toggle buttons with aria-pressed. Stop sequences are a list with a labelled remove button each.
Sliders and buttons grow to 44 px on touch screens.

Motion

None while dragging or typing: the thumb, fill and number track the pointer one to one. A playground panel is adjusted constantly, so nothing waits on an animation.
Hover color on buttons and fields uses the kit's 150 ms ease.