Browser Automation Server

🚀 ブラウザ自動化MCPサーバ

Claudeやその他のMCP互換AIアシスタントにブラウザ自動化機能を提供するモデルコンテキストプロトコル（MCP）サーバです。

🚀 クイックスタート

このサーバは、Claudeやその他のMCP互換AIアシスタントにブラウザ自動化機能を提供します。以下の手順でサーバをセットアップして使用することができます。

✨ 主な機能

• ウェブページ自動化：ウェブブラウザをプログラムで制御します。
• スクリーンショット取得：ウェブページのスクリーンショットを撮影します。
• 要素操作：ウェブページの要素をクリック、入力、操作します。
• ナビゲーション：ページ間を移動し、ブラウザの状態を管理します。
• フォーム入力：フォームを自動的に入力して送信します。
• データ抽出：ウェブページからデータを抽出します。

📦 インストール

# リポジトリをクローンする
git clone https://github.com/samihalawa/browser-automation-server.git
cd browser-automation-server

# 依存関係をインストールする
npm install

# サーバをビルドする
npm run build

💻 使用例

基本的な使用法

サーバの起動

npm start

設定

サーバをあなたのMCP設定に追加します：

{
  "servers": {
    "browser-automation": {
      "command": "/path/to/node",
      "args": ["/path/to/browser-automation-server/build/index.js"],
      "enabled": true,
      "port": 3008,
      "environment": {
        "NODE_PATH": "/path/to/node_modules",
        "PATH": "/usr/local/bin:/usr/bin:/bin"
      }
    }
  }
}

利用可能なツール

navigate

指定されたURLに移動します。

• url (string, 必須)：移動先のURL
• waitUntil (string, 任意)：ナビゲーションの待機条件。オプション：'load', 'domcontentloaded', 'networkidle'。デフォルト値：'load'

screenshot

現在のページのスクリーンショットを撮影します。

• fullPage (boolean, 任意)：全ページをキャプチャするか、ビューポートのみをキャプチャするか。デフォルト値：false
• path (string, 任意)：スクリーンショットを保存するパス。指定されない場合は、Base64エンコードされた画像が返されます。

click

指定された要素をクリックします。

• selector (string, 必須)：クリックする要素のCSSセレクタ
• waitForSelector (boolean, 任意)：セレクタが表示されるまで待つかどうか。デフォルト値：true

type

入力フィールドにテキストを入力します。

• selector (string, 必須)：入力要素のCSSセレクタ
• text (string, 必須)：入力するテキスト
• delay (number, 任意)：キー入力間の遅延時間（ミリ秒）。デフォルト値：0

extract

ページからデータを抽出します。

• selector (string, 必須)：抽出する要素のCSSセレクタ
• attribute (string, 任意)：抽出する属性。指定されない場合は、テキスト内容が抽出されます。

evaluate

ブラウザのコンテキストでJavaScriptを評価します。

• script (string, 必須)：評価するJavaScriptコード
• args (array, 任意)：スクリプトに渡す引数

高度な使用法

サンプルコード

1. ウェブサイトに移動する：

   navigate(url: "https://example.com")
   

2. スクリーンショットを撮影する：

   screenshot(fullPage: true)
   

3. ボタンをクリックする：

   click(selector: "#submit-button")
   

4. フォームを入力する：

   type(selector: "#username", text: "user123")
   type(selector: "#password", text: "password123")
   click(selector: "#login-button")
   

5. データを抽出する：

   extract(selector: ".product-title", attribute: "innerText")
   

📚 ドキュメント

要件

• Node.js 14以上
• ブラウザ自動化にPlaywrightが必要

📄 ライセンス

MIT