# Stagehand

> AI-native browser automation: act, observe, and extract in plain English.

[Canonical HTML page](https://top-mcps.com/mcp/stagehand) · [server.json](https://top-mcps.com/mcp/stagehand.json) · [methodology](https://top-mcps.com/about/methodology)

## Install

### Claude Desktop — `claude_desktop_config.json`

Paste under mcpServers. Fully quit and reopen Claude after editing.

```json
{
  "mcpServers": {
    "stagehand": {
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-stagehand"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
        "OPENAI_API_KEY": "${OPENAI_API_KEY}"
      }
    }
  }
}
```

### Claude Code — `CLI or .mcp.json`

Run from your repo. Commit .mcp.json to share with your team.

```shell
# export BROWSERBASE_API_KEY=YOUR_API_KEY
# export BROWSERBASE_PROJECT_ID=YOUR_PROJECT_ID
# export OPENAI_API_KEY=YOUR_API_KEY
claude mcp add stagehand -- npx -y @browserbasehq/mcp-stagehand
```

### Cursor — `.cursor/mcp.json`

Global path: ~/.cursor/mcp.json. Reload window after editing.

```json
{
  "mcpServers": {
    "stagehand": {
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-stagehand"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
        "OPENAI_API_KEY": "${OPENAI_API_KEY}"
      }
    }
  }
}
```

### VS Code — `.vscode/mcp.json`

VS Code uses the "servers" key (not "mcpServers").

```jsonc
{
  "servers": {
    "stagehand": {
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-stagehand"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
        "OPENAI_API_KEY": "${OPENAI_API_KEY}"
      }
    }
  }
}
```

### Windsurf — `~/.codeium/windsurf/mcp_config.json`

Open via Cascade → hammer icon → Configure.

```json
{
  "mcpServers": {
    "stagehand": {
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-stagehand"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
        "OPENAI_API_KEY": "${OPENAI_API_KEY}"
      }
    }
  }
}
```

### Cline — `cline_mcp_settings.json`

Open via the Cline sidebar → MCP Servers → Edit.

```json
{
  "mcpServers": {
    "stagehand": {
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-stagehand"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
        "OPENAI_API_KEY": "${OPENAI_API_KEY}"
      }
    }
  }
}
```

### Continue — `~/.continue/config.json`

Continue uses modelContextProtocolServers with a transport block.

```json
{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "npx",
          "args": [
            "-y",
            "@browserbasehq/mcp-stagehand"
          ],
          "env": {
            "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
            "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
            "OPENAI_API_KEY": "${OPENAI_API_KEY}"
          }
        }
      }
    ]
  }
}
```

### Codex CLI — `~/.codex/config.toml`

Codex uses TOML. Each server is a [mcp_servers.<name>] subtable.

```shell
# ~/.codex/config.toml
[mcp_servers.stagehand]
command = "npx"
args = [
  "-y",
  "@browserbasehq/mcp-stagehand",
]
env = { BROWSERBASE_API_KEY = "${BROWSERBASE_API_KEY}", BROWSERBASE_PROJECT_ID = "${BROWSERBASE_PROJECT_ID}", OPENAI_API_KEY = "${OPENAI_API_KEY}" }
```

### Zed — `~/.config/zed/settings.json`

Zed calls them "context_servers". Settings live-reload on save.

```jsonc
{
  "context_servers": {
    "stagehand": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@browserbasehq/mcp-stagehand"
        ]
      },
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
        "OPENAI_API_KEY": "${OPENAI_API_KEY}"
      }
    }
  }
}
```

### ChatGPT — `ChatGPT → Apps directory`

Stagehand doesn't ship a hosted HTTPS endpoint today. ChatGPT supports remote MCP servers only — to use this server in ChatGPT you'll need to deploy it to a public HTTPS URL first (e.g. via Cloudflare Workers or Vercel) or wait for an official remote build.

```none

```

## At a glance

- **Maintainer:** Browserbase
- **Transport:** stdio
- **Auth model:** API key
- **Required secrets:** BROWSERBASE_API_KEY, BROWSERBASE_PROJECT_ID, OPENAI_API_KEY
- **Supported clients:** Claude, Cursor, Any MCP-compatible client
- **License:** MIT
- **Language:** TypeScript
- **Latest version:** latest
- **Last verified:** 2026-05-26
- **GitHub stars:** 22,806 (fetched 2026-05-26T10:50:22.907Z)
- **Score:** 93/100 (rubric 2026-04 — see https://top-mcps.com/about/methodology)
- **Source:** https://github.com/browserbase/stagehand

## Security & scope

- **Access scope:** exec
- **Sandbox:** Inherits Browserbase's isolated cloud sessions. Pages are visited under residential IPs by default.
- **Gotchas:**
  - Each AI-driven action makes an LLM call — costs compound on long runs.
  - Two API keys live in env (Browserbase + OpenAI); rotate independently.

## Quick answer

**What it does.** Wraps Playwright with three AI-native primitives: `act` (do something), `observe` (find candidates), `extract` (pull structured data). The agent gives intent in English; Stagehand turns it into selectors at runtime.

**Best for:**
- Agentic browsing
- Resilient selectors via AI
- Structured extraction from messy pages
- Browser tasks described in English

**Not for:**
- High-throughput scraping
- Selector-stable workflows
- Cost-sensitive use cases

## Description

Stagehand is Browserbase's higher-level browser-automation layer. Instead of writing selectors, the agent calls `act`, `observe`, and `extract` with natural-language descriptions of what it wants the browser to do — Stagehand handles the DOM bridging.

## Why it matters

Selector flake is the number-one source of unreliable browser automation. Stagehand replaces brittle CSS selectors with semantic descriptions that adapt as pages change.

## Key features

- Natural-language act/observe/extract
- Playwright underneath
- Browserbase-backed sessions
- Schema-driven extraction

## FAQ

### Do I need both Browserbase and Stagehand?

Stagehand runs on top of Browserbase by default, so a Browserbase account is the prerequisite. You can also run Stagehand against local Playwright by setting `env: { LOCAL_BROWSER: true }`.

### Does it call an LLM on every action?

Yes — `act` and `extract` use an LLM to bridge natural language to DOM actions. That is why an `OPENAI_API_KEY` is required. The cost is small per call but adds up under heavy automation.

### Is it deterministic enough for tests?

Less than raw Playwright, by design. Use Stagehand for agentic browsing where adaptability matters and use Playwright for CI tests where determinism matters.

## Changelog

- **2026-05-26** — Refreshed install snippets and fact sheet; verified for 2026.
- **2024-12-10** — Initial directory listing.