← All Posts

How to Do Vercel Deployment on Claude Code (Step-by-Step)

You can deploy to Vercel from inside a Claude Code session by using the Vercel CLI through Claude's shell execution. Ask Claude to run vercel --prod, scaffold your vercel.json, set environment variables, or automate preview deployments, all without leaving your editor context. Works with any Claude Pro or Max plan that includes Claude Code access.

  • Vercel CLI supports full deployment from terminal: vercel for preview, vercel --prod for production
  • Claude Code can read, edit, and commit code then trigger a deploy in one continuous session
  • Usage limits apply per 5-hour window on Pro/Max plans; a mid-deploy lockout can break your flow

What is Claude Code and how does it run shell commands?

Claude Code is Anthropic's agentic coding tool that runs in your terminal and has direct access to your file system, shell, and version control. Unlike a chat interface, it can execute bash commands, edit files, and chain multi-step workflows autonomously.

This means you can describe a deployment task in plain English ("deploy the current branch to Vercel as a preview") and Claude will locate your project config, run the necessary CLI steps, read the output, and handle errors, without you switching windows or copy-pasting terminal output back into a chat.

For context on how usage windows affect long tasks, see when Claude Code usage resets and how to check your current usage limits.

How to set up Vercel CLI for Claude Code to use

Before Claude can deploy on your behalf, the Vercel CLI needs to be installed and authenticated in your environment. Claude Code can handle this setup if it isn't done yet.

Step 1: Install the Vercel CLI

Ask Claude Code to install the CLI globally:

install vercel CLI globally using npm

Claude will run:

npm install -g vercel

Step 2: Authenticate with Vercel

Authentication requires an interactive browser step, so do this yourself once before delegating to Claude:

vercel login

After login, a token is stored locally. Claude Code can use it for all subsequent deploys without re-authenticating. Alternatively, set a VERCEL_TOKEN environment variable for non-interactive CI-style flows.

Step 3: Link your project

In your project directory, run:

vercel link

This creates a .vercel/project.json file that stores your project and org ID. Once linked, Claude can deploy with a single command without any interactive prompts.

How to deploy to Vercel using Claude Code

Once the CLI is installed and the project is linked, you can hand off deployment entirely to Claude Code.

Preview deployment

Type a prompt like:

Run a Vercel preview deployment and show me the preview URL

Claude executes vercel, waits for the output, parses the preview URL, and returns it to you in the session. It can also capture build errors and suggest fixes inline.

Production deployment

Deploy the current state of the project to Vercel production

Claude runs vercel --prod. If the build fails, it reads the error output and proposes a fix before re-running, keeping everything in one continuous session.

Deploy after code changes

A common workflow: ask Claude to make a code change, commit it, and deploy in sequence:

Fix the broken API route in /api/users, commit the change with a descriptive message, then deploy to Vercel production

Claude handles the edit, the git add + git commit, and the vercel --prod call. For more on using Claude Code for commits, see how to do git commits on Claude Code.

How to manage environment variables for Vercel deployments

Claude Code can read your local .env file and push variables to Vercel using the CLI. Ask it to:

Sync my local .env.production variables to Vercel's production environment

Claude will run vercel env add for each variable or use vercel env pull to fetch remote variables into a local file. Be careful: never ask Claude to print secrets to the terminal or log them to files.

According to Vercel's environment variable docs, variables can be scoped to Production, Preview, and Development environments independently, which Claude can handle when given the right context.

How to automate Vercel deployments with a vercel.json config

You can ask Claude Code to create or update a vercel.json file to control routing, build settings, headers, and redirects. Example prompt:

Create a vercel.json that rewrites /api/* to my Express server and sets a Cache-Control header on static assets

Claude writes the config, validates the JSON structure, and can immediately deploy it for you to test. This is useful for Next.js projects, monorepos with custom output directories, or apps with server-side functions.

Example vercel.json for a Next.js + API project

{
  "rewrites": [{ "source": "/api/:path*", "destination": "/api/:path*" }],
  "headers": [
    {
      "source": "/_next/static/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
    }
  ]
}

Key Takeaways

  1. Install and authenticate the Vercel CLI once; Claude Code handles all subsequent deploys
  2. Run vercel link in your project root to avoid interactive prompts during automated sessions
  3. Use vercel for preview deployments and vercel --prod for production
  4. Claude can chain code edits, git commits, and deploys in a single uninterrupted session
  5. Scope environment variables by environment (Production/Preview/Development) using vercel env add
  6. Monitor your usage before starting a large deploy session to avoid hitting the 5-hour usage window mid-task

Why usage limits matter during Vercel deployments

Vercel deployments with Claude Code can involve several back-and-forth steps: fixing build errors, updating env vars, re-running deploys. If you're near the end of your usage window on a Claude Pro or Max plan, a mid-session lockout means waiting up to 5 hours before you can continue, right when you're in the middle of pushing a fix to production.

Usagebar sits in your macOS menu bar and shows your live Claude Code usage at a glance. It sends smart alerts at 50%, 75%, and 90% usage so you know exactly when to wrap up a deploy session or save your work before the window closes. Credentials are stored securely in macOS Keychain. It's pay-what-you-want, and free for students.

See also: running TypeScript migrations on Claude Code and setting up cron jobs with Claude Code for other long-running tasks where usage awareness matters.

Get Usagebar — instant download, flexible pricing, always know where you stand before you start a deploy.

Sources

Track Your Claude Code Usage

Never hit your usage limits unexpectedly. Usagebar lives in your menu bar and shows your 5-hour and weekly limits at a glance.

Get Usagebar