ProofShot: Browser Verification for AI Coding Agents

ProofShot is an open-source, agent-agnostic CLI that gives AI coding agents the ability to verify UI features they build by recording browser sessions, capturing screenshots, and collecting errors. It addresses the problem where agents write code but can't see what it actually looks like in the browser or detect layout issues and console errors.

How It Works

The tool follows a three-step workflow: start, test, stop. The AI agent drives the browser using agent-browser commands while ProofShot records the session.

Basic usage:

proofshot start --run "npm run dev" --port 3000
# agent navigates, clicks, takes screenshots
proofshot stop

Detailed workflow example:

# 1. Start — open browser, begin recording, capture server logs
proofshot start --run "npm run dev" --port 3000 --description "Login form verification"

2. Test — the AI agent drives the browser
agent-browser snapshot -i  # See interactive elements
agent-browser open http://localhost:3000/login  # Navigate
agent-browser fill @e2 "[email protected]"  # Fill form
agent-browser click @e5  # Click submit
agent-browser screenshot ./proofshot-artifacts/step-login.png  # Capture proof
3. Stop — bundle video + screenshots + errors into proof artifacts
proofshot stop

Key Features

• Works with any AI coding agent that can run shell commands (Claude Code, Cursor, Codex, Gemini CLI, Windsurf, GitHub Copilot, etc.)
• Packaged as a skill so AI agents understand how to use it
• Built on agent-browser from Vercel Labs (described as "far better and faster than Playwright MCP")
• Not a testing framework — doesn't decide pass/fail, just provides evidence
• Generates self-contained HTML files with video, screenshots, and logs
• Can upload artifacts to GitHub PRs as inline comments with proofshot pr

Installation and Setup

npm install -g proofshot
proofshot install

The first command installs the CLI and agent-browser (with headless Chromium). The second detects your AI coding tools and installs the ProofShot skill at user level — works across all projects automatically.

Output Artifacts

Each session produces a timestamped folder in ./proofshot-artifacts/ containing:

• session.webm — Video recording of the entire session
• viewer.html — Standalone interactive viewer with scrub bar, timeline, and Console/Server log tabs
• SUMMARY.md — Markdown report with errors, screenshots, and video
• step-*.png — Screenshots captured at key moments
• session-log.json — Action timeline with timestamps and element data
• server.log — Dev server stdout/stderr (when using --run)
• console-output.log — Browser console output

Available Commands

• proofshot install — Detect AI coding tools and install ProofShot skill
• proofshot start — Start verification session with browser, recording, error capture
• proofshot stop — Stop recording, collect errors, generate proof artifacts
• proofshot exec — Pass-through command

The tool is completely free and open source, with no vendor lock-in or cloud dependency. It's designed for developers who use AI agents to build UI features and want to verify the results without manually opening the browser each time.