Getting Started with Browser MCP: Automate Web Browsing with AI and MCP Protocol

Browser MCP¹ makes it possible for AI applications to control your browser just like we would—navigating websites, filling out forms, clicking buttons, and interacting with dynamic content. It works by connecting your browser to AI tools using the Model Context Protocol (MCP)², creating a shortcut bridge between AI reasoning and real-world web automation.

Prerequisites

Before starting, ensure Node.js is installed on your machine, as it's required to run the Browser MCP server.

What Happens Behind the Scenes

When you use Browser MCP, several components work together to enable AI-driven browser automation:

Architecture Flow

1. MCP Client: Tools like Cursor or Claude Desktop send natural language instructions.
2. MCP Server (Browser MCP): A Node.js-based server that translates instructions into actionable browser commands.
3. Browser MCP Chrome Extension: Acts as the bridge, receiving commands from the server and executing them inside your actual browser session.

Execution Pipeline

1. The MCP client queries the server for available tools and capabilities.

2. When you send a command like “Go to google.com and search for Browser MCP”, the LLM interprets it and selects relevant tools with parameters.

3. The Browser MCP server forwards these tool instructions via WebSocket to the Chrome extension.

4. The extension interacts with the browser's DOM, performs the actions, and collects feedback like:

   • Console logs
   • Network activity
   • Screenshots
   • DOM snapshots

5. Results are sent back to the server, which relays them to the MCP client for display or further reasoning by the AI.

Key Advantages

• Uses Your Real Browser: Avoids launching headless sessions, preserving your logged-in state and evading basic bot detection.
• Persistent Session State: Actions happen within your live session, ensuring continuity.
• Live Feedback Loop: Console logs, screenshots, and network details help debug or refine actions.
• Privacy-Preserving: All actions run locally on your machine.

Example Workflow

1. Prompt: “Navigate to example.com, capture a screenshot, and show console logs.”

2. Browser MCP Tools Involved:

   • navigate(url)
   • screenshot()
   • getConsoleLogs()

3. AI Response:

   • Returns the screenshot and lists relevant console log entries.

Setup in Different Clients

For Cursor

1. Open full Cursor settings.
2. Navigate to the MCP tab.
3. Click Add new global MCP server.
4. Enter the server configuration provided below.
5. Refresh the "browsermcp" server entry to reload its configuration.

Consult [Cursor’s MCP documentation]³ for detailed guidance.

For VS Code

Refer to [VS Code’s MCP documentation]⁴ for configuration steps.

For Claude Desktop

Instructions are available in [Claude’s MCP documentation]⁵.

Note: Claude Desktop currently has a known issue⁶ where MCP servers may start twice, leading to errors. Despite this, Browser MCP will still function.

For Windsurf Desktop

Setup details are in [Windsurf’s MCP documentation]⁷.

MCP Server Configuration

Setting Up the Browser MCP Extension

1. Install the Browser MCP Chrome extension¹.
2. Pin the extension to the Chrome toolbar for quick access.
3. Click the extension icon to open it.
4. Press Connect to link the active browser tab to the MCP server.

This establishes the bridge between the browser and your MCP client.

Automating the Browser

Once the server and extension are configured, you can begin automating tasks.

Example Command

Open your MCP client (e.g., Cursor) and run:

This command instructs the connected browser to navigate and perform a search automatically.

Troubleshooting

If you encounter issues while using Browser MCP, follow these steps to resolve them:

1. Check if the MCP Server is Running Ensure that the Browser MCP server process is active. If it's not running, start it using the configured command:

   npx @browsermcp/mcp@latest

2. Verify Browser Extension Connection

   • Make sure the Browser MCP Chrome extension is installed and pinned in your browser toolbar.
   • Open the extension and confirm it shows Connected to the MCP server.
   • If it’s disconnected, click Connect again to re-establish the link.

3. Restart Both the Server and Extension Sometimes restarting both the MCP server and the browser extension resolves transient connectivity issues.

4. Inspect Console Logs Check your MCP client logs or the browser's developer console for error messages. These can provide clues on missing dependencies or misconfigurations.

5. Check Port Conflicts Ensure that the MCP server isn't blocked by firewall rules or conflicting with other services on the same port.

Other Errors If you encounter other errors, please file an issue on GitHub⁸.

References