MCP Servers: Connecting Claude Code to Any Tool

The Model Context Protocol (MCP) is an open standard that lets Claude Code communicate with external services through a unified interface. Instead of relying solely on built-in tools like Read, Edit, and Bash, MCP servers extend Claude's capabilities to control browsers, manage deployments, query databases, and interact with virtually any API or service.

What You Will Learn

• What MCP is and how the protocol works
• Configuring MCP servers in settings.json
• Using Playwright MCP for browser automation
• Using Vercel MCP for deployment management
• Connecting to databases and custom APIs
• Building your own MCP server

---

How MCP Works

MCP follows a client-server architecture. Claude Code is the client that sends requests, and MCP servers are lightweight processes that translate those requests into actions on external systems.

Claude Code (Client)
    │
    ├── MCP Server: Playwright (controls browser)
    ├── MCP Server: Vercel (manages deployments)
    ├── MCP Server: PostgreSQL (queries database)
    └── MCP Server: Custom (your own tools)

Each MCP server exposes a set of tools that Claude can invoke. When Claude decides it needs to navigate a browser, it calls mcp__playwright__browser_navigate. When it needs to check a deployment, it calls mcp__vercel__get_deployment. The protocol handles serialization, authentication, and error handling.

Configuring MCP Servers

MCP servers are configured in your settings.json file:

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

Each server entry specifies:

• command: The executable to run (usually npx or node)
• args: Arguments passed to the command
• env: Environment variables the server needs (database URLs, API keys)

Servers start automatically when Claude Code launches and shut down when the session ends.

Playwright MCP: Browser Automation

The Playwright MCP server gives Claude Code the ability to control a real web browser. This is transformative for testing, scraping, and debugging web applications.

Setup

\{
  "mcpServers": \{
    "playwright": \{
      "command": "npx",
      "args": ["@anthropic-ai/mcp-playwright"]
    \}
  \}
\}

Available Tools

Tool	Purpose
browser_navigate	Navigate to a URL
browser_snapshot	Capture page accessibility snapshot
browser_click	Click an element
browser_fill_form	Fill form fields
browser_take_screenshot	Take a screenshot
browser_evaluate	Run JavaScript in the page
browser_console_messages	Read console output
browser_network_requests	Monitor network activity

Practical Example: E2E Testing

> "Navigate to localhost:3000/login, fill in the email field with
>  test@example.com and password with testpass123, click the login
>  button, and verify we're redirected to the dashboard.
>  Take a screenshot of the result."

Claude uses the Playwright MCP tools to execute each step, just as a human tester would interact with the browser.

Debugging with Playwright

> "Navigate to localhost:3000/api/users, check the network requests,
>  and tell me if any API calls are failing with 4xx or 5xx errors.
>  Also check the browser console for JavaScript errors."

Vercel MCP: Deployment Management

The Vercel MCP server connects Claude Code to your Vercel deployment infrastructure.

Setup

\{
  "mcpServers": \{
    "vercel": \{
      "command": "npx",
      "args": ["@vercel/mcp"]
    \}
  \}
\}

Available Tools

Tool	Purpose
list_projects	List all Vercel projects
get_project	Get project details
list_deployments	List recent deployments
get_deployment	Get deployment status and URL
get_deployment_build_logs	Read build logs
get_runtime_logs	Read runtime/function logs
deploy_to_vercel	Trigger a deployment
check_domain_availability_and_price	Check domain availability

Practical Example: Deployment Debugging

> "Check the latest deployment for the freeacademy-ai project.
>  If it failed, read the build logs and tell me what went wrong.
>  If it succeeded, check the runtime logs for any errors in
>  the last hour."

Database MCP Servers

Connect Claude directly to your database for querying and analysis:

PostgreSQL

\{
  "mcpServers": \{
    "postgres": \{
      "command": "npx",
      "args": ["@modelcontextprotocol/server-postgres"],
      "env": \{
        "DATABASE_URL": "postgresql://localhost:5432/mydb"
      \}
    \}
  \}
\}

Usage

> "Query the users table to find how many users signed up in the
>  last 30 days. Group them by registration source and show the
>  top 5 sources."

Security note: Use read-only database credentials for MCP connections. Never give Claude write access to a production database through MCP.

Other Popular MCP Servers

The MCP ecosystem includes servers for many services:

Server	Package	Purpose
GitHub	@modelcontextprotocol/server-github	PR management, issues, code search
Slack	@modelcontextprotocol/server-slack	Send messages, read channels
Google Drive	@modelcontextprotocol/server-gdrive	Read and search documents
Filesystem	@modelcontextprotocol/server-filesystem	Extended file operations
Memory	@modelcontextprotocol/server-memory	Persistent key-value storage

Building Your Own MCP Server

If no existing server covers your needs, you can build a custom one. MCP servers are Node.js (or Python) processes that implement the MCP protocol.

Minimal Node.js MCP Server

// my-mcp-server.js
import \{ Server \} from "@modelcontextprotocol/sdk/server/index.js";
import \{ StdioServerTransport \} from "@modelcontextprotocol/sdk/server/stdio.js";

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

// Define a tool
server.setRequestHandler("tools/list", async () => (\{
  tools: [
    \{
      name: "get_weather",
      description: "Get current weather for a city",
      inputSchema: \{
        type: "object",
        properties: \{
          city: \{ type: "string", description: "City name" \}
        \},
        required: ["city"]
      \}
    \}
  ]
\}));

// Handle tool calls
server.setRequestHandler("tools/call", async (request) => \{
  if (request.params.name === "get_weather") \{
    const city = request.params.arguments.city;
    // Your logic here
    return \{
      content: [
        \{ type: "text", text: `Weather in $\{city\}: 72F, sunny` \}
      ]
    \};
  \}
\});

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

Register Your Custom Server

\{
  "mcpServers": \{
    "weather": \{
      "command": "node",
      "args": ["./mcp-servers/my-mcp-server.js"]
    \}
  \}
\}

Now Claude can call your custom tool:

> "What's the weather in San Francisco?"
// Claude calls mcp__weather__get_weather with city: "San Francisco"

MCP in Subagents

You can give specific MCP servers to subagents through their frontmatter:

---
description: "Browser testing agent"
mcpServers:
  - playwright
tools:
  - Read
  - Bash
---

Subagent MCP servers defined inline are connected when the subagent starts and disconnected when it finishes. String references (like "playwright") share the parent session's connection.

---

Key Takeaways

• MCP is an open protocol that extends Claude Code's capabilities to control external services
• Configure MCP servers in settings.json with command, args, and environment variables
• Playwright MCP enables browser automation for testing, debugging, and scraping
• Vercel MCP connects Claude to your deployment infrastructure for monitoring and management
• Database MCP servers should use read-only credentials for safety
• You can build custom MCP servers in Node.js or Python to integrate any API or service
• Subagents can receive specific MCP servers through their configuration