โ† AI Tools
WorkflowBeginner

ProofShot

A tool for visually recording and diagnosing the front-end operations of an AI coding agent.

ProofShot is an open-source, CLI-based verification workflow management tool that visually records and diagnoses the front-end and user interface development tasks performed by autonomous AI coding agents in a local browser environment, helping human developers easily review the results. Initially released on March 12, 2026, by a project team led by developer AmElmo, this tool is designed to overcome the visual limitations of AI agents that autonomously modify code and manipulate browsers, preventing them from determining whether the results they build align with design guidelines or render as intended. Technically, it incorporates the agent-browser library provided by Vercel, enabling it to securely control a headless Chromium session while simultaneously capturing video streams in real-time and integrating various back-end/front-end runtime logs from the console and server. Similar to how a black box in a vehicle records the entire driving situation and links sensor data at specific events like hard braking or collisions, ProofShot builds a single, packaged report by matching every click, key input, and screen navigation action performed by the agent with recorded video frames. Existing AI agent assistance tools are limited to using Playwright or the Chrome DevTools Protocol to simply query the DOM structure as text or capture a single screenshot, which severely restricts the ability to verify whether the agent has correctly completed the entire interaction. Furthermore, developers must manually reproduce the agent's work by turning on a local server and clicking through all the steps, creating a bottleneck in the process of human verification of autonomous coding agents' productivity. Unlike these simple browser control tools, ProofShot differentiates itself by organizing the agent's entire navigation path into a timeline and perfectly aligning captured screenshots and millisecond-synchronized interaction logs for each step, providing them in a single HTML viewer. This allows developers to visually confirm and approve the agent's actions in just 10 seconds by simply opening the HTML report, without the need to set up a complex local debugging environment. In a typical web application development workflow, if a developer asks an AI agent to implement a chart page with a complex SaaS dashboard and real-time graphs, the agent will immediately start a local server and begin a verification session using the `proofshot start` command. The agent performs a series of scenarios, such as calling agent-browser to fill out the login form, navigate to the dashboard, and click the data refresh button. All network request errors and console exception logs that occur during this process are automatically detected and recorded using the error pattern matching feature built into the CLI. When the task is completed, the session is safely terminated using the `proofshot stop` command, and the generated HTML evidence is automatically uploaded as a comment with a video and screenshot summary to the corresponding pull request using the `proofshot pr` command when creating a GitHub Pull Request. This allows reviewers to verify that the code modified by the agent actually works perfectly by watching a video, without the need for complex front-end builds or DB migrations, and this autonomous loop significantly reduces the overall error cost of the development cycle.

๐Ÿ’ป System Requirements

๐Ÿง RAM

0 (CPU only, no separate external GPU hardware required)

๐Ÿ’พStorage

Less than 50MB for package installation; 500MB or more of free space recommended for storing browser session videos and screenshots

โšก Installation

### 4-1. Quick Start

```bash
npm install -g proofshot && proofshot install
```

### 4-2. Detailed Installation

```bash
# Install the ProofShot package globally
npm install -g proofshot

# Detect AI coding tools and install local agent skills (integrates with Claude, Cursor, etc.)
proofshot install

# (Optional) If you want to explicitly install skills for specific agent tools
proofshot install --only claude
```
๐Ÿ“„ Official Docs๐Ÿ™ GitHub

๐Ÿ“ Update Notes

No update notes yet.

๐Ÿงช Related Code of Life

No related Code of Life posts yet.