Mcp Server Cloudbrowser

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

テスト

1. npm install を実行して必要な依存関係をインストールし、続けて npm run build を実行して dist/index.js を生成します。
2. npm run inspector を実行してサーバーを起動します。

はじめに

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

リソース

サーバーは 2 種類のリソースへのアクセスを提供します。

2. スクリーンショット（screenshot://<name>）
   • 撮影したスクリーンショットの PNG 画像
   • 撮影時に指定したスクリーンショット名でアクセスできます