Model Comparison
Side-by-side answers from several models. Pro · AI chat and agents › Prompts and models
Two to four models answering the same prompt side by side: streaming answers, latency, speed, tokens and cost, a "prefer this" vote, synced scrolling, and tabs on narrow screens.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add model-comparisonnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ModelComparison } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
responses * | ModelComparisonResponse[] | Two to four responses to the same prompt. | |
prompt | ReactNode | The prompt, shown above the columns. | |
preferred | string | null | Id of the response the user preferred. | |
defaultPreferred | string | null | null | Initial preferred when uncontrolled. |
onPreferredChange | (id: string | null) => void | Called with the new preferred when it changes. | |
syncScroll | boolean | true | Scroll all columns together. Default true. |
layout | 'auto' | 'columns' | 'tabs' | 'auto' | auto shows columns when each gets at least 220px, tabs otherwise. |
maxHeight | number | string | 420 | Height of each answer before it scrolls. |
currency | string | 'USD' | ISO 4217 code for cost. |
renderCitation | (index: number) => ReactNode | Turns [1] markers into nodes such as Citation chips. | |
locale | string | BCP 47 locale for numbers; defaults to the ThemeProvider's. | |
labels | Partial<ModelComparisonLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Prompt Composer — Prompt field with attachments
- Inline Suggestion — Inline autocomplete suggestion
- Model Selector — AI model picker
- Prompt Library — Prompt library with variables
- AI Chat Window — AI chat window
- Chat Message — Messages with streaming output
- Message Branches — Message versions and a conversation branch tree
- Streaming Text — Smooth token streaming
- Markdown Preview — Rendered Markdown
- Response Feedback — Answer rating and a rubric for reviewers
- Chain of Thought — Model reasoning steps
- Tool Call — Tool call with approval
Previous: Model Selector · Next: Prompt Library · All AI chat and agents