YetiBrowser MCP

公式

YetiBrowser MCPは、AIアシスタントが既存のブラウザと簡単に連携できるようにする完全オープンソースのソリューションです。

GitHub
11

Yeti Browser MCPで何ができますか？

  • ページのナビゲートとスナップショットの取得 — アシスタントに browser_navigate を使用してURLを読み込ませ、結果のページのアクセシビリティスナップショットを返すように依頼します。
  • Webフォームの入力と送信 — browser_fill_form または browser_type を使用して複数のフィールドに入力し、必要に応じてフォームを送信します。
  • コンソール出力とページ状態の検査 — browser_get_console_logs および browser_page_state を介してエラー、ログ、フォームデータ、クッキー、ストレージキーを取得します。
  • ページ内でのカスタムJavaScriptの実行 — browser_evaluate を使用して任意のスクリプトを実行し、デバッグやデータ抽出のためにJSONシリアライズ可能な結果を取得します。
  • スクリーンショットの取得 — browser_screenshot を使用してビューポートまたは全ページのスクリーンショットを取得し、視覚的な検証やQAワークフローに活用します。

ドキュメント

[!IMPORTANT] このプロジェクトはアーカイブされました。Claude や Codex などの AI エージェントにおけるブラウザ制御の欠如に対処するために構築されましたが、現在これらのエージェントには専用の MCP ベースのソリューションを必要とせず、これらの機能が組み込まれています。

YetiBrowser MCP

YetiBrowser MCP は、Browser MCP ワークフローの完全なオープンソース実装です。Node ベースの MCP サーバーを Chrome/Firefox 拡張機能とリンクさせることで、Model Context Protocol クライアント（Codex/Claude Code、Cursor、Windsurf、MCP Inspector、または独自のツール）が実際のブラウザタブを自動化でき、すべてのデータをマシン上に保持し監査可能な状態に保ちます。

YetiBrowser MCP を選ぶ理由

  • 透明性とハック可能性 – ブロブのダウンロードは不要。すべてのコンポーネントを検査、フォーク、拡張できます。
  • ローカルファースト – 拡張機能はローカルホストの MCP サーバーとのみ通信し、閲覧データがデバイスから外部に出ることはありません。
  • クロスブラウザ – 共有ロジックが Chrome と Firefox の両方のパッケージを動作させます（Firefox ビルドは Manifest V3 のより良いサポート待ちのため、Mozilla が完全な MV3 API を提供するまで接続 UX が制限される可能性があります）。
  • 開発者向けツール – デバッグと QA のために構築された、よりリッチなコンソールキャプチャ、DOM 差分、ページ状態ダンプ、フルページスクリーンショット。
  • 本番環境対応 – パッケージング、公開、IDE ワークフローとの統合のためのスクリプトとドキュメント。

リポジトリレイアウト

  • packages/shared – メッセージとツールスキーマのための共有 TypeScript 定義。
  • packages/server – MCP クライアントを実行中のブラウザタブにブリッジする MCP サーバー。
  • extensions/shared – 共有拡張機能ソース（バックグラウンド/ポップアップ）とアセット。
  • extensions/chrome / extensions/firefox – ブラウザごとのパッケージングレイヤー。
  • docs/ – ワークスペースコマンド、公開チェックリスト、機能ノート。
  • scripts/ – リリース ZIP 用の package-extensions.sh などのヘルパーユーティリティ。

利用可能な MCP ツール

  • browser_snapshot – 現在のページのアクセシビリティ指向のスナップショットをキャプチャ
  • browser_snapshot_diff – 最新の 2 つのスナップショットを比較して DOM/ARIA の変更を強調表示
  • browser_navigate – 接続されたタブで新しい URL を読み込み、更新されたスナップショットを返す
  • browser_go_back / browser_go_forward – MCP と同期を保ちながら履歴を移動
  • browser_wait – 指定された秒数だけ自動化を一時停止
  • browser_wait_for – セレクターが表示される（オプションで可視状態）までブロックしてから続行
  • browser_press_key – フォーカスされた要素でキーボードのキー押下をシミュレート
  • browser_click – CSS セレクターで識別される要素をクリック
  • browser_hover – 対象要素の上にポインターをホバー
  • browser_drag – ソート可能/ドラッグアンドドロップ UI のために要素をドロップターゲットにドラッグ
  • browser_type – 編集可能な要素にテキストを入力（オプションで Enter で送信）
  • browser_fill_form – 複数の入力/選択/チェックボックス/ラジオを 1 回の呼び出しで入力
  • browser_select_option – <select> 要素で 1 つ以上のオプションを選択
  • browser_screenshot – DevTools プロトコルを介してビューポートまたはフルページのスクリーンショットをキャプチャ
  • browser_get_console_logs – スタックトレース付きのエラーを含む最近のコンソール出力を返す
  • browser_page_state – 接続されたページのフォーム、ストレージキー、Cookie をダンプ
  • browser_connection_info – ブリッジ WebSocket ポート、接続ステータス、拡張機能のバージョンを報告
  • browser_evaluate – ページ内でカスタム JavaScript を実行し、JSON シリアライズ可能な結果を返す
  • browser_handle_dialog – オプションのプロンプトテキストで alert/confirm/prompt ダイアログを承諾または却下

MCP ブラウザ拡張機能のインストール

Chrome ブラウザ

Firefox ブラウザ（現在利用不可）

  • Firefox 安定版リリースにおける Manifest v3 の機能制限により、Firefox 拡張機能は（Nightly ビルド以外で）完全なサポートが一般的に利用可能になるまで保留されています。

MCP サーバーのインストール

Codex CLI

  • ~/.codex/config.toml を編集し、MCP エントリを追加します: 
    [mcp_servers.yetibrowser-mcp]
command = "npx"
args = ["-y", "@yetidevworks/server"]
  • codex CLI コマンドを再起動します。/mcp ツールの下に yetibrowser-mcp がリストされているはずです。
  • 特定のポートを指定する場合は、args エントリに次の形式を使用します: args = ["-y", "@yetidevworks/server", "--ws-port", "9010"]

Claude Code

  • 拡張機能がインストールされ、タブに接続されていることを確認してから、npx -y @yetidevworks/server で MCP サーバーを起動します（またはローカルでビルドした CLI を実行します）。
  • サーバーエントリを ~/Library/Application Support/Claude/claude_desktop_config.json に追加します（docs/publishing.md の例を参照）。
  • claude を再起動して新しい MCP サーバーを認識させます。拡張機能が接続されると、/mcp ツールメニューの下に yetibrowser-mcp がリストされているはずです。

その他の MCP 対応クライアント

  • すべての MCP クライアントは、CLI（npx -y @yetidevworks/server）を生成するか、オプションで特定のポート（例: npx -y @yetidevworks/server --ws-port 9010）を指定することで接続できます。
  • サーバーは標準の MCP トランスポートを stdio 経由で公開するため、クライアントがサポートする任意の設定メカニズムを使用して、タブが接続されたときに上記のコマンドを実行します。

MCP Inspector

  • コーディングエージェント外でのテストとデバッグ用。
  • npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010 を実行して、YetiBrowser MCP ブラウザ拡張機能と連携して MCP サーバーを検査します。

トラブルシューティング

  • CLI は空きポートが見つかるまでポート 9010-9020 を順に調べ、進む際に switched to をログに記録します。特定のポートを固定したい場合は --ws-port <port> を渡します。
  • ブラウザ拡張機能のポップアップも同様に動作します。CLI のポートを追跡するには「自動」のままにするか、「手動」を選択して browser_connection_info / CLI ログが報告するポートを入力して上書きします。
  • AI ツールに接続ポートについて尋ねてください。例: what is the yetibrowser mcp connction info?、その後、報告されたポートに手動ポートを設定します。

ドキュメントとビルドスクリプト

  • ワークスペースコマンドは docs/workspace-commands.md にあります。
  • 公開手順（npm + 拡張機能ストア）は docs/publishing.md にあります。
  • スクリーンショットの動作は docs/screenshot.md に文書化されています。
  • ./scripts/package-extensions.sh で配布可能な Chrome/Firefox ZIP を生成します（artifacts/ に出力されます）。
  • リポジトリレベルのプライバシーポリシーは PRIVACY.md で入手できます。