Side by Side Runs React component
Compare several attempts at the same task: score, time, cost and the actual output next to each other, then choose the one that goes forward.
About the Side by Side Runs component
Side by Side Runs helps you judge results, not just numbers. Each attempt shows its score, time and cost next to what it actually produced.
The best time and cost are marked, because the highest score isn't always the right call. Choose one and the rest step back.
When to use it
Use it for prompt testing, model comparison and picking between agent attempts.
It works best with two to four attempts. More than that won't fit side by side.
Installation
Add the Side by Side Runs component to your project with the shadcn CLI. It lands in components/side-by-side-runs.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/side-by-side-runsProps
<SideBySideRuns /> accepts 5 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Draft a refund reply" |
| subtitle | string | "Three attempts at the same task." |
| attempts | { id: string; name: string; setup: string; score: number; seconds: number; cost: number; output: string }[] | DEFAULT_ATTEMPTS |
| onChoose | (attempt: RunAttempt | null) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Draft a refund reply"
- subtitlestringDefault: "Three attempts at the same task."
- attempts{ id: string; name: string; setup: string; score: number; seconds: number; cost: number; output: string }[]Default: DEFAULT_ATTEMPTS
- onChoose(attempt: RunAttempt | null) => void
Side by Side Runs FAQ
- How is the score worked out?
- You pass it in, so it can come from any evaluation you use.
- What does the green dot mean?
- That attempt has the best time or cost of the group.
- How does it work on a phone?
- It shows one attempt at a time, with a switcher at the top.
- Can a choice be changed?
- Yes. Press the chosen button again to clear it.
