What We're Installing

Our development stack:

Tool	Purpose	Why
Node.js 20+	JavaScript runtime	Powers our build tools and backend
npm	Package manager	Installs dependencies
VS Code	Code editor	Best extension ecosystem
Vite	Build tool	Instant hot-reload, fast builds
OpenCode	AI coding agent	Open-source, terminal-based AI
Git	Version control	Track changes, collaborate

Total setup time: 15-20 minutes on a fresh machine.

Installing Node.js

Node.js is the foundation — most AI tools and modern web development depend on it.

macOS (using Homebrew):

brew install node

Windows (using installer):

• Download from https://nodejs.org (LTS version)
• Run installer, accept defaults
• Restart your terminal

Linux (using nvm — recommended):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
nvm install 20
nvm use 20

Verify installation:

node --version   # Should show v20.x or higher
npm --version    # Should show 10.x or higher

Why Node.js 20+? It includes native fetch, stable ESM modules, and the performance improvements modern tools expect.

Setting Up VS Code

VS Code is the most popular editor for AI-assisted development:

Essential extensions:

1. Continue (continue.dev) — open-source AI assistant
2. ESLint — code linting
3. Prettier — code formatting
4. GitLens — enhanced Git integration

Recommended settings (Settings → JSON):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.inlineSuggest.enabled": true,
  "files.autoSave": "onFocusChange"
}

Keyboard shortcuts to learn:

• Ctrl+Shift+P / Cmd+Shift+P — Command palette
• Ctrl+`` — Toggle terminal
• Ctrl+P / Cmd+P — Quick file open

Setting Up an AI Coding Agent

For our hands-on exercises, we'll use a terminal-based AI agent:

Option A — OpenCode (open-source, recommended for workshops):

npm install -g opencode-ai
opencode

Option B — Claude Code (Anthropic's official CLI):

npm install -g @anthropic-ai/claude-code
claude

Configuration — API key setup:

Most AI tools need an API key from a provider:

# For OpenAI models:
export OPENAI_API_KEY="sk-your-key-here"

# For Anthropic models:
export ANTHROPIC_API_KEY="sk-ant-your-key-here"

# Or use a gateway like Model Prism:
export OPENAI_BASE_URL="https://your-prism-instance.com/api/team/v1"
export OPENAI_API_KEY="omp-your-tenant-key"

Important: Never commit API keys to Git. Use .env files (added to .gitignore) or environment variables.

Creating Your First Vite Project

Vite is the fastest way to start a modern web project:

npm create vite@latest my-first-project -- --template vanilla
cd my-first-project
npm install
npm run dev

What just happened:

1. npm create vite scaffolded a project with HTML, CSS, and JavaScript
2. npm install downloaded dependencies
3. npm run dev started a local server with hot-reload

Open http://localhost:5173 in your browser — you should see the Vite welcome page.

Project structure:

my-first-project/
  index.html      ← Your app's entry point
  style.css       ← Styles
  main.js         ← JavaScript logic
  package.json    ← Dependencies and scripts
  vite.config.js  ← Build configuration

Your First AI-Assisted Edit

Let's make our first AI-assisted change. Open your project in the terminal:

cd my-first-project
opencode  # or: claude

Try this prompt:

Replace the Vite welcome page content in index.html with a simple
counter app. It should have:
- A large number display starting at 0
- A "+" button and a "-" button
- Clicking + increments, clicking - decrements
- Style it with a clean, modern look using the existing style.css

Watch as the AI:

1. Reads your existing files
2. Modifies index.html, main.js, and style.css
3. Creates a working counter app

Refresh your browser — you should see the counter working.

This is the fundamental loop: describe what you want → AI builds it → you review and iterate.

Troubleshooting Common Issues

Problem	Solution
node: command not found	Restart terminal after installing Node.js
npm ERR! EACCES	Don't use sudo — fix npm permissions or use nvm
API key not working	Check for extra spaces, correct prefix (sk- for OpenAI)
Vite dev server won't start	Check if port 5173 is already in use: lsof -i :5173
AI agent can't read files	Make sure you're in the project directory
OPENAI_BASE_URL not working	Ensure URL ends with /v1 for OpenAI-compatible APIs

If all else fails:

# Nuclear option — start fresh
rm -rf node_modules package-lock.json
npm install
npm run dev

---quiz question: Why should you never commit API keys to a Git repository? options:

• { text: "Because Git doesn't support special characters in files", correct: false }
• { text: "Because anyone with access to the repo can see and abuse your keys", correct: true }
• { text: "Because API keys expire when committed", correct: false } feedback: API keys committed to Git — especially public repositories — can be found by automated scrapers within minutes and used to rack up massive bills on your account.

---quiz question: What is the advantage of using Vite over older build tools? options:

• { text: "It only works with React", correct: false }
• { text: "It provides instant hot-reload and extremely fast builds", correct: true }
• { text: "It doesn't require Node.js", correct: false } feedback: Vite uses native ES modules during development for instant hot-reload (no bundling step), and esbuild for production builds — making it significantly faster than Webpack or Parcel.

---quiz question: What is the fundamental loop of AI-assisted development? options:

• { text: "Write code → compile → debug → deploy", correct: false }
• { text: "Describe what you want → AI builds it → you review and iterate", correct: true }
• { text: "Copy code from Stack Overflow → paste → fix errors", correct: false } feedback: The AI-assisted development loop shifts your role from writing code to describing intent, reviewing AI output, and iterating on the result until it meets your requirements.