MCP Server Cloudbrowser

🚀 Cloud Browser MCP Server

The Cloud Browser MCP Server offers a set of browser - related tools for seamless integration with Claude Desktop.

🚀 Quick Start

Step 1: Install Dependencies

Run npm install to install the necessary dependencies, and then run npm run build to generate the dist/index.js file.

Step 2: Configure Claude Desktop

Configure your Claude Desktop settings to use the server. Here is an example configuration:

{
  "mcpServers": {
    "cloudbrowser": {
      "command": "node",
      "args": ["path/to/mcp-server-cloudbrowser/cloudbrowser/dist/index.js"],
      "env": {
        "API_KEY": "<YOUR_BROWSERBASE_API_KEY>"
      },
      "transportType": "stdio"
    }
  }
}

Step 3: Restart Claude Desktop

Restart your Claude Desktop application. After clicking the 🔨 icon, you should see the available tools.

Step 4: Start Using Tools

Start using these tools! The following image shows an example of Claude closing a browser session.

Using npm

If you prefer to use npm, here is an alternative configuration:

{
  "mcpServers": {
    "cloudbrowser": {
      "command": "cmd",
      "args": [
        "/c", 
        "npx", 
        "-y", 
        "@browsercloud/mcp-server-cloudbrowser"
      ],
      "env": {
        "API_KEY": "<YOUR_BROWSERBASE_API_KEY>"
      },
      "transportType": "stdio"
    }
  }
}

📦 Installation

Testing

1. Run npm install to install the necessary dependencies, and then run npm run build to generate the dist/index.js file.
2. Run npm run inspector to start the server.

💻 Usage Examples

Browserbase API

• cloudbrowser_navigate

  • Navigate to any URL in the browser.
  • Input: url (string)

• cloudbrowser_evaluate

  • Execute JavaScript in the browser console.
  • Input: script (string): The JavaScript code to be executed.

• cloudbrowser_get_current_url

  • Get the URL of the current page.

• cloudbrowser_screenshot

  • Capture a screenshot of the page or a specific element.
  • Input:
    • name (string, required): The name of the screenshot.
    • selector (string, optional): The CSS selector for the screenshot.
    • width (number, optional, default: 800): The width of the screenshot.
    • height (number, optional, default: 600): The height of the screenshot.

• cloudbrowser_click

  • Click an element on the page.
  • Input: selector (string): The CSS selector of the element to be clicked.

• cloudbrowser_fill

  • Fill an input field.
  • Input:
    • selector (string): The CSS selector of the input field.
    • value (string): The value to be filled.

• cloudbrowser_get_text

  • Extract all the content of the current page.
  • Input: selector (string, optional): The CSS selector for extracting the content of a specific element.

Resources

The server provides access to two types of resources: 2. Screenshots (screenshot://<name>)

• PNG images of the page.
• Accessible by specifying the screenshot name.