React Prompt Playground / A-B Compare
You can't tell whether a prompt tweak helped by reading one output; you tell by putting the old and the new next to each other and picking. This is that unit of work — two outputs, side by side, and a vote that aggregates into an eval you can trust.
Summarise the EQ-07 pressure excursion for the shift handover.
EQ-07 had a pressure alarm overnight. The pump looks worn. Recommend maintenance.
EQ-07: chamber pressure exceeded 12 mTorr on 3 wafers (02:14–03:48), trend rising. Turbo pump current +18% with high vibration — consistent with bearing wear. Action: schedule pump PM before next campaign; 8 lots rerouted to EQ-09.
Vote recorded: none
Installation
Props
| Prop | Type | Description |
|---|---|---|
| prompt | string | The shared prompt shown above both |
| a, b | CompareVariant | { id, label, model?, output, tokens?, latencyMs? } |
| vote | Vote | Controlled vote: a, tie, or b |
| onVote | (vote) => void | Fires on vote; clicking again clears it |
Pick, don't read
The whole design is built to force a choice. Both outputs share one prompt shown above them, so the only variable is the thing you changed. The winning side lights up in the brand colour the moment you vote, and each panel carries its own latency and token count — because "better" is rarely just about the text; a marginally worse answer that is half the cost and twice the speed often wins, and the numbers have to be right there to make that call.
A vote is a single datapoint, and its value compounds. One A/B tells you almost nothing; a few hundred, aggregated, is a preference dataset — the raw material for the Eval Scorecard and for any serious model or prompt decision. Wire onVote to your telemetry and this playground quietly becomes your eval pipeline's front door.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.