PR Preview — record before/after PR videos with Claude Code

Works with Claude Code · MCPSee what your PR changed — before & after, in a clip<br>Ask Claude Code to record it — describe the flow and PR Preview drives your app in a real Chrome window, capturing a before/after video for your pull request. Free, open source, runs locally, ships in under a minute.<br>$npm i -D @qwertybit/pr-previewCopy<br>See how it works ↓·Star it on GitHub →

One prompt in Claude Code → the app is driven automatically → before.mp4 + after.mp4, straight into your PR.

Quick start<br>Set it up once. Then Claude records for you.<br>Three one-time commands wire PR Preview into Claude Code. After that, just describe the flow — Claude drives your app and drops before.mp4 and after.mp4 into .pr-preview/output/.<br>Works with any framework — it drives your real dev server.<br>MP4 with ffmpeg, high-quality GIF fallback without it.<br>Everything stays on your machine — nothing is uploaded.<br>Read the docs on GitHub→<br>~/your-app — zshCopy

1$npm i -D @qwertybit/pr-preview<br># add the dev dependency

2$npx playwright install chromium<br># one-time browser download

3$npx pr-preview init<br># writes .mcp.json so Claude Code can drive it

Then just ask Claude Code<br>❯Use pr-preview to record my checkout flow — add a book, then check out.Copy<br>…or run the /record slash command. Chrome opens and records on screen — nothing headless.

Prefer to do it by hand? npx pr-preview run records it in the same harness →

Works with Claude Code (MCP)<br>Just ask Claude. It records itself.<br>Describe the flow in plain English — or run the /record skill. Claude drives your real app through the PR Preview MCP server: a Chrome window opens, the journey runs on screen (not headless), and out comes a before/after clip it can drop straight into your PR.

❯ You<br>Use pr-preview to record my add-to-cart flow — add 3 books, then checkout. Then open the PR.

Claude<br>✓ Opened Chrome · drove the journey · before.mp4 + after.mp4 · opened the PR.

One prompt — Claude grounds by the accessibility tree, zero selectors.<br>A real, visible Chrome harness — you watch it happen, step by step.<br>Agent-driven, but a real capture of your real app — nothing is faked.<br>Or add the /record slash command<br>$mkdir -p ~/.claude/skills/record && curl -fsSL https://www.pr-preview.com/record-skill -o ~/.claude/skills/record/SKILL.mdCopy<br>/record localhost:3000 add 3 books, then checkout

See the Claude Code guide →

PR PreviewFree & Open SourceRecording your journey<br>BEFORE mainAFTER feat/onboarding

Log in

Step 3 of 5<br>Click “Log in”<br>Type email & password<br>Open the dashboard<br>Create a project<br>Stop recording

A real Chrome window opens and the journey runs on screen — headed, not hidden.

Why not just screen-record?<br>A polished clip, not a heavy GIF<br>The same journey, two ways. PR Preview drives your real app by its accessibility tree and captures a clean, PR-ready MP4 — hand-rolling it with generic browser tools doesn't come close.<br>Weighing the options? See how it compares as a free Loom alternative, how it uses Playwright without a script, and how to add the video to your pull request.

With pr-previewWithout (browser tools + GIF)OutputClean captioned MP4, ~0.6 MB, smoothOverlay-heavy GIF, ~2 MB, steppy 14 framesDrivingOne prompt → agent grounds by the accessibility treeManual screenshot → find coordinates → click, step by stepFramingCropped to the app, branch caption, before/afterWhole browser viewport, generic overlaysPR-readyYes — the MP4 embeds inlineNot really

In your pull request<br>Built for the AI era of code review<br>AI writes more of the diff than ever, but generated code doesn't show how the UI behaves. Drop the clips into the PR body and GitHub embeds them inline — the change is obvious in seconds.

Checkout redesign #312<br>Open<br>aria-dev wants to merge 4 commits into main from feat/checkout

ConversationCommits 3ChecksFiles changed 12<br>aria-dev commented · just now<br>Reworked the cart → checkout flow. Here's the visual diff:<br>Before — main

0:14<br>After — feat/checkout

0:14

🎬 Recorded with PR Preview · before.mp4, after.mp4

No agent required<br>No Claude? No problem.<br>Not using an AI agent — or you'd just rather click through it yourself? Run one command and demonstrate the journey by hand in the same harness. Same real capture, same before/after clip.<br>$npx pr-preview runCopy

01Run one command<br>npx pr-preview run opens the same harness in a controlled Chrome window — no agent needed.

02Click through the flow yourself<br>Perform the journey by hand; each action lands in the sidebar as an editable step.

03It captures your real run — live<br>The clip is your actual run, not a re-enactment — so it never drifts on stateful apps.

04Out come before.mp4 & after.mp4<br>Two captioned clips land in .pr-preview/output/, ready to drag into your PR.

Recognition<br>Off to a strong start<br>Developers voted PR Preview #4 Product of the Day on its Fazier launch. Thank you — we're just getting started.

PR Preview for Teams · Coming soonA home for your team's previews<br>The...