Agent skill
vercel-deploy-preview
Create and manage Vercel preview deployments for branches and pull requests. Use when deploying a preview for a pull request, testing changes before production, or sharing preview URLs with stakeholders. Trigger with phrases like "vercel deploy preview", "vercel preview URL", "create preview deployment", "vercel PR preview".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/vercel-pack/skills/vercel-deploy-preview
SKILL.md
Vercel Deploy Preview
Overview
Deploy preview environments for branches and pull requests. Every git push to a non-production branch generates a unique preview URL. Covers CLI-based previews, API-based previews, deployment protection, and comment integration.
Prerequisites
- Completed
vercel-install-authsetup - Project linked via
vercel link - Git repository connected in Vercel dashboard
Instructions
Step 1: Deploy Preview via CLI
# Deploy current directory to a preview URL (default — not --prod)
vercel
# Output:
# 🔗 Linked to your-team/my-app
# 🔍 Inspect: https://vercel.com/your-team/my-app/AbCdEfG
# ✅ Preview: https://my-app-git-feature-branch-your-team.vercel.app
# Deploy a specific directory
vercel ./dist
# Deploy and wait for build to complete (useful in CI)
vercel --no-wait # returns immediately with deployment URL
Step 2: Deploy Preview via REST API
# Create a deployment via API — useful for custom CI pipelines
curl -X POST "https://api.vercel.com/v13/deployments" \
-H "Authorization: Bearer $VERCEL_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"name": "my-app",
"target": "preview",
"gitSource": {
"type": "github",
"repoId": "123456789",
"ref": "feature/new-feature",
"sha": "abc123def456"
}
}'
Step 3: Check Deployment Status
# Poll deployment status until READY
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
"https://api.vercel.com/v13/deployments/dpl_xxxxxxxxxxxx" \
| jq '{state: .state, url: .url, readyState: .readyState}'
# States: QUEUED → BUILDING → READY (or ERROR/CANCELED)
// Programmatic polling
async function waitForDeployment(client: VercelClient, deploymentId: string) {
while (true) {
const d = await client.getDeployment(deploymentId);
if (d.state === 'READY') return d;
if (d.state === 'ERROR' || d.state === 'CANCELED') {
throw new Error(`Deployment ${d.state}: ${deploymentId}`);
}
await new Promise(r => setTimeout(r, 5000)); // poll every 5s
}
}
Step 4: Configure Preview Environment Variables
# Add env vars scoped to preview only
vercel env add DATABASE_URL preview
# Enter value when prompted
# Or via API — scope to preview environment
curl -X POST "https://api.vercel.com/v9/projects/my-app/env" \
-H "Authorization: Bearer $VERCEL_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"key": "DATABASE_URL",
"value": "postgres://preview-db:5432/myapp",
"type": "encrypted",
"target": ["preview"]
}'
Step 5: Deployment Protection
Vercel supports password-protecting preview deployments:
// vercel.json — require authentication for previews
{
"deploymentProtection": {
"preview": "vercel-authentication"
}
}
Options:
"vercel-authentication"— requires Vercel team login"standard-protection"— bypass for automation withx-vercel-protection-bypassheader- Disabled — previews are publicly accessible
Step 6: GitHub Integration — PR Comments
When a GitHub repo is connected, Vercel automatically:
- Creates a preview deployment on every push
- Posts a comment on the PR with the preview URL
- Updates the GitHub commit status (pending → success/failure)
- Adds "Visit Preview" link in the PR checks section
To configure in the Vercel dashboard:
- Settings > Git > Deploy Hooks for manual triggers
- Settings > Git > Ignored Build Step to skip builds for certain paths
# Ignored Build Step — skip deploy when only docs changed
# vercel.json
{
"ignoreCommand": "git diff HEAD^ HEAD --quiet -- . ':!docs' ':!*.md'"
}
Preview URL Patterns
| Branch | URL Pattern |
|---|---|
feature/auth |
my-app-git-feature-auth-team.vercel.app |
fix/bug-123 |
my-app-git-fix-bug-123-team.vercel.app |
| Random deploy | my-app-abc123def.vercel.app |
Output
- Preview deployment URL unique to each branch/commit
- Build logs accessible via Vercel dashboard or API
- PR comment with preview link (GitHub integration)
- Environment variables scoped to preview only
Error Handling
| Error | Cause | Solution |
|---|---|---|
BUILD_FAILED |
Build command failed | Check build logs: vercel inspect <url> |
FUNCTION_INVOCATION_FAILED |
Runtime error in function | Review function logs: vercel logs <url> |
NO_BUILDS |
No output detected | Verify outputDirectory in vercel.json |
| Preview not updating | Cached old deployment | Force rebuild: vercel --force |
DEPLOYMENT_BLOCKED |
Deployment protection active | Use x-vercel-protection-bypass header |
Resources
Next Steps
For edge function development, see vercel-edge-functions.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?