# PR Preview — full reference for LLMs

PR Preview is a free, open-source npm CLI that records a before/after video of your pull request. Ask Claude Code to record it — through the built-in MCP server it drives your app in a real Chrome window and captures the journey automatically — or run it by hand. Either way reviewers see the actual visual change, not just the diff. Runs locally; nothing is uploaded.

Site: https://www.pr-preview.com
Package: @qwertybit/pr-preview (https://www.npmjs.com/package/@qwertybit/pr-preview)
Source: https://github.com/QwertyBit-Ventures/pr-preview (MIT)
Maintainer: SC QWERTYBIT SRL, Constantin Voda 16, Bucharest, Romania (VAT RO38120209)

## What it is
PR Preview is a command-line tool for developers. On a pull-request branch it
records a real journey through your running app, captures it live (the clip IS
the recording — no replay, so it never drifts on stateful apps), and writes a
captioned video. It records the same journey on the PR's base branch too, giving
a true before/after. Drag the two files into the PR description and GitHub embeds
them inline.

Why it matters: in the AI era, far more of a diff is machine-generated, and
reviewers can't infer UI behaviour from reading generated code. A 15-second
before/after clip makes the visual change obvious in seconds.

## Quick start
  $ npm i -D @qwertybit/pr-preview   # add the dev dependency
  $ npx playwright install chromium   # one-time browser download
  $ npx pr-preview init   # writes .mcp.json so Claude Code can drive it

The three commands above are one-time setup. To record, either ask Claude Code
(agent mode) — e.g. "Use pr-preview to record my checkout flow — add a book, then
check out." — or run "npx pr-preview run" to click through it by hand. Output lands
in .pr-preview/output/ as before.mp4 and after.mp4 (high-quality GIF fallback if
ffmpeg is not installed). Single-clip mode (--single) records one standalone demo
instead of a comparison. Use --url to point at an app you already run instead of a
managed dev server.

## Privacy & security
Everything runs on your machine. PR Preview opens your app in a local Chrome
window and writes video files to your project. No source code, app data, or video
is uploaded. The upcoming hosted service only ever handles the finished clips you
explicitly choose to share.

## Claude Code / agent integration
PR Preview ships a local MCP server (npx pr-preview mcp, registered via .mcp.json
by "npx pr-preview init"), so Claude Code can drive the whole recording itself.
Two modes:
- Agent mode: describe the journey in plain English (e.g. "record my add-to-cart
  flow: add 3 books, then go to checkout"). Claude opens your app in a real Chrome
  window, reads the page's accessibility tree, performs each action step by step,
  records the live session, and can commit the clip and open the PR. It is
  agent-driven but still a real capture of your real app — nothing is synthesized.
- Manual mode: "npx pr-preview run" opens Chrome for you to click through yourself.
Both modes produce the same before.mp4 and after.mp4. In agent mode only the
page's element labels/roles are shared with Claude to decide actions; manual mode
uploads nothing. Claude Code uses your existing Claude session — there is no
separate API key for PR Preview. Full guide: https://www.pr-preview.com/claude-code.

For a one-liner, PR Preview ships a downloadable /record slash command. Save the
SKILL.md from https://www.pr-preview.com/record-skill to ~/.claude/skills/record/SKILL.md, then
run "/record <url> <journey>" (e.g. "/record localhost:3000 add a book, then
checkout") and Claude records it through the MCP server automatically.

## PR Preview for Teams (hosted, coming soon)
A paid, opt-in add-on: host clips with permanent links, a synced before/after
review player, team reviewers and timestamped comments, public/private sharing,
auto-posting to the PR via a GitHub app, and a per-repo visual changelog. The CLI
stays free and MIT-licensed.

## Guides (landing pages)
- Pull request video (https://www.pr-preview.com/pull-request-video): how to add a video to a GitHub
  pull request. GitHub embeds MP4/MOV files inline when you drag them into a PR
  description (no public API — it's a drag-and-drop upload to GitHub's own CDN).
  Limits: 10 MB for images/GIFs, 100 MB for videos. PR Preview clips are a few
  hundred KB. MP4 by default; high-quality GIF fallback without ffmpeg.
- Loom alternative (https://www.pr-preview.com/loom-alternative): PR Preview is a free, open-source,
  local-first alternative to Loom for developers. Loom uploads a single take to its
  cloud and returns a link; PR Preview records a before/after of the actual UI
  change on your machine and outputs an MP4 you drag into the PR. No account, MIT.
  Loom remains better for talking-head/webcam walkthroughs; PR Preview is for silent,
  reproducible before/after code-review clips.
- Playwright alternative (https://www.pr-preview.com/playwright-alternative): PR Preview runs on the
  Playwright engine but you never write a script or selector — describe the flow in
  plain English (agent mode) or click through it (manual mode). It complements, and
  does not replace, a Playwright end-to-end test suite. Framework-agnostic (React,
  Vue, Svelte, Angular, plain HTML).
- Changelog (https://www.pr-preview.com/changelog): release notes for the CLI, also available as an
  RSS feed at https://www.pr-preview.com/rss.xml.

## Pricing
- Open-source CLI: free forever, MIT.
- PR Preview for Teams: early access (join at https://www.pr-preview.com/#teams).

## FAQ
Q: Is PR Preview really free?
A: 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.

Q: Does my source code or app data leave my machine?
A: 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.

Q: Which frameworks does it work with?
A: 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.

Q: Do I need ffmpeg?
A: 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.

Q: How do the videos end up in a pull request?
A: 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.

Q: Can I run it from Claude Code?
A: 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.

## Legal
- License (MIT): https://www.pr-preview.com/license
- Privacy Policy: https://www.pr-preview.com/privacy
- Terms & Conditions: https://www.pr-preview.com/terms