Works with Claude Code · MCP
Record your app with Claude Code — automatically
Describe the flow in plain English. Claude drives your real app in a Chrome window, records the journey step by step, and drops a before/after video into your pull request. Free, open source, runs locally.
npm i -D @qwertybit/pr-previewStarting PR Preview and opening Chrome…
▸ add “Refactoring” to cart
▸ add “Clean Code” to cart
◷ open checkout…
✓ Rendered before.mp4 + after.mp4 — opened the PR with the clip embedded.
How it works
From a sentence to a PR video, in six steps
Install once, then just tell Claude Code what to film. It handles the browser, the recording, and the pull request.
- 01
Install PR Preview
Add the dev dependency to your project.
$npm i -D @qwertybit/pr-preview - 02
Connect it to Claude Code
Run init once — it writes a .mcp.json so Claude Code discovers the PR Preview tools automatically.
$npx pr-preview init - 03
Describe the flow in plain English
In Claude Code, name the tool and the flow — for example: “Use pr-preview to record my add-to-cart flow: add 3 books to the cart, then go to checkout.”
- 04
Watch it drive Chrome, step by step
Claude opens your app in a real Chrome window and performs each action live. The harness sidebar checks off every step as it goes.
- 05
Get before & after video
PR Preview renders before.mp4 and after.mp4 into .pr-preview/output/ — a true side-by-side of your branch against main.
- 06
Let it open the pull request
Claude can commit the clip, open the PR, and embed the video — no manual drag-and-drop.
- Click “Log in”
- Type email & password
- Open the dashboard
- Create a project
What you can say
Plain-English prompts, real recordings
No selectors, no scripts. Describe the journey the way you'd explain it to a teammate.
- ❯Use pr-preview to record my add-to-cart flow: add 3 books to the cart, then go to checkout.
- ❯With pr-preview, film the sign-up flow — create an account and land on the empty dashboard.
- ❯Use pr-preview to record the dashboard filtered to “last 30 days”, then export a CSV.
- ❯Have pr-preview record toggling dark mode across the settings and profile pages.
One-line install
Add the /record skill
Prefer a slash command? Install the /record skill, then run /record [url] [journey] — Claude drives pr-preview and hands you the finished clip.
- Uses the pr-preview MCP tools — drives the app automatically, no clicking.
- Asks which URL to record if you don't pass one.
- Same real capture — just fewer words to type.
Install (once)
mkdir -p ~/.claude/skills/record && curl -fsSL https://www.pr-preview.com/record-skill -o ~/.claude/skills/record/SKILL.mdThen, in Claude Code
Why it's different
An agent that films — not a script that replays
Agent-driven, real capture
Claude performs the flow in your actual app and PR Preview records the real session — never a synthesized or re-enacted video. What reviewers watch is what really happened.
No scripts, no selectors
You describe the journey in plain English. Claude reads the page's accessibility tree and picks elements by name — nothing to hand-write or maintain.
Runs on your machine
The app, the browser, and the video all stay local. Nothing is uploaded; only element labels are shared with Claude so it can decide the next action.
Works with any framework
React, Vue, Svelte, Angular or plain HTML — if it opens in a browser, Claude can drive it. It uses your real dev server, so there's zero setup.
Agent-native via MCP
PR Preview registers as a local MCP server, so Claude Code calls its tools directly — no flags, no glue code. Install, init, and start talking.
Closes the loop to a PR
Claude can commit the clip, open the pull request, and embed the before/after video — the whole thing runs from a single prompt.
Fully automated
One prompt, all the way to the pull request
Ask once and Claude Code runs the whole chain: record the journey, render the before/after clips, create the branch, open the PR, and attach the video. You review the result — not the busywork.
A note on honesty: GitHub only embeds a real video when it's hosted on its own CDN, which has no public API. So the open-source flow commits a lightweight GIF (or a release asset) and links the full clip. One-click hosted video embedded in the PR body is what PR Preview for Teams adds on top.
Claude Code — questions
Which agents does it work with?
Claude Code today, through a local MCP server that ships with the CLI. Any MCP-capable client can drive it, but the workflow is tuned for Claude Code.
Do I need a separate API key?
No. Claude Code is the brain and uses your existing Claude session to call the PR Preview tools — the CLI itself is free and MIT-licensed, with no key to configure.
Does my source code or app data leave my machine?
The recording runs entirely locally and no video or source is ever uploaded. In agent mode, only the accessibility text of the page (element labels and roles) is shared with Claude so it can choose the next action; in manual mode nothing is sent at all.
Which frameworks does it support?
Any web app you can open in a browser — React, Vue, Svelte, Angular, plain HTML, server-rendered or SPA. It drives your real dev server, so there's no framework-specific setup.
Is it reliable enough for a clean before/after?
Claude plans the steps first, then records a clean pass, and PR Preview captures your real app with no flaky replay. If it can't reach a step, you can take over for that step and hand back — it's the same recording.
Can Claude open the pull request automatically?
Yes — it can commit the clip, open the PR, and embed the video. One-click hosted video embedding in the PR body is part of PR Preview for Teams.
Can I still record by hand?
Always. Agent mode is purely additive — npx pr-preview run still opens Chrome for you to click through yourself, and both paths produce the same before.mp4 and after.mp4.
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 · Star on GitHub