Vercel MCP Server + GitHub MCP Server

Beginner20 minutes
Use Cases

Common Use Cases

  • PR preview environments
  • Deployment status checks
  • Preview URL sharing
  • Branch-based staging
Before You Begin

Prerequisites

  • Vercel account with project
  • GitHub repository linked to Vercel
Walkthrough

Step-by-Step Guide

1

Link Vercel Project

Connect your GitHub repository to a Vercel project via MCP.

2

Configure Auto-Deploy

Set up Vercel to create preview deployments for every new branch.

3

Post Preview URL

When a preview deployment completes, post the URL on the PR.

async function notifyPreview(deployment) {
  if (deployment.meta.githubPrId) {
    await github.createComment({
      issue_number: deployment.meta.githubPrId,
      body: `🔗 Preview deployed: ${deployment.url}\n\nLatest commit: ${deployment.meta.githubCommitSha.slice(0,7)}`
    });
  }
}
4

Clean Up Old Previews

Automatically delete preview deployments when PRs are closed.

Examples

Code Examples

typescript
Deploy Status Check
async function checkDeployStatus(prNumber) {
  const deployments = await vercel.listDeployments({ meta: { githubPrId: prNumber } });
  const latest = deployments[0];
  return { url: latest.url, status: latest.readyState, created: latest.created };
}
Help

Troubleshooting

Preview deploy is slow+
Can I protect preview URLs?+

Quick Info

DifficultyBeginner
Time Estimate20 minutes
Tools
Vercel MCP ServerGitHub MCP Server

Need Integration Help?

Our team can implement this integration for you.

Get in Touch