{"slug": "record-before-and-after-clips-for-pull-request-using-claude-code", "title": "Record before and after clips for pull request using Claude Code", "summary": "PR Preview, an open-source tool from QwertyBit Ventures, lets developers record before-and-after video clips of UI changes for pull requests using Claude Code or manual interaction. The tool drives a real Chrome window via Playwright, captures MP4 clips locally, and integrates with GitHub for inline PR embedding.", "body_md": "# See what your PR changed — before & after, in a clip\n\nAsk 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.\n\n`npm i -D @qwertybit/pr-preview`\n\nQuick start\n\n## Set it up once. Then Claude records for you.\n\nThree one-time commands wire PR Preview into Claude Code. After that, just describe the flow — Claude drives your app and drops `before.mp4`\n\nand `after.mp4`\n\ninto `.pr-preview/output/`\n\n.\n\n- Works with any framework — it drives your real dev server.\n- MP4 with\n`ffmpeg`\n\n, high-quality GIF fallback without it. - Everything stays on your machine — nothing is uploaded.\n\n[Read the docs on GitHub](https://github.com/QwertyBit-Ventures/pr-preview)\n\n`npm i -D @qwertybit/pr-preview`\n\n`npx playwright install chromium`\n\n`npx pr-preview init`\n\nThen just ask Claude Code\n\n`Use pr-preview to record my checkout flow — add a book, then check out.`\n\n…or run the `/record <url> <journey>`\n\nslash command. Chrome opens and records on screen — nothing headless.\n\nPrefer to do it by hand? `npx pr-preview run`\n\nrecords it in the same harness →\n\nWorks with Claude Code (MCP)\n\n## Just ask Claude. It records itself.\n\nDescribe the flow in plain English — or run the `/record`\n\nskill. 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.\n\n✓ Opened Chrome · drove the journey · before.mp4 + after.mp4 · opened the PR.\n\n- One prompt — Claude grounds by the accessibility tree, zero selectors.\n- A real, visible Chrome harness — you watch it happen, step by step.\n- Agent-driven, but a real capture of your real app — nothing is faked.\n\nOr add the /record slash command\n\n`mkdir -p ~/.claude/skills/record && curl -fsSL https://www.pr-preview.com/record-skill -o ~/.claude/skills/record/SKILL.md`\n\n/record localhost:3000 add 3 books, then checkout\n\n- Click “Log in”\n- Type email & password\n- Open the dashboard\n- Create a project\n\nA real Chrome window opens and the journey runs on screen — headed, not hidden.\n\nWhy not just screen-record?\n\n## A polished clip, not a heavy GIF\n\nThe 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.\n\nWeighing 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).\n\n| With pr-preview | Without (browser tools + GIF) | |\n|---|---|---|\n| Output | Clean captioned MP4, ~0.6 MB, smooth | Overlay-heavy GIF, ~2 MB, steppy 14 frames |\n| Driving | One prompt → agent grounds by the accessibility tree | Manual screenshot → find coordinates → click, step by step |\n| Framing | Cropped to the app, branch caption, before/after | Whole browser viewport, generic overlays |\n| PR-ready | Yes — the MP4 embeds inline | Not really |\n\nIn your pull request\n\n## Built for the AI era of code review\n\nAI 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.\n\n### Checkout redesign #312\n\nOpenaria-dev wants to merge 4 commits into `main`\n\nfrom `feat/checkout`\n\nReworked the cart → checkout flow. Here's the visual diff:\n\n🎬 Recorded with PR Preview · before.mp4, after.mp4\n\nNo agent required\n\n## No Claude? No problem.\n\nNot 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.\n\n`npx pr-preview run`\n\n- 01\n### Run one command\n\nnpx pr-preview run opens the same harness in a controlled Chrome window — no agent needed.\n\n- 02\n### Click through the flow yourself\n\nPerform the journey by hand; each action lands in the sidebar as an editable step.\n\n- 03\n### It captures your real run — live\n\nThe clip is your actual run, not a re-enactment — so it never drifts on stateful apps.\n\n- 04\n### Out come before.mp4 & after.mp4\n\nTwo captioned clips land in .pr-preview/output/, ready to drag into your PR.\n\n## A home for your team's previews\n\nThe CLI gives you the clips; Teams gives your team a place to host, review, and share them. The CLI stays free forever.\n\nHosted clips\n\nPermanent, fast links for every PR.\n\nSynced review player\n\nBefore & after play in lock-step.\n\nReviewers & comments\n\nTimestamped notes, right on the clip.\n\nShare anywhere\n\nPublic or private links for anyone.\n\nVisual changelog\n\nEvery merged PR’s clip, per repo.\n\nAuto-post to the PR\n\nA GitHub app posts it for you.\n\nLove the new spacing here 👏\n\nCan we keep the old CTA color?\n\n## Free CLI today. PR Preview for Teams next.\n\nOpen core: the command-line tool is MIT and free forever. The hosted layer is the paid add-on for teams.\n\n### Open Source CLI\n\n- Record before/after clips locally\n- Captioned MP4 / GIF with a pr-preview.com watermark\n- Any framework, any dev server\n- Runs offline — nothing uploaded\n- Single-clip or full comparison\n- Scriptable from Claude Code & CI\n\n[Get the open source CLI](https://github.com/QwertyBit-Ventures/pr-preview)\n\n### Teams\n\n- Everything in the free CLI — watermark-free\n- Host clips with permanent links\n- Synced before/after review player\n- Team reviewers & timestamped comments\n- Private & public sharing\n- Auto-post to the PR + visual changelog\n\n[Join the early access list](#teams)\n\n## Frequently asked questions\n\n## Is PR Preview really free?\n\nYes — 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.\n\n## Does my source code or app data leave my machine?\n\nNo. 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.\n\n## Which frameworks does it work with?\n\nAny 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.\n\n## Do I need ffmpeg?\n\nOnly for MP4 output, which we recommend. If ffmpeg isn’t installed, PR Preview produces a high-quality GIF instead. On macOS: brew install ffmpeg.\n\n## How do the videos end up in a pull request?\n\nIt 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.\n\n## Can I run it from Claude Code?\n\nYes. 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.\n\n## Be first to PR Preview for Teams\n\nThe 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.\n\nJust want the CLI? [Install it free](#install) · [Star on GitHub](https://github.com/QwertyBit-Ventures/pr-preview)", "url": "https://wpnews.pro/news/record-before-and-after-clips-for-pull-request-using-claude-code", "canonical_source": "https://www.pr-preview.com", "published_at": "2026-07-10 14:21:46+00:00", "updated_at": "2026-07-10 14:35:28.444665+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents"], "entities": ["QwertyBit Ventures", "Claude Code", "PR Preview", "Playwright", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/record-before-and-after-clips-for-pull-request-using-claude-code", "markdown": "https://wpnews.pro/news/record-before-and-after-clips-for-pull-request-using-claude-code.md", "text": "https://wpnews.pro/news/record-before-and-after-clips-for-pull-request-using-claude-code.txt", "jsonld": "https://wpnews.pro/news/record-before-and-after-clips-for-pull-request-using-claude-code.jsonld"}}