result

Result card

Displays the generated media result from the composer bar. Includes interface elements for download, share, like, dislike, redo and a more menu with configurable actions. An info button flips the card to display the prompt and model meta data.

Paginated multi-resultModel meta-data

A high vantage view over a dense city — rows of rooftops stretching toward the horizon, soft atmospheric haze, natural light.

Code snippet

The bare minimum is a card that pages through one prompt's results from useComposer with the ability to retry.

For the stylesheets and the server route that holds your API keys, see Develop.

import { ResultCard, type Result, type Run } from "@chai-ui/react";

// `run` comes from your app, e.g. useComposer.
export function Results({ run, onRetry }: { run: Run; onRetry: (result: Result) => void }) {
  return (
    <ResultCard
      results={run.results}
      prompt={run.request.prompt}
      onAction={(action, result) => {
        if (action === "retry") onRetry(result);
      }}
    />
  );
}

Add more

Feature	Props	Notes
Model names	`models`	Shown instead of raw model ids
Likes	`getVote`	Each result's vote, kept by your app
Your own menu items	`moreActions`	Items in the ⋯ menu; without it, no ⋯ button

Preview controls

Single image result

The default state — one result, no pagination dots.

Multi-model result (paginated)

4 results from one prompt — pagination dots appear, each page its own model/cost/duration.

Video result

Custom in-card play/scrubber over a real <video> element, plus the expand-to-modal button.

Streaming text result

A text model's reply rendering as it arrives, via the mock engine's real onText stream.

Failed result

Reachable on demand instead of wiring a real failing engine.

Stopped result

What a result shows after the person presses stop.

Show evaluations

Each result's evaluations: pass/fail verdicts from your backend's checks, or from the opt-in judge, which checks each result against your criteria. Green passes, red fails. In the multi-model state, page 3 fails. See Quality checks.

Enable "more" menu

Adds a single example item ("Flag content") — see ROADMAP.md for what belongs here and why ResultCard itself can't implement any of it.