Browser Automation MCP server for AI agents

This server implements the Model Context Protocol (MCP) for browser automation using Playwright. It allows you to control a browser through Claude Desktop by sending commands via natural language prompts, creating a powerful interface for automated web browsing and testing scenarios.

Prerequisites

Before getting started, ensure you have the following installed:

Installation

Step 1: Clone and Setup

Clone the repository:

git clone https://github.com/hrmeetsingh/mcp-browser-automation.git

Install dependencies:
```
cd mcp-browser-automation
npm install
```
Verify that output executables are available in the dist folder

Step 2: Configure Claude Desktop

Create a configuration file for Claude Desktop:

For macOS:

touch ~/Application\ Support/Claude/claude_desktop_config.json

Add the following configuration to the file (update the path to match your actual installation location):

{
  "mcpServers": {
    "mcp-browser-automation": {
      "command": "node",
      "args": ["/path/to/mcp-browser-automation/dist/index.js"]
    }
  }
}

Start or restart Claude Desktop to load the new configuration

Using the Browser Automation Server

Basic Usage

Open Claude Desktop
Start a new conversation
The MCP Browser Automation tool should appear in your available tools
Use natural language to request browser actions

Example Commands

You can use prompts like these to control the browser:

"Open a browser and navigate to example.com"
"Fill in the search field with 'automation testing'"
"Click the submit button"
"Take a screenshot of the current page"
"Extract all links from the current page"

Working with Forms

To interact with forms on websites:

Please navigate to example.com/login and fill in the username field with "testuser" and the password field with "password123", then click the login button.

Navigating Multiple Pages

You can instruct the browser to navigate through multiple pages in sequence:

First go to example.com, then click on the "Products" link, and finally select the first item in the product list.

Troubleshooting

If the MCP server doesn't appear in Claude Desktop:

Verify your configuration file path and content
Ensure the path to the index.js file is correct
Check that Node.js is properly installed
Restart Claude Desktop

If browser automation commands aren't working:

Make sure Playwright is correctly installed
Use more specific descriptions of the elements you want to interact with
Check if the website uses complex dynamic elements that might be difficult to target

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.