Browser MCP

Browser MCP サーバー

Playwrightを使い、Anchor Browserのリモートブラウザーサービスを通じてブラウザー自動化機能を提供する、Model Context Protocol（MCP）サーバーです。このサーバーを使用すると、LLM はプロキシ、ステルス機能、高度な機能を備えた Anchor のクラウドベースブラウザーを通じてウェブページを操作できます。

主な機能

• リモートブラウザーの実行：ローカルブラウザーではなく、Anchor Browser のクラウドインフラストラクチャを使用します
• 組み込みプロキシ：住宅用プロキシの自動ローテーションと地域ターゲティングを提供します
• ステルスと検出対策：高度なブラウザーフィンガープリンティングとボット対策検出機能を備えています
• 高速かつ軽量：ピクセルベースの入力ではなく、Playwright のアクセシビリティツリーを使用します
• LLM に適した設計：画像認識モデルを必要とせず、構造化データのみを使用します
• 決定論的なツールの適用：スクリーンショットベースの方法でよく発生する曖昧さを回避します

要件

• Node.js 18 以降
• Anchor Browser API キー（こちらから取得）
• VS Code、Cursor、Windsurf、Claude Desktop、Goose、またはその他の MCP クライアント

はじめに

1. クローンとビルド

これはカスタムの Browser MCP サーバーであるため、ローカルでビルドする必要があります。

# Clone the repository
git clone https://github.com/anchorbrowser/anchor-mcp.git
cd anchor-mcp

# Install dependencies and build
npm install
npm run build

2. Anchor API キーを取得

1. anchorbrowser.ioでサインアップします
2. ダッシュボードから API キーを取得します
3. API キー（sk-で始まります）をコピーします

3. MCP クライアントを設定

Cursor

~/.cursor/mcp.jsonに追加します。

{
  "mcpServers": {
    "anchor-browser": {
      "command": "node",
      "args": [
        "/path/to/anchor-mcp/cli.js"
      ],
      "env": {
        "ANCHOR_API_KEY": "sk-your-api-key-here"
      }
    }
  }
}

VS Code

MCP の設定に追加します。

{
  "mcpServers": {
    "anchor-browser": {
      "command": "node",
      "args": [
        "/path/to/anchor-mcp/cli.js"
      ],
      "env": {
        "ANCHOR_API_KEY": "sk-your-api-key-here"
      }
    }
  }
}

Claude Desktop

claude_desktop_config.jsonに追加します。

{
  "mcpServers": {
    "anchor-browser": {
      "command": "node",
      "args": [
        "/path/to/anchor-mcp/cli.js"
      ],
      "env": {
        "ANCHOR_API_KEY": "sk-your-api-key-here"
      }
    }
  }
}

4. MCP クライアントを再起動

設定を更新した後、新しいサーバーを読み込むために、MCP クライアント（Cursor、VS Code など）を再起動します。

設定オプション

Browser MCP サーバーがサポートする設定オプションは、必要最小限のものだけです。

node cli.js --help

使用可能なオプション：

• --host <host> - サーバーをバインドするホスト（デフォルト：localhost。すべてのインターフェースを使用する場合は0.0.0.0）
• --port <port> - HTTP トランスポートがリッスンするポート（Docker／サーバーモード）

オプションを指定した例：

{
  "mcpServers": {
    "anchor-browser": {
      "command": "node",
      "args": [
        "/path/to/anchor-mcp/cli.js",
      ],
      "env": {
        "ANCHOR_API_KEY": "sk-your-api-key-here"
      }
    }
  }
}

HTTP サーバーモード（Docker）：

Docker またはヘッドレスサーバー環境の場合：

# Run as HTTP server
ANCHOR_API_KEY="sk-your-key" node cli.js --port 8931 --host 0.0.0.0

次に、HTTP エンドポイントを使用するよう MCP クライアントを設定します。

{
  "mcpServers": {
    "anchor-browser": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

オプションが少ない理由

複雑なブラウザー管理はすべて Anchor Browser がリモートで処理するため、従来のブラウザーオプションの多くは不要です。

• ブラウザーの選択は不要 - Anchor は最適化されたリモートブラウザーを使用します
• プロキシの設定は不要 - Anchor はプロキシの自動ローテーションを提供します
• ブラウザープロファイルの管理は不要 - Anchor のインフラストラクチャが処理します
• ネットワークフィルタリングは不要 - 高度な制御には Anchor のダッシュボードを使用します
• ビューポート／デバイスのオプションは不要 - これらは Anchor Browser API で設定します

これにより MCP サーバーはシンプルになり、重要な機能、つまり Anchor のリモートブラウザーサービスへの接続に集中できます。

動作の仕組み

1. ブラウザーセッションの作成：ブラウザーツールを使用すると、MCP サーバーが Anchor の API を呼び出し、リモートブラウザーセッションを作成します
2. リモート接続：Chrome DevTools Protocol（CDP）を使用し、WebSocket 経由でリモートブラウザーに接続します
3. ツールの実行：ブラウザーの自動化はすべて Anchor のクラウドインフラストラクチャで行われます
4. プロキシとステルス機能：住宅用プロキシの自動ローテーションと高度な検出対策機能を備えています
5. セッション管理：各セッションは分離されており、Anchor のダッシュボードからリアルタイムで確認できます

ローカルブラウザーと比べた利点

🌐 グローバルプロキシネットワーク

• 住宅用プロキシの自動ローテーション
• 地域ごとのターゲティング
• プロキシ設定は不要

🛡️ 高度なステルス機能

• ブラウザーフィンガープリンティングの保護
• ボット対策検出の回避
• 実際のブラウザー環境

☁️ クラウドインフラストラクチャ

• ローカルブラウザーへの依存なし
• 一貫したブラウザーバージョン
• スケーラブルな実行

📊 モニタリングとデバッグ

• ブラウザーセッションのライブ表示
• セッションの録画とトレース
• ネットワークリクエストのログ記録

利用可能なツール

Browser MCP サーバーは、標準的なブラウザー自動化ツールをすべて提供します。

基本的な自動化

• anchor_navigate - URL に移動します
• anchor_click - 要素をクリックします
• browser_type - 入力欄にテキストを入力します
• browser_snapshot - ページのアクセシビリティツリーを取得します
• browser_take_screenshot - スクリーンショットを撮影します
• browser_evaluate - JavaScript を実行します
• browser_wait_for - 条件が満たされるまで待機します

タブ管理

• browser_tab_new - 新しいタブを開きます
• browser_tab_list - 開いているタブの一覧を表示します
• browser_tab_select - タブを切り替えます
• browser_tab_close - タブを閉じます

高度な機能

• browser_file_upload - ファイルをアップロードします
• browser_handle_dialog - アラート／確認ダイアログを処理します
• browser_network_requests - ネットワークトラフィックを表示します
• browser_pdf_save - PDF を生成します（--caps=pdf を使用）

トラブルシューティング

無効な API キー

Error: Missing ANCHOR_API_KEY environment variable

解決方法：API キーが MCP 設定で正しく設定されていることを確認してください。

ビルドエラー

npm run build

解決方法：Node.js 18 以降がインストールされていることを確認し、最初に npm install を実行してください。

接続の問題

Anchor API のレスポンスと WebSocket の接続状態については、MCP のログを確認してください。

セッション数の上限

各 Anchor API キーにはセッション数の上限があります。使用状況は anchorbrowser.io のダッシュボードで確認してください。

開発

Browser MCP サーバーを変更または拡張するには、以下を実行してください。

# Make changes to TypeScript files in src/
# Then rebuild
npm run build

# Test your changes
node cli.js --help

このサーバーは、すべての操作で Anchor のリモートブラウザーを自動的に使用します。これにより、高度なプロキシ機能とステルス機能を備えた、クラウドベースのブラウザー自動化のメリットを活用できます。

ライセンス

このプロジェクトは Apache License 2.0 の下でライセンスされています。詳細については LICENSE ファイルを参照してください。

サポート

• Anchor Browser：anchorbrowser.io
• ドキュメント：Anchor Browser Docs
• MCP Protocol：Model Context Protocol