Chrome Browser Control MCP server

The Chrome MCP server enables fine-grained control over a Chrome browser instance through the Chrome DevTools Protocol (CDP), implementing the Model Context Protocol (MCP) to allow tools like Roo Code to interact with the browser programmatically.

Prerequisites

• Bun (recommended) or Node.js (v14 or higher)
• Chrome browser with remote debugging enabled

Installation

Installing Bun

# macOS, Linux, or WSL
curl -fsSL https://bun.sh/install | bash

# Windows (using PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"

# Alternatively, using npm
npm install -g bun

Starting Chrome with Remote Debugging

You can use the included script which automatically detects your OS:

# Make the script executable
chmod +x start-chrome.sh

# Run the script
./start-chrome.sh

Or manually start Chrome with remote debugging:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows
start chrome --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

Setting Up the Server

# Install dependencies
bun install

# Start the server
bun start

The server runs on port 3000 by default. You can change this by setting the PORT environment variable.

Configuring Roo Code

To use this Chrome MCP server with Roo Code:

1. Open Roo Code settings

2. Navigate to the MCP settings configuration file at:

   • macOS: ~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json
   • Windows: %APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\cline_mcp_settings.json
   • Linux: ~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json

3. Add the following configuration to the mcpServers object:

{
  "mcpServers": {
    "chrome-control": {
      "url": "http://localhost:3000/sse-cursor",
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

4. Save the file and restart Roo Code to apply the changes

Available Tools

The server provides several tools for controlling the browser:

navigate

Navigate to a specific URL.

Parameters:

• url (string): The URL to navigate to

click

Click at specific coordinates.

Parameters:

• x (number): X coordinate
• y (number): Y coordinate

type

Type text at the current focus.

Parameters:

• text (string): Text to type

clickElement

Click on an element by its index in the page info.

Parameters:

• selector (string): Element index (e.g., "0" for the first element)

getText

Get text content of an element using a CSS selector.

Parameters:

• selector (string): CSS selector to find the element

getPageInfo

Get semantic information about the page including interactive elements and text nodes.

getPageState

Get current page state including URL, title, scroll position, and viewport size.

Connection Details

The server implements the Model Context Protocol with SSE transport. Connect to:

• SSE endpoint: http://localhost:3000/sse-cursor
• Messages endpoint: http://localhost:3000/message?sessionId=...

When using with Roo Code, the configuration in the MCP settings file handles the connection automatically.

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.