Week 4: Learn - Claude Code Study

LESSONS

MCP Fundamentals

What is MCP, architecture, why it matters, built-in capabilities

Not Started

What is MCP?

MCP (Model Context Protocol) is an open protocol that standardizes how AI assistants connect to external data sources and tools. Think of it as a "USB for AI" -- a universal way to plug in capabilities.

MCP Architecture

MCP Architecture Diagram

┌─────────────────────────────────────────────────────────────┐
│                      Claude Code (Host)                      │
│                                                              │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐    │
│   │ MCP Client  │    │ MCP Client  │    │ MCP Client  │    │
│   └──────┬──────┘    └──────┬──────┘    └──────┬──────┘    │
└──────────┼──────────────────┼──────────────────┼────────────┘
           │                  │                  │
           ▼                  ▼                  ▼
    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
    │  Playwright  │    │  Database   │    │   Custom    │
    │   Server    │    │   Server    │    │   Server    │
    └─────────────┘    └─────────────┘    └─────────────┘

Why MCP Matters

Before MCP, every AI integration required custom code. MCP provides a standard interface for:

Tools - Functions the AI can call (search, database queries, API calls)
Resources - Data the AI can read (files, databases, web content)
Prompts - Pre-defined prompt templates for specific tasks

Built-in MCP Capabilities

Tools

Functions the AI can call -- search, database queries, API calls, shell commands.

Resources

Data the AI can read -- files, databases, web content, project context.

Prompts

Pre-defined prompt templates for specific tasks and workflows.

Sampling

Server-initiated AI interactions for automated decision-making.

Checking MCP Status

/mcp command

# In Claude Code, check connected MCP servers
> /mcp

Connected MCP Servers:
- filesystem (built-in)
- Fetch (built-in)
- postgres (custom) - 5 tools available
- slack (custom) - 3 tools available

Adding & Configuring MCP Servers

claude mcp add, multi-server config, and /mcp status

Not Started

Adding MCP Servers

Use claude mcp add to connect external services. Configure multiple servers in settings.local.json and let Claude orchestrate data between them.

Adding via CLI

Terminal Commands

# Add an MCP server with npx
claude mcp add postgres -- npx -y @modelcontextprotocol/server-postgres

# Add Playwright for browser automation
claude mcp add playwright -- npx -y @anthropic-ai/mcp-server-playwright

# Add with environment variables
claude mcp add slack -- npx -y @anthropic-ai/mcp-server-slack

# View connected MCP servers
/mcp

Multi-Server Configuration

.claude/settings.local.json

{
  "mcpServers": {
    "notion": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-notion"],
      "env": { "NOTION_API_KEY": "${NOTION_API_KEY}" }
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-playwright"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": { "GITHUB_TOKEN": "${GITHUB_TOKEN}" }
    }
  }
}

Multi-MCP Pipeline Example

Automated Workflow

User: "Check new GitHub issues, scrape competitor site, and update Notion board"

# Step 1: GitHub MCP - Fetch new issues
Claude uses github.list_issues(state="open", since="yesterday")
  -> Returns 5 new issues

# Step 2: Playwright MCP - Scrape competitor data
Claude uses playwright.navigate("https://competitor.com/features")
Claude uses playwright.get_text(".feature-list")
  -> Extracts feature comparison data

# Step 3: Notion MCP - Update project board
Claude uses notion.add_database_entry for each issue
Claude uses notion.update_page with competitor insights
  -> Board updated with issues + market context

Popular MCP Servers & Skills

Real-world showcase of most-used servers and community skills

Not Started

The MCP Ecosystem

The MCP ecosystem has grown rapidly with servers for databases, browsers, collaboration tools, and more. Here are the most popular and useful servers and skills for real-world development.

Popular MCP Servers

GitHub MCP

Repository management, PR review, issue tracking, code search

claude mcp add github -- npx -y @modelcontextprotocol/server-github

Playwright MCP

Browser automation, E2E testing, web scraping, screenshot capture

claude mcp add playwright -- npx -y @anthropic-ai/mcp-server-playwright

PostgreSQL MCP

Database queries, schema management, migration assistance

claude mcp add postgres -- npx -y @modelcontextprotocol/server-postgres

Notion MCP

Workspace management, page/database CRUD, team documentation

claude mcp add notion -- npx -y @anthropic-ai/mcp-server-notion

Figma MCP

Design-to-code, Dev Mode integration, component inspection

claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=$FIGMA_API_KEY

Sequential Thinking

Structured reasoning for complex problems, step-by-step analysis

claude mcp add thinking -- npx -y @modelcontextprotocol/server-sequential-thinking

Context7

Up-to-date library docs fetched at query time, always current API references

claude mcp add context7 -- npx -y @upstash/context7-mcp

Slack MCP

Channel summaries, message automation, team communication

claude mcp add slack -- npx -y @anthropic-ai/mcp-server-slack

Popular Community Skills

built-in

commit

Auto-generate commit messages from staged changes. Usage: /commit

built-in

review-pr

Structured PR review with security and style checks. Usage: /review-pr 123

community

code-review

Team-standard code review with severity levels (critical, warning, suggestion)

community

test-generator

Auto-generate unit tests for functions with edge case coverage

community

doc-generator

Generate JSDoc/docstring documentation for codebases

community

security-audit

OWASP Top 10 vulnerability scan with remediation suggestions

community

changelog

Generate changelog from git history with conventional commit parsing

Example Skill SKILL.md

.claude/skills/security-audit/SKILL.md

---
name: security-audit
description: Scan codebase for OWASP Top 10 vulnerabilities
user-invocable: true
allowed-tools: [Read, Glob, Grep]
---

Scan the codebase for common security vulnerabilities:
1. SQL injection in database queries
2. XSS in user-facing output
3. Hardcoded secrets and credentials
4. Insecure deserialization
5. Missing authentication checks

Output a severity-ranked report with file locations
and suggested fixes for each finding.

Custom Commands

Reusable slash commands for team workflows

Not Started

Reusable Commands

Custom commands let you automate repetitive workflows with a single slash command. Define them once, use them across sessions and share with your team.

customCommands in settings.local.json

.claude/settings.local.json

{
  "customCommands": {
    "test": {
      "description": "Run tests and fix failures",
      "prompt": "Run npm test. If any tests fail, analyze the failures and fix them."
    },
    "docs": {
      "description": "Generate documentation",
      "prompt": "Generate JSDoc comments for all functions in the current file."
    },
    "security": {
      "description": "Security audit",
      "prompt": "Scan the codebase for common security vulnerabilities (OWASP Top 10). Report findings."
    }
  }
}

CLAUDE.md Project-Level Commands

Define project-specific commands in CLAUDE.md for team consistency. These are shared via your repository:

CLAUDE.md

## Custom Commands

### /deploy
Deploy to staging environment:
1. Run tests
2. Build the application
3. Deploy to staging server
4. Run smoke tests

### /review-pr [PR_NUMBER]
Review a pull request:
1. Fetch the PR diff
2. Analyze for bugs, security issues, code style
3. Post review comments

Command Parameters ($ARGUMENTS)

Parameterized Commands

{
  "customCommands": {
    "refactor": {
      "description": "Refactor a file",
      "prompt": "Refactor $ARGUMENTS to improve readability and performance."
    },
    "explain": {
      "description": "Explain code",
      "prompt": "Explain how $ARGUMENTS works in detail."
    }
  }
}

# Usage:
# /refactor src/utils/parser.ts
# /explain src/auth/jwt.ts

Best Practices

Naming Conventions

Use short, descriptive names: /test, /deploy, /docs. Consistent naming helps team adoption.

Documentation

Always include a description field. Clear docs make commands discoverable via /help.

Error Handling

Include "if X fails, then Y" logic in prompts. Anticipate edge cases in your commands.

Sharing

Commit CLAUDE.md commands to your repo. Use settings.local.json for personal commands.

Headless Mode

Non-interactive automation and CI/CD

Not Started

Non-Interactive Automation

Headless mode runs Claude without human interaction -- perfect for scripts, CI/CD pipelines, and automated workflows where no terminal UI is needed.

Basic Headless Command

Terminal

# Run Claude non-interactively with JSON output
claude -p "List all TypeScript files" --output-format json

# Simple text output
claude -p "Generate a README for this project"

# With a specific model
claude -p "Quick code analysis" --model haiku

Key Flags

`--print (-p)`

Non-interactive mode. Send a prompt and get the response to stdout.

`--output-format`

Output format: text, json, or stream-json. JSON returns structured data.

`--model`

Choose the Claude model: opus, sonnet, haiku.

`--yes`

Auto-accept all permission requests. Required for fully automated pipelines.

`--allowedTools`

Restrict which tools Claude can use. Example: --allowedTools "Read,Grep,Glob" for read-only analysis.

Warning

Security & Permissions

Using --yes auto-approves all tool calls including file writes and command execution. Always use --allowedTools to restrict capabilities in automated pipelines.

Scripting Examples

Code Analysis Script

#!/bin/bash
# analyze.sh - Get code quality report

report=$(claude -p "Analyze src/ for code quality issues. \
  Output as JSON." \
  --output-format json \
  --allowedTools "Read,Grep,Glob")

echo "$report" > quality-report.json

Batch Processing

#!/bin/bash
# Process multiple files

for file in src/*.ts; do
  claude -p "Add JSDoc comments to $file" \
    --yes --allowedTools "Read,Edit"
done

Pre-commit Hook

#!/bin/bash
# .git/hooks/pre-commit

files=$(git diff --cached --name-only)
result=$(claude -p "Review these files for issues: $files" \
  --allowedTools "Read")

if echo "$result" | grep -q "CRITICAL"; then
  echo "Critical issues found:"
  echo "$result"
  exit 1
fi

CI/CD Integration

.github/workflows/claude-review.yml

name: Claude Code Review

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install Claude Code
        run: npm install -g @anthropic-ai/claude-code

      - name: Review PR
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude -p "Review this PR and comment on any issues" \
            --output-format json --yes

TERMINOLOGY

MCP Server

External service connected via Model Context Protocol. MCP servers expose tools, resources, and capabilities that Claude can use seamlessly. Add servers with claude mcp add, view with /mcp.

MCP Tool Search

Lazy loading mechanism for MCP server tools. Instead of loading all tools at startup, Claude discovers and loads tools on-demand when needed, reducing initialization time.

Custom Commands

Reusable slash commands defined in settings.local.json or CLAUDE.md. Automate repetitive workflows and share them with your team.

Headless Mode

Non-interactive Claude execution for automation and CI/CD. Use claude -p "prompt" to run without a terminal UI. Supports JSON output and tool restrictions.

KNOWLEDGE CHECK

Quiz: MCP Servers & Advanced Automation

Question 1/10

Ready for the Challenge?

Build an MVP using MCP servers, custom commands, and advanced automation techniques.

Start Challenge

LESSONS

MCP Fundamentals

MCP Architecture

Why MCP Matters

Built-in MCP Capabilities

Tools

Resources

Prompts

Sampling

Checking MCP Status

Adding & Configuring MCP Servers

Adding via CLI

Multi-Server Configuration

Multi-MCP Pipeline Example

Popular MCP Servers & Skills

Popular MCP Servers

GitHub MCP

Playwright MCP

PostgreSQL MCP

Notion MCP

Figma MCP

Sequential Thinking

Context7

Slack MCP

Popular Community Skills

commit

review-pr

code-review

test-generator

doc-generator

security-audit

changelog

Example Skill SKILL.md

Custom Commands

customCommands in settings.local.json

CLAUDE.md Project-Level Commands

Command Parameters ($ARGUMENTS)

Best Practices

Naming Conventions

Documentation

Error Handling

Sharing

Headless Mode

Basic Headless Command

Key Flags

--print (-p)

--output-format

--model

--yes

--allowedTools

Scripting Examples

CI/CD Integration

TERMINOLOGY

KNOWLEDGE CHECK

Quiz: MCP Servers & Advanced Automation

Quiz Complete!

Ready for the Challenge?

`--print (-p)`

`--output-format`

`--model`

`--yes`

`--allowedTools`