vercel-auto-deploy — Claude Code hook: what it does, how to install
Triggers automated Vercel deployments right after Claude Code edits source files in your project.
npx claude-code-templates@latest --hook automation/vercel-auto-deployWhat vercel-auto-deploy does
The hook intercepts PostToolUse events matching Write, Edit, and MultiEdit actions. When a write operation succeeds, the shell script inspects the file extension against .js, .jsx, .ts, .tsx, .json, .md, .css, .scss, and .html. Changes inside node_modules, .next, or .vercel directories are ignored.
Branch context determines the deployment flow. For main or master, the script issues a POST request directly to the Vercel API v13 with your project ID and Git reference. On develop or staging branches, it runs vercel --yes --force to push a preview build. Any other branch stops execution silently.
Without VERCEL_TOKEN and VERCEL_PROJECT_ID present in your environment, the script prints a warning and skips deployment. The hook also relies on bash, curl, and jq being installed in your environment.
What it helps with
- trigger Vercel production deployments automatically after file edits
- generate preview deployments when editing in develop or staging branches
- prevent deployment triggers on generated files in node_modules or .next
Example prompts for the agent
- Update the navigation links inside
Header.tsx - Change the primary accent color in
styles/main.css - Update redirects and rewrites in
routes.json
How to install vercel-auto-deploy
1claude-code-templates
npx claude-code-templates@latest --hook automation/vercel-auto-deploy2Manually: put the files in place
.claude/settings.jsonThe hooks block: event (PreToolUse, PostToolUse, Stop…) → command. Personal ones go to ~/.claude/settings.json
Step by step, with commands for each platform: Claude Code hooks: what they are, where to configure them, how to block a risky command
Questions about vercel-auto-deploy
How to install vercel-auto-deploy in Claude Code?
Run npx claude-code-templates@latest --hook automation/vercel-auto-deploy in your project folder. The setup registers the hook inside .claude/settings.json.
What does vercel-auto-deploy do?
It listens to file change operations performed by Claude Code and dispatches deployments to Vercel depending on the checked-out Git branch.
Which credentials are required for the hook to work?
You must export VERCEL_TOKEN and VERCEL_PROJECT_ID into your environment variables before running Claude Code.
Source text
vercel-auto-deploy.json · MIT
{
"description": "Automatically trigger Vercel deployments when code changes are committed, with environment-specific deployment strategies and rollback on failure. Setup: Export environment variables 'export VERCEL_TOKEN=your_token' and 'export VERCEL_PROJECT_ID=your_project_id' (get your token from vercel.com/account/tokens and project ID from your Vercel dashboard). Hook triggers on PostToolUse for Write, Edit, and MultiEdit operations affecting source code files.",
"hooks": {
"PostToolUse": [
{
"matcher": "Write|Edit|MultiEdit",
"hooks": [
{
"type": "command",
"command": "bash -c 'input=$(cat); TOOL_NAME=$(echo \"$input\" | jq -r \".tool_name\"); FILE_PATH=$(echo \"$input\" | jq -r \".tool_input.file_path // empty\"); SUCCESS=$(echo \"$input\" | jq -r \".tool_response.success // false\"); if [ \"$SUCCESS\" = \"true\" ] && [[ \"$FILE_PATH\" =~ \\.(js|jsx|ts|tsx|json|md|css|scss|html)$ ]] && [[ ! \"$FILE_PATH\" =~ node_modules ]] && [[ ! \"$FILE_PATH\" =~ \\.next ]] && [[ ! \"$FILE_PATH\" =~ \\.vercel ]]; then echo \"🚀 Code change detected in $FILE_PATH, checking for auto-deployment...\"; if [ -n \"$VERCEL_TOKEN\" ] && [ -n \"$VERCEL_PROJECT_ID\" ]; then BRANCH=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo \"unknown\"); if [ \"$BRANCH\" = \"main\" ] || [ \"$BRANCH\" = \"master\" ]; then echo \"📦 Triggering production deployment on $BRANCH branch...\"; DEPLOY_RESULT=$(curl -s -X POST \"https://api.vercel.com/v13/deployments\" -H \"Authorization: Bearer $VERCEL_TOKEN\" -H \"Content-Type: application/json\" -d \"{\\\"name\\\":\\\"auto-deploy\\\",\\\"project\\\":\\\"$VERCEL_PROJECT_ID\\\",\\\"gitSource\\\":{\\\"type\\\":\\\"github\\\",\\\"ref\\\":\\\"$BRANCH\\\"}}\"); DEPLOY_URL=$(echo \"$DEPLOY_RESULT\" | jq -r \".url // empty\"); if [ -n \"$DEPLOY_URL\" ]; then echo \"✅ Deployment initiated: https://$DEPLOY_URL\"; echo \"🔄 Monitor status: vercel ls --limit 1\"; else echo \"❌ Deployment failed. Check Vercel logs.\"; fi; elif [ \"$BRANCH\" = \"develop\" ] || [ \"$BRANCH\" = \"staging\" ]; then echo \"🎯 Triggering preview deployment on $BRANCH branch...\"; vercel --yes --force 2>/dev/null && echo \"✅ Preview deployment completed\" || echo \"❌ Preview deployment failed\"; else echo \"ℹ️ Auto-deployment disabled for branch: $BRANCH (only main/master/develop/staging)\"; fi; else echo \"⚠️ VERCEL_TOKEN or VERCEL_PROJECT_ID not configured. Set environment variables to enable auto-deployment.\"; fi; else echo \"ℹ️ File $FILE_PATH not eligible for auto-deployment (non-source file or unsuccessful operation)\"; fi'",
"timeout": 120
}
]
}
]
}
}
© davila7 · MIT · davila7/claude-code-templates