Browserbase MCP Server for VS Code: Setup & Config

What you can do with Browserbase in VS Code

Use a compact browser toolset with a hosted starting point and configurable self-hosted alternative.

• Run a browser session from an assistant without managing a local browser.
• Discover actionable page elements before choosing an operation.

Before you start: Browserbase in VS Code

• An MCP-compatible client
• npx for local npm execution
• Browserbase credentials and a model key for self-hosted execution

The command is the self-hosted stdio option. The remote URL uses Streamable HTTP and is the README's recommended setup. Self-hosted custom models use --modelName and --modelApiKey.

Browserbase VS Code configuration

1. Choose VS Code configuration scope

   For Browserbase MCP Server, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

2. Add Browserbase MCP Server to VS Code

   Use the mcp-server-browserbase entry below in servers. Keep Browserbase MCP Server's documented stdio connection fields and your other VS Code entries.

3. Check Browserbase MCP Server in VS Code

   Browserbase MCP Server: Start in VS Code’s MCP controls; inspect output and trust prompts.

{
  "servers": {
    "mcp-server-browserbase": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@browserbasehq/mcp"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "<your Browserbase API key>",
        "BROWSERBASE_PROJECT_ID": "<your Browserbase project ID>",
        "GEMINI_API_KEY": "<your Gemini API key for the default model>"
      }
    }
  }
}

Browserbase tools available to VS Code

Browserbase's stored tool list documents 6 tools; compare it with VS Code's connected tool list, because the stored list is not a live check.

start

Look for start among VS Code's agent-mode tools after starting Browserbase through the MCP controls.

Create a Browserbase session or reuse an existing one.

end

Look for end among VS Code's agent-mode tools after starting Browserbase through the MCP controls.

Close the active Browserbase session.

navigate

Look for navigate among VS Code's agent-mode tools after starting Browserbase through the MCP controls.

act

Look for act among VS Code's agent-mode tools after starting Browserbase through the MCP controls.

Carry out an instructed action on the page.

observe

Look for observe among VS Code's agent-mode tools after starting Browserbase through the MCP controls.

extract

Look for extract among VS Code's agent-mode tools after starting Browserbase through the MCP controls.

Browserbase: full stored tool descriptions

Troubleshooting Browserbase in VS Code

• Make npx @browserbasehq/mcp (Node.js/npm) available in the workspace, container, or remote environment hosting Browserbase MCP Server. Start through VS Code's MCP controls; inspect output and trust prompts.
• For Browserbase MCP Server, keep BROWSERBASE_API_KEY, BROWSERBASE_PROJECT_ID, GEMINI_API_KEY out of version control; VS Code documents input variables and secret handling.
• Browserbase MCP Server uses stdio here: VS Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: Self-hosted setup requires Browserbase credentials and model authentication.
• Known limitation: Custom models require a separate provider key.
• Known limitation: Verified Identity is restricted to Scale plan users.
• General VS Code troubleshooting lives in the /clients/vscode guide.

Frequently asked questions