Step into the age of agentic visual development

EMDR met Bram

The Next.js stack that gives coding agents eyes. Map every app state to a full-page screenshot check — across viewports, themes, and user roles. Test Server Components, Server Actions, browser state, and database state in one fast Vitest loop. Ship through Vercel with production wiring already in place.

Inspired by The Epic Stack. Reimagined around the RSC ecosystem and LLM-driven development.

app/notes/new/page.test.tsx"note form rejects empty title"
4 snapshots
/notes/new
Desktop · Light
/notes/new
Desktop · Dark
9:41
Mobile · Light
9:41
Mobile · Dark

Self-healing

Two loops. Both visual.

The inner loop gives the agent eyes — every save, in seconds. The outer loop gives you proof — every pixel that changed, before merge.

Inner loopSeconds — every save
  1. Agent edits & saves

    Server Component, Server Action, Drizzle schema, or a test — whatever ships.

  2. bun vitest run --changed

    Vitest restarts only what depends on the change. PGlite + drizzle-seed give every test a real Postgres.

  3. PNGs land next to the test

    Light + dark, mobile + desktop captured automatically — gitignored, deterministic, on disk.

  4. Agent reads the PNGs inline

    The agent self-corrects on what it sees. Same session, seconds end-to-end.

Eyes for the agent. Seconds, not minutes.
Outer loopMinutes — every PR
  1. Agent pushes a commit

    Triggers the outer loop on the PR.

  2. Vitest runs in CI

    Every test, every viewport, every theme.

  3. Chromatic captures the diff

    Pixel-exact diff for every PR. Nothing visual ships unseen.

  4. Review & merge

    Approve the change set, send a fix back to the agent, or merge yourself.

Know exactly what shipped. Pixel-exact, every PR.

Built on

Tools you'd pick anyway.

Wired so agents can read the schema, run the tests, and verify what shipped.

Framework

  • Next.js 16
  • React 19
  • TypeScript 7
  • Vercel Fluid

Data

  • Drizzle ORM
  • Neon Postgres
  • Better Auth

Tests

  • Vitest 5
  • Chromatic

UI & tooling

  • Tailwind v4
  • shadcn/ui
  • Bun

Visual coverage

Agents see what they ship.

Coding agents have always been blind to the visual they ship. The Epic RSC Stack wires every state of your app to a full-page screenshot — across viewports, themes, and user roles. Agents read pixel-level diffs in CI. You review them in Chromatic. No more “LGTM” from an agent that can't actually see.

  • Breadth

    Every state of your app — on every viewport, in every theme, for every user role.

  • Fidelity

    The agent reads the pixels. Not just “tests passed.”

  • Shared truth

    The agent reads pixel diffs inline. You review the same diffs in Chromatic.

  • Functional + visual coverage

    Codecov tracks code coverage in CI. Every covered line is also rendered to a screenshot.

app/notes/new/page.test.tsx
import { test, expect } from "vitest";
import { page } from "vitest/browser";
import { renderServer } from "vitest-plugin-rsc/nextjs/testing-library";
import { seed } from "drizzle-seed";
import { db } from "#lib/db.ts";
import * as schema from "#db/schema.ts";
import { signInAs, testUser } from "#test/auth.ts";
import NewNotePage from "./page.tsx";
.
const noteTitles = ["Inbox triage", "Release plan", "Bug bash",
"Demo script", "Follow-ups"];
.
test("new note validates title", async () => {
// White-box setup: auth, browser state, and real DB rows.
localStorage.setItem("theme", "dark");
await signInAs(testUser);
await seed(db, { notes: schema.notes }, { count: 3, seed: 2025 })
.refine((f) => ({
notes: { columns: {
ownerId: f.valuesFromArray({ values: [testUser.id] }),
title: f.valuesFromArray({ values: noteTitles, isUnique: true }),
content: f.loremIpsum({ sentencesCount: 2 }),
isFavorite: f.valuesFromArray({
values: [
{ weight: 0.35, values: [true] },
{ weight: 0.65, values: [false] },
],
}),
},
},
}));
.
await renderServer(<NewNotePage/>);
.
await page
.getByLabelText("Content")
.fill("Keep this body");
await page
.getByRole("button", { name: "Create note" })
.click();
.
await expect.element(page.getByText("Title is required."))
.toBeInTheDocument();
});

White-box RSC tests

End-to-end behavior with unit-test speed and control.

Vitest exercises the full RSC path — server render, client hydration, Server Action, UI assertion — like an e2e suite. But with the control of a unit test (seed data, mock IO, fake clocks) and the speed of a unit test (related-test runs, real coverage, in-process).

  • Real RSC path

    Server render, client hydrate, Server Action, UI result.

  • White-box inputs

    Seed the database, set browser state, mock IO.

  • Every edit

    Related-test runs from the import graph. Fast enough for the inner loop.

  • Real coverage

    Line, branch, function — instrumented in the same run.

  • No deployed infra

    In-memory Postgres, real browser, one process. No preview, no staging.

  • Cheap state matrices

    Theme, role, viewport, flag — flipped in milliseconds.

  • Hermetic screenshots

    Same seed, same pixels. Every run.

Built by the maintainer of vitest-plugin-rsc.

Pre-wired for production

Everything you'd wire up anyway, already wired.

Auth, forms, database, deploys, UI, tooling — all the production pieces you skip past in a tutorial, here on day one.

  • Passwordless auth

    Better Auth with magic links, passkeys, profile setup, and DB-backed sessions.

  • Server Action forms

    Native form actions, useFormStatus, Zod validation, and shadcn fields.

  • Production Postgres

    Drizzle on Neon with generated SQL migrations, typed queries, and native UUIDs.

  • Preview deploys with data

    Vercel Previews paired with Neon DB branches — every PR gets a real app and database the agent can run, see, and iterate on.

  • Vercel-native delivery

    Fluid Compute, Marketplace env wiring, and E2E against real preview URLs.

  • Refined UI system

    Tailwind v4, shadcn/ui, Base UI primitives, and theme switching.

  • Coverage in CI

    Functional coverage in Codecov, visual coverage in Chromatic, both checked in CI.

  • Modern tooling

    Bun, Oxc, TypeScript native tsgo, Husky, lint-staged — fast and quiet.

Roadmap

The next pieces we want in the stack, ordered around the same app surface.

  • Auth hardening

    Passwords, GitHub OAuth, account linking, TOTP, and breached-password checks.

  • Roles & permissions

    Role column on the user table plus requireUser / requireRole helpers.

  • React Email templates

    Production-ready transactional email rendered from React.

  • Vercel Cron handlers

    Scheduled work via Vercel Cron route handlers and CRON_SECRET.

  • Realtime via Ably

    Pub/sub events behind a project-owned realtime port.

  • Vercel Blob uploads

    Public + private blob storage wired through next/image.

  • Sonner toasts

    HttpOnly flash cookies read from Server Components on every navigation.

  • Lingui i18n

    ICU catalogs, cookie locale, and timezone request hints.

  • Upstash rate limits

    Local adapters, spam traps, security headers, and Vercel BotID.

  • Vercel Flags

    Feature flags backed by Edge Config with audit history.

  • Sentry

    Error and performance monitoring with source maps and release tracking.

  • Axiom logs

    Structured logs piped into Axiom alongside Vercel Analytics.

  • Vercel Analytics

    Real-user metrics for Core Web Vitals and route-level insight.

  • MSW HTTP mocking

    Mock external HTTP providers for tests and offline dev.

Standing on shoulders

Borrowed boldly. Credited explicitly.

See it in motion

The same notes app, end to end.

A working notes app exercises every primitive — Server Components for reads, Server Actions for writes, magic-link auth, and the same visual test surface you've seen above.

Try the notes app