Environment Setup
Before we build anything, let's set up a modern AI-assisted development environment from scratch.
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:
- Continue (continue.dev) — open-source AI assistant
- ESLint — code linting
- Prettier — code formatting
- 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 paletteCtrl+``— Toggle terminalCtrl+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
.envfiles (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:
npm create vitescaffolded a project with HTML, CSS, and JavaScriptnpm installdownloaded dependenciesnpm run devstarted 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:
- Reads your existing files
- Modifies
index.html,main.js, andstyle.css - 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.