Browserbase MCP Server

MCP Server Configuration

Add to .claude/settings.json:

Copy
{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["-y", "@browserbasehq/mcp-server-browserbase"],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}"
      }
    }
  }
}

Available Tools

Tool	Description
create_session	Start a new cloud browser session
navigate	Navigate to a URL in the browser
screenshot	Take a screenshot of the current page
click	Click an element by CSS selector or text content
type	Type text into an input field
get_content	Extract page content (text, HTML, or structured)
evaluate	Run JavaScript in the browser context
close_session	End the browser session and free resources

Use Cases

Web Scraping

1. Create session → Navigate to target page
2. Wait for dynamic content to load
3. Extract structured data using CSS selectors
4. Handle pagination by clicking "next" buttons
5. Close session when complete

Form Testing

1. Navigate to form page
2. Fill each field with test data
3. Submit the form
4. Screenshot the result page
5. Verify success message content

Visual QA

1. Navigate to each page of your app
2. Screenshot at multiple viewport sizes
3. Compare with expected layouts
4. Report visual discrepancies

Workflow Example

User: "Check if our pricing page loads correctly and screenshot it"

Claude's steps:
1. create_session()
2. navigate("https://myapp.com/pricing")
3. Wait for page load
4. screenshot() → Returns image for visual inspection
5. get_content(selector: ".pricing-card") → Extract pricing data
6. close_session()

Session Configuration Options

Copy
{
  "session_options": {
    "browserSettings": {
      "viewport": { "width": 1280, "height": 720 },
      "userAgent": "custom-user-agent-string",
      "locale": "en-US",
      "timezone": "America/New_York"
    },
    "proxy": {
      "type": "residential",
      "country": "US"
    },
    "keepAlive": true,
    "timeout": 300000
  }
}

Setup

1. Sign up at browserbase.com and get your API key
2. Create a project and note the Project ID
3. Set environment variables:

   Copy
   export BROWSERBASE_API_KEY="your-api-key"
   export BROWSERBASE_PROJECT_ID="your-project-id"

4. Add the MCP configuration to .claude/settings.json

Security Notes

• Browser sessions run in isolated cloud environments, not on your machine
• Sessions are automatically terminated after timeout (default 5 minutes of inactivity)
• Never use browser automation to access accounts you don't own
• Be mindful of rate limits and respect robots.txt on target sites
• API keys should be stored in environment variables, never committed to code
• Browser sessions may retain cookies -- use fresh sessions for sensitive operations