Claude Browser MCP

🚀 ブラウザMCPサーバ

Playwrightを使用して、包括的なブラウザ自動化機能を提供する**モデルコンテキストプロトコル（MCP）**サーバです。このサーバを使用すると、AIアシスタントが標準化されたMCPツールを介してウェブページと対話し、ナビゲーション、コンテンツ抽出、フォーム入力、スクリーンショットのキャプチャなどを行うことができます。

✨ 主な機能

ブラウザの基本操作

• スマートな待機戦略を使って指定のURLに移動
• カスタマイズ可能なセレクターでページコンテンツを抽出
• （全ページ、ビューポート、または特定の要素の）スクリーンショットを撮影
• 結果をキャプチャしながらJavaScriptを実行
• CSSセレクターで要素をクリック
• 自動検証付きでフォームに入力

高度な機能

• （Chromium、Firefox、WebKitの）複数のブラウザをサポート
• リクエストのインターセプトとモニタリング
• ビューポートのカスタマイズとレスポンシブテスト
• リンクの抽出とURLの処理
• 詳細なレスポンス付きのエラーハンドリング
• リソース管理とクリーンアップ

📦 インストール

前提条件

• Python 3.8以上
• Node.js（Playwrightブラウザのインストールに必要）

ソースからインストール

# リポジトリをクローン
git clone <repository-url>
cd claude-browser-mcp

# 依存関係をインストール
pip install -e .

# Playwrightブラウザをインストール
playwright install

PyPIからインストール（利用可能な場合）

pip install claude-browser-mcp
playwright install

🚀 クイックスタート

MCPサーバとして起動

標準入出力トランスポートでサーバを起動します。

browser-mcp
# または
python -m src.server

設定

環境変数を通じてブラウザを設定します。

export BROWSER_HEADLESS=true          # ヘッドレスモードで実行
export BROWSER_TYPE=chromium          # ブラウザの種類 (chromium/firefox/webkit)
export BROWSER_TIMEOUT=30000          # デフォルトのタイムアウト時間（ミリ秒）

MCPクライアントとの統合

MCPクライアントの設定に追加します。

{
  "mcpServers": {
    "browser-automation": {
      "command": "browser-mcp",
      "args": []
    }
  }
}

💻 使用例

基本的な使用法

以下は、各ツールの基本的な使用例です。

navigate_to

指定のURLに移動し、必要に応じて待機します。

{
  "name": "navigate_to",
  "arguments": {
    "url": "https://example.com",
    "wait_for": "selector", 
    "timeout": 30
  }
}

get_page_content

現在のページからテキストコンテンツを抽出します。

{
  "name": "get_page_content", 
  "arguments": {
    "include_links": true,
    "selector": ".main-content"
  }
}

click_element

CSSセレクターで要素をクリックします。

{
  "name": "click_element",
  "arguments": {
    "selector": "button#submit",
    "timeout": 10
  }
}

fill_form

フォームフィールドにデータを入力します。

{
  "name": "fill_form",
  "arguments": {
    "fields": {
      "#email": "user@example.com",
      "#password": "secretpass"
    },
    "submit": true
  }
}

take_screenshot

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

{
  "name": "take_screenshot",
  "arguments": {
    "full_page": true,
    "selector": ".dashboard"
  }
}

execute_javascript

ブラウザコンテキストでJavaScriptを実行します。

{
  "name": "execute_javascript", 
  "arguments": {
    "code": "document.title",
    "return_value": true
  }
}

📚 ドキュメント

プロジェクト構造

claude-browser-mcp/
├── src/
│   ├── __init__.py          # パッケージの初期化
│   ├── server.py            # MCPサーバの実装
│   ├── browser.py           # ブラウザの管理
│   ├── actions.py           # 高度なブラウザ自動化メソッド
│   └── utils.py             # ユーティリティ関数
├── requirements.txt         # Pythonの依存関係
├── setup.py                 # パッケージの設定
└── README.md               # このファイル

アーキテクチャ

サーバ (server.py)

• ツールの登録を伴うMCPサーバの実装
• リクエストのルーティングとレスポンスの整形
• エラーハンドリングとロギング
• 非同期ツールの実行

ブラウザマネージャ (browser.py)

• Playwrightブラウザのライフサイクル管理
• コンテキストの作成と設定
• リソースのクリーンアップと回復
• 複数のブラウザをサポート

アクション (actions.py)

• 高度なブラウザ自動化メソッド
• コンテンツの抽出と処理
• フォームの操作と検証
• スクリーンショットの撮影とJavaScriptの実行

ユーティリティ (utils.py)

• HTMLのサニタイズとクリーニング
• URLの検証と正規化
• 画像の処理とエンコード
• データの整形ユーティリティ

🔧 技術詳細

セキュリティに関する考慮事項

• HTMLのサニタイズにより、危険なスクリプトや属性を削除します。
• URLの検証により、悪意のあるリダイレクトを防止します。
• すべてのユーザー提供データに対する入力検証を行います。
• リソース制限により、過度のメモリ使用を防止します。
• タイムアウト制御により、ハングする操作を防止します。

Dockerデプロイメント

Dockerでのクイックスタート

# Docker Composeでビルドして実行
docker-compose up browser-mcp

# または手動でビルド
./scripts/docker-build.sh
./scripts/start-container.sh

本番環境でのデプロイ

# 本番用イメージをビルド
docker build -t browser-mcp:latest .

# 最適な設定で実行
docker run -d \
  --name browser-mcp \
  --init --ipc=host --shm-size=1gb \
  --memory=2g --cpus=1.0 \
  -v $(pwd)/screenshots:/app/screenshots \
  -v $(pwd)/downloads:/app/downloads \
  browser-mcp:latest

Dockerを使った開発

# デバッグ用の開発コンテナを起動
docker-compose --profile dev up browser-mcp-dev

# コンテナにアクセス
docker exec -it claude-browser-mcp-dev /bin/bash

コンテナの管理

# ヘルスチェック
./scripts/health-check.sh

# ログを表示
docker logs -f claude-browser-mcp

# リソースを監視
docker stats claude-browser-mcp

エラーハンドリング

サーバは、以下の情報を含む詳細なエラーレスポンスを提供します。

• エラーの分類（タイムアウト、検証、実行）
• コンテキスト情報（URL、セレクター、引数）
• 該当する場合の回復提案
• デバッグとモニタリング用のロギング

レスポンス形式

すべてのツールは、標準化されたJSONレスポンスを返します。

{
  "success": true,
  "url": "https://example.com",
  "title": "Page Title",
  "data": "...",
  "metadata": {
    "timestamp": "...",
    "execution_time": "..."
  }
}

エラーレスポンスには、以下の情報が含まれます。

{
  "success": false,
  "error": "Detailed error message",
  "tool": "tool_name",
  "arguments": {...},
  "timestamp": "..."
}

環境変数

開発

開発環境のセットアップ

# 開発モードでインストール
pip install -e .[dev]

# テストを実行
pytest tests/

# コードを整形
black src/

# 型チェック
mypy src/

新しいツールの追加

1. server.pyでツールのスキーマを定義します。
2. actions.pyでアクションメソッドを実装します。
3. utils.pyにユーティリティ関数を追加します。
4. ドキュメントとテストを更新します。

📄 ライセンス

MITライセンス - 詳細はLICENSEファイルを参照してください。

🙏 謝辞

• ブラウザ自動化のための Playwright
• プロトコル仕様のための MCP
• ClaudeとMCPの開発のための Anthropic

📞 サポート

• 問題報告：GitHubでバグを報告し、機能要求を行ってください。
• ドキュメント：コード内のドキュメントを参照してください。
• コミュニティ：MCPコミュニティのディスカッションに参加してください。

注：これは基本的な実装です。特定のユースケースに基づいて、リクエストのインターセプト、高度なフォーム処理、パフォーマンスの最適化などの追加機能を追加することができます。