Model comparePro
One prompt across any number of models: latency, time to first token, output tokens and cost per column, measured against a baseline, with answers that scroll together.
On this page
Installation
Usage
import { ModelCompare } from "@/components/ui/chatcn/pro/model-compare"
<ModelCompare prompt={prompt} columns={runs} onRetry={rerun} onRemove={removeModel} />Each column takes status (pending, streaming, done or error), the text so far and whatever metrics you have; update them live while the runs stream. The best latency, output length and cost among finished columns are marked in words, and every other column shows its difference from the baseline: "+340 ms", "2.1×", "25% less". Pick the baseline from a column's menu.
Differences are neutral on purpose: a shorter answer is not always better, so nothing turns green or red. Where the free response-compare is a blind vote between two to four answers, this is the engineering view for any number of models.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
columns | ModelCompareColumn[] | { id, model, detail?, status?, text, ttftMs?, durationMs?, inputTokens?, outputTokens?, costUsd?, error? } |
prompt | ReactNode | Shown above the columns |
baselineId, defaultBaselineId | string | Default: the first column |
syncScroll, defaultSyncScroll | boolean | On by default |
onRetry, onRemove | (id) => void | Add Retry on failures and Remove in the menu |
bodyHeight | number | string | Default 320 |
renderBody | (column) => ReactNode | Defaults to the free markdown |
Accessibility
- Each column is an article named for its model; each answer is a focusable scroll region named "Answer from GPT-6.1 Sol".
- The summary of fastest and cheapest is a polite live region, so a screen reader hears the result once runs finish.
Motion
Metric bars grow with a 300 ms transform transition as numbers arrive; reduced motion jumps them. Menus use the kit's popover motion.