mcp-server-cloudbrowser

🚀 云浏览器 MCP 服务器

云浏览器 MCP 服务器为用户提供了便捷的工具，可在浏览器中执行各类操作，如导航、执行 JavaScript 代码、截图等，能有效提升使用 Claude Desktop 时的操作效率。

🚀 快速开始

环境准备与启动

1. 运行 npm install 安装必要的依赖项，然后运行 npm run build 生成 dist/index.js 文件。
2. 运行 npm run inspector 启动服务器。

配置 Claude Desktop

1. 运行 npm install 安装必要的依赖项，然后运行 npm run build 生成 dist/index.js 文件。
2. 配置您的 Claude Desktop 设置以使用该服务器，示例配置如下：

{
  "mcpServers": {
    "cloudbrowser": {
      "command": "node",
      "args": ["path/to/mcp-server-cloudbrowser/cloudbrowser/dist/index.js"],
      "env": {
        "API_KEY": "<YOUR_BROWSERBASE_API_KEY>"
      },
      "transportType": "stdio"
    }
  }
}

3. 重启您的 Claude Desktop 应用，您应该可以在点击 🔨 图标后看到可用工具。
4. 开始使用这些工具！ 下图展示了 Claude 关闭浏览器会话的示例。

使用 npm 配置

{
  "mcpServers": {
    "cloudbrowser": {
      "command": "cmd",
      "args": [
        "/c", 
        "npx", 
        "-y", 
        "@browsercloud/mcp-server-cloudbrowser"
      ],
      "env": {
        "API_KEY": "<YOUR_BROWSERBASE_API_KEY>"
      },
      "transportType": "stdio"
    }
  }
}

✨ 主要特性

Browserbase API

• cloudbrowser_navigate

  • 功能：在浏览器中导航到任意 URL。
  • 输入：url (字符串)。

• cloudbrowser_evaluate

  • 功能：在浏览器控制台执行 JavaScript。
  • 输入：script (字符串)：要执行的 JavaScript 代码。

• cloudbrowser_get_current_url

  • 功能：获取当前页面的 URL。

• cloudbrowser_screenshot

  • 功能：捕获页面或特定元素的截图。
  • 输入：
    • name (字符串，必需)：截图名称。
    • selector (字符串，可选)：用于截图的 CSS 选择器。
    • width (数字，可选，默认值：800)：截图宽度。
    • height (数字，可选，默认值：600)：截图高度。

• cloudbrowser_click

  • 功能：点击页面上的元素。
  • 输入：selector (字符串)：要点击的元素的 CSS 选择器。

• cloudbrowser_fill

  • 功能：填充输入字段。
  • 输入：
    • selector (字符串)：输入字段的 CSS 选择器。
    • value (字符串)：要填充的值。

• cloudbrowser_get_text

  • 功能：提取当前页面的所有内容。
  • 输入：selector (字符串，可选)：用于提取特定元素内容的 CSS 选择器。

资源

服务器提供了访问两种类型资源的功能：

• 截图 (screenshot://<name>)
  • 页面的 PNG 图像，通过指定的截图名称即可访问。