Evals

Where an AI engineer decides whether a prompt version ships. It opens on the gate: every test case as one square, the candidate against production, and the Promote button. Under it, pass rate by version, the suite on other models, ranked versions, re-runnable cases and the prompt diff.

Get lifetime access to installPro screen · 4 examples · built from 12 Layro components

Open full screen

When to use

Teams shipping prompt or model changes behind an evaluation suite
Comparing a candidate with what runs in production
Telling a prompt problem from a model problem

When not to use

A leaderboard on its own: Eval Leaderboard is enough
Tracing a single agent run: use Trace Waterfall

The decision inside it

No promotion while anything regressed

A version cannot be promoted while any case that passes in production now fails. Promote stays locked and says which cases block it, so a better average can never hide a broken case.

Installation

Evals is a Pro screen, included with lifetime access. It is two files on top of the Layro components it is made of.

Add the components it uses:

npx shadcn@latest add @layro/avatar @layro/button @layro/state @layro/tabs @layro/toast @layro/chart @layro/eval-leaderboard @layro/prompt-test-matrix @layro/inline-diff @layro/output-validator @layro/sidebar @layro/workspace-mark

Copy screens/evals-screen.tsx and screens/data/evals-screen.ts from the Code tab above into your project, at the same paths.
It also imports @/lib, @/demos/brand-logos and @/demos/portraits: Layro’s shared helpers and the demo’s sample images. Point them at your own.

Usage

app/page.tsx

import { EvalsScreen } from "@/screens/evals-screen";

export default function Page() {
  /* A screen fills the box it is given: give it the window. */
  return (
    <main className="h-dvh">
      <EvalsScreen className="h-full" />
    </main>
  );
}

Built from

Every Layro component this screen imports. Each has its own page, props and install command.

API reference

Read from EvalsScreenProps when the site is built. It also takes every attribute a div does, such as className.

EvalsScreen

Prop	Type	Notes
`state`	`EvalsScreenState`	—
`onPromote`	`(version: string, prompt: string) => void \| Promise<void>`	Promote the candidate. May return a promise; a rejection is shown inline.

Accessibility

Each case square has a name and its result, not only a colour
Tabs, the case matrix and Promote work from the keyboard
Results and failures to load are announced
Movement follows the reduced-motion setting

Responsive behavior

Fills the box it is given: mount it at the window's height
The sidebar becomes a drawer and the cards stack on narrow widths
Light and dark come from the Layro theme: it follows the dark class on <html>, like every component.