Content is user-generated and unverified.

Claude Desktop MCP Setup Guide for browserMCP Chrome Plugin

This guide will walk you through setting up Claude Desktop with Model Context Protocol (MCP) to work with the browserMCP Chrome extension, enabling Claude to automate and control your browser.

Prerequisites

Before starting, ensure you have:

  • Claude Desktop installed (Windows or macOS - Linux not supported)
  • Node.js installed (version 18 or higher recommended)
  • Chrome browser (latest version)
  • Administrative privileges on your computer

Step 1: Install and Update Claude Desktop

  1. Download Claude Desktop:
  2. Update to Latest Version:
    • Open Claude Desktop
    • Click on the Claude menu (top-left corner)
    • Select "Check for Updates..."
    • Install any available updates and restart
  3. Verify Node.js Installation:
    • Open Terminal (macOS) or Command Prompt (Windows)
    • Run: node --version
    • If you see an error, download Node.js from Node.js Official Website

Step 2: Install browserMCP Chrome Extension

  1. Install the Extension:
    • Open Chrome browser
    • Visit the Chrome Web Store: browserMCP Extension
    • Click "Add to Chrome" to install the browserMCP extension
    • Pin the extension to your toolbar for easy access
  2. Verify Installation:
    • Look for the browserMCP icon in your Chrome toolbar
    • The extension should show as active when installed correctly

Step 3: Configure Claude Desktop MCP Settings

Access Configuration File

For macOS:

bash
~/Library/Application Support/Claude/claude_desktop_config.json

For Windows:

bash
%APPDATA%\Claude\claude_desktop_config.json

Create/Edit Configuration File

  1. Locate the Configuration Directory:
    • macOS: Open Finder, press Cmd+Shift+G, and paste: ~/Library/Application Support/Claude/
    • Windows: Press Win+R, type %APPDATA%\Claude\, and press Enter
  2. Create the Configuration File:
    • If claude_desktop_config.json doesn't exist, create it
    • Open the file in any text editor (VS Code, Notepad++, or even Notepad)
  3. Add browserMCP Server Configuration:
json
{
  "mcpServers": {
    "browser-mcp": {
      "command": "npx",
      "args": ["-y", "@browser-mcp/mcp-server"],
      "env": {
        "BROWSER_MCP_PORT": "3000"
      }
    }
  }
}

Alternative Configuration (if using a local server):

json
{
  "mcpServers": {
    "browser-mcp": {
      "command": "node",
      "args": ["/path/to/browser-mcp-server/dist/index.js"],
      "env": {
        "BROWSER_MCP_PORT": "3000"
      }
    }
  }
}

Step 4: Install browserMCP Server

There are two methods to install the browserMCP server:

Method 1: NPX (Recommended)

The configuration above uses npx which will automatically download and run the server when needed.

Method 2: Global Installation

bash
npm install -g @browser-mcp/mcp-server

Step 5: Configure Chrome Extension Connection

  1. Open Chrome Extension Settings:
    • Click on the browserMCP extension icon
    • Go to extension options/settings
  2. Set Connection Details:
    • Server URL: http://localhost:3000
    • Connection Type: WebSocket or HTTP (depending on server configuration)
    • Save the settings

Step 6: Restart and Test Claude Desktop

  1. Restart Claude Desktop:
    • Completely close Claude Desktop
    • Important: Run Claude Desktop as Administrator (Windows) or with elevated permissions (macOS)
    • Reopen the application
  2. Verify MCP Connection:
    • Look for the tools icon (hammer/slider) in the bottom-left corner of the input box
    • If visible, click it to see available tools
    • You should see browserMCP tools listed
  3. Check Developer Mode (Optional but Recommended):
    • In Claude Desktop, go to: Help → Enable Developer Mode
    • Access Developer menu to view MCP logs for troubleshooting

Step 7: Test Browser Automation

  1. Test Basic Commands:
   "Can you navigate to google.com and take a screenshot?"
  1. Test Form Interaction:
   "Please go to example.com and fill out any forms you find"
  1. Test Data Extraction:
   "Visit news.ycombinator.com and extract the titles of the top 5 stories"

Available browserMCP Tools

Once properly configured, Claude will have access to these browser automation tools:

  • Navigate: Go to any URL
  • Click: Click on page elements
  • Type Text: Enter text into form fields
  • Screenshot: Capture page screenshots
  • Scroll: Scroll page content
  • Wait: Wait for elements or time delays
  • Extract Data: Get text content from elements
  • Go Back/Forward: Browser navigation
  • Hover: Mouse hover actions
  • Drag & Drop: Move elements around

Troubleshooting

MCP Server Not Connecting

  1. Check Logs:
    • macOS: ~/Library/Logs/Claude/mcp*.log
    • Windows: Check Event Viewer or Claude's log directory
  2. Verify Paths:
    • Ensure all file paths in the configuration are correct
    • Use absolute paths, not relative ones
    • On Windows, use double backslashes: C:\\Users\\...
  3. Test Server Manually:
bash
   npx -y @browser-mcp/mcp-server

Chrome Extension Issues

  1. Extension Permissions:
    • Ensure browserMCP has necessary permissions in Chrome
    • Check if extension is enabled and active
  2. Connection Problems:
    • Verify server is running on the correct port
    • Check firewall settings aren't blocking local connections
    • Try restarting both Chrome and Claude Desktop

General Issues

  1. Restart Everything:
    • Close Claude Desktop completely
    • Restart Chrome browser
    • Reopen Claude Desktop as Administrator
  2. Check Node.js Version:
bash
   node --version
   npm --version
  1. Update Dependencies:
bash
   npm update -g @browser-mcp/mcp-server

Security Considerations

  • Admin Privileges: Claude Desktop runs with your user account permissions
  • Local Execution: All browser automation happens locally on your machine
  • Data Privacy: Your browsing activity stays on your device
  • Trust Sources: Only add MCP servers from trusted sources

Advanced Configuration

Multiple Browser Profiles

json
{
  "mcpServers": {
    "browser-mcp-personal": {
      "command": "npx",
      "args": ["-y", "@browser-mcp/mcp-server"],
      "env": {
        "BROWSER_MCP_PORT": "3000",
        "BROWSER_PROFILE": "Default"
      }
    },
    "browser-mcp-work": {
      "command": "npx", 
      "args": ["-y", "@browser-mcp/mcp-server"],
      "env": {
        "BROWSER_MCP_PORT": "3001",
        "BROWSER_PROFILE": "Profile 1"
      }
    }
  }
}

Custom Environment Variables

json
{
  "mcpServers": {
    "browser-mcp": {
      "command": "npx",
      "args": ["-y", "@browser-mcp/mcp-server"],
      "env": {
        "BROWSER_MCP_PORT": "3000",
        "BROWSER_HEADLESS": "false",
        "BROWSER_TIMEOUT": "30000"
      }
    }
  }
}

Conclusion

Once set up correctly, you'll have a powerful combination where Claude can:

  • Automate repetitive web tasks
  • Extract data from websites
  • Test web applications
  • Fill out forms automatically
  • Navigate complex workflows
  • Take screenshots for documentation

The browserMCP integration transforms Claude from a chat assistant into a capable browser automation tool, all running securely on your local machine.

Remember to always verify Claude's actions before allowing browser automation, especially on sensitive websites or when handling personal data.

Content is user-generated and unverified.
    Claude Desktop MCP Setup Guide for browserMCP Chrome Plugin | Claude