Skip to documentation content
|

Fine-tune Card

Adjust something an agent produced with a compact panel of number, choice, and menu controls.

fine-tune-card-demo

Overview

Fine-tune Card is a small panel of controls for adjusting a result without writing another prompt: a chart's size, a reply's length, a tone. You describe the controls as data, and the card reports every value when one changes.

The card holds the values and nothing else. Regenerating or restyling the result is your application's work, in onValuesChange.

Anatomy
FineTuneCard
  • HeaderThe title, an Edited note, and Reset
  • NumberA field that can be typed into, stepped, or scrubbed by its label
  • SegmentA small set of choices, one always chosen
  • SelectA menu, for longer lists

Installing fine-tune-card brings Button, Number Field, Select, and Toggle along as registry dependencies.

Behavior

Numbers

A number field accepts typing, steps with the arrow keys, and scrubs when its label is dragged sideways. min, max, and step are enforced by the field.

Edited and Reset

When any value differs from defaultValues, the header says Edited and offers Reset, which returns every control to its default and reports the defaults through onValuesChange.

Accessibility

The card is a group named by its title. Its controls are the Honest UI Number Field, Toggle group, and Select, each named by its label, and they keep their own keyboard behavior. Scrubbing is an extra for pointer users. Every value can also be typed.

Edited is a polite status, so it is announced when the first change is made.

KeyAction
TabMove across the controls
↑ and ↓Step a number field
Enter or SpaceChoose a segment, or open the menu

Installation
npx honestui@latest add https://ai.honestui.com/r/fine-tune-card.json

Usage

 
import { FineTuneCard } from "@/components/ai/fine-tune-card"

<FineTuneCard
  title="Reply style"
  defaultValues={{ length: 300, tone: "neutral" }}
  controls={[
    { type: "number", id: "length", label: "Max words", min: 50, max: 1000, step: 50 },
    {
      type: "select",
      id: "tone",
      label: "Tone",
      options: [
        { value: "neutral", label: "Neutral" },
        { value: "formal", label: "Formal" },
      ],
    },
  ]}
  onValuesChange={(values) => reply.regenerate(values)}
/>

onValuesChange runs on every change, including each step of a scrub. Debounce it if your handler starts a request.

Examples

Numbers only

Two number fields. Drag a label to scrub.

fine-tune-card-numbers

API reference

FineTuneCard

Accepts native div props beyond those listed.

PropTypeDefaultDescription
titlestringRequiredWhat is being adjusted.
controlsFineTuneControl[]RequiredThe controls, in order.
defaultValuesFineTuneValuesRequiredThe starting value for every control id.
onValuesChange(values: FineTuneValues) => voidNoneRuns with every value when one changes.
labelsPartial<FineTuneCardLabels>EnglishThe Edited note and the Reset name.

Types

ExportShape
FineTuneControltype of "number" (with optional min, max, step), "segment", or "select" (each with options), plus id and label
FineTuneValuesA number or string for each control id