npx tool-agent "integrate the parameter slider component for numeric parameter adjustment controls"npx shadcn@latest add @tool-ui/parameter-sliderText input is a poor fit for numeric tuning. When the user needs to dial in image exposure, audio levels, or model temperature, ParameterSlider renders grouped sliders with labels, units, and Reset/Apply actions. The confirmed values feed back to the assistant as a tool result.
Role: Control. Adjusts parameters without commitment. See Design Guidelines for how component roles work.
Run this once from your project root.
npx tool-agent "integrate the parameter slider component for numeric parameter adjustment controls"npx shadcn@latest add @tool-ui/parameter-sliderRender ParameterSlider in your UI with tool-compatible props.
import { ParameterSlider } from "@/components/tool-ui/parameter-slider";export function Example() { return ( <ParameterSlider id="parameter-slider-example" sliders={[ { id: "exposure", label: "Exposure", min: -3, max: 3, step: 0.1, value: 0.3, unit: "EV", precision: 1, }, { id: "contrast", label: "Contrast", min: -100, max: 100, step: 5, value: 15, unit: "%", }, { id: "highlights", label: "Highlights", min: -100, max: 100, step: 5, value: -20, unit: "%", }, ]} onAction={(actionId, values) => { console.log(actionId, values); }} /> );}Register this renderer so tool results display as ParameterSlider.
"use client";import { type Toolkit } from "@assistant-ui/react";import { ParameterSlider } from "@/components/tool-ui/parameter-slider";import { safeParseSerializableParameterSlider, SerializableParameterSliderSchema,} from "@/components/tool-ui/parameter-slider/schema";export const toolkit: Toolkit = { adjust_parameters: { description: "Adjust numeric parameters with sliders", parameters: SerializableParameterSliderSchema, render: ({ args, toolCallId, addResult }) => { const parsedArgs = safeParseSerializableParameterSlider({ ...args, id: args?.id ?? `parameter-slider-${toolCallId}`, }); if (!parsedArgs) { return null; } return ( <ParameterSlider {...parsedArgs} onAction={(actionId, values) => { if (actionId === "apply") { void addResult?.({ values }); } }} /> ); }, },};Group related sliders under shared Reset/Apply actions
Label and current value sit directly on the slider track
Show domain-specific units: EV, dB, %, Mbps, or custom strings
Arrow keys adjust values; screen readers announce the unit
Prop
Type
Prop
Type
Prop
Type
aria-valuetext includes unit for screen readers (e.g., "plus 0.3 EV")