/start-13-5.en
Lesson command
$ npx -y skills add minicoohei/ai-agent-camp --agent claude-codeHow it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/start-13-5.en
Context preview
What this command does when you run it.
Lesson command
Command definition
start-13-5.en.mddescription: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-4"]
duration: "~15 min"
level: "intermediate"
tags: ["lp", "vercel", "deploy", "hosting"]
nonInteractiveMode: incompatible
🎓 Lesson 13-5: Vercel Deploy
📍 What You'll Do
Welcome to **Lesson 13-5: Vercel Deploy**!
| Item | Details | |------|---------| | Goal | Deploy the created Landing Page/Website to Vercel and obtain a public URL | | Duration | ~15 min | | Skills Used | lp-designer, Vercel CLI | | Prerequisites | Lesson 13-4 complete (`output/lp-project/` exists). If not complete, a sample project will be generated as a fallback | | Course Page | Refer to [Module 13: Landing Page/Website Design](https://ai-agent.camp/en/course/module-13) in parallel |
> **⚠️ Note for non-interactive environments (Codex, CI, etc.)**: `vercel login` requires browser authentication and cannot be run in non-interactive environments. In that case, use token authentication via the `VERCEL_TOKEN` environment variable, or skip the deploy step.
**Session flow:** 1. Check project existence (generate sample if missing) 2. Install and authenticate Vercel CLI 3. Preview deploy 4. Verify in browser 5. Production deploy
By the end of this session, the Landing Page will be published at a URL accessible worldwide.
> **💡 Hint**: If the AI response stops midway, type "please continue" or "it stopped" to resume. Responses may pause depending on the tool, but this is not a malfunction.
---
🎯 Readiness Check
First, let's confirm everything is ready.
**AskQuestion settings:**
{
"title": "🎯 Pre-Session Check",
"questions": [{
"id": "readiness",
"prompt": "Are you ready?",
"options": [
{"id": "ready", "label": "Ready! Let's start"},
{"id": "check_prereq", "label": "I want to check the prerequisites"},
{"id": "view_html", "label": "I want to see the course page first"},
{"id": "different_lesson", "label": "I want to go to a different lesson"}
]
}]
}(ready → Proceed to Step 0) (check_prereq → Check Node.js, npm existence + Lesson 13-4 completion) (view_html → Show course page path) (different_lesson → Display module list)
---
🔍 Step 0: Check Project Existence
Verify that the 13-4 deliverable (`output/lp-project/`) exists.
**Verification steps:**
# Check if output/lp-project directory exists
ls output/lp-project/index.html 2>/dev/null && echo "OK: Project exists" || echo "NOT FOUND: Project not found"
**Fallback if project doesn't exist:**
If `output/lp-project/` doesn't exist, either complete 13-4 first, or use the following minimal sample project as an alternative.
# Generate sample project
mkdir -p output/lp-project
cat > output/lp-project/index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample LP - Vercel Deploy Practice</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<header class="bg-blue-600 text-white py-16 text-center">
<h1 class="text-4xl font-bold mb-4">Sample LP</h1>
<p class="text-xl">This is a practice page for Vercel deployment</p>
</header>
<main class="max-w-3xl mx-auto py-12 px-4">
<section class="bg-white rounded-lg shadow p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">About This Page</h2>
<p class="text-gray-700">This is a sample page auto-generated for 13-5 Vercel deploy practice. Complete 13-4 to deploy your actual Landing Page.</p>
</section>
</main>
<footer class="bg-gray-800 text-gray-400 py-6 text-center">
<p>© 2026 AI Agent Training</p>
</footer>
</body>
</html>
HTMLEOF
echo "Sample project generated in output/lp-project/"> **Recommended**: Ideally, use the Landing Page created in 13-4 (`/start-13-4`). The sample is for deployment procedure practice.
**Expected result**: `output/lp-project/index.html` exists.
---
🚀 Step 1: Install and Authenticate Vercel CLI
Install and log in to Vercel CLI.
**AskQuestion settings example:**
{
"title": "🚀 Step 1: Vercel CLI Setup",
"questions": [{
"id": "vercel_status",
"prompt": "What is the Vercel CLI status?",
"options": [
{"id": "not_installed", "label": "Not installed yet"},
{"id": "installed", "label": "Installed (already logged in)"},
{"id": "installed_no_login", "label": "Installed (not logged in)"},
{"id": "no_account", "label": "I don't have a Vercel account"}
]
}]
}**Post-selection instructions (not_installed)**: Input:
Install and log in to Vercel CLI.
Steps:
1. Install
npm i -g vercel
2. Verify version
vercel --version
3. Log in (Method A: Browser authentication - interactive environments only)
vercel login
A browser will open - log in with your Vercel account.
If you don't have an account, create one free at https://vercel.com/signup.
4. Verify login
vercel whoami
**Post-selection instructions (installed_no_login)**:
> **⚠️ For non-interactive environments (Codex, CI, SSH, etc.)**: `vercel login` requires a browser and cannot be run. Use "Method B: Token authentication" below.
Input:
■ Method A: Browser authentication (local environment)
vercel login
→ A browser will open for authentication
■ Method B: Token authentication (non-interactive environments / CI)
1. Go to https://vercel.com/account/tokens
2. Click "Create Token" to generate a token (any name, e.g., "aiagent-deploy")
3. Set as environment variable:
export VERCEL_TOKEN="your-generated-token"
4. Persist in .env (optional):
Open the .env file directly in a text editor and add VERCEL_TOKEN=your-generated-token.
> **Security note**: Appending via command like `echo 'VERCEL_TOKEN=...' >> .env` risks leaving the token in shell history. Direct editing with a text editor is recommended.
5. Deploy wRead more
description: "Lesson command" chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml" prerequisites: ["start-13-4"] duration: "~15 min" level: "intermediate" tags: ["lp", "vercel", "deploy", "hosting"] nonInteractiveMode: incompatible
🎓 Lesson 13-5: Vercel Deploy
📍 What You'll Do
Welcome to **Lesson 13-5: Vercel Deploy**!
| Item | Details | |------|---------| | Goal | Deploy the created Landing Page/Website to Vercel and obtain a public URL | | Duration | ~15 min | | Skills Used | lp-designer, Vercel CLI | | Prerequisites | Lesson 13-4 complete (`output/lp-project/` exists). If not complete, a sample project will be generated as a fallback | | Course Page | Refer to [Module 13: Landing Page/Website Design](https://ai-agent.camp/en/course/module-13) in parallel |
> **⚠️ Note for non-interactive environments (Codex, CI, etc.)**: `vercel login` requires browser authentication and cannot be run in non-interactive environments. In that case, use token authentication via the `VERCEL_TOKEN` environment variable, or skip the deploy step.
**Session flow:** 1. Check project existence (generate sample if missing) 2. Install and authenticate Vercel CLI 3. Preview deploy 4. Verify in browser 5. Production deploy
By the end of this session, the Landing Page will be published at a URL accessible worldwide.
> **💡 Hint**: If the AI response stops midway, type "please continue" or "it stopped" to resume. Responses may pause depending on the tool, but this is not a malfunction.
---
🎯 Readiness Check
First, let's confirm everything is ready.
**AskQuestion settings:**
{
"title": "🎯 Pre-Session Check",
"questions": [{
"id": "readiness",
"prompt": "Are you ready?",
"options": [
{"id": "ready", "label": "Ready! Let's start"},
{"id": "check_prereq", "label": "I want to check the prerequisites"},
{"id": "view_html", "label": "I want to see the course page first"},
{"id": "different_lesson", "label": "I want to go to a different lesson"}
]
}]
}(ready → Proceed to Step 0) (check_prereq → Check Node.js, npm existence + Lesson 13-4 completion) (view_html → Show course page path) (different_lesson → Display module list)
---
🔍 Step 0: Check Project Existence
Verify that the 13-4 deliverable (`output/lp-project/`) exists.
**Verification steps:**
# Check if output/lp-project directory exists ls output/lp-project/index.html 2>/dev/null && echo "OK: Project exists" || echo "NOT FOUND: Project not found"
**Fallback if project doesn't exist:**
If `output/lp-project/` doesn't exist, either complete 13-4 first, or use the following minimal sample project as an alternative.
# Generate sample project
mkdir -p output/lp-project
cat > output/lp-project/index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample LP - Vercel Deploy Practice</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<header class="bg-blue-600 text-white py-16 text-center">
<h1 class="text-4xl font-bold mb-4">Sample LP</h1>
<p class="text-xl">This is a practice page for Vercel deployment</p>
</header>
<main class="max-w-3xl mx-auto py-12 px-4">
<section class="bg-white rounded-lg shadow p-8 mb-8">
<h2 class="text-2xl font-bold mb-4">About This Page</h2>
<p class="text-gray-700">This is a sample page auto-generated for 13-5 Vercel deploy practice. Complete 13-4 to deploy your actual Landing Page.</p>
</section>
</main>
<footer class="bg-gray-800 text-gray-400 py-6 text-center">
<p>© 2026 AI Agent Training</p>
</footer>
</body>
</html>
HTMLEOF
echo "Sample project generated in output/lp-project/"> **Recommended**: Ideally, use the Landing Page created in 13-4 (`/start-13-4`). The sample is for deployment procedure practice.
**Expected result**: `output/lp-project/index.html` exists.
---
🚀 Step 1: Install and Authenticate Vercel CLI
Install and log in to Vercel CLI.
**AskQuestion settings example:**
{
"title": "🚀 Step 1: Vercel CLI Setup",
"questions": [{
"id": "vercel_status",
"prompt": "What is the Vercel CLI status?",
"options": [
{"id": "not_installed", "label": "Not installed yet"},
{"id": "installed", "label": "Installed (already logged in)"},
{"id": "installed_no_login", "label": "Installed (not logged in)"},
{"id": "no_account", "label": "I don't have a Vercel account"}
]
}]
}**Post-selection instructions (not_installed)**: Input:
Install and log in to Vercel CLI. Steps: 1. Install npm i -g vercel 2. Verify version vercel --version 3. Log in (Method A: Browser authentication - interactive environments only) vercel login A browser will open - log in with your Vercel account. If you don't have an account, create one free at https://vercel.com/signup. 4. Verify login vercel whoami
**Post-selection instructions (installed_no_login)**:
> **⚠️ For non-interactive environments (Codex, CI, SSH, etc.)**: `vercel login` requires a browser and cannot be run. Use "Method B: Token authentication" below.
Input:
■ Method A: Browser authentication (local environment)
vercel login
→ A browser will open for authentication
■ Method B: Token authentication (non-interactive environments / CI)
1. Go to https://vercel.com/account/tokens
2. Click "Create Token" to generate a token (any name, e.g., "aiagent-deploy")
3. Set as environment variable:
export VERCEL_TOKEN="your-generated-token"
4. Persist in .env (optional):
Open the .env file directly in a text editor and add VERCEL_TOKEN=your-generated-token.
> **Security note**: Appending via command like `echo 'VERCEL_TOKEN=...' >> .env` risks leaving the token in shell history. Direct editing with a text editor is recommended.
5. Deploy wAI Agent Training for Non-Engineers - Complete Guide to Claude Code / Cursor / Codex ### ⚠️ Before you clone Official repository (maintained by the authors): Running AI agents from this repo grants them shell, file-write, and external-API permissions on your
Other commands on ai-agent-camp.
- /check-setup.en
Top-level alias — see lesson/check-setup.en.md for the full body.
Open command - /check-setup.es
Alias de nivel superior — el cuerpo completo está en lesson/check-setup.es.md.
Open command - /check-setup
Top-level alias — see lesson/check-setup.md for the full body.
Open command - /check-security.en
Lesson command
Open command - /check-security.es
Lesson command
Open command - /check-security
Lesson command
Open command