MCP Integration

┌─────────────────────────────────────────────────────────┐
│                      Claude Code                         │
├─────────────────────────────────────────────────────────┤
│                     MCP Client                           │
└──────────┬──────────────┬──────────────┬───────────────┘
           │              │              │
           ▼              ▼              ▼
    ┌──────────┐   ┌──────────┐   ┌──────────┐
    │ Database │   │  GitHub  │   │   Slack  │
    │  Server  │   │  Server  │   │  Server  │
    └──────────┘   └──────────┘   └──────────┘

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/home/user/projects"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_..."
      }
    }
  }
}

{
  "server-name": {
    "command": "executable",      // Command to run
    "args": ["arg1", "arg2"],     // Command arguments
    "env": {                       // Environment variables
      "API_KEY": "value"
    },
    "cwd": "/optional/path"        // Working directory
  }
}

# Exit current session
/exit

# Start new session (servers auto-connect)
claude

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/mcp-server-filesystem",
        "/home/user/documents",
        "/home/user/downloads"
      ]
    }
  }
}

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

You: Create an issue for the login bug we discussed

Claude Code: [Uses GitHub MCP server]
Created issue #47: "Login fails with special characters in password"
https://github.com/your-org/your-repo/issues/47

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://user:pass@localhost:5432/mydb"
      }
    }
  }
}

You: Show me users who signed up this week

Claude Code: [Queries database via MCP]
Found 23 new users:
- user1@example.com (Jan 15)
- user2@example.com (Jan 15)
...

You: What's the most popular product category?

Claude Code: [Runs aggregation query]
Electronics: 1,245 orders (34%)
Clothing: 892 orders (24%)
Home & Garden: 567 orders (15%)
...

{
  "mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "your_brave_api_key"
      }
    }
  }
}

You: What's the latest Next.js version?

Claude Code: [Searches web]
Next.js 14.1.0 was released on January 18, 2024.
Key changes include:
- Improved turbopack support
- Self-hosting improvements
...

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-...",
        "SLACK_TEAM_ID": "T0123456"
      }
    }
  }
}

You: Post a deployment update to #engineering

Claude Code: [Posts to Slack]
Posted to #engineering:
"🚀 Deployed v2.3.0 to production
- Added user favorites feature
- Fixed checkout timeout bug
- Performance improvements"

You: Create an API endpoint for fetching user orders

Claude Code: Let me check the database schema first...

[Queries database via MCP]

I see the orders table structure:
- id (uuid)
- user_id (uuid, FK)
- status (enum)
- total_cents (integer)
- created_at (timestamp)

Creating API endpoint...
[Creates /api/orders/[userId]/route.ts]
[Adds proper TypeScript types]
[Includes pagination]

Done. The endpoint matches your actual database schema.

You: Review the open PRs and summarize any that need attention

Claude Code: [Fetches PRs via GitHub MCP]

3 PRs need attention:

1. PR #89: "Add payment retry logic" - Waiting for review (3 days)
   - Changes: src/lib/stripe.ts, tests added
   - CI: Passing

2. PR #87: "Update dependencies" - Has merge conflicts
   - Needs rebase against main

3. PR #85: "Fix memory leak" - Changes requested
   - Reviewer asked for memory profiling results

Would you like me to address any of these?

You: Deploy the latest changes and notify the team

Claude Code:
[Step 1: Check GitHub for latest changes]
Checking main branch... Latest commit: "Fix checkout flow" (2 hours ago)

[Step 2: Run deployment]
Building and deploying...
Deployed to: https://your-app.vercel.app

[Step 3: Post to Slack]
Posted deployment notification to #engineering

All done. Deployment complete and team notified.

// my-server/index.ts
import { Server } from "@anthropic-ai/mcp-sdk";
import { StdioServerTransport } from "@anthropic-ai/mcp-sdk/server/stdio";

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

// Define tools
server.setRequestHandler("tools/list", async () => ({
  tools: [
    {
      name: "get_user_data",
      description: "Fetch user data from internal API",
      inputSchema: {
        type: "object",
        properties: {
          userId: { type: "string", description: "User ID" }
        },
        required: ["userId"]
      }
    }
  ]
}));

// Implement tool handlers
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "get_user_data") {
    const { userId } = request.params.arguments;
    const userData = await fetchUserFromInternalAPI(userId);
    return { content: [{ type: "text", text: JSON.stringify(userData) }] };
  }
});

// Start server
const transport = new StdioServerTransport();
server.connect(transport);

{
  "mcpServers": {
    "internal-api": {
      "command": "node",
      "args": ["/path/to/my-server/dist/index.js"],
      "env": {
        "INTERNAL_API_KEY": "your_key"
      }
    }
  }
}

// ❌ Don't do this
{
  "mcpServers": {
    "github": {
      "env": {
        "GITHUB_TOKEN": "ghp_actual_token_here"
      }
    }
  }
}

# ~/.zshrc or ~/.bashrc
export GITHUB_TOKEN="ghp_your_token"
export DATABASE_URL="postgresql://..."

// ✅ Reference from environment
{
  "mcpServers": {
    "github": {
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

// Database server with read-only access
{
  "mcpServers": {
    "postgres-readonly": {
      "env": {
        "DATABASE_URL": "postgresql://readonly_user:pass@localhost/mydb"
      }
    }
  }
}

/mcp status

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

You: Query the database

Claude Code: Error: Permission denied to access database

Check:
1. DATABASE_URL is correct
2. User has necessary permissions
3. Network allows connection

{
  "mcpServers": {
    "my-server": {
      "command": "node",
      "args": ["server.js"],
      "env": {
        "DEBUG": "mcp:*"
      }
    }
  }
}

Week 1: Add filesystem server
Week 2: Add GitHub server
Week 3: Add database server

# MCP Configuration

## Required Environment Variables
- GITHUB_TOKEN: Create at github.com/settings/tokens
- DATABASE_URL: Get from team lead
- SLACK_BOT_TOKEN: Available in Slack app settings

## Server Setup
1. Copy mcp.json.example to ~/.claude/mcp.json
2. Set environment variables
3. Restart Claude Code

You: Test the GitHub connection

Claude Code: [Tests server]
✓ Connected to GitHub
✓ Authenticated as your-username
✓ Can access repositories

GitHub MCP server is working correctly.

# Update MCP servers periodically
npm update -g @anthropic-ai/mcp-server-github
npm update -g @anthropic-ai/mcp-server-postgres