Skip to content

MCP Browser Control Setup Guide

This guide explains how to configure MCP (Model Context Protocol) browser control tools in Cursor IDE.

What is MCP Browser Control?

MCP browser control allows the AI assistant to: - Navigate web pages - Interact with web elements - Test frontend code changes - Capture screenshots - Automate browser testing

Available MCP Browser Servers

Cursor supports two browser MCP servers: 1. cursor-browser-extension - Browser extension-based control 2. cursor-ide-browser - IDE-integrated browser control

Setup Methods

  1. Open Cursor Settings:
  2. Press Ctrl + , (Windows/Linux) or Cmd + , (macOS)

  3. Or go to: File → Preferences → Settings

  4. Search for MCP:

  5. In the settings search bar, type: MCP or Model Context Protocol

  6. Add MCP Server:

  7. Look for "MCP Servers" section
  8. Click "Add Server" or the "+" button

  9. Enter server configuration (see configurations below)

  10. Restart Cursor:

  11. Close and reopen Cursor IDE to activate the MCP server

Method 2: Via Configuration File

  1. Locate MCP Configuration File:
  2. Windows: %APPDATA%\Cursor\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json
  3. macOS: ~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
  4. Linux: ~/.config/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

Alternatively, check: - %USERPROFILE%\.cursor\mcp.json (Windows) - ~/.cursor/mcp.json (macOS/Linux)

  1. Edit Configuration File:
  2. Create the file if it doesn't exist
  3. Add the following configuration:

Configuration for cursor-ide-browser:

{
  "mcpServers": {
    "cursor-ide-browser": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

Alternative: Using Playwright (More Modern):

{
  "mcpServers": {
    "cursor-ide-browser": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright"
      ]
    }
  }
}

Configuration for cursor-browser-extension:

{
  "mcpServers": {
    "cursor-browser-extension": {
      "url": "http://localhost:12008/metamcp/cursor-browser-extension/mcp"
    }
  }
}

Note: For the browser extension method, you'll need to: 1. Install the Cursor browser extension 2. Ensure the extension server is running on port 12008

  1. Save and Restart:
  2. Save the configuration file
  3. Restart Cursor IDE

Verification

After setup, verify the MCP server is working:

  1. Check MCP Resources:
  2. The AI assistant should be able to list MCP resources

  3. Ask: "What MCP resources are available?"

  4. Test Browser Control:

  5. Ask the AI to navigate to a URL
  6. Example: "Navigate to http://localhost:5180 and take a screenshot"

Troubleshooting

MCP Server Not Found

  • Issue: MCP resources show as empty
  • Solution:
  • Verify the configuration file path is correct
  • Check that Node.js and npm are installed (node --version, npm --version)
  • Ensure the MCP server package can be installed via npx

Browser Extension Not Working

  • Issue: cursor-browser-extension shows connection errors
  • Solution:
  • Install the Cursor browser extension in your browser
  • Check that the extension server is running
  • Verify the port (default: 12008) is not blocked

Permission Issues

  • Issue: MCP server cannot access browser
  • Solution:
  • Grant necessary permissions in browser settings
  • Check firewall/antivirus isn't blocking the connection

For the PCB Stackup Generator project, I recommend using Playwright as it provides: - Better cross-browser support - More reliable automation - Better screenshot capabilities - Modern API

Use this configuration:

{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-playwright"
      ],
      "env": {
        "BROWSER": "chromium"
      }
    }
  }
}

Usage Examples

Once configured, you can ask the AI to:

  1. Navigate to your app: 

    Navigate to http://localhost:5180 and show me the current page

  2. Test a feature: 

    Go to http://localhost:5180, click the "Generate Stackup" button, and capture the result

  3. Take screenshots: 

    Take a screenshot of http://localhost:5180 and save it

  4. Interact with elements: 

    Fill in the form at http://localhost:5180 with test data and submit it

Additional Resources