MCP Setup - Essential Tool Integrations

Supercharge Claude Code by connecting it to external tools and services through the Model Context Protocol (MCP). This guide covers setting up essential MCP servers that transform Claude from a code generator into a comprehensive development platform.

What is MCP?

Model Context Protocol Explained

MCP is an open standard that enables AI assistants to interact with external tools and data sources. Think of MCP servers as specialized APIs that give Claude new capabilities:

• Direct tool access: Control Git, run Playwright tests, query databases
• Real-time data: Fetch documentation, GitHub issues, Figma designs
• Service integration: Connect to Slack, Jira, monitoring systems
• File operations: Enhanced filesystem access with safety controls

Configuration Scopes

MCP servers can be configured at three levels, each with specific use cases:

Scope Hierarchy

Scope	Storage Location	Use Case	Command Flag
Local	Project-specific user settings	Personal dev servers	-s local (default)
Project	.mcp.json in project root	Team-shared tools	-s project
User	Global user config	Personal utilities	-s user

Precedence: Local → Project → User (when servers have the same name)

Essential MCP Servers

1. Git - Version Control Operations

The most fundamental MCP server for any developer:

# Install globally for all projects
claude mcp add git -s user -- npx -y @modelcontextprotocol/git@latest

Capabilities

• Read repository history and diffs
• Create commits with meaningful messages
• Manage branches and merges
• Analyze code changes
• Handle merge conflicts

Example Usage

> What changes have been made to the authentication system recently?
> Create a commit for the login feature I just implemented
> Show me the diff between main and feature/oauth

2. GitHub - Repository Management

Connect to GitHub’s API for comprehensive repository control:

# Remote OAuth connection (recommended)
claude mcp add --transport sse github https://api.githubcopilot.com/mcp/

# Or with personal access token
claude mcp add github -e GITHUB_TOKEN=ghp_yourtoken -- npx -y @modelcontextprotocol/server-github

Capabilities

• Create and manage pull requests
• Work with issues and projects
• Trigger GitHub Actions
• Review code and comments
• Access repository metadata

Example Usage

> Create a PR for the current branch with a summary of changes
> Find all open issues related to authentication
> Review PR #123 and suggest improvements

3. Filesystem - Enhanced File Operations

Safer file system access with configurable boundaries:

# Add with specific root directory
claude mcp add fs -- npx -y @modelcontextprotocol/server-filesystem /path/to/project

Capabilities

• Read/write files with safety controls
• Navigate directory structures
• Bulk file operations
• Search file contents
• Respect .gitignore patterns

Security Note

Always specify a root directory to prevent access to sensitive system files. The filesystem MCP server restricts operations to the specified path.

4. PostgreSQL - Database Operations

Direct database access for development and debugging:

# Add with connection string
claude mcp add postgres -e DATABASE_URL="postgresql://user:pass@localhost:5432/mydb" \
  -- npx -y @modelcontextprotocol/server-postgres

Capabilities

• Schema exploration and documentation
• Read-only queries by default
• Data analysis and reporting
• Migration planning
• Performance optimization suggestions

Example Usage

> Describe the users table schema
> Find all orders placed in the last 30 days
> Suggest indexes to improve query performance

5. Playwright - Browser Automation

Enable browser testing and web scraping:

claude mcp add playwright -- npx -y @playwright/mcp@latest

Capabilities

• Generate E2E tests from descriptions
• Debug failing tests
• Scrape web data
• Automate browser workflows
• Visual regression testing

Example Usage

> Write a test that verifies the login flow works correctly
> Debug why the checkout test is failing
> Scrape product data from our competitor's site

6. Context7 - Library Documentation

Access up-to-date documentation for thousands of libraries:

claude mcp add --transport sse context7 https://mcp.context7.com/sse

Supported Libraries

React, Vue, Next.js, Nuxt, Express, Django, Rails, Laravel, and 1000+ more libraries with real-time documentation access.

Project Configuration

Creating a Shared .mcp.json

For team collaboration, create a .mcp.json file in your project root:

{
  "mcpServers": {
    "git": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/git@latest"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${DATABASE_URL:-postgresql://localhost:5432/dev}"
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Tip

Use environment variable expansion (${VAR} or ${VAR:-default}) to keep sensitive data out of version control while maintaining flexibility.

Team Onboarding

When team members clone the repository:

1. Claude Code detects the .mcp.json file
2. Prompts for approval of each server (security measure)
3. Loads approved servers automatically in future sessions
4. Team members can reset approvals with: claude mcp reset-project-choices

Advanced Server Configurations

MCP Server Types

Transport Types

Type	Use Case	Example
stdio	Local command execution	Git, filesystem
SSE	Server-Sent Events streaming	Remote APIs
HTTP	Request/response APIs	REST services

Adding SSE/HTTP Servers

# SSE server with authentication
claude mcp add api-server --transport sse \
  https://api.example.com/mcp \
  --header "Authorization: Bearer ${API_TOKEN}"

# HTTP server
claude mcp add data-service --transport http \
  https://data.example.com/mcp

Importing from Claude Desktop

If you’ve already configured MCP servers in Claude Desktop:

# Import all servers from Claude Desktop
claude mcp add-from-claude-desktop

# You'll see an interactive picker to choose which servers to import

Real-World Workflows

Example 1: Full-Stack Feature Development

> I need to add a user profile page. Use Figma MCP to get the design,
> create the React component, add the API endpoint, and write tests.

Claude will:

1. Fetch design from Figma MCP
2. Generate React component matching the design
3. Create backend API endpoint
4. Write Playwright E2E tests
5. Commit changes with descriptive message

Example 2: Database-Driven Refactoring

> Analyze our orders table and suggest performance improvements.
> Then implement the changes and update affected API endpoints.

Example 3: Automated PR Workflow

> Review the changes in this branch, create a PR with a comprehensive
> description, and link it to the relevant GitHub issues.

Managing MCP Servers

Listing Configured Servers

# List all servers
claude mcp list

# Get details for specific server
claude mcp get github

# Check server status in session
/mcp

Removing Servers

# Remove a server
claude mcp remove playwright

# Remove from specific scope
claude mcp remove playwright -s project

Debugging MCP Issues

# Launch with debug output
claude --mcp-debug

# Check MCP server logs
tail -f ~/.claude/logs/mcp-*.log

Security Best Practices

Security Checklist

✅ Review third-party servers - Only use MCP servers from trusted sources

✅ Limit server permissions - Configure minimal required access

✅ Use environment variables - Never hardcode credentials in .mcp.json

✅ Audit project servers - Review .mcp.json before approving

✅ Control tool access - Use .claude/settings.json to restrict tools:

{
  "allowedTools": ["mcp__git__*", "mcp__github__*"]
}

Caution

MCP servers can expose you to prompt injection risks, especially those that interact with the internet. Always verify server behavior and limit permissions.

Quick Reference

Common MCP Commands

# Add servers
claude mcp add <name> <command>           # Local scope
claude mcp add <name> -s project <cmd>    # Project scope
claude mcp add <name> -s user <cmd>       # User scope

# Manage servers
claude mcp list                           # List all
claude mcp get <name>                     # Get details
claude mcp remove <name>                  # Remove server

# Advanced
claude mcp add-json <name> '<json>'       # Add from JSON
claude mcp add-from-claude-desktop        # Import servers
claude mcp reset-project-choices          # Reset approvals

# In-session
/mcp                                      # Check server status

Next Steps

Now that you have MCP servers configured, continue with:

Development Workflow Build your first feature with AI assistance

Custom MCP Servers Build your own MCP servers for specialized tools

Remember: MCP servers are what transform Claude Code from a smart autocomplete into a comprehensive development platform. Start with the essentials, then expand based on your workflow needs.