> ## Documentation Index
> Fetch the complete documentation index at: https://stagehand.readme-i18n.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Browserbase MCP 服务器设置

> 将 Browserbase MCP 服务器添加到 Claude

## 快速安装

<Card title="通过 Cursor 安装" icon="arrow-pointer" href="cursor://anysphere.cursor-deeplink/mcp/install?name=browserbase&config=eyJjb21tYW5kIjoibnB4IEBicm93c2VyYmFzZWhxL21jcCIsImVudiI6eyJCUk9XU0VSQkFTRV9BUElfS0VZIjoiIiwiQlJPV1NFUkJBU0VfUFJPSkVDVF9JRCI6IiIsIkdFTUlOSV9BUElfS0VZIjoiIn19">
  在 Cursor 中一键安装，预配置设置
</Card>

我们为 MCP 服务器支持多种传输方式：STDIO 和 SHTTP。建议使用 SHTTP 配合我们的远程托管 URL，以充分发挥服务器性能。

## 前置条件

<Steps>
  <Step title="获取 Browserbase 凭证">
    从 [Browserbase 控制面板](https://www.browserbase.com/overview) 获取您的 Browserbase API 密钥和项目 ID。

    <Frame>
      <img src="https://mintcdn.com/readme-i18n/wcXsxm33rwhC6LZ-/images/quickstart/api-key.png?fit=max&auto=format&n=wcXsxm33rwhC6LZ-&q=85&s=d89d5a9d67cf0735c0d794f76814b9bf" alt="Browserbase API 密钥和项目 ID 设置" width="2926" height="1492" data-path="images/quickstart/api-key.png" />
    </Frame>

    然后直接从输入框中复制您的 API 密钥和项目 ID。
  </Step>
</Steps>

## 安装方式

<Tabs>
  <Tab title="远程 URL (SHTTP)">
    访问 [smithery.ai](https://smithery.ai/server/@browserbasehq/mcp-browserbase) 并输入您的 API 密钥和配置以获取远程托管 URL。

    <img src="https://mintcdn.com/readme-i18n/wcXsxm33rwhC6LZ-/images/mcp/smithery.jpg?fit=max&auto=format&n=wcXsxm33rwhC6LZ-&q=85&s=6781799b20ea32d2054b7f9043dfc58b" alt="Smithery" width="1920" height="1129" data-path="images/mcp/smithery.jpg" />

    <CodeGroup>
      ```json Smithery theme={null}
      {
        "mcpServers": {
          "browserbase": {
            "url": "your-smithery-url.com"
          }
        }
      }
      ```
    </CodeGroup>

    使用我们的远程托管服务器时，我们将承担 Gemini 的 LLM 成本，这是 [Stagehand](https://www.stagehand.dev) 中[性能最佳的模型](https://www.stagehand.dev/evals)。
  </Tab>

  <Tab title="NPM 包 (STDIO)">
    本地启动的最简单方式是使用我们的 NPM 包。

    <Note>
      如需使用其他模型，您必须在参数中传递模型名称和密钥。更多信息请参见[此处](https://docs.browserbase.com/integrations/mcp/configuration)。
    </Note>

    <Steps>
      <Step title="添加到 MCP 配置">
        进入您的 MCP 配置 JSON 文件并添加 Browserbase 服务器：

        <CodeGroup>
          ```json Claude Desktop theme={null}
          {
            "mcpServers": {
              "browserbase": {
                "command": "npx",
                "args": ["@browserbasehq/mcp"],
                "env": {
                  "BROWSERBASE_API_KEY": "your_api_key",
                  "BROWSERBASE_PROJECT_ID": "your_project_id",
                  "GEMINI_API_KEY": "your_gemini_api_key"
                }
              }
            }
          }
          ```
        </CodeGroup>
      </Step>

      <Step title="重启 MCP 客户端">
        <Check>
          完成！重新加载您的 MCP 客户端，Claude 即可使用 Browserbase。
        </Check>
      </Step>
    </Steps>
  </Tab>

  <Tab title="本地开发">
    如需本地开发或自定义配置，您可以在本地运行服务器。

    <Steps>
      <Step title="克隆并构建">
        ```bash theme={null}
        # 克隆仓库
        git clone https://github.com/browserbase/mcp-server-browserbase.git
        cd mcp-server-browserbase

        # 安装依赖并构建项目
        npm install && npm run build
        ```
      </Step>

      <Step title="选择传输方式">
        您可以选择使用 STDIO 或可流式 HTTP (SHTTP) 在本地运行。

        <Tabs>
          <Tab title="STDIO">
            将以下内容添加到您的 MCP 配置 JSON 文件中：

            ```json theme={null}
            {
              "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_api_key"
                  }
                }
              }
            }
            ```
          </Tab>

          <Tab title="SHTTP (自托管)">
            首先运行服务器：

            ```bash theme={null}
            node cli.js --port 8931
            ```

            然后将以下内容添加到您的 MCP 配置 JSON 文件中：

            ```json theme={null}
            {
              "mcpServers": {
                "browserbase": {
                  "url": "http://localhost:8931/mcp",
                  "env": {
                    "BROWSERBASE_API_KEY": "your_api_key",
                    "BROWSERBASE_PROJECT_ID": "your_project_id",
                    "GEMINI_API_KEY": "your_gemini_api_key"
                  }
                }
              }
            }
            ```
          </Tab>
        </Tabs>
      </Step>

      <Step title="重启客户端">
        <Check>
          重新加载您的 MCP 客户端即可开始使用！
        </Check>
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 验证安装

<Steps>
  <Step title="重启Claude客户端">
    重启/刷新您的Claude客户端应用，点击🔨图标即可看到可用工具。
  </Step>

  <Step title="测试集成">
    通过让Claude导航至任意页面开始使用MCP服务器，您可以在[dashboard](https://www.browserbase.com/sessions)上实时查看Browserbase浏览器的运行情况。

    <Tip>
      尝试询问Claude："导航到google.com并截图"
    </Tip>
  </Step>
</Steps>

## 延伸阅读

<CardGroup cols={3}>
  <Card title="模型上下文协议(MCP)文档" icon="book" href="https://modelcontextprotocol.io/introduction">
    深入了解MCP协议
  </Card>

  <Card title="Browserbase文档" icon="globe" href="https://docs.browserbase.com">
    探索Browserbase功能特性
  </Card>

  <Card title="技术支持" icon="headset" href="mailto:support@browserbase.com">
    获取我们的技术支持
  </Card>
</CardGroup>