MCP Servers

What Are MCP Servers?

MCP (Model Context Protocol) servers extend Claude Code with connections to external systems:

Browser automation (Playwright, Chrome DevTools)
Documentation fetching (Context7, DeepWiki)
Cloud services (AWS, GitHub, Slack)
Databases (PostgreSQL, Redis)
File systems and custom APIs

MCP servers expose tools that Claude can invoke just like built-in tools (Read, Write, Bash).

MCP servers are configured in .mcp.json (project) or ~/.claude.json (user), or in agent frontmatter.

Why MCP Matters

MCP servers enable Claude to:

Access real data: Query databases, APIs, and cloud services
Automate browsers: Test UIs, debug console errors, verify deployments
Fetch fresh docs: Get up-to-date library documentation instead of relying on training data
Integrate with tools: Connect to Slack, GitHub, Jira, and internal systems

MCP servers run with the same permissions as Claude Code. Only enable trusted servers.

Recommended MCP Servers

Based on community feedback (“/r/mcp”):

Context7

Fetches up-to-date library docs into context. Prevents hallucinated APIs from outdated training data.Community: “by far the best MCP for coding”

Playwright

Browser automation — implement, test, and verify UI features autonomously. Screenshots, navigation, form testing.Community: “essential for frontend”

Claude in Chrome

Connects Claude to your real Chrome browser — inspect console, network, DOM. Debug what users actually see.Community: “game changer for debugging”

DeepWiki

Fetches structured wiki-style documentation for any GitHub repo — architecture, API surface, relationships.Community: “put it behind a gateway with Context7”

Workflow: Research (Context7/DeepWiki) → Debug (Playwright/Chrome) → Verify

Configuration

Project-Scoped (Team-Shared)

Create .mcp.json at project root (committed to git):

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    },
    "deepwiki": {
      "command": "npx",
      "args": ["-y", "deepwiki-mcp"]
    },
    "remote-api": {
      "type": "http",
      "url": "https://mcp.example.com/mcp"
    }
  }
}

User-Scoped (Personal)

Add to ~/.claude.json:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    }
  }
}

Agent-Scoped

In agent frontmatter:

---
name: deploy-manager
mcpServers:
  - slack
  - name: pagerduty
    command: npx
    args: ["-y", "@pagerduty/mcp-server"]
---

You have access to Slack and PagerDuty via MCP.

Server Types

stdio (Local Process)
http (Remote URL)

Spawns a local process that communicates via stdin/stdout.Most common for npm packages:

{
  "command": "npx",
  "args": ["-y", "@playwright/mcp"]
}

Python servers:

{
  "command": "python",
  "args": ["server.py"]
}

Binary servers:

{
  "command": "/usr/local/bin/mcp-server",
  "args": ["--port", "8080"]
}

Connects to a remote HTTP/SSE endpoint.

{
  "type": "http",
  "url": "https://mcp.company.com/mcp"
}

Use for:

Shared team servers
Cloud-hosted MCP services
Internal company APIs

Enabling MCP Servers

By default, Claude Code prompts for approval when a .mcp.json server starts. Configure auto-approval in .claude/settings.json:

Auto-Approve All
Allowlist Specific Servers
Blocklist Servers

{
  "enableAllProjectMcpServers": true
}

Enables all servers in .mcp.json without prompting.

{
  "enabledMcpjsonServers": [
    "context7",
    "playwright",
    "deepwiki"
  ]
}

Only these servers are auto-approved.

{
  "disabledMcpjsonServers": [
    "experimental-server"
  ]
}

These servers are blocked even if defined.

Permissions for MCP Tools

MCP tools follow the mcp__<server>__<tool> naming convention:

{
  "permissions": {
    "allow": [
      "mcp__*",                          // All MCP tools
      "mcp__context7__*",                // All Context7 tools
      "mcp__playwright__browser_snapshot" // Specific tool
    ],
    "deny": [
      "mcp__dangerous-server__*"
    ]
  }
}

Wildcard patterns:

mcp__* — All MCP servers and tools
mcp__memory__.* — All tools from memory server
mcp__.*__write.* — Any write tool from any server

MCP Scopes

MCP servers can be defined at three levels:

Subagent (highest priority)

Location: Agent frontmatter mcpServers fieldPurpose: Servers scoped to a specific subagent

---
name: deploy-manager
mcpServers:
  - slack
---

Project

Location: .mcp.json at repo rootPurpose: Team-shared servers, committed to git

{
  "mcpServers": {
    "playwright": {...}
  }
}

User (lowest priority)

Location: ~/.claude.json (mcpServers key)Purpose: Personal servers across all projects

{
  "mcpServers": {
    "github": {...}
  }
}

Real Examples from Repository

From .mcp.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    },
    "reddit-mcp-server": {
      "type": "http",
      "url": "http://144.91.76.33:8080/mcp"
    },
    "tavily-web-search": {
      "type": "http",
      "url": "https://mcp.tavily.com/mcp/?tavilyApiKey=tvly-dev-..."
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    },
    "deepwiki": {
      "command": "npx",
      "args": ["-y", "deepwiki-mcp"]
    }
  }
}

From .claude/settings.json:

{
  "enableAllProjectMcpServers": true,
  "permissions": {
    "allow": [
      "mcp__*",
      "mcp__playwright__*",
      "mcp__reddit-mcp-server__get_post_details",
      "mcp__reddit-mcp-server__search_reddit",
      "mcp__tavily-web-search__tavily_search"
    ]
  }
}

Browser Automation MCPs

Three options for browser automation:

Playwright MCP
Claude in Chrome
Chrome DevTools MCP

Best for: Automated testing, headless browser control

{
  "playwright": {
    "command": "npx",
    "args": ["-y", "@playwright/mcp"]
  }
}

Capabilities:

Navigate, click, type, screenshot
Run in headless mode
Multiple browser engines (Chromium, Firefox, WebKit)
Parallel execution

Best for: Debugging real user issues, inspecting live state

{
  "claude-in-chrome": {
    "command": "npx",
    "args": ["-y", "claude-code-in-chrome-mcp"]
  }
}

Capabilities:

Connects to your actual Chrome browser
Inspect console logs, network requests, DOM
Debug what users are seeing
No headless mode — see everything

Best for: Low-level protocol access

{
  "chrome-devtools": {
    "command": "npx",
    "args": ["-y", "@anthropic-ai/mcp-server-puppeteer"]
  }
}

Capabilities:

Chrome DevTools Protocol access
Performance profiling
Network throttling
Coverage analysis

Browser Automation MCP Comparison

Detailed comparison of Playwright, Chrome DevTools, and Claude in Chrome

MCP Management

Interactive Menu
List Servers

claude mcp list

Shows all configured MCP servers and their status.

Best Practices

Start with 3-5 servers

“Went overboard with 15 MCP servers thinking more = better. Ended up using only 4 daily.” — r/mcp

Start minimal:

Context7 (docs)
Playwright or Claude in Chrome (browser)
One integration (GitHub, Slack, etc.)

Add more as needed.

Use npx for easy installation

No need to install packages globally:

{
  "command": "npx",
  "args": ["-y", "@playwright/mcp"]
}

The -y flag auto-confirms installation.

Commit .mcp.json to git

Share MCP servers with your team:

git add .mcp.json
git commit -m "Add Playwright MCP for UI testing"

Team members get the same tools automatically.

Set appropriate permissions

Don’t blindly allow all MCP tools:

// Bad
"allow": ["mcp__*"]

// Good
"allow": [
  "mcp__playwright__browser_snapshot",
  "mcp__context7__*"
]

Use environment variables for secrets

Never commit API keys to .mcp.json:

{
  "github": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-github"],
    "env": {
      "GITHUB_TOKEN": "${GITHUB_TOKEN}"
    }
  }
}

Set in .claude/settings.local.json (git-ignored):

{
  "env": {
    "GITHUB_TOKEN": "ghp_your_token_here"
  }
}

Environment Variables

Configure MCP behavior via settings:

{
  "env": {
    "MCP_TIMEOUT": "10000",           // Startup timeout (ms)
    "MAX_MCP_OUTPUT_TOKENS": "50000"  // Max output tokens
  }
}

Troubleshooting

Server won't start

Check logs:

claude --debug

Common issues:

Missing dependencies (run npx command manually)
Port conflicts (another process using the port)
Timeout too short (increase MCP_TIMEOUT)

Permission denied

Add to .claude/settings.json:

{
  "permissions": {
    "allow": ["mcp__server-name__*"]
  }
}

Server not listed

Ensure .mcp.json is valid JSON and in the project root.Test:

cat .mcp.json | python -m json.tool

Cross-Links

Settings

Configure MCP permissions and auto-approval

Subagents

Scope MCP servers to specific agents

MCP Best Practice

Recommended servers and configuration

Browser Automation Report

Compare Playwright, Chrome DevTools, and Claude in Chrome

Get Started

Core Concepts

Best Practices

Workflows & Patterns

Implementation Examples

What Are MCP Servers?

Why MCP Matters

Recommended MCP Servers

Context7

Playwright

Claude in Chrome

DeepWiki

Configuration

Project-Scoped (Team-Shared)

User-Scoped (Personal)

Agent-Scoped

Server Types

Enabling MCP Servers

Permissions for MCP Tools

MCP Scopes

Real Examples from Repository

Browser Automation MCPs

Browser Automation MCP Comparison

MCP Management

Best Practices

Environment Variables

Troubleshooting

Cross-Links

Settings

Subagents

MCP Best Practice

Browser Automation Report

Further Reading

Build docs developers (and LLMs) love

Get Started

Core Concepts

Best Practices

Workflows & Patterns

Implementation Examples

​What Are MCP Servers?

​Why MCP Matters

​Recommended MCP Servers

Context7

Playwright

Claude in Chrome

DeepWiki

​Configuration

​Project-Scoped (Team-Shared)

​User-Scoped (Personal)

​Agent-Scoped

​Server Types

​Enabling MCP Servers

​Permissions for MCP Tools

​MCP Scopes

​Real Examples from Repository

​Browser Automation MCPs

Browser Automation MCP Comparison

​MCP Management

​Best Practices

​Environment Variables

​Troubleshooting

​Cross-Links

Settings

Subagents

MCP Best Practice

Browser Automation Report

​Further Reading

Build docs developers (and LLMs) love

What Are MCP Servers?

Why MCP Matters

Recommended MCP Servers

Configuration

Project-Scoped (Team-Shared)

User-Scoped (Personal)

Agent-Scoped

Server Types

Enabling MCP Servers

Permissions for MCP Tools

MCP Scopes

Real Examples from Repository

Browser Automation MCPs

MCP Management

Best Practices

Environment Variables

Troubleshooting

Cross-Links

Further Reading