How to Use MCP Server to Control Chrome Browser (with Browserbase MCP Server)

Ever wished your AI could surf the web just like you do? Well, buckle up because today we’re diving into the world of the Browserbase MCP Server—a game-changing tool that lets AI models like Claude, GPT, and Gemini control web browsers. Imagine your AI navigating websites, clicking buttons, filling forms, and even taking screenshots, all on its own. Sounds futuristic? It’s happening now, and it’s easier than you think to set up, especially with the Browserbase MCP Server.

In this guide, I’ll walk you through what the Browserbase MCP Server is, why it’s a must-have for AI-driven workflows, and how to get it up and running to control a Chrome browser. Whether you’re a developer, a data scientist, or just an AI-curious soul, this step-by-step tutorial will make you feel like a pro. Let’s get started!

What Is the Browserbase MCP Server?

The Browserbase MCP Server is an open-source tool that uses the Model Context Protocol (MCP) to connect large language models (LLMs) with web browsers. Think of it as a bridge that allows AI to interact with websites in real time. With this server, your AI can:

• Navigate to any URL
• Click buttons and fill out forms
• Extract data from web pages
• Take screenshots
• Run JavaScript on websites
• Handle multiple browser sessions at once

It’s like giving your AI its own pair of hands to browse the web. And the best part? It works with popular AI models like OpenAI’s GPT, Anthropic’s Claude, and Google’s Gemini.

Why Use the Browserbase MCP Server?

Before we jump into the how-to, let’s talk about why the Browserbase MCP Server is a game-changer:

• Cloud-Based Automation: Run browser tasks in the cloud, no local setup headaches.
• Multi-Model Support: Works with various AI models, so you can pick your favorite.
• Parallel Sessions: Handle multiple browser tasks at once for efficiency.
• Vision Capabilities: Take screenshots and analyze web pages visually.
• Easy Integration: Connects seamlessly with AI clients like Claude Desktop or Cursor.

Whether you’re building an AI-powered app, automating workflows, or just experimenting, the Browserbase MCP Server saves time and opens up new possibilities.

How to Install and Set Up the Browserbase MCP Server

There are three ways to get started: using a hosted remote server, running with npm or running it locally. I’ll cover all three so you can choose what works best for you.

Prerequisites

Before you dive into using the Browserbase MCP Server to control a Chrome browser with AI, ensure you have the following:

• An MCP-compatible AI client: Install a client like Claude Desktop or Cursor that supports the Model Context Protocol (MCP).
• A Browserbase API key: Obtain it from Browserbase to connect your AI to browser automation.

For Local Setup (Optional)

If you plan to run the server locally, you’ll also need:

• Git: To clone the repository from GitHub.
• pnpm: Install this package manager from pnpm.io to handle dependencies.
• Node.js: Download it from nodejs.org to run the server.
• An AI model API key: Get one for your chosen model, e.g., Gemini.

Option 1: Using the BrowserBase MCP Server's Hosted Remote Server (Easiest)

If you want to skip the setup hassle, the hosted option is your friend. Here’s how:

Visit Smithery: Head to smithery.ai to get your API keys and a remote MCP URL.

Configure Your AI Client: Add the provided URL to your AI client’s MCP settings. For example, in Claude Desktop, you’d add this to your claude_desktop_config.json:

{
  "mcpServers": {
    "browserbase": {
      "url": "https://your-smithery-url.com"
    }
  }
}

Or, if you’re using the mcp-remote CLI:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-smithery-url.com"]
    }
  }
}

Restart Your Client: Close and reopen your AI client to apply the changes.

That’s it! Your AI can now control a Chrome browser through the Browserbase MCP Server.

Option 2: Run the BrowserBase MCP Server on NPM (Recommended)

This is the recommended approach because of its compatibility with most mcp clients. Head over to your MCP Config JSON file and paste the Browserbase Server configuration:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "",
        "BROWSERBASE_PROJECT_ID": "",
        "GEMINI_API_KEY": ""
      }
    }
  }
}

Option 3: Install and Run BrowserBase MCP Server Locally (For Full Control)

Want to tinker under the hood? Running the server locally gives you more flexibility. Here’s how:

Clone the Repository:

• Open your terminal and run:

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

Install Dependencies:

• Make sure you have pnpm installed. Then run:

pnpm install && pnpm build

Start the Server:

• You can run the server using STDIO or HTTP transport.
• For STDIO (local process):
• Add this to your MCP client config:

{
  "mcpServers": {
    "browserbase": {
      "command": "node",
      "args": ["path/to/mcp-server-browserbase/cli.js"],
      "env": {
        "BROWSERBASE_API_KEY": "your_api_key",
        "BROWSERBASE_PROJECT_ID": "your_project_id",
        "GEMINI_API_KEY": "your_gemini_key"
      }
    }
  }
}

• For HTTP transport:
• Start the server with:

node cli.js --port 3000

• Configure your client to connect to http://localhost:3000.

Add API Keys: Replace the placeholders in the config with your actual Browserbase and model API keys.

Restart Your Client: Just like before, restart your AI client to enable the server.

Customizing the Server

The Browserbase MCP Server offers flags to tweak its behavior. Here are a few handy ones:

• --proxies: Enable Browserbase proxies for better privacy.
• --advancedStealth: Use stealth mode to avoid detection (Scale Plan required).
• --browserWidth and --browserHeight: Set the browser window size.
• --modelName: Choose a different AI model for Stagehand.

You can add these flags to the args array in your MCP config. For example:

"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]

How to Use the Browserbase MCP Server to Control Chrome

Now that your server is set up, let’s put it to work! Here’s how to use the Browserbase MCP Server to control a Chrome browser.

Step 1: Connect Your AI Client

Make sure your AI client (like Claude Desktop or Cursor) is connected to the Browserbase MCP Server using one of the three methods above.

Step 2: Give Commands

In your AI client, you can now issue natural language commands to control the browser. Here are some examples:

Navigate to a URL:

"Go to https://example.com"

Click a button:

"Click the 'Sign Up' button"

Fill a form:

"Fill the email field with 'user@example.com' and submit"

Take a screenshot:

"Take a screenshot of the homepage"

Extract data:

"Extract all product titles from this page"

The AI will translate these prompts into browser actions using the Browserbase MCP Server.

Step 3: View Results

Depending on the command, the AI will return results like:

• Confirmation of actions (e.g., "Navigated to https://example.com")
• Extracted data (e.g., a list of product titles)
• Screenshots (saved or displayed, depending on your setup)

For example, if you ask for a screenshot, the AI might respond with:

"Screenshot captured and saved as 'homepage.png'"

Testing the Browserbase MCP Server

Let’s test it with a real-world example. Suppose you want to automate a search on a website.

1. Open Your AI Client: For this example, let’s use Claude Desktop.
2. Issue a Command:

"Go to https://google.com, search for 'Browserbase MCP Server', and click the first result"

3. Observe the Browser: If you’re running locally with HTTP transport, you might see the browser open and perform the actions.

4. Check the Response: Claude should confirm the actions and perhaps extract the page title or content.

This simple test shows how the Browserbase MCP Server lets AI control Chrome to perform web tasks.

Troubleshooting Tips

• Server Not Starting? Ensure you have the correct API keys and that pnpm build completed successfully.
• Client Not Connecting? Double-check the MCP config and restart your AI client.
• Actions Not Working? Verify the website’s structure; some sites may require advanced stealth or proxies.
• Model Issues? Make sure your model API key is valid and the model supports the required capabilities.

Conclusion

And there you have it! You’ve learned how to use the Browserbase MCP Server to control a Chrome browser with AI. Whether you chose the hosted route for simplicity, npm or the local setup for control, you’re now equipped to automate web tasks like a pro. The Browserbase MCP Server is a powerful tool that brings AI and web automation together, opening up endless possibilities for innovation.

Ready to explore more? Try automating your daily web tasks or integrating it into your next AI project.