What is Claude Code?
Claude Code is Anthropic's agentic coding tool — a command-line interface that connects Claude directly to your development environment. Unlike chat-based AI tools where you copy-paste code back and forth, Claude Code operates in your terminal, reads your files, understands your project structure, runs commands, and makes changes directly to your codebase.
Think of it as having a senior engineer sitting next to you who can instantly read every file in your project, understand the architecture, and make changes across dozens of files — then show you exactly what changed so you can review it.
How Claude Code Differs from Chat AI
- Direct File Access: Reads and writes files in your project — no copy-paste needed
- Terminal Integration: Runs shell commands, installs packages, runs tests
- Codebase Awareness: Understands your full project structure, dependencies, and patterns
- Agentic Execution: Plans multi-step tasks and executes them autonomously
- Iterative: If a test fails, it reads the error and fixes the code automatically
Installation
Getting Claude Code running takes about 2 minutes. You need Node.js 18+ installed.
# Install Claude Code globally
npm install -g @anthropic-ai/claude-code
# Verify installation
claude --version
# Start Claude Code in your project directory
cd your-project
claude
# On first run, you will authenticate with your Anthropic account
# Claude Code will open a browser window for OAuth authentication
System Requirements
- Node.js: Version 18 or higher
- OS: macOS, Linux, or Windows via WSL
- Account: Anthropic account with Claude Code access (Pro, Team, or Enterprise plan)
- Terminal: Any modern terminal (iTerm2, Warp, VS Code terminal, Alacritty)
First Run: How It Works
When you launch Claude Code in a project directory, here is what happens:
# Navigate to your project
cd ~/projects/my-nextjs-app
# Launch Claude Code
claude
# You will see a prompt like:
# Claude Code v1.x.x
# Working directory: ~/projects/my-nextjs-app
# Type your request or /help for commands
#
# > _
# Try your first task:
> What is this project? Give me an overview of the architecture.
# Claude will:
# 1. Read key files (package.json, tsconfig.json, directory structure)
# 2. Scan source files to understand the architecture
# 3. Provide a comprehensive overview of your project
The Permission Model
Claude Code operates on a trust but verify model. When it needs to perform actions, it asks for permission. You control what it can do:
| Action Type | Permission Required | Examples |
|---|---|---|
| Read Files | Automatic (allowed by default) | Reading source files, configs, package.json |
| Write/Edit Files | Requires approval (can be auto-approved) | Creating files, modifying source code |
| Run Commands | Requires approval (can be auto-approved) | npm install, running tests, git commands |
| Web Requests | Requires approval | Fetching URLs, API calls |
| MCP Tool Calls | Requires approval | Database queries, GitHub API, Slack messages |
# When Claude wants to edit a file, you will see:
# Claude wants to edit: src/components/Header.tsx
# [Allow] [Deny] [Allow All Edits]
# You can configure auto-approval for trusted operations:
# In your project settings or via CLI flags
# Allow all file edits automatically (for trusted projects)
claude --allowedTools "Edit,Write"
# Run in fully autonomous mode (use with caution)
claude --dangerouslySkipPermissions
Configuration: CLAUDE.md Files
The most important configuration mechanism is the CLAUDE.md file. This is a markdown file you place in your project root that tells Claude about your project, coding conventions, and preferences. Think of it as onboarding documentation specifically for your AI collaborator.
# CLAUDE.md - Example for a Next.js project
## Project Overview
This is a Next.js 14 app with App Router, TypeScript, and Tailwind CSS.
It is a SaaS platform for project management.
## Tech Stack
- Next.js 14 (App Router, static export)
- TypeScript (strict mode)
- Tailwind CSS for styling
- Supabase for auth and database
- Vercel for deployment
## Coding Conventions
- Use functional components with hooks
- Prefer named exports over default exports
- Use server components by default, add "use client" only when needed
- All components go in app/components/
- All lib/utility files go in app/lib/
- Use Tailwind classes, no CSS modules
## Testing
- Run tests: npm test
- Test framework: Vitest + React Testing Library
- Every new component needs a test file
## Common Commands
- Dev server: npm run dev
- Build: npm run build
- Lint: npm run lint
- Type check: npx tsc --noEmit
The .claude/ Directory
Beyond the root CLAUDE.md, Claude Code uses a .claude/ directory for additional configuration:
your-project/
CLAUDE.md # Project-level instructions (committed to git)
.claude/
settings.json # Claude Code settings
CLAUDE.md # Additional instructions (can be user-specific)
.cursorrules # If also using Cursor (separate config)
Claude Code vs VS Code Extension vs Web App
| Feature | Claude Code CLI | VS Code Extension | Claude.ai Web |
|---|---|---|---|
| File Access | Full project access | Full project access | None (copy-paste) |
| Terminal Commands | Yes | Yes | No |
| Multi-File Edits | Excellent | Good | Manual |
| Background Agents | Yes | Limited | No |
| Best For | Complex tasks, refactoring, CI | Inline editing, quick changes | Architecture discussions, brainstorming |
| MCP Support | Full | Full | No |
Practical Examples: Your First Tasks
Example 1: Understanding a Codebase
# Launch Claude Code in an unfamiliar project
cd ~/projects/inherited-legacy-app
claude
> I just inherited this codebase. Give me a comprehensive overview:
the architecture, key files, tech stack, and any red flags you see.
# Claude will read through key files and give you a structured overview
# much faster than you could do it manually
Example 2: Fixing a Bug
> Users are reporting that the login form submits twice when they
click the submit button quickly. Find the bug and fix it.
The login form is in app/components/LoginForm.tsx.
# Claude will:
# 1. Read LoginForm.tsx
# 2. Identify the missing debounce/disabled state
# 3. Fix the component
# 4. Show you the diff for review
Example 3: Adding a Feature
> Add a dark mode toggle to the app. Use next-themes for the
provider, add a toggle button in the Header component, and
make sure all existing Tailwind classes support dark mode.
Follow the existing code patterns in this project.
# Claude will:
# 1. Install next-themes
# 2. Add the ThemeProvider to the layout
# 3. Create a DarkModeToggle component
# 4. Update the Header to include the toggle
# 5. Show all changes for review
Essential Commands
# Basic usage
claude # Start interactive session
claude "fix the failing tests" # One-shot command
claude -p "explain this code" # Print mode (no file changes)
# Slash commands inside a session
/help # Show all commands
/plan # Enter plan mode (think before acting)
/review-pr # Review a pull request
/clear # Clear conversation history
/compact # Summarize conversation to save context
# Useful flags
claude --model opus # Use a specific model
claude --allowedTools "Edit" # Pre-approve certain tools
claude --verbose # Show detailed tool calls
Pro Tip: Start Small
Do not start by asking Claude Code to build an entire feature on day one. Start with small, verifiable tasks: fix a specific bug, write tests for one file, refactor a single function. As you learn to review AI output effectively and build trust in the tool, gradually increase task complexity. Within a week, you will be comfortable directing multi-file changes. Within a month, you will wonder how you ever coded without it.
Summary
Claude Code transforms the development experience from manually writing code to directing an AI agent that understands your entire project. Install it, write a CLAUDE.md file, and start with small tasks. The permission model keeps you in control, and the agentic execution model means Claude handles the mechanical work while you focus on architecture and review. The rest of this course will teach you to use it like a power user.