MCP Server Cloudbrowser

🚀 クラウドブラウザ MCP サーバ

クラウドブラウザ MCP サーバは、Claude Desktop でのブラウザ操作をサポートするためのサーバです。必要な依存関係をインストールし、設定を行うことで、Claude Desktop で様々なブラウザ操作を行うことができます。

🚀 クイックスタート

環境構築

1. 必要な依存関係をインストールし、dist/index.js ファイルを生成します。

npm install
npm run build

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 セレクター

リソース

サーバは、2 種類のリソースにアクセスする機能を提供します。

• スクリーンショット (screenshot://<name>)
  • ページの PNG 画像です。指定したスクリーンショットの名前でアクセスできます。

📦 インストール

テスト用のサーバ起動

1. 必要な依存関係をインストールし、dist/index.js ファイルを生成します。

npm install
npm run build

2. サーバを起動します。

npm run inspector