# Model Comparison block

> Split pane model comparison running one prompt against two AI models

Side by side compare view: two resizable panes answer one docked prompt and stream at different speeds, with sortable data tables in the replies, a scroll lock that reads both answers at the same depth, and per answer copy and rating actions. Select a line to ask both models about it, regenerate or swap either pane, attach extra files, and watch a mirrored scoreboard for latency, output rate and cost settle into a verdict with an A or B vote.

- Type: Pro block
- Category: [AI Chat](https://reui.io/blocks/ai-agents/ai-chat.md)
- Page: https://reui.io/blocks/ai-agents/ai-chat/ai-chat-7
- MCP: `get_block("ai-chat-7")`
- Built with: Alert, Attachment, Badge, Bubble, Button, Code Block, Dropdown Menu, Empty, Field, Input Group, Item, Kbd, Marker, Message, Message Scroller, Resizable, Scroll Area, Select, Spinner, Table, Tabs, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A pair of Resizable model panes on one prompt, with a scroll lock and a latency, tokens per second and cost strip ending in an A or B vote

## Agent notes

- Replace `MODELS`, `SEED_TURNS`, `CONTEXT_FILE` and `EXTRA_FILES`; `answerFor` picks canned answers from `ANSWER_LIBRARY` by prompt keyword
- Latency, tok/s and cost come from each answer's recorded `latencyMs` and `tokensOut` and the model's `priceIn` and `priceOut`, not from a live run
- The `rateLimited` flag on Gemini 3 Pro fakes a `RATE_LIMIT` 429 that Retry clears through `limitCleared`, and `handleVote` keeps votes in local state

## When not to use

- One assistant answering in a full page transcript, with pinned and recent threads: use [Copilot Shell](https://reui.io/blocks/ai-agents/ai-chat/ai-chat-1.md) (`get_block("ai-chat-1")`)
- Shoppers weighing 3 picked products by rating, price and a feature checklist: use [Buying Guide Picks](https://reui.io/blocks/ecommerce/comparison/comparison-3.md) (`get_block("comparison-3")`)

## Third-party libraries

- React Resizable Panels v4: [API reference](https://github.com/bvaughn/react-resizable-panels#documentation), [docs](https://react-resizable-panels.vercel.app/), through shadcn Resizable (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))
- Shiki v4: [API reference](https://shiki.style/guide/install), [docs](https://shiki.style/guide/), through ReUI Code Block

## Install

```bash
npx shadcn@latest add @reui/ai-chat-7
```

## About AI Chat blocks

### When to use

- A full page assistant chat, new chat welcome screen or 2 model comparison inside an AI product
- A copilot docked beside the page it works on, or opened from a launcher in the page corner
- Answers that show the work behind them: sources read, tool steps, plans to approve and run cost

### When not to use

- The product layout around the chat: a sidebar of threads, workspaces and account menus: use the [App Shell blocks](https://reui.io/blocks/application/app-shell.md)
- A plain overlay chat panel opened from a button, with suggestion chips and a composer: use the [Sheet blocks](https://reui.io/blocks/application/sheet.md)
- A highlighted snippet with a filename header and copy button, outside any conversation: use [Code Block](https://reui.io/components/code-block.md) (`get_component("code-block")`)

### Agent notes

- Each `AiChat` root sizes itself to the viewport with `h-svh`, or `min-h-svh` in ai-chat-5; give it your layout's height inside an app shell
- Every reply is canned content from the block's data file, played back on `setTimeout` and `setInterval` timers; stream your model's output there instead

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.