Real Browser MCP

real-browser-mcp

エージェント型ブラウザーは、エージェントに新しいブラウザーを与えます。コーディングエージェントに必要なのは、あなたのブラウザーです。

すでに開いている Chrome 向けの MCP + Chrome 拡張機能：
Cookie、SSO、ステージング環境のセッション、すでに再現したバグに対応します。

誰もが「エージェント型ブラウザー」を構築しています。その多くは、エージェントに新しいブラウザーを渡します。ヘッドレス Chromium、クラウド VM、Cookie のないクリーンなプロファイルなどです。

それはコーディングの反復作業に適したツールではありません。

修正を反映すると、エージェントは「完了しました。確認してください」と言います。 あなたはすでに Chrome でステージング環境を開き、SSO を済ませ、問題が起きるまさにそのページを表示しています。 エージェントはコードを書きました。そこで動作を確認できます。ただ、そのブラウザーを見ることができません。

real-browser-mcp はその橋渡しをします。ローカル MCP サーバーと Chrome 拡張機能を localhost WebSocket 経由で接続します。エージェントは MCP を介して通信し、実際の Chrome が実行します。セッションはあなたのマシン内にとどまります。

これは、新しいプロファイルを使う Playwright ではありません。ホスト型エージェントブラウザーでもありません。セキュリティ上の正当な理由から Chrome 136 以降でブロックされた、デフォルトの Chrome プロファイルへの CDP リモートデバッグ機能を継ぎ足したものでもありません。

クイックスタート

構成要素は 2 つです。

• MCP サーバー - マシン上で動作し、AI エージェント（Cursor、Claude Code、VS Code など）と通信します
• Chrome 拡張機能 - 実際の Chrome 内で動作し、ツールを実行します

1. MCP サーバーを追加する

Cursor（ワンクリック）：

または、Cursor の Settings > MCP > 「Add new MCP server」で手動で追加します。

{
  "mcpServers": {
    "real-browser": {
      "command": "npx",
      "args": ["-y", "real-browser-mcp"]
    }
  }
}

2. Chrome 拡張機能をインストールする

または、ソースから読み込む：

git clone https://github.com/ofershap/real-browser-mcp.git

1. chrome://extensions を開き、Developer mode（右上の切り替え）を有効にします
2. Load unpacked をクリックし、クローンしたリポジトリの extension/ フォルダーを選択します

ツールバーにある Real Browser MCP アイコンをクリックします。

緑の点は接続済み、灰色はサーバーの起動待ちです。

これで完了です。エージェントがブラウザーを認識できるようになります。

エージェントプラグイン

このリポジトリは Agent Plugins の 1.0.0 パッケージとして提供されます。ルートの plugin.json、mcp.json、skills/real-browser-control/ により、ヘッドレス／クラウドのエージェント型ブラウザーではなく、実際の Chrome をいつ選ぶべきかをエージェントに伝えます。

Claude Code の .claude-plugin/ と agent-config/ は、ルールやマーケットプレイスのフロー向けに引き続き使用します。Agent Plugins は、MCP とスキルをひとつのツリーにまとめた、複数のクライアントで共通のレイアウトです。

Cursor（ローカルプラグイン）： リポジトリをクローンし、~/.cursor/plugins/local/real-browser-mcp にコピーまたはシンボリックリンクしてから、ウィンドウを再読み込みします。Chrome 拡張機能も接続する必要があります。以下のワンクリック MCP インストールで追加されるのはサーバーのみです。ローカルプラグインフォルダーもインストールしてください。

仕様とツール： agent-plugins.org。

これが必要な理由（エージェント型ブラウザーのギャップ）

CI で再現可能な自動化を行う場合は、Playwright を使用してください。すでに認証済みのブラウザー内でエージェントを動かす場合は、こちらを使用してください。

他の選択肢との比較

🧠 エージェントに使い方を教える

エージェントは最初から18個すべてのツールを使えますが、ツールを_いつ_、_どのように_組み合わせるかを知っていると、より効果的に動作します。設定ファイルで適切なワークフローを教えます。まずスナップショットを取得し、次に操作して、最後に確認します。

コマンドを1つ実行します。

npx real-browser-mcp --setup cursor

次のファイルがインストールされます。

• ~/.cursor/rules/real-browser-mcp.mdc - スナップショットを先に取得するワークフロー、ドロップダウンの操作方法、スクリーンショットとスナップショットを使い分けるタイミングを教えます
• ~/.cursor/commands/check-browser.md - Cursor のチャットに /check-browser を追加します

その後、任意のチャットで /check-browser と入力します。または、「ブラウザーで結果を確認して」と伝えるだけで、エージェントが適切に対応します。

npx real-browser-mcp --setup claude

手動でインストールする場合やルールをカスタマイズする場合は、agent-config/ を参照してください。

できること

目的別にまとめた18個のツールです。

確認

操作

移動

デバッグ

設定

接続の切断には、指数バックオフ（1秒から30秒）、10秒ごとの ping/pong ヘルスチェック、ツールごとのタイムアウト（クリックは5秒、ページ移動は60秒）によって自動的に対処します。

{
  "mcpServers": {
    "browser-work": {
      "command": "npx", "args": ["-y", "real-browser-mcp"]
    },
    "browser-personal": {
      "command": "npx", "args": ["-y", "real-browser-mcp"],
      "env": { "WS_PORT": "9333" }
    }
  }
}

real-browser-mcp/
├── mcp-server/          MCP server (npm package, TypeScript)
│   └── src/tools/       One file per tool, registry pattern
├── extension/           Chrome extension (Manifest V3, plain JS)
│   ├── background.js    Service worker, WebSocket client, tool handlers
│   ├── content.js       Console capture
│   └── popup/           Connection status UI
├── agent-config/        Pre-built configs for Cursor + Claude Code
│   ├── cursor/          Rules and commands
│   ├── skills/          Browser automation skill
│   └── setup.mjs        One-command installer
└── tests/               Bridge + registry tests

git clone https://github.com/ofershap/real-browser-mcp.git
cd real-browser-mcp
npm install
npm run build
npm test

FAQ

これはエージェント型ブラウザーですか？

いいえ。一般にエージェント型ブラウザーとは、エージェントが新しいブラウザー（ローカルのヘッドレスブラウザーまたはクラウドブラウザー）を所有するものを指します。real-browser-mcp は MCP エージェントをお使いの既存の Chromeに接続します。同じプロファイル、同じタブ、同じログイン状態を使います。

Chrome 拡張機能は必要ですか？

はい。MCP サーバー単体では、Chrome を認識したり操作したりできません。Chrome 拡張機能をインストールしてポップアップを開き、接続状態が緑色になってからツールを呼び出してください。

既存のログイン情報や企業の SSO でも動作しますか？

はい。拡張機能は、Cookie、セッション、ローカルストレージがある通常の Chrome プロファイルで動作します。すでに設定済みのセッション（手動で完了した SSO を含む）を使って検証できることが、この仕組みの要点です。

Playwright MCP や browser-use とはどう違いますか？

これらのスタックは、自動化ツールが起動するブラウザーを前提として構築されています（CI やクリーンな状態からの繰り返し実行に最適です）。Real Browser MCP は、すでに開いているブラウザーを前提として構築されています。決定論的な実行が必要な場合は Playwright を使ってください。ライブのセッション状態が必要な場合は、こちらを使ってください。

Chrome DevTools MCP とはどう違いますか？

Chrome DevTools MCP は DevTools スタイルのデバッグに優れており、CDP / autoConnect 経由で接続できます。Chrome 136 以降、デフォルトのユーザープロファイルでのリモートデバッグは禁止されています。実際のログイン情報が保存されているのが、まさにこのプロファイルです。Real Browser MCP は、そのプロファイルでデバッグポートを開く代わりに、localhost WebSocket 経由の拡張機能ブリッジを使用します。

クラウド型のエージェントブラウザーを使わないのはなぜですか？

クラウドブラウザーはリモートマシンです。再認証が必要になり、ローカル IDE のワークフローから離れることになり、セッションデータは他者のインフラストラクチャ上に保存されます。このプロジェクトでは、MCP サーバー ↔ 拡張機能の通信を localhost に限定し、制御を手元に保ちます。ツールがページの内容を返すと、その内容は引き続き AI クライアントに渡されますが、その間にベンダーのブラウザー SaaS が介在することはありません。

Agent Plugins と MCP のみのインストールの違いは何ですか？

MCP のみ（Cursor のディープリンクまたは mcp.json）では、サーバーとツールが登録されます。Agent Plugins パッケージでは、plugin.json と real-browser-control スキルも追加されるため、エージェントはヘッドレスブラウザーより実際の Chrome を優先すべき状況を判断できます。どちらの場合も、同じ npm サーバーを使用します。

エージェントに実際のブラウザーの操作を許可しても安全ですか？

サーバーと拡張機能は localhost 上の WebSocket 経由でのみ通信します。クラウドのコントロールプレーンに情報が送信されることはありません。ただし、エージェントは接続中のタブに表示されている内容（ログイン済みのアプリを含む）をクリック、入力、読み取ることができます。信頼できないサイトをテストする場合は専用のプロファイルまたはタブを使い、そのリスクを許容できない場合は、機密データが表示されているタブを自動化の対象にしないでください。

コントリビューション

バグ報告、機能リクエスト、プルリクエストを歓迎します。大きな変更の場合は、まず Issue を作成してください。

作者

_{README Builder で作成した README}

ライセンス

MIT © Ofer Shapira