Setting Up Your Environment

What You'll Learn

In this module, you'll set up the foundation for AI-assisted development:

• Install Claude Code on your Mac
• Configure Visual Studio Code as your window into the project
• Set up MCP servers that give Claude Code superpowers
• Create your first CLAUDE.md project instructions file

How Claude Code Works

Claude Code is a command-line tool that connects you to Claude, Anthropic's AI assistant. It runs in your computer's terminal.

The basic workflow:

1. Navigate to your project folder in terminal
2. Run claude to start a session
3. Type prompts describing what you want
4. Claude Code implements your requests
5. Review and iterate

Installing Claude Code

Step 1: Install Node.js

Claude Code requires Node.js (a JavaScript runtime). Download it from nodejs.org and install the LTS (Long Term Support) version.

To verify installation, open Terminal (found in Applications → Utilities) and type:

node --version

You should see something like v20.10.0.

Step 2: Install Claude Code

In your terminal, run:

npm install -g @anthropic/claude-code

Step 3: Authenticate

Run Claude Code for the first time:

claude

It will open a browser window to authenticate with your Anthropic account.

Step 4: Verify Installation

After authentication, type /help to see available commands.

Setting Up Visual Studio Code

An IDE (Integrated Development Environment) is a visual application that makes it easier to work with code files. VS Code lets you see your files visually, navigate your project, and track changes.

Installation:

1. Go to code.visualstudio.com
2. Click "Download for Mac"
3. Open the downloaded file and drag VS Code to Applications

Recommended Extensions:

• Tailwind CSS IntelliSense - color previews for your design system
• ESLint - highlights code issues
• Prettier - formats code consistently