# PR Preview

> 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.

PR Preview is a free, open-source npm CLI (@qwertybit/pr-preview) that records a UI journey
through your web app and produces polished before/after video clips for a pull
request — so reviewers see the actual visual change, not just the code diff.
Runs entirely locally; nothing is uploaded. PR Preview for Teams — a hosted service (clip hosting,
reviewers, comments, sharing) is coming soon.

## Quick start (set up once, then Claude Code records for you)
- npm i -D @qwertybit/pr-preview
- npx playwright install chromium
- npx pr-preview init   # writes .mcp.json so Claude Code can drive it
- Then in Claude Code: "Use pr-preview to record my checkout flow — add a book, then check out."
  → before.mp4 + after.mp4 in .pr-preview/output/
- Prefer to do it by hand? npx pr-preview run opens the same harness.

## The /record skill
PR Preview ships a downloadable Claude Code slash command. Install it, then run
"/record <url> <journey>" to record any flow in one line:
  https://www.pr-preview.com/record-skill  (SKILL.md — save to ~/.claude/skills/record/SKILL.md)

## Key links
- [Home](https://www.pr-preview.com/): what it is, how to install, and how Claude Code records it automatically
- [Claude Code](https://www.pr-preview.com/claude-code): record app videos with Claude Code — describe a flow in plain English and the agent drives your app in Chrome via a local MCP server, records it, and opens the PR
- [Guides](https://www.pr-preview.com/guides): hub linking every PR Preview guide
- [Pull request video](https://www.pr-preview.com/pull-request-video): how to add a video to a GitHub pull request — GitHub embeds dragged-in MP4s inline, size limits, MP4 vs GIF fallback
- [Deploy preview video](https://www.pr-preview.com/deploy-preview-video): point PR Preview at a Vercel/Netlify deploy preview URL with `run --url <url> --single` and get a clip for the PR body; note that an automatic before/after needs the local worktree flow, not --url
- [Loom alternative](https://www.pr-preview.com/loom-alternative): a free, open-source, local-first Loom alternative for pull requests and code review — records a before/after, nothing uploaded
- [Playwright alternative](https://www.pr-preview.com/playwright-alternative): record a video with the Playwright engine without writing a script — plain-English or manual, framework-agnostic
- [Changelog](https://www.pr-preview.com/changelog): release notes for the CLI (also available as RSS at https://www.pr-preview.com/rss.xml)
- [/record skill](https://www.pr-preview.com/record-skill): the downloadable Claude Code slash command (SKILL.md)
- [GitHub](https://github.com/QwertyBit-Ventures/pr-preview): source, docs, issues (MIT licensed)
- [npm](https://www.npmjs.com/package/@qwertybit/pr-preview): the @qwertybit/pr-preview package
- [License](https://www.pr-preview.com/license): MIT
- [Privacy](https://www.pr-preview.com/privacy)
- [Terms](https://www.pr-preview.com/terms)
- [Full text for LLMs](https://www.pr-preview.com/llms-full.txt)

## Notes
- Works with any framework (React, Vue, Svelte, Angular, plain HTML).
- MP4 with ffmpeg; high-quality GIF fallback without it.
- Claude Code integration is the default way to record: a local MCP server lets Claude drive the whole recording from a plain-English prompt or the /record skill (agent mode); manual click-through mode still works too. Details at https://www.pr-preview.com/claude-code.
- Scriptable from Claude Code / CI — config-driven, no flags.
- Maintained by SC QWERTYBIT SRL (Bucharest, Romania).