MCP Servers Reference

Model Context Protocol (MCP) servers extend Claude Code's capabilities with browser automation and framework documentation lookup. The plugin bundles two MCP servers that start automatically when enabled.

Known Issue: Auto-Loading

MCP servers may not load automatically when the plugin is installed. See Manual Configuration for the workaround.

Playwright

Browser automation via @playwright/mcp. Enables taking screenshots, clicking elements, filling forms, and executing JavaScript in a real browser.

Tools Provided

Tool Description
browser_navigate Navigate to a URL in the browser
browser_take_screenshot Capture a screenshot of the current page or element
browser_click Click on an element using CSS selector or text
browser_fill_form Fill form fields with values
browser_snapshot Get an accessibility tree snapshot of the page
browser_evaluate Execute JavaScript code in the browser context

Use Cases

  • Design Iteration - Take screenshots for UI comparison
  • Testing - Automate browser interactions
  • Debugging - Inspect page state and DOM
  • Data Extraction - Scrape content from web pages

Example Usage

# The tools are available when the MCP server is running
# Claude Code will use them automatically when appropriate

# Example: Taking a screenshot for design review
"Take a screenshot of the login page"

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

Configuration

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

Context7

Framework documentation lookup via Context7 MCP. Provides access to documentation for more than 100 frameworks and libraries.

Tools Provided

Tool Description
resolve-library-id Find the library ID for a framework or package
get-library-docs Get documentation for a specific library

Supported Frameworks

Context7 supports more than 100 frameworks including:

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

# Claude Code will use Context7 automatically for documentation lookups
"Look up the Rails ActionCable documentation"

"How does the useEffect hook work in React?"

"What are the best practices for PostgreSQL indexes?"

Configuration

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

Manual Configuration

If MCP servers don't auto-load with the plugin, add them manually to your .claude/settings.json file.

Project-Level Configuration

Add to .claude/settings.json in your project:

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

Global Configuration

Add to ~/.claude/settings.json to enable for all projects:

{
  "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 configuration, restart Claude Code and verify the servers are loaded:

# Check if MCP tools are available
"What MCP tools do you have access to?"

# Test Playwright
"Take a screenshot of the current directory listing"

# Test Context7
"Look up Rails Active Record documentation"