# Record before and after clips for pull request using Claude Code > Source: > Published: 2026-07-10 14:21:46+00:00 # See what your PR changed — before & after, in a clip 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. `npm i -D @qwertybit/pr-preview` Quick start ## Set it up once. Then Claude records for you. 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/` . - Works with any framework — it drives your real dev server. - MP4 with `ffmpeg` , high-quality GIF fallback without it. - Everything stays on your machine — nothing is uploaded. [Read the docs on GitHub](https://github.com/QwertyBit-Ventures/pr-preview) `npm i -D @qwertybit/pr-preview` `npx playwright install chromium` `npx pr-preview init` Then just ask Claude Code `Use pr-preview to record my checkout flow — add a book, then check out.` …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) ## Just ask Claude. It records itself. 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. ✓ Opened Chrome · drove the journey · before.mp4 + after.mp4 · opened the PR. - One prompt — Claude grounds by the accessibility tree, zero selectors. - A real, visible Chrome harness — you watch it happen, step by step. - Agent-driven, but a real capture of your real app — nothing is faked. Or add the /record slash command `mkdir -p ~/.claude/skills/record && curl -fsSL https://www.pr-preview.com/record-skill -o ~/.claude/skills/record/SKILL.md` /record localhost:3000 add 3 books, then checkout - Click “Log in” - Type email & password - Open the dashboard - Create a project A real Chrome window opens and the journey runs on screen — headed, not hidden. Why not just screen-record? ## A polished clip, not a heavy GIF 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. Weighing the options? See how it compares as a [free Loom alternative](/loom-alternative), how it [uses Playwright without a script](/playwright-alternative), and how to [add the video to your pull request](/pull-request-video). | With pr-preview | Without (browser tools + GIF) | | |---|---|---| | Output | Clean captioned MP4, ~0.6 MB, smooth | Overlay-heavy GIF, ~2 MB, steppy 14 frames | | Driving | One prompt → agent grounds by the accessibility tree | Manual screenshot → find coordinates → click, step by step | | Framing | Cropped to the app, branch caption, before/after | Whole browser viewport, generic overlays | | PR-ready | Yes — the MP4 embeds inline | Not really | In your pull request ## Built for the AI era of code review 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 Openaria-dev wants to merge 4 commits into `main` from `feat/checkout` Reworked the cart → checkout flow. Here's the visual diff: 🎬 Recorded with PR Preview · before.mp4, after.mp4 No agent required ## No Claude? No problem. 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. `npx pr-preview run` - 01 ### Run one command npx pr-preview run opens the same harness in a controlled Chrome window — no agent needed. - 02 ### Click through the flow yourself Perform the journey by hand; each action lands in the sidebar as an editable step. - 03 ### It captures your real run — live The clip is your actual run, not a re-enactment — so it never drifts on stateful apps. - 04 ### Out come before.mp4 & after.mp4 Two captioned clips land in .pr-preview/output/, ready to drag into your PR. ## A home for your team's previews The CLI gives you the clips; Teams gives your team a place to host, review, and share them. The CLI stays free forever. Hosted clips Permanent, fast links for every PR. Synced review player Before & after play in lock-step. Reviewers & comments Timestamped notes, right on the clip. Share anywhere Public or private links for anyone. Visual changelog Every merged PR’s clip, per repo. Auto-post to the PR A GitHub app posts it for you. Love the new spacing here 👏 Can we keep the old CTA color? ## Free CLI today. PR Preview for Teams next. Open core: the command-line tool is MIT and free forever. The hosted layer is the paid add-on for teams. ### Open Source CLI - Record before/after clips locally - Captioned MP4 / GIF with a pr-preview.com watermark - Any framework, any dev server - Runs offline — nothing uploaded - Single-clip or full comparison - Scriptable from Claude Code & CI [Get the open source CLI](https://github.com/QwertyBit-Ventures/pr-preview) ### Teams - Everything in the free CLI — watermark-free - Host clips with permanent links - Synced before/after review player - Team reviewers & timestamped comments - Private & public sharing - Auto-post to the PR + visual changelog [Join the early access list](#teams) ## Frequently asked questions ## Is PR Preview really free? Yes — the CLI is MIT-licensed and free forever, including commercial use. You run it locally and the clips are yours. PR Preview for Teams (hosted reviews + sharing) is a coming paid add-on; the CLI stays free. ## Does my source code or app data leave my machine? No. It runs entirely on your machine — opens your app locally, records, and writes the video to your project. Nothing is uploaded. The hosted service (opt-in, later) only handles clips you choose to share. ## Which frameworks does it work with? Any web app you can open in a browser — React, Vue, Svelte, Angular, plain HTML, server-rendered, SPA. It drives your real dev server (or an app you’re already running via --url), so there’s no framework-specific setup. ## Do I need ffmpeg? Only for MP4 output, which we recommend. If ffmpeg isn’t installed, PR Preview produces a high-quality GIF instead. On macOS: brew install ffmpeg. ## How do the videos end up in a pull request? It writes before.mp4 and after.mp4 to .pr-preview/output/ — drag them into your PR description and GitHub embeds them inline. PR Preview for Teams will post them automatically. ## Can I run it from Claude Code? Yes. Claude Code can drive the recording itself from a plain-English prompt (agent mode) through a local MCP server — it opens Chrome, performs the flow step by step, and can even open the PR for you. Prefer to do it by hand? Manual mode still opens Chrome for you to click through. Either way it's a real capture of your real app — nothing is synthesized. ## Be first to PR Preview for Teams The CLI is free today. Join the list to get hosted clips, team reviews, and sharing the moment they ship — and help shape what we build. Just want the CLI? [Install it free](#install) · [Star on GitHub](https://github.com/QwertyBit-Ventures/pr-preview)