MCP Integrations

Model Context Protocol (MCP) extends Claude Code's capabilities by connecting it to external tools, databases, and services.

What is MCP?

MCP (Model Context Protocol) is a standard for connecting AI assistants to external resources:

┌─────────────────────────────────────────────────────────────┐
│                      Claude Code                            │
├─────────────────────────────────────────────────────────────┤
│                    MCP Protocol Layer                       │
├──────────┬──────────┬──────────┬──────────┬────────────────┤
│  GitHub  │ Database │ Browser  │   Slack  │  Custom APIs   │
│  Server  │  Server  │  Server  │  Server  │    Server      │
└──────────┴──────────┴──────────┴──────────┴────────────────┘

Setting Up MCP

Configuration File

Create ~/.claude/mcp.json:

{
  "servers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-github"],
      "env": {
        "GITHUB_TOKEN": "your-github-token"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://localhost:5432/mydb"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-filesystem"],
      "env": {
        "ALLOWED_PATHS": "/home/user/projects"
      }
    }
  }
}

Enable MCP in Claude Code

claude config set mcp-enabled true

Popular MCP Servers

GitHub Server

Connect to GitHub repos, issues, and PRs:

# Install
npx -y @anthropic-ai/mcp-server-github

# Usage in Claude Code
"List all open issues in anthropics/claude-code labeled 'bug'"
"Create a PR for the current branch with a summary of changes"

Capabilities:

• Read/write issues
• Create/merge PRs
• Browse repository contents
• Access commit history

Database Server (PostgreSQL)

Query and modify your database:

# Install
npx -y @anthropic-ai/mcp-server-postgres

# Usage in Claude Code
"Show me all users who signed up last week"
"Add an index on the users.email column"

Capabilities:

• Run SELECT queries
• Execute migrations (with approval)
• Analyze query performance
• View schema information

Browser Server

Fetch and analyze web content:

# Install
npx -y @anthropic-ai/mcp-server-browser

# Usage in Claude Code
"Fetch the React documentation for useEffect"
"Get the latest pricing from Stripe's website"

Capabilities:

• Fetch web pages
• Extract content
• Navigate sites
• Handle authentication

Slack Server

Interact with Slack workspaces:

# Install
npx -y @anthropic-ai/mcp-server-slack

# Usage in Claude Code
"Post a deployment notification to #releases"
"Find messages about the login bug in #engineering"

Creating Custom MCP Servers

Build servers for your specific needs:

Basic Server Structure

// my-mcp-server.ts
import { Server } from '@anthropic-ai/mcp-sdk';

const server = new Server({
  name: 'my-custom-server',
  version: '1.0.0',
});

// Define a tool
server.tool({
  name: 'get_user_data',
  description: 'Fetch user data from internal API',
  parameters: {
    userId: { type: 'string', required: true }
  },
  handler: async ({ userId }) => {
    const response = await fetch(`https://internal-api/users/${userId}`);
    return response.json();
  }
});

// Define a resource
server.resource({
  name: 'user_schema',
  description: 'User database schema',
  handler: async () => {
    return { schema: userSchemaDefinition };
  }
});

server.start();

Registering Custom Server

// ~/.claude/mcp.json
{
  "servers": {
    "my-custom": {
      "command": "node",
      "args": ["./my-mcp-server.js"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

MCP Workflows

Workflow 1: Full-Stack Development

Using MCP connections:
1. Query the database for current user schema (@postgres)
2. Check GitHub for related issues (@github)
3. Fetch latest API design patterns (@browser)
4. Generate updated user service code
5. Create a PR with the changes (@github)

Workflow 2: Incident Response

A production issue was reported:
1. Fetch error logs from monitoring (@custom-monitoring)
2. Query database for affected users (@postgres)
3. Check recent deployments (@github)
4. Post status update to Slack (@slack)
5. Create incident ticket (@github)

Workflow 3: Documentation Update

Update API documentation:
1. Read current OpenAPI spec (@filesystem)
2. Query all API routes from codebase
3. Compare with production API (@browser)
4. Generate updated documentation
5. Create PR with changes (@github)

Security Considerations

Environment Variables

Never hardcode secrets:

{
  "servers": {
    "github": {
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"  // From environment
      }
    }
  }
}

Permission Scopes

Limit MCP server capabilities:

{
  "servers": {
    "postgres": {
      "permissions": {
        "read": true,
        "write": false,
        "ddl": false  // No schema changes
      }
    }
  }
}

Audit Logging

Enable logging for MCP actions:

{
  "logging": {
    "mcp": true,
    "level": "info",
    "destination": "~/.claude/mcp.log"
  }
}

Troubleshooting MCP

Server Not Connecting

# Test server directly
npx -y @anthropic-ai/mcp-server-github --test

# Check Claude Code logs
claude logs --filter mcp

Permission Denied

# Verify environment variables
echo $GITHUB_TOKEN

# Check server permissions
claude mcp permissions github

Slow Responses

# Check server health
claude mcp health

# Increase timeout
claude config set mcp-timeout 30000

MCP vs Direct API Calls

Use MCP When...	Use Direct API When...
Reusable across projects	One-off integration
Need Claude to understand context	Simple data fetch
Complex multi-step workflows	Single API call
Want natural language interface	Programmatic access

Extension Power: MCP transforms Claude Code from a code assistant into an automation platform. Connect it to your entire development ecosystem and let it orchestrate complex workflows across multiple services.

You now have a complete understanding of Claude Code. In Module 4, we'll learn how to write effective prompts for code generation. :::