Answer compare

A React component in Beamline's AI & agents category.

Two answers to the same prompt side by side, and a person's verdict: A is better, a tie, B is better, or both are bad, with the reasons that decided it. Answers stream in their own columns with time, tokens and cost under each; in a blind test the models stay hidden behind A and B until the verdict, then turn over to show who wrote what. Narrow rooms switch between the two instead of squeezing them.

Use it for

Choosing between two models, prompts or versions on the same input (a playground, an eval queue, a prompt review).
Collecting a person's preference with reasons, blind or named.

Not for

One answer in a conversation (message, response).
Comparing two pictures (image-compare).
Comparing plans or prices (plan-comparison).

Anatomy

prompt: the input both answered, one line that opens to the whole
columns: A and B, each with its name (A, B, or the model), the answer (streamed markdown, or your own drawing) and its facts: time, tokens, cost (not reported is said)
narrow room: a switch between A and B above one column, each answer keeping its scroll
verdict bar: A is better, Tie, B is better, Both are bad; the chosen one pressed, the better column ringed and the other quieter
reasons: after a verdict, chips for why (More accurate, Clearer, Shorter, Follows the instructions, Safer…) and an optional note; Submit sends
blind: model names hidden until the verdict; they turn over to show

Variants

blind: true, false

States

streaming
ready
chosen
reasons
submitted
error (an answer that failed says so in its column)

Keyboard

The verdict buttons are a group: ← → move, Enter or Space chooses; 1, 2, 3 and 4 choose from anywhere in the element
The columns scroll with the page or on their own; with sync on they scroll together
In a narrow room the switch is a segmented control

Motion

Each answer streams in its column at the response's even pace. Choosing rings the better column and quiets the other (a cross-fade), the reasons grow under the bar, and in a blind test the names turn over one after the other. Submitting folds the reasons into a line that says what was sent. Reduced motion: the names change in place, nothing turns.

Props

Prop	Type	Default	Description
`prompt`	`ReactNode`	—
`answers` (required)	`[CompareAnswer, CompareAnswer]`	—
`value / defaultValue / onValueChange`	`CompareVerdict \| null`	—
`onSubmit`	`(verdict: CompareVerdict) => void \| Promise<void>`	—	With it, reasons and Submit follow the choice; a promise shows progress and a refusal keeps the choice.
`reasons`	`string[]`	—	The reason chips. Default: More accurate, Clearer, More complete, Shorter, Follows the instructions, Safer.
`blind`	`boolean`	—	Hide the models until the verdict.
`syncScroll`	`boolean`	—	The columns scroll together. Default true.
`currency`	`string`	—	Default "$".
`className / classNames / style / ref`	`root`	—

Built from

response
button
chip-group
segmented-control
textarea

Dependencies

lucide-react

Import

import { AnswerCompare } from "@/components/answer-compare/answer-compare";

Get it

Answer compare is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent