Setting Up My Local Environment for Vibe Coding

This guide walks beginners through setting up a Mac for building and publishing web applications, covering the terminal, Homebrew, Node.js and npm, Git and GitHub tools, GitHub Desktop, Vercel, and AI coding agents such as Claude Code, Codex, Cursor, and GitHub Copilot.

Part 1: The foundation

Do these three steps once.

Step 1: Open a terminal (Warp or built-in)

You need a terminal to run the install commands for most of the tools. Alternatively use Claude, Codex or other coding agents to help with the process.

Step 2: Install Homebrew, the macOS package manager

Installs and manages developer tools on macOS; also supports Linux. Think of Homebrew as the command-line App Store. One command installs almost any developer tool (Node, git, Python, databases) and keeps them current.

1. Install it once:

javascript

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

On a fresh Mac this first installs Apple's Command Line Tools (a few minutes, with a system prompt to approve). That's expected, and it's a bonus: those tools include git, so your "use Git later" need is already covered.

When Homebrew finishes, it prints a short "Next steps" block. On Apple Silicon you'll need to run two lines so your terminal can find brew. They look like this:

javascript

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

2. Verify:

javascript

brew --version

Step 3: Node.js and npm, the runtime for the apps you build

Node.js lets your computer run JavaScript outside a browser, and it comes with npm, its package manager. The apps you build need it. When Claude Code scaffolds a project, you run npm install to pull in its dependencies and npm run dev to preview it locally in your browser. No Node, no preview.

npm allows us to download additional packages and libraries that we can attach to our projects.

1. Install with Homebrew:

javascript

brew install node

2. Verify:

javascript

node --version
npm --version

Part 2: Version Control and Deployment Tools

Step 4: Git and GitHub CLI: history and collaboration

Git records commits locally and can work offline. GitHub hosts repositories online and adds collaboration features.

1. Install with Homebrew:

javascript

brew install git

2. Verify:

javascript

git --version

3. Configure Git (First-Time Setup):

(must have an account)

javascript

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

4. Verify your config:

javascript

git config --list

gh is GitHub's command-line client. Installing it doesn't install the GitHub website or create an account. Git handles operations such as commits and pushes; gh helps with GitHub-specific tasks such as creating repositories and pull requests. You can also use GitHub through its website or Git without gh.

5. Install GitHub CLI (gh)

javascript

brew install gh

6. Authenticate your GitHub account:

javascript

gh auth login

Follow the prompts (choose GitHub.com → HTTPS → Login with a web browser).

Step 6: Install GitHub Desktop

1. Download the App:

Go to the official GitHub Desktop website: desktop.github.com.

Click the "Download for macOS" button (it may just say "Download now" on the main page).

2. Unzip the File

Once the download finishes, open your Downloads folder in Finder. You will see a file named GitHub Desktop.zip.

Double-click that ZIP file to unpack it. A new purple GitHub Desktop application icon will appear next to it.

3. Move to Applications

Drag the GitHub Desktop app icon into your Applications folder to complete the installation.

4. Launch and Configure

Open your Applications folder and double-click the GitHub Desktop icon.

You may see a security warning asking if you want to open an app downloaded from the internet; click Open.
On the welcome screen, sign in with your GitHub account and follow the prompts to set up your name and email.

Step 7: Install Vercel: prepare to publish

Vercel hosts supported web applications and gives deployments a URL. We use it in the course; other hosts, including Netlify, are options too. Installing the CLI prepares the tool — it doesn't deploy anything yet. The dashboard and Git integration are other ways to deploy.

1. Install the Vercel CLI Globally:

javascript

npm install -g vercel

2. Verify the Installation:

javascript

vercel --version

3. Log In to Vercel:

javascript

vercel login

This prints a URL and a code in the terminal. Open the URL in your browser, confirm the code, and approve the login. The terminal will confirm once authentication is complete.

4. Confirm You're Logged In:

javascript

vercel whoami

Step 8: Install Coding Agent

Coding Agents:

Claude Code (Desktop, CLI, or IDE) - claude.com/download
Codex (Desktop, CLI, or IDE)
Cursor (Desktop, CLI, or IDE)
GitHub Co-Pilot (IDE)
Antigravity

Note: if you are using coding agents in IDE, make sure you download it as extensions (not Plugins). This is the core integration. It provides the coding agent with a sidebar panel, chat interface, and the ability to make code edits directly within your editor. Coding agents should be installed from the VS Code Marketplace.

Orchestrator Apps:

Conductor - friendly interface to host all of your coding agents in one workspace.

Three Layers of Coding Agents

Model - the LLM. The raw brain. It knows things but can't do anything on its own.
Harness - agent tool that reads files, runs commands, writes code in a loop. The harness provides the direction, control, and boundaries. Everything built around the brain that lets it actually take action — remembering what you asked, using tools, checking its own work, and knowing when to stop.
Surface - the workspace you drive the harness through: Terminal, Desktop, IDE, Cloud. The screen or app you use to talk to it.