/setup-vercel.en

description: "Lesson command"
duration: "~10 min"
prerequisites: ["Node.js 18 or higher installed", "Browser available"]
level: "beginner"
tags: ["setup", "vercel", "deploy", "hosting"]
nonInteractiveMode: incompatible

Vercel CLI Setup

Step 0: Check Setup Progress

**What the AI auto-runs:** 1. Run `uv run python tools/setup_progress.py show --current setup-vercel` to display progress 2. Auto-detect existing installation state:

• Run `vercel --version` to check if the CLI is installed
• Run `vercel whoami` to check if already logged in
• If both succeed, skip to Step 4 (test)

3. **This setup is optional.** Vercel CLI is used in Lesson 15-5 (LP Production - Vercel Deploy). You can skip it if you don't need it right away.

What You'll Do in This Session

| Item | Details | |------|---------| | Goal | Install Vercel CLI, log in, and get ready to deploy and publish websites | | Duration | ~10 minutes | | Prerequisites | Node.js 18 or higher installed, browser available | | Skill Level | CLI command input required (installation is AI auto-run + browser authentication) | | Pricing | Free plan (Hobby) with unlimited personal projects. The free tier is sufficient for training |

**Session flow:** 1. Create a Vercel account (sign up in browser) 2. Install Vercel CLI (AI auto-runs) 3. Log in to Vercel (browser authentication or token authentication) 4. Operation test (AI auto-runs)

> **Hint**: If the AI stops responding midway, type "please continue" or "it stopped" to resume.

---

Readiness Check

**AskQuestion configuration:**

{
  "title": "Pre-session confirmation",
  "questions": [{
    "id": "readiness",
    "prompt": "Are you ready? (This setup is optional. Used in Lesson 15-5)",
    "options": [
      {"id": "ready", "label": "Ready! Let's start"},
      {"id": "chrome", "label": "Automate browser operations with /chrome"},
      {"id": "check_prereq", "label": "I want to check the prerequisites"},
      {"id": "skip", "label": "I don't need this now, skip"},
      {"id": "different_lesson", "label": "Go to a different lesson"}
    ]
  }]
}

(ready -> Proceed to Step 1) (chrome -> After opening the browser in Step 1, follow the "Chrome integration automation" section) (check_prereq -> Guide: "Node.js 18 or higher is required. You can check with `node --version`") (skip -> Guide: "Skipped. You can set it up again later with `/setup-vercel` when needed" and end) (different_lesson -> Show module list)

---

Step 1: Create Vercel Account

**What the AI does:** 1. Auto-detect the OS (Mac / Windows / Linux) 2. Run the following command to auto-launch the browser:

# Mac:
open https://vercel.com/signup
# Windows:
start https://vercel.com/signup
# Linux:
xdg-open https://vercel.com/signup

**Once the browser opens, display the following AskQuestion:**

{
  "title": "Step 1: Create Vercel Account",
  "questions": [{
    "id": "account_status",
    "prompt": "Did the browser open? Follow these steps to create an account:\n\n1. Click 'Continue with GitHub' (recommended)\n   - You can sign up directly with your GitHub account\n   - Or choose 'Continue with GitLab' or 'Continue with Email'\n2. Complete authentication / email verification\n3. Account creation is complete\n\nPlease tell me your account status:",
    "options": [
      {"id": "created", "label": "Account created!"},
      {"id": "already_have", "label": "I already have an account"},
      {"id": "no_github", "label": "I don't have a GitHub account"},
      {"id": "browser_not_open", "label": "The browser didn't open"}
    ]
  }]
}

(created -> Proceed to Step 2) (already_have -> Proceed to Step 2) (no_github -> Guide: "You can also sign up with Email. Select 'Continue with Email' on the signup page. Or you can also first create a GitHub account with `/setup-github`") (browser_not_open -> Guide: "Please open this URL directly in your browser: https://vercel.com/signup")

---

Chrome Integration Automation (`/chrome` mode)

**Prerequisites:** The "Claude in Chrome" extension (v1.0.36+) is installed in Chrome, and you launched with `claude --chrome` or ran `/chrome` within the session.

**What the AI auto-runs via Chrome integration:** 1. Open https://vercel.com/signup in the browser 2. Use Chrome integration to perform:

• Click "Continue with GitHub"
• If the GitHub authentication screen appears, prompt the user to approve

3. After signup is confirmed, proceed to Step 2

If Chrome integration is not available, follow the manual steps in Step 1.

---

Step 2: Install Vercel CLI

**What the AI auto-runs:** 1. Check the Node.js version:

   node --version

• If below Node.js 18: Guide "Node.js 18 or higher is required. Please set up with `/start-0-1`" and stop

2. Install the Vercel CLI:

   npm i -g vercel

• On permission error (`EACCES`): Guide `sudo npm i -g vercel`

3. Verify installation:

   vercel --version

**On installation success:**

Vercel CLI has been installed! (Version: XX.X.X)
Next, we'll log in to your Vercel account.

**AskQuestion on installation failure:**

{
  "title": "Installation error occurred",
  "questions": [{
    "id": "install_error",
    "prompt": "An error occurred while installing Vercel CLI.",
    "options": [
      {"id": "retry", "label": "Try again"},
      {"id": "sudo", "label": "Try with admin privileges (sudo)"},
      {"id": "show_error", "label": "I want to see error details"},
      {"id": "skip", "label": "Skip and try later"}
    ]
  }]
}

(retry -> Re-run `npm i -g vercel`) (sudo -> Run `sudo npm i -g vercel`) (show_error -> Display error message with cause and solution) (skip -> Guide: "Skipped. You can set it up again later with `/setup-vercel`")

---

Step 3: Vercel Login

**Guide that there are two methods: Method A (interactive environment, recommended) and Method B (non-interactive environment, token authentication).**

**What the AI