StackMCP

Set up BrowserBase MCP in VS Code

Automate cloud browsers with BrowserBase and Stagehand to navigate pages, extract content, take screenshots, and interact with web elements.

1

Locate the config file

VS Code reads MCP server configuration from the following file:

.vscode/settings.json → mcp section

Create this file if it does not already exist. For VS Code, this is inside your workspace .vscode/settings.json file under the mcp section.

2

Add the configuration

Add the following to your VS Code config file:

json
{
  "servers": {
    "browserbase-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-server-browserbase"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "YOUR_BROWSERBASE_API_KEY",
        "BROWSERBASE_PROJECT_ID": "YOUR_BROWSERBASE_PROJECT_ID"
      }
    }
  }
}
3

Set up environment variables

BrowserBase MCP requires the following environment variables:

BROWSERBASE_API_KEYRequired

BrowserBase API key for authentication

BROWSERBASE_PROJECT_IDRequired

BrowserBase project identifier

4

Verify it works

Restart VS Code. BrowserBase MCP should appear in your MCP server list with 12 tools available.

This server adds approximately 6,180 tokens to your context window for tool definitions.

Set up BrowserBase MCP in other editors

Claude CodeCursorWindsurfClaude DesktopContinue
← Back to BrowserBase MCP