MCP Servers Reference

Think of MCP servers as power tools that plug into Claude Code. Want Claude to actually open a browser and click around your app? That's Playwright. Need the latest Rails docs without leaving your terminal? That's Context7. The plugin bundles both servers—they just work when you install.

Known Issue: Auto-Loading

Sometimes MCP servers don't wake up automatically. If Claude can't take screenshots or look up docs, you'll need to add them manually. See Manual Configuration for the fix.

Playwright

You know how you can tell a junior developer "open Chrome and click the login button"? Now you can tell Claude the same thing. Playwright gives Claude hands to control a real browser—clicking buttons, filling forms, taking screenshots, running JavaScript. It's like pair programming with someone who has a browser open next to you.

Tools Provided

Tool Description
browser_navigate Go to any URL—your localhost dev server, production, staging, that competitor's site you're studying
browser_take_screenshot Capture what you're seeing right now. Perfect for "does this look right?" design reviews
browser_click Click buttons, links, whatever. Claude finds it by text or CSS selector, just like you would
browser_fill_form Type into forms faster than you can. Great for testing signup flows without manual clicking
browser_snapshot Get the page's accessibility tree—how screen readers see it. Useful for understanding structure without HTML noise
browser_evaluate Run any JavaScript in the page. Check localStorage, trigger functions, read variables—full console access

When You'll Use This

  • Design reviews without leaving the terminal - "Take a screenshot of the new navbar on mobile" gets you a PNG in seconds
  • Testing signup flows while you code - "Fill in the registration form with test@example.com and click submit" runs the test for you
  • Debugging production issues - "Navigate to the error page and show me what's in localStorage" gives you the state without opening DevTools
  • Competitive research - "Go to competitor.com and screenshot their pricing page" builds your swipe file automatically

Example Usage

# Just talk to Claude naturally—it knows when to use Playwright

# Design review
"Take a screenshot of the login page"

# Testing a form
"Navigate to /signup and fill in the email field with test@example.com"

# Debug JavaScript state
"Go to localhost:3000 and run console.log(window.currentUser)"

# The browser runs in the background. You'll get results without switching windows.

Configuration

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

Context7

Ever ask Claude about a framework and get an answer from 2023? Context7 fixes that. It's a documentation service that keeps Claude current with 100+ frameworks—Rails, React, Next.js, Django, whatever you're using. Think of it as having the official docs piped directly into Claude's brain.

Tools Provided

Tool Description
resolve-library-id Maps "Rails" to the actual library identifier Context7 uses. You don't call this—Claude does it automatically
get-library-docs Fetches the actual documentation pages. Ask "How does useEffect work?" and this grabs the latest React docs

What's Covered

Over 100 frameworks and libraries. Here's a taste of what you can look up:

Backend

  • Ruby on Rails
  • Django
  • Laravel
  • Express
  • FastAPI
  • Spring Boot

Frontend

  • React
  • Vue.js
  • Angular
  • Svelte
  • Next.js
  • Nuxt

Mobile

  • React Native
  • Flutter
  • SwiftUI
  • Kotlin

Tools & Libraries

  • Tailwind CSS
  • PostgreSQL
  • Redis
  • GraphQL
  • Prisma
  • And many more...

Example Usage

# Just ask about the framework—Claude fetches current docs automatically

"Look up the Rails ActionCable documentation"

"How does the useEffect hook work in React?"

"What are the best practices for PostgreSQL indexes?"

# You get answers based on the latest docs, not Claude's training cutoff

Configuration

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

Manual Configuration

If the servers don't load automatically (you'll know because Claude can't take screenshots or fetch docs), you need to wire them up yourself. It's a two-minute copy-paste job.

Project-Level Configuration

To enable for just this project, add this to .claude/settings.json in your project root:

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"],
      "env": {}
    },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

Global Configuration

Or enable everywhere—every project on your machine gets these servers. Add to ~/.claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"],
      "env": {}
    },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

Requirements

Server Requirement
Playwright Node.js 18+ and npx
Context7 Internet connection (HTTP endpoint)

Verifying MCP Servers

After you add the config, restart Claude Code. Then test that everything works:

# Ask Claude what it has
"What MCP tools do you have access to?"

# Test Playwright (should work now)
"Take a screenshot of the current directory listing"

# Test Context7 (should fetch real docs)
"Look up Rails Active Record documentation"

# If either fails, double-check your JSON syntax and file paths