How do I verify what my AI coding agent built?

Use ProofShot to give your AI agent a real browser. It records video, captures screenshots, and collects errors during verification. Run proofshot start, let the agent interact with the UI via agent-browser, then proofshot stop to generate a proof report.

Can AI coding agents see the UI they build?

By default, no. AI coding agents like Claude Code, Cursor, and Codex write code without seeing the rendered result. Tools like ProofShot bridge this gap by giving agents browser access to visually verify their work.

What is visual regression testing for AI agents?

Visual regression testing compares screenshots of UI before and after changes. ProofShot's proofshot diff command compares current screenshots against a baseline set, catching layout breakage that code review alone would miss.

How do I add visual verification to my PR workflow?

After running a ProofShot verification session, use proofshot pr to upload video recordings and screenshots directly to your GitHub pull request. Reviewers see visual proof of what the agent built alongside the code diff.

Is there a hosted visual diff service my coding agent can read?

Yes. UI Verify captures screenshots from your existing Vitest, Storybook or Playwright tests (or any PNGs), diffs them against a baseline on every pull request, and has an AI judge label each change as intended or a regression. Its MCP server lets Claude Code or Cursor list a build's changes, view before-and-after crops and accept baselines. The free plan includes 10,000 snapshots and 100 AI reviews a month; Starter is $89 a month (October 2026).

Quick Answer

How to Verify AI Agent UI Output (2026 Guide)

Published: March 29, 2026 • Updated: October 26, 2026

How to Verify AI Agent UI Output

AI coding agents write code blind — they can’t see if the button renders, the layout works, or the form throws errors. Here’s how to close that feedback loop.

Last verified: March 29, 2026

The Problem

When Claude Code, Cursor, or Codex builds a frontend feature:

They modify files but don’t open a browser
Layout bugs, missing elements, and visual regressions go unnoticed
You manually check every change — eating 30-40% of development time

Solution 1: ProofShot (Recommended)

The simplest approach — install once, works with any agent:

npm install -g proofshot
proofshot install  # Auto-detects your agents

Then in your agent:

proofshot start --run "npm run dev" --port 3000
agent-browser open http://localhost:3000
agent-browser screenshot ./proofshot-artifacts/homepage.png
proofshot stop

Output: Video recording, screenshots, interactive HTML viewer, error logs.

Solution 2: Playwright Scripts

For more control, write Playwright tests that your agent runs:

import { test, expect } from '@playwright/test';

test('login page renders correctly', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible();
  await page.screenshot({ path: 'screenshots/login.png' });
});

Tell your agent: “After making changes, run npx playwright test to verify.”

Solution 3: Visual Diff with Baseline

# Save baseline screenshots
proofshot start && agent-browser screenshot ./baseline/page.png && proofshot stop

# After changes, compare
proofshot diff --baseline ./baseline

Hosted option: UI Verify

If you would rather not keep baselines in your repo, UI Verify runs the same baseline diff as a hosted service. It reuses what your project already renders: Vitest browser-mode tests, Storybook stories, Playwright tests, or PNGs from any other tool. You upload a build with its CLI from CI, accept the first captures as baselines, and on later runs its GitHub App posts a check and a comment on each pull request.

The part that fits this guide is the agent side. An AI judge reads each changed snapshot and labels it an intended change or a regression, and the MCP server at https://uiverify.ai/mcp (one browser login, OAuth) lets Claude Code, Cursor or another MCP client list a build’s changes, read the judge’s reasoning, view a before-and-after crop of what moved, and accept or deny each change. So the agent that wrote the pull request can triage its own pixels, with you approving the direction.

What I saw: the public demo build (“Shoppy Web”) opens logged out. In it, the judge flagged an “Add to cart” button that went from a filled coral pill to an outline button as a high-confidence regression, on both the desktop and mobile snapshots.

Pricing (October 2026): Free with 10,000 snapshots and 100 AI reviews a month, no card; Starter $89 a month (30,000 snapshots, 1,000 AI reviews); Pro $199 a month (65,000 snapshots, 2,500 AI reviews); $0.004 per snapshot over the plan. Open-source projects get 50,000 snapshots a month free. A snapshot is one screen in one browser at one viewport, and only screens your change touches are captured.

Good to know: it needs CI, an API key and a GitHub pull request flow, so it suits a team repo more than a one-off local check. Once the CI baselines exist, uiverify check lets an agent preview an edit before pushing: it renders only the stories or tests you name on the same hosted renderers and diffs them against the CI baseline, with no pull request check and no change to the CI baseline. For a quick look at what an agent just built on your machine, ProofShot above is lighter.

PR Integration

Upload proof to GitHub PRs:

proofshot pr        # Auto-detect current PR
proofshot pr 42     # Specific PR number

Reviewers see video proof and screenshots inline with the code diff.

Best Practices

Always verify after UI changes — Make it part of your agent workflow
Screenshot key states — Empty states, loading states, error states
Check console errors — ProofShot captures these automatically
Use baselines — Visual regression catches subtle breaks
Include proof in PRs — Visual evidence > trust

Last verified: March 29, 2026. UI Verify added and verified October 26, 2026 (uiverify check added the same day from its docs).