MCP Servers Best Practice
MCP (Model Context Protocol) servers extend Claude Code with connections to external tools, databases, and APIs. This guide covers recommended servers for daily use and configuration best practices.
MCP Servers for Daily Use
"Went overboard with 15 MCP servers thinking more = better. Ended up using only 4 daily." -- r/mcp (682 upvotes)
| MCP Server | What It Does | Resources |
|---|---|---|
| Context7 | Fetches up-to-date library docs into context. Prevents hallucinated APIs from outdated training data | Reddit: "by far the best MCP for coding" -- npm |
| Playwright | Browser automation -- implement, test, and verify UI features autonomously. Screenshots, navigation, form testing | Reddit: essential for frontend -- Docs |
| Claude in Chrome | Connects Claude to your real Chrome browser -- inspect console, network, DOM. Debug what users actually see | Reddit: "game changer" for debugging |
| DeepWiki | Fetches structured wiki-style documentation for any GitHub repo -- architecture, API surface, relationships | Reddit: "put it behind a gateway with Context7" |
| Excalidraw | Generate architecture diagrams, flowcharts, and system designs as hand-drawn Excalidraw sketches from prompts | GitHub |
Workflow Pipeline
Research (Context7/DeepWiki) -> Debug (Playwright/Chrome) -> Document (Excalidraw)
Configuration
MCP servers are configured in .mcp.json at the project root (project-scoped) or in ~/.claude.json (user-scoped).
Server Types
| Type | Transport | Example |
|---|---|---|
| stdio | Spawns a local process | npx, python, binary |
| http | Connects to a remote URL | HTTP/SSE endpoint |
Example .mcp.json
{
"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"
}
}
}Keep Secrets Out of Version Control
Use environment variable expansion for secrets instead of committing API keys in .mcp.json:
{
"mcpServers": {
"remote-api": {
"type": "http",
"url": "https://mcp.example.com/mcp?token=${MCP_API_TOKEN}"
}
}
}Settings for MCP Servers
These settings in .claude/settings.json control MCP server approval:
| Key | Type | Description |
|---|---|---|
enableAllProjectMcpServers | boolean | Auto-approve all .mcp.json servers without prompting |
enabledMcpjsonServers | array | Allowlist of specific server names to auto-approve |
disabledMcpjsonServers | array | Blocklist of specific server names to reject |
Permission Rules for MCP Tools
MCP tools follow the mcp__<server>__<tool> naming convention in permission rules:
{
"permissions": {
"allow": [
"mcp__*",
"mcp__context7__*",
"mcp__playwright__browser_snapshot"
],
"deny": [
"mcp__dangerous-server__*"
]
}
}MCP Scopes
MCP servers can be defined at three levels:
| Scope | Location | Purpose |
|---|---|---|
| Project | .mcp.json (repo root) | Team-shared servers, committed to git |
| User | ~/.claude.json (mcpServers key) | Personal servers across all projects |
| Subagent | Agent frontmatter (mcpServers field) | Servers scoped to a specific subagent |
Precedence Order
Subagent > Project > User