Skip to main content
hook

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.

Install into Claude Code · claude-code-templates All methods and platforms ↓
npx claude-code-templates@latest --hook automation/vercel-auto-deploy
Open on GitHub

What 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-deploy

2Manually: put the files in place

.claude/settings.json

The 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

Similar hooks

All hooks for DevOps and infrastructure →

From the same set804

The whole set →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor