AI Agents Workshop - Designing with AI

Opening the Terminal

Platform	How to Open
macOS	Spotlight → type “Terminal” → Enter
macOS (better)	Install iTerm2 — more features, better experience
Windows	Install WSL2 — gives you a real Linux terminal inside Windows
VS Code	Press Ctrl + ` to toggle the built-in terminal

The Prompt

When you open the terminal, you see a prompt — a line of text ending with $ or %. This is where you type commands. The prompt usually shows your username, computer name, and current directory.

username@computer ~ %

The ~ symbol means your home directory. Everything you type after the prompt is a command.

Navigation Commands

Command	What It Does	Example
`pwd`	Print working directory — shows where you are	`pwd` → `/Users/you/projects`
`ls`	List files and folders in current directory	`ls`
`ls -la`	List all files including hidden ones, with details	`ls -la`
`cd folder`	Change directory — move into a folder	`cd my-project`
`cd ..`	Go up one level	`cd ..`
`cd ~`	Go to home directory	`cd ~`
`cd -`	Go to the previous directory you were in	`cd -`

Navigation Practice

# See where you are
pwd

# List what's here
ls

# Move into a folder
cd Desktop

# Confirm you moved
pwd

# Go back up
cd ..

# Go home
cd ~

File and Folder Operations

Command	What It Does	Example
`mkdir`	Create a new folder	`mkdir my-project`
`mkdir -p`	Create nested folders in one command	`mkdir -p src/components/ui`
`touch`	Create a new empty file	`touch index.tsx`
`rm`	Remove a file	`rm old-file.txt`
`rm -rf`	Remove a folder and everything inside it	`rm -rf node_modules`
`cp`	Copy a file	`cp file.txt backup.txt`
`mv`	Move or rename a file	`mv old.txt new.txt`
`cat`	Display file contents in terminal	`cat package.json`
`code .`	Open current folder in VS Code	`code .`
`open .`	Open current folder in Finder (macOS)	`open .`

Warning: rm -rf is permanent. There is no trash, no undo. Double-check the path before running this command.

Running Programs

Command	What It Does
`node`	Run a JavaScript file — `node script.js`
`npm install`	Install all dependencies listed in `package.json`
`npm run dev`	Start the development server (Next.js)
`npm run build`	Build the project for production
`npx`	Run a package without installing it globally — `npx create-next-app`
`Ctrl + C`	Stop the currently running program
`Ctrl + Z`	Suspend the currently running program

Productivity Shortcuts

Shortcut	What It Does
`Tab`	Auto-complete file and folder names
`↑ / ↓`	Scroll through previous commands
`Ctrl + C`	Cancel current command / stop running process
`Ctrl + L`	Clear the terminal screen
`Ctrl + A`	Jump to beginning of line
`Ctrl + E`	Jump to end of line
`Ctrl + W`	Delete the word before cursor
`!!`	Repeat the last command
`history`	Show all recent commands

Complete Project Setup Workflow

# 1. Go to your projects folder
cd ~/projects

# 2. Create a new Next.js app
npx create-next-app@latest my-portfolio

# 3. Move into the project
cd my-portfolio

# 4. Open in VS Code
code .

# 5. Start the dev server
npm run dev

# 6. Open in browser
# Visit http://localhost:3000

Understanding Paths

There are two kinds of paths:

Absolute Paths

Start from the root of your system. Always begin with /.

/Users/you/projects/my-app/src/components/Button.tsx

Relative Paths

Start from where you are right now.

# If you're in /Users/you/projects/my-app
cd src/components
# Now you're in /Users/you/projects/my-app/src/components

# Go up two levels
cd ../..
# Back to /Users/you/projects/my-app

Common Errors and Fixes

Error	What It Means	How to Fix
`command not found`	The program isn’t installed or not in your PATH	Install it — e.g. `brew install node`
`No such file or directory`	The path is wrong or the file doesn’t exist	Check spelling, run `ls` to see what’s there
`Permission denied`	You don’t have access to run this	Try `sudo` before the command (use with caution)
`Port already in use`	Another process is using port 3000	Kill it with `lsof -i :3000` then `kill -9 PID`
`EACCES`	npm permission error	Fix npm permissions or use `nvm`

Terminal Basics