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 圖像，通過指定的截圖名稱即可訪問。