PR Preview

Capture Visual Changes in Your Pull Requests

PR Preview is a free, open-source npm CLI that records before/after videos of your pull request. It allows reviewers to see the actual visual change, not just the code diff. Whether you use AI agents or prefer manual recording, PR Preview ensures your UI changes are captured accurately and automatically.

How it Works

PR Preview offers two primary ways to record your application's journey:

• Agent-Driven (Claude Code): Describe the flow in plain English. Claude Code uses a built-in MCP server to drive your app in a real Chrome window, capturing a before/after clip automatically.
• Manual Mode: Run a single command and opens a controlled Chrome window where each action you take is captured as an editable step. Perform the journey by hand; each action lands in the sidebar as an editable step.

Key Features

• Real Capture: Runs in a headed Chrome window, not headless. You watch it happen, step by step.
• Privacy-First: Everything stays on your machine—nothing is uploaded to any remote server.
• Framework Agnostic: Works with any web app you can open in a browser (React, Vue, Svelte, Angular, plain HTML).
• High Quality: Produces polished MP4 files (or high-quality GIFs if ffmpeg is not installed) that are small enough to be embedded directly into GitHub pull requests.

Workflow Steps

1. Setup: Install the npm package and run the init command to wire PR Preview into Claude Code.
2. **Prompting:** Use a plain-English prompt in Claude Code to describe the flow (e.g., "record my checkout flow").
3. **Recording:** Claude drives your real app through the MCP server, opening a Chrome window and recording the journey.
4. **Output:** The tool automatically drops before.mp4 and after.mp4 files into your project's output folder, ready to drag into your PR description.