Claude Code: The Agentic Coding Tool That Lives in Your Terminal

Master Claude Code — Anthropic's AI coding agent. Learn setup, agentic workflows, MCP servers, hooks, CLAUDE.md, and how it compares to Cursor and Copilot.

14 min read
0 views
By Siraj AL Zahran
Claude CodeAIAgentsCLIAnthropicMCPAgentic Coding
Claude Code: The Agentic Coding Tool That Lives in Your Terminal

What is Claude Code?

Claude Code is an agentic coding tool by Anthropic that lives directly in your terminal. It's not a VS Code extension, not a browser tab — it's a CLI that understands your entire codebase, writes code, runs commands, manages git, and ships features autonomously.

Unlike traditional AI code assistants that suggest one line at a time, Claude Code operates as a full agent. You describe what you want in plain English, and it reads files, edits across multiple files, runs tests, fixes errors, and iterates — all on its own.

Think of it as having a senior engineer sitting in your terminal who can actually touch your code, not just talk about it.


Why Claude Code is Different

Most AI coding tools work like autocomplete on steroids. Claude Code works like a teammate:

  • It reads your codebase — not just the open file, but your entire project structure, imports, configs, and patterns.
  • It edits multiple files — a single prompt can update components, APIs, tests, and types simultaneously.
  • It runs commands — installs packages, runs builds, executes tests, and iterates on failures.
  • It uses git — creates branches, stages files, writes commit messages, and can open PRs.
  • It remembers context — through CLAUDE.md files and conversation history, it understands your project conventions.

Getting Started

Installation

Claude Code requires Node.js 18+ and an Anthropic API key (or a Claude Pro/Max subscription).

javascript
1
2
3
4
5
6
7
8
9
// Check your Node.js version first
console.log("Required: Node.js 18+");
console.log("Install command:");
console.log(" npm install -g @anthropic-ai/claude-code");
console.log("");
console.log("Then run:");
console.log(" claude");
console.log("");
console.log("That's it. No config files, no extensions, no setup wizard.");
Terminal
Terminal Output
Click the Run button to execute the code...

First Run

Navigate to any project directory and type claude. It will:

  1. Index your codebase (reads file structure, key files)
  2. Start an interactive session in your terminal
  3. Wait for your instructions
bash
1
2
cd my-project
claude

You can also run one-off commands:

bash
1
2
3
claude "add a dark mode toggle to the header"
claude "fix the failing tests in auth.test.ts"
claude "refactor the API routes to use middleware"

Key Features

1. Agentic Workflows

This is what makes Claude Code fundamentally different. When you give it a task, it doesn't just generate code — it executes a plan:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Example: What happens when you say
// "Add form validation to the signup page"
 
const agentSteps = [
"1. Read the signup component file",
"2. Read the existing form logic and schema",
"3. Check what validation library is installed (Zod, Yup, etc.)",
"4. Read similar forms in the codebase for patterns",
"5. Edit the form component with validation rules",
"6. Update the schema/types file",
"7. Add error message display to the UI",
"8. Run the build to check for TypeScript errors",
"9. Fix any errors found",
"10. Show you the diff of all changes"
];
 
console.log("Claude Code's agentic workflow:");
console.log("================================");
agentSteps.forEach(step => console.log(step));
console.log("");
console.log("All from a single prompt. No copy-paste. No switching files.");
Terminal
Terminal Output
Click the Run button to execute the code...

2. CLAUDE.md — Project Memory

Create a CLAUDE.md file in your project root to give Claude Code persistent context about your project:

markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# CLAUDE.md
 
## Project Overview
 
This is a Next.js 14 portfolio site using the App Router, Tailwind CSS, and Framer Motion.
 
## Conventions
 
- Use TypeScript for all files
- Use Tailwind CSS — never write custom CSS
- Components go in `components/` with PascalCase names
- Use `clsx` for conditional classNames
- Always use server components unless client interactivity is needed
 
## Commands
 
- `npm run dev` — start dev server
- `npm run build` — production build
- `npm run lint` — run ESLint
 
## Architecture
 
- `app/` — Next.js App Router pages and layouts
- `components/` — shared React components
- `lib/` — utility functions and configs
- `public/` — static assets

Claude Code reads this file automatically every session. It's like onboarding documentation that your AI assistant actually reads.

Pro tip: You can also create .claude/ directories with more specific context files, and nest CLAUDE.md files in subdirectories for module-specific instructions.


3. Slash Commands

Claude Code has built-in slash commands for common workflows:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const slashCommands = {
"/help": "Show available commands and usage",
"/clear": "Clear conversation history",
"/compact": "Compress context to save tokens",
"/init": "Create a CLAUDE.md file for your project",
"/cost": "Show token usage and costs for this session",
"/review": "Review code changes or a PR",
"/commit": "Stage and commit changes with an AI-generated message",
};
 
console.log("Essential Slash Commands:");
console.log("========================");
Object.entries(slashCommands).forEach(([cmd, desc]) => {
console.log(` ${cmd.padEnd(12)} → ${desc}`);
});
Terminal
Terminal Output
Click the Run button to execute the code...

4. MCP Servers — Connecting AI to Tools

Model Context Protocol (MCP) is what makes Claude Code extensible. MCP servers let you connect Claude Code to external tools, APIs, and data sources.

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Example: .claude/settings.json with MCP servers
 
const mcpConfig = {
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": { "GITHUB_TOKEN": "your-token" }
},
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": { "DATABASE_URL": "postgresql://..." }
},
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/docs"]
}
}
};
 
console.log("MCP Server Configuration:");
console.log(JSON.stringify(mcpConfig, null, 2));
console.log("");
console.log("With these configured, Claude Code can:");
console.log(" • Read and create GitHub issues and PRs");
console.log(" • Query your database directly");
console.log(" • Read documentation files for context");
Terminal
Terminal Output
Click the Run button to execute the code...

With MCP servers, Claude Code can:

  • Query your database to understand schema and data
  • Read GitHub issues and implement features from them
  • Access documentation to follow your team's standards
  • Call external APIs during development

5. Hooks — Automation Triggers

Hooks let you run custom shell commands in response to Claude Code events:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Example: .claude/settings.json hooks configuration
 
const hooksConfig = {
"hooks": {
// Run linting after every file edit
"afterEdit": {
"command": "npx eslint --fix $FILE"
},
// Run type checking after edits
"afterWrite": {
"command": "npx tsc --noEmit"
}
}
};
 
console.log("Hooks Configuration:");
console.log(JSON.stringify(hooksConfig, null, 2));
console.log("");
console.log("Hooks fire automatically when Claude Code:");
console.log(" • Edits a file (afterEdit)");
console.log(" • Creates a file (afterWrite)");
console.log(" • Runs a command (beforeCommand / afterCommand)");
console.log("");
console.log("This ensures code quality without you lifting a finger.");
Terminal
Terminal Output
Click the Run button to execute the code...

6. Multi-File Editing

This is where Claude Code really shines. A single prompt can touch dozens of files coherently:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Real example: "Add a new API endpoint for user preferences"
// Claude Code will edit ALL of these in one pass:
 
const filesEdited = [
{ file: "app/api/preferences/route.ts", action: "CREATE", desc: "API route handler" },
{ file: "lib/db/schema.ts", action: "EDIT", desc: "Add preferences table" },
{ file: "lib/types.ts", action: "EDIT", desc: "Add Preference type" },
{ file: "components/PreferencesForm.tsx", action: "CREATE", desc: "UI component" },
{ file: "app/settings/page.tsx", action: "EDIT", desc: "Import and use form" },
{ file: "lib/validations.ts", action: "EDIT", desc: "Add Zod schema" },
];
 
console.log("Files touched from a single prompt:");
console.log("===================================");
filesEdited.forEach(f => {
const badge = f.action === "CREATE" ? "🆕" : "✏️";
console.log(` ${badge} ${f.action.padEnd(6)} ${f.file}`);
console.log(` ${f.desc}`);
});
console.log("");
console.log("Total: 6 files, 1 prompt, 0 copy-paste.");
Terminal
Terminal Output
Click the Run button to execute the code...

Practical Usage Patterns

Pattern 1: Bug Fixing

text
1
claude "The login form submits but nothing happens. Debug it and fix."

Claude Code will read the form component, trace the submit handler, check the API route, look at network calls, find the bug, fix it, and verify the build passes.

Pattern 2: Feature Implementation

text
1
claude "Add a search bar to the blog page that filters posts by title and tags in real-time"

It reads your existing blog page, understands the data structure, adds the search input with state management, implements filtering logic, and styles it to match your existing UI patterns.

Pattern 3: Refactoring

text
1
claude "Refactor all API routes to use a shared error handler middleware"

It reads every API route, identifies the common error handling pattern, creates the middleware, updates all routes to use it, and runs the build to verify nothing broke.

Pattern 4: Code Review

text
1
/review

Claude Code reviews your staged changes, identifies potential issues, suggests improvements, and can automatically fix problems it finds.

Pattern 5: Git Workflow

text
1
/commit

It looks at your changes, writes a descriptive commit message following your project's commit style, and creates the commit.


Claude Code vs Other AI Coding Tools

Here's how Claude Code stacks up against the competition:

FeatureClaude CodeCursorGitHub CopilotWindsurf
InterfaceTerminal (CLI)IDE (VS Code fork)IDE ExtensionIDE (VS Code fork)
Agentic (multi-step)✔ Full agent✔ Composer mode✘ Mostly autocomplete✔ Cascade mode
Multi-file editing✔ Excellent✔ Good✘ Single file✔ Good
Runs commands✔ Native✔ Limited✘ No✔ Limited
Git integration✔ Deep✘ Basic✔ PR summaries✘ Basic
MCP support✔ First-class✔ Supported✘ No✘ No
Project memory✔ CLAUDE.md✔ .cursorrules✘ Limited✔ Rules
Codebase awareness✔ Full project✔ Full project✘ Open files only✔ Full project
Hooks/automation✔ Built-in✘ No✘ No✘ No
Works offline✘ No✘ No✘ No✘ No
Open source✔ Yes✘ No✘ No✘ No

When to Use Each Tool

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const recommendations = {
"Claude Code": {
bestFor: [
"Complex multi-file features",
"Terminal-first developers",
"Git-heavy workflows",
"Codebase refactoring",
"CI/CD and DevOps tasks",
],
tradeoff: "No visual UI — you work entirely in the terminal"
},
"Cursor": {
bestFor: [
"Visual inline editing",
"Developers who want a full IDE",
"Quick edits with context",
"Tab-completion workflows",
],
tradeoff: "Paid IDE, less agentic autonomy"
},
"GitHub Copilot": {
bestFor: [
"Line-by-line autocomplete",
"Teams already on GitHub",
"Simple completions while typing",
"PR descriptions and reviews",
],
tradeoff: "Not agentic — won't plan or execute multi-step tasks"
},
"Windsurf": {
bestFor: [
"AI-first IDE experience",
"Cascade mode for agentic tasks",
"Teams wanting IDE + agent combo",
],
tradeoff: "Newer tool, smaller ecosystem"
}
};
 
Object.entries(recommendations).forEach(([tool, info]) => {
console.log(`\n${tool}`);
console.log("=".repeat(tool.length));
console.log("Best for:");
info.bestFor.forEach(use => console.log(` ✔ ${use}`));
console.log(` ⚠ ${info.tradeoff}`);
});
Terminal
Terminal Output
Click the Run button to execute the code...

Power User Tips

Tip 1: Use /compact to Save Context

Long sessions eat through your context window. Run /compact periodically to compress the conversation while keeping the important parts.

Tip 2: Be Specific About What You Want

javascript
1
2
3
4
5
6
7
8
9
10
11
// ✘ Vague prompt:
const bad = "make the page look better";
 
// ✔ Specific prompt:
const good = "Add a gradient hero section with a centered heading, subtitle, and CTA button. Use the existing copper color scheme from tailwind config.";
 
console.log("❌ Vague:", bad);
console.log("");
console.log("✔️ Specific:", good);
console.log("");
console.log("The more context you give, the fewer iterations you need.");
Terminal
Terminal Output
Click the Run button to execute the code...

Tip 3: Let It Run Tests

After making changes, tell Claude Code to run your tests. If they fail, it will read the errors and fix them automatically:

text
1
claude "run the tests and fix any failures"

Tip 4: Use CLAUDE.md for Team Consistency

If your whole team uses Claude Code, a shared CLAUDE.md ensures everyone's AI assistant follows the same conventions. Commit it to your repo.

Tip 5: Chain Tasks

You can give Claude Code a list of tasks and it will execute them sequentially:

text
1
2
3
4
claude "1. Add a loading skeleton to the dashboard page
2. Add error boundaries around each widget
3. Run the build and fix any issues
4. Commit with a descriptive message"

Common Pitfalls to Avoid

  • Don't skip CLAUDE.md — Without project context, Claude Code makes generic choices instead of matching your patterns.
  • Don't approve commands blindly — Always read what it's about to execute, especially destructive commands like rm or git push --force.
  • Don't use it for trivial edits — Renaming a variable? Just do it yourself. Save Claude Code for complex, multi-step work.
  • Don't ignore the diff — Always review the changes before committing. AI is good but not infallible.
  • Don't fight the agent — If it's going down the wrong path, stop it and redirect with clearer instructions instead of letting it spiral.

Conclusion

Claude Code represents a fundamental shift in how developers write software. It's not autocomplete — it's an autonomous agent that reads your codebase, plans changes, edits files, runs commands, and iterates on errors.

The key differentiators:

  • Terminal-native — no IDE lock-in, works everywhere
  • Truly agentic — multi-step reasoning and execution
  • MCP extensible — connect it to any tool or data source
  • Project-aware — CLAUDE.md gives it deep context about your conventions
  • Open source — inspect it, extend it, trust it

Whether you're building a new feature, debugging a production issue, or refactoring legacy code, Claude Code turns hours of work into minutes.

Pro Tip: Start with a solid CLAUDE.md and your experience will be 10x better from day one. Treat it like onboarding docs — the better you explain your project, the better your AI teammate performs.

Happy coding!

More Deep Dives

Claude Code: Agent Teams, MCP Servers & CI/CD Pipelines
20 min read

Claude Code: Agent Teams, MCP Servers & CI/CD Pipelines

Go multi-agent with Claude Code. Master agent teams, build custom MCP integrations, automate with GitHub Actions, and create CI/CD pipelines that code for you.

Claude CodeMCP+5
Feb 25, 2026
Read
Claude Code Remote Control: Continue Terminal Sessions From Your Phone
10 min read

Claude Code Remote Control: Continue Terminal Sessions From Your Phone

Learn how Remote Control lets you continue Claude Code sessions from your phone, tablet, or any browser — while everything runs locally on your machine.

Claude CodeRemote Control+5
Feb 25, 2026
Read
Code to Canvas: Turning Production Code into Editable Figma Designs
16 min read

Code to Canvas: Turning Production Code into Editable Figma Designs

Learn how Claude Code + Figma's MCP server turns your running UI into editable Figma layers — and back. The complete bidirectional design-code workflow.

FigmaClaude Code+5
Feb 25, 2026
Read
Mastering Claude Code: Skills, Memory, Tokens & Power-User Secrets
22 min read

Mastering Claude Code: Skills, Memory, Tokens & Power-User Secrets

Go beyond basics. Master CLAUDE.md context, auto memory, custom skills, hooks, subagents, token optimization, and the workflows that 10x your productivity with Claude Code.

Claude CodeAI+5
Feb 24, 2026
Read
JSX & Components — ReactJS Series Part 2
12 min read

JSX & Components — ReactJS Series Part 2

Learn how JSX works under the hood, how to create and nest React components, and the rules that make JSX different from HTML.

ReactJavaScript+4
Feb 21, 2026
Read
What is React? — ReactJS Series Part 1
10 min read

What is React? — ReactJS Series Part 1

A beginner-friendly introduction to React. Learn what React is, why it exists, how it differs from vanilla JavaScript, and build your first component.

ReactJavaScript+3
Feb 21, 2026
Read
View All Dives

Explore more content