UI Verify MCP server

UI Verify

Visual testing for agents

Catch unintended UI changes on every pull request. UI Verify renders your components in the cloud, diffs them against a baseline, and lets a coding agent triage what actually changed.

uiverify.ai  ·  GitHub  ·  CLI  ·  Playwright SDK  ·  Vitest SDK  ·  Skills

What is UI Verify?

UI Verify is a hosted visual-testing service that plugs into your CI. On each PR it:

1. Captures your UI, from Storybook stories, from your existing Playwright or Vitest browser-mode tests via a drop-in capture SDK, or from finished screenshots your own harness already produces (native, mobile, React Native) uploaded straight for diffing.
2. Renders & diffs every state in the cloud against the baseline from your default branch.
3. Reports the verdict back as a GitHub check, and gates the PR on it.
4. Triages: a coding agent (Claude Code, Codex, and others) buckets real regressions vs. cosmetic noise and can accept new baselines in bulk, all over MCP.

This repository holds the open-source client packages, everything that runs in your repo. All rendering, diffing, and judging happens server-side; these packages only build a bundle, upload it over HTTP, and read back status, so each is safe to read, fork, and self-host against.

Quickstart

# 1. Install the CLI in your project
npm i -D uiverify

# 2. Point it at your account
export UIVERIFY_API_KEY=...        # from uiverify.ai

# 3. Build your Storybook, then upload; the exit code reflects the visual verdict
npm run build-storybook
npx uiverify upload --static-dir storybook-static

Already have screenshots? If your harness already produces them (Detox, Maestro, native snapshot tests, anything), upload the PNGs directly, no Storybook and no rendering required. UI Verify diffs, judges, and baselines them just the same:

npx uiverify upload --screenshots ./screenshots

This is how native, mobile, and React Native projects use UI Verify: each image is keyed by its path under the directory, so a screen maps to the same baseline every build, and you can upload only the screens you changed and carry the rest forward.

Prefer to drive it from your agent? Install the skills (below) and run /uiverify:setup-visual-testing. It detects your capture path, wires CI, and writes the first stories for you.

Mid-edit checks for coding agents: uiverify check

While an agent is editing, it can render just the stories it is touching and diff them against the real CI baseline on the fleet - a "would this pass" answer without waiting for CI:

npm run build-storybook
npx uiverify check --story 'components-button--*' --static-dir storybook-static

Shortened. The full README is on GitHub.