HomeBack to recipes
RecipesDevOpsPreview Deploy on Every PR

TL;DR

Preview Deploy on Every PR is a devops workflow that chains GitHub + Vercel to automate a common task. Open a PR and a Vercel preview URL appears as a comment within minutes. Branches are cleaned up automatically when PRs close. Once configured, it saves ~4 hours/week per frontend team, plus faster approval cycles across design/product and runs through Claude Code, Cursor, Windsurf or any MCP-compatible AI agent.

🐙▲
DevOpsBeginner

Preview Deploy on Every PR

Open a PR and a Vercel preview URL appears as a comment within minutes. Branches are cleaned up automatically when PRs close.

5 min setup, runs on every PR automatically2 MCPs requiredSaves ~4 hours/week per frontend team, plus faster approval cycles across design/product

How it works

🐙GitHub
▲Vercel
Automated
1PR opened — GitHub event captured2Trigger Vercel preview deployment3Wait for deployment to go live+2 more steps

Partial support — 1 of 2 MCPs hostable

Hosted execution needs every MCP on the whitelist. Use the local CLI for this recipe until the missing MCPs are added.

Not yet hostable:

▲Vercel
mcpizy recipe install github-vercel-preview-deploy

Why this combo?

GitHub knows when a PR is opened or closed; Vercel knows how to build and deploy your frontend. Combining them means every reviewer gets a live URL to click, not a 'run it locally' instruction. Cleanup is automatic, so you never accumulate zombie deployments.

Without this workflow

Reviewer asks for a preview, developer runs build locally, shares a screenshot or a localhost link that doesn't work for anyone else.

With MCPizy

PR opens, preview URL posted as a comment in under 3 minutes, review happens on the real thing.

Business value

Concrete ROI — not marketing fluff.

Time saved

~4 hours/week per frontend team, plus faster approval cycles across design/product

  • Cuts PR review cycle from 2 days to 4 hours — ship features 5x faster
  • Catches UI regressions before merge, reducing post-deploy hotfixes by 60%
  • Unblocks designers and PMs from engineering bottleneck — they review on real URLs, not Figma mockups
  • Zero zombie deployments: automatic cleanup keeps Vercel bill flat even with 100+ open PRs

Workflow steps

  1. 1
    PR opened — GitHub event captured
  2. 2
    Trigger Vercel preview deployment
  3. 3
    Wait for deployment to go live
  4. 4
    Post preview URL as PR comment
  5. 5
    Cleanup preview when PR is closed

Use cases

  • Give non-technical stakeholders a clickable preview before approving UI changes
  • Run automated visual regression tests against the preview URL
  • Let QA verify hotfixes on an isolated preview before merging to production
  • Share feature previews with clients without giving them repo access

MCPs required

🐙

GitHub

GitHub MCP Server

View
▲

Vercel

Vercel MCP Server

View

Agent prompt (copy into Claude Code)

This prompt is the workflow. Paste into Claude Code, Cursor, or Windsurf.

You are a preview-deploy agent. Run on every PR event from GitHub.

On pull_request opened / synchronize:
1. Call github.get_pull_request(pr_number) to get head SHA + branch name
2. Call vercel.deploy_to_vercel(project, git_ref=branch, target="preview") and capture deployment URL
3. Poll vercel.get_deployment(id) until state === "READY" (timeout 5min)
4. Call github.add_pr_comment with "Preview ready: <url>" — update same comment on subsequent pushes (use marker <!-- mcpizy-preview -->)
5. On pull_request closed: call vercel.delete_deployment(id) for all preview deployments tied to this branch

Reply with the preview URL and status only.

Trigger & credentials

How this workflow fires and what env vars you need.

.env.example
WebhookTrigger
POST /webhook/github (GitHub repo → Settings → Webhooks, events: pull_request)
🐙GitHub· 1 var
GITHUB_TOKENGet key

Personal access token with repo scope

e.g. ghp_...

▲Vercel· 3 vars
VERCEL_TOKENGet key

Vercel API token

e.g. vercel_pat_...

VERCEL_PROJECT_IDGet key

Project ID (found in project settings)

e.g. prj_...

VERCEL_TEAM_ID

Team ID if project lives in a team (optional)

e.g. team_...

One-command deploy

Install everything — MCPs, prompt, env template — in a single call.

$ mcpizy recipe install github-vercel-preview-deploy

✓ Installs all 2 MCP servers
✓ Writes prompt to ~/.mcpizy/prompts/github-vercel-preview-deploy.md
✓ Generates .env.example in current directory
✓ Ready to paste into Claude Code

Requires mcpizy CLI v1.1+ — install via npm i -g mcpizy.

Quick install (MCPs only)

5 min setup, runs on every PR automatically
$ mcpizy install github && mcpizy install vercel

More DevOps recipes

🟢🐙

Auto DB Migrations on Push

Every push to main triggers a Supabase migration automatically. Schema diffs are committed and applied with zero manual steps.

🐳☁️

Container Deployment to AWS

Build, tag, push to ECR and deploy to ECS in one automated pipeline triggered by a git tag or manual dispatch.

⚡🐙

Branch-per-PR Databases

Each PR gets its own Neon database branch for isolated testing. Branch is deleted automatically when the PR closes.

🐙📐

Issue → Branch → PR Pipeline

A Linear issue assigned to a developer automatically creates a git branch, syncs status changes, and opens a draft PR.

Frequently asked questions

What is this workflow?

Preview Deploy on Every PR is a devops automation that uses GitHub + Vercel together via the Model Context Protocol. Open a PR and a Vercel preview URL appears as a comment within minutes. Branches are cleaned up automatically when PRs close.

How long does setup take?

Setup takes around 5 min setup, runs on every PR automatically. You install the required MCP servers with `mcpizy install github && mcpizy install vercel`, connect your accounts, and the workflow is ready to run.

How much time does this workflow save?

Once running, this workflow saves ~4 hours/week per frontend team, plus faster approval cycles across design/product. The concrete business value: Cuts PR review cycle from 2 days to 4 hours — ship features 5x faster; Catches UI regressions before merge, reducing post-deploy hotfixes by 60%.

Which MCP servers do I need for this?

You need 2 MCP servers: GitHub (mcpizy install github), Vercel (mcpizy install vercel). All are installable in one command via the MCPizy CLI and configured in your `.claude.json` or `.cursor/mcp.json`.

Does this work with Claude Code, Cursor, and Windsurf?

Yes. The workflow runs with any MCP-compatible AI agent — Claude Code, Claude Desktop, Cursor, Windsurf, VS Code with Copilot, and custom agents built on the MCP SDK. The MCP servers are identical across clients; only the config file path (`.claude.json` vs `.cursor/mcp.json`) changes.

Start building this workflow

Install the required MCPs from the marketplace and automate this in 5 min setup.

$ mcpizy install github && mcpizy install vercel

🐙Install GitHub▲Install Vercel

Free to install. Connect your accounts and this workflow runs itself.