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

Adding MCP Servers

Add servers via the CLI or configuration files:

# Add a server via CLI (recommended)
claude mcp add github -- npx -y @modelcontextprotocol/server-github

# Add with environment variables
claude mcp add postgres -e DATABASE_URL=postgresql://localhost:5432/mydb -- npx -y @modelcontextprotocol/server-postgres

# Add a filesystem server (paths are CLI arguments, not env vars)
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /home/user/projects

Configuration File

You can also configure MCP servers in .mcp.json (project-level) or ~/.claude.json (user-level):

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your-github-token"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://localhost:5432/mydb"
      }
    }
  }
}

Enable MCP in Claude Code

Add MCP servers via the CLI:

claude mcp add <server-name> -- <command> [args...]

Popular MCP Servers

GitHub Server

Connect to GitHub repos, issues, and PRs:

# Install
npx -y @modelcontextprotocol/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 @modelcontextprotocol/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 @modelcontextprotocol/server-fetch

# 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 @modelcontextprotocol/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 { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from 'zod';

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

// Define a tool
server.registerTool(
  'get_user_data',
  {
    description: 'Fetch user data from internal API',
    inputSchema: z.object({
      userId: z.string().describe('The user ID to look up'),
    }),
  },
  async ({ userId }) => {
    const response = await fetch(`https://internal-api/users/${userId}`);
    const data = await response.json();
    return {
      content: [{ type: 'text', text: JSON.stringify(data) }],
    };
  }
);

// Start the server
async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
}

main().catch(console.error);

Registering Custom Server

# Register via CLI
claude mcp add my-custom -e API_KEY=your-api-key -- node ./my-mcp-server.js

Or in .mcp.json:

{
  "mcpServers": {
    "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 — use environment variables:

# Add server with env var from your shell environment
claude mcp add github -e GITHUB_TOKEN=$GITHUB_TOKEN -- npx -y @modelcontextprotocol/server-github

Tool Permissions

Claude Code will ask for your approval before executing MCP tools. You can configure tool permissions in .claude/settings.json:

{
  "permissions": {
    "allow": ["mcp__github__list_issues"],
    "ask": ["mcp__postgres__*"]
  }
}

This controls which MCP tools can run automatically and which require confirmation.

Troubleshooting MCP

Server Not Connecting

# Check server configuration
claude mcp get <server-name>

# List all configured servers
claude mcp list

# Run Claude Code with debug output
claude --debug

Permission Denied

# Verify environment variables are set
echo $GITHUB_TOKEN

# Re-add server with correct env vars
claude mcp remove github
claude mcp add github -e GITHUB_TOKEN=$GITHUB_TOKEN -- npx -y @modelcontextprotocol/server-github

Managing Servers

# List configured MCP servers
claude mcp list

# Remove a server
claude mcp remove <server-name>

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. :::