Compare Output

A responsive grid for placing two or more AI model responses side by side. Each column shows the model name badge, an optional timestamp, and the response content. Adapts from a single column on mobile to a two-column layout on larger screens.

gpt-4o

1.2s

React Server Components allow you to render components on the server and stream them to the client. This reduces the JavaScript bundle sent to the browser and enables direct server-side data access without an extra API layer.

claude-3-5-sonnet

0.9s

React Server Components (RSC) are a new paradigm where components run exclusively on the server. They can fetch data directly, access server resources, and render to HTML — all without shipping their code to the client's JavaScript bundle.

import { CompareOutput } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add compare-output

Import

import.tsx

import { CompareOutput } from "@aetherstack/blocks"

Usage

compare-output.tsx

import { CompareOutput } from "@aetherstack/blocks"

export function ModelComparison() {
  return (
    <CompareOutput
      outputs={[
        {
          model: "gpt-4o",
          content: "React Server Components allow you to render on the server…",
          timestamp: "1.2s",
        },
        {
          model: "claude-3-5-sonnet",
          content: "React Server Components (RSC) are a new paradigm…",
          timestamp: "0.9s",
        },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
outputs*	OutputItem[]	—	Array of model output objects to display side by side.
className	string	—	Additional classes on the grid container.

* Required

Accessibility

→Each output card has a semantic CardTitle containing the model badge.
→Timestamps are rendered in a <span> beside the title and do not carry semantic weight.
→Content is rendered in a <div> with whitespace-pre-wrap to preserve formatting.