Browserbase MCP server for AI agents

This MCP server provides cloud browser automation capabilities using Browserbase, Puppeteer, and Stagehand. It allows Language Models (LLMs) to interact with web pages, take screenshots, and execute JavaScript in a cloud browser environment, making it easier to integrate LLMs with external web data.

Available MCP Components

The server offers two main components:

Browserbase MCP

The Browserbase MCP provides comprehensive browser automation features:

Browser automation for controlling cloud browsers
Data extraction from any webpage
Console monitoring to track browser logs
Screenshot capabilities (full-page and element-specific)
JavaScript execution in the browser context
Web interaction (navigation, clicking, form filling)

Stagehand MCP

The Stagehand MCP offers a higher-level interface with:

Atomic instructions like act("click the login button") or extract("find the red shoes")
Support for multiple models including OpenAI's GPT-4 and Anthropic's Claude-3.7 Sonnet
Modular design for easy integration of new models
Vision support using annotated screenshots for complex DOMs

Installation

You can install the MCP server using one of these methods:

Standard Installation

Clone the repository:

git clone https://github.com/browserbase/mcp-server.git
cd mcp-server

Install dependencies:
```
npm install
```
Start the server:
```
npm start
```

Using Smithery

You can also install the MCP server using Smithery:

# If you have Smithery installed
smithery install @browserbasehq/mcp-browserbase

Visit Smithery's Browserbase MCP page for more details.

Usage

Configuring Browserbase MCP

To use the Browserbase MCP, you need to set up your configuration:

Create a configuration file (e.g., config.json):

{
  "browserbase": {
    "apiKey": "your-browserbase-api-key"
  }
}

Pass the configuration when starting the server:
```
npm start -- --config=config.json
```

Basic Browser Automation Example

Here's a simple example of using the Browserbase MCP to navigate to a webpage and take a screenshot:

// Example client code
const response = await fetch('http://localhost:3000/browserbase/navigate', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    url: 'https://example.com'
  })
});

const data = await response.json();
console.log(data);

// Take a screenshot
const screenshotResponse = await fetch('http://localhost:3000/browserbase/screenshot', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    selector: 'body' // Optional: specify an element
  })
});

const screenshot = await screenshotResponse.json();
console.log(screenshot.data); // Base64 encoded image

Using Stagehand MCP

Stagehand provides a higher-level interface for browser automation:

// Example client code
const response = await fetch('http://localhost:3000/stagehand/act', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    instruction: "click the login button",
    model: "gpt-4" // Optional: specify which model to use
  })
});

const result = await response.json();
console.log(result);

// Extract data from a webpage
const extractResponse = await fetch('http://localhost:3000/stagehand/extract', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    instruction: "find the product prices and names"
  })
});

const extractedData = await extractResponse.json();
console.log(extractedData);

Server Configuration Options

The MCP server accepts several configuration options:

--port: Specify the server port (default: 3000)
--config: Path to configuration file
--debug: Enable debug logging

Example:

npm start -- --port=4000 --config=prod-config.json --debug

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.