Claude Code Installation & Setup: From Zero to Your First AI-Generated Web Page

What is Claude Code?

Claude Code is Anthropic's command-line AI coding tool. Unlike Cursor or GitHub Copilot, it does not require an IDE — you type natural language directly in your terminal, and Claude reads your codebase, writes code, fixes bugs, and explains logic. Its most unique ability is understanding your entire project structure, not just the file you have open.

Before you start, there are three things you need to know:

1. Claude Code requires an Anthropic API Key (paid), not a Claude.ai web subscription. They are separate products.
2. It is a command-line tool that runs in your terminal with no graphical interface. Do not worry — you will not need to write any code just to use it.
3. It will read and modify your files. It is best to try it on a test project first, not on your production codebase.

Step 1: Install Node.js 18+

Claude Code runs on Node.js. If you do not have Node.js installed yet, start here.

node --version
# Should output: v20.x.x or v22.x.x

npm --version
# Should output: 10.x.x

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

brew install node@22

node --version
npm --version

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

node --version
npm --version

Step 2: Get Your Anthropic API Key

This step is easy to get wrong. You need an API Key, not a Claude.ai web account.

1. Open console.anthropic.com
2. Sign up or log in (Google account works)
3. First-time users need to add a credit card and set a spending limit ($20/month is a good starting point)
4. Left menu → API Keys → click Create Key
5. Give your key a name (e.g., "claude-code-laptop") → copy the generated key

Step 3: Install Claude Code

Open your terminal (Windows: PowerShell, Mac: Terminal, Linux: Terminal) and run:

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

What this command does: npm install -g installs the package globally so you can use the claude command from any directory. @anthropic-ai/claude-code is the official package name for Claude Code.

The installation takes about 30–60 seconds. You may see some warning messages — as long as there is no red ERROR, you are good to continue.

Verify the installation:

claude --version
# Should output something like: v1.x.x

Step 4: Configure Your API Key

There are two ways to tell Claude Code about your API Key. Method one is recommended:

[Environment]::SetEnvironmentVariable('ANTHROPIC_API_KEY', 'sk-ant-api03-your-key-here', 'User')

# Add to your shell config file (use .zshrc for zsh, .bashrc for bash)
echo 'export ANTHROPIC_API_KEY="sk-ant-api03-your-key-here"' >> ~/.zshrc

# Apply immediately
source ~/.zshrc

# Create a .env file in your project root
echo 'ANTHROPIC_API_KEY=sk-ant-api03-your-key-here' > .env

Step 5: Test Your First Claude Code Command

Create a test project directory and launch Claude Code:

# Create a test directory
mkdir claude-test && cd claude-test

# Initialize git (Claude Code needs git to track code changes)
git init

# Start Claude Code
claude

On first launch, Claude Code may ask you to accept the terms of use. Type y to confirm.

Once the interactive interface appears, enter your first command:

Create a simple HTML file called index.html with a modern "Hello World" page that has centered text and a nice background color.

Claude will:

1. Analyze your request
2. Generate the code
3. Show you what it plans to do (you may need to press Enter to confirm)
4. Create the file

When done, open index.html in your browser to see the result.

Frequently Asked Questions

Q: I get "API key not found"

Check whether the environment variable was set correctly. Run echo $ANTHROPIC_API_KEY (Mac/Linux) or $env:ANTHROPIC_API_KEY (PowerShell) to see the current value. If it is empty, go back to Step 4 and set it again.

Q: I get "Insufficient permissions"

Go to Anthropic Console → Billing and check: does your account balance have credits? Is your credit card linked? Have you hit your spending limit?

Q: The installation is very slow or fails

This is usually an npm network issue. Try using a mirror registry:

npm config set registry https://registry.npmmirror.com
npm install -g @anthropic-ai/claude-code
# Restore the default after install
npm config set registry https://registry.npmjs.org

Q: What is the difference between Claude Code, Cursor, and Copilot?

Claude Code is a command-line tool built for quick project modifications, automation tasks, and working directly in the terminal. Cursor is an IDE (editor) designed for writing code with AI assistance alongside. Copilot is an IDE plugin focused on autocomplete within your existing editor. In practice, all three can complement each other in your workflow.