Browser MCP: Cursor、Claude、VS Codeでブラウザを自動化
(browsermcp.io)- Browser MCPはAIアプリとユーザーのブラウザを接続し、フォーム入力、テスト、繰り返しのWeb作業を自動化できるようにする
- 自動化はローカルマシンで実行されるため、ネットワーク遅延を減らし、ブラウザのアクティビティがリモートサーバーへ送信されない
- 既存のブラウザプロファイルをそのまま使ってログイン状態を維持し、実際のブラウザフィンガープリントによって基本的なボット検知やCAPTCHAを回避できる
- 開始手順は、ブラウザ拡張機能のインストール、AIアプリケーションへのMCPサーバーの追加、自動化ワークフローの作成という3段階
- URL移動、クリック、ドラッグ＆ドロップ、スナップショット、スクリーンショット、コンソールログの確認など、ブラウザ操作に必要なツールを提供する
AIアプリだけでは難しいブラウザ作業の自動化
- Webサイトで繰り返しフォームを入力する作業のように、ブラウザ操作が必要な自動化は、CursorやClaudeのようなAIアプリだけでは処理が難しい
- Browser MCPは、AIアプリをユーザーのブラウザと接続し、Web作業を代わりに実行できるようにする
- 主なユースケースは2つ
- 自動テスト: AIエディタがコードをエンドツーエンドでテストし、ユーザーフローやUI要素を検証し、複数のシナリオでアプリケーションの動作を確認する
- 作業自動化: データ収集、フォーム作成、ワークフロー自動化など、繰り返しのWebベース作業を処理する
導入フローとローカル実行方式
- 開始は3つのステップで構成される
- Browser MCPの拡張機能をブラウザにインストールする
- Browser MCPのMCPサーバーをAIアプリケーションに追加し、ブラウザ拡張機能と接続する
- AIアシスタントがブラウザ内の繰り返し作業を処理できるよう、自動化ワークフローの作成を始める
- 自動化はユーザーのローカルマシンで実行される
- より高いパフォーマンスとネットワーク遅延の削減を目指している
- ブラウザのアクティビティはリモートサーバーに送信されず、デバイス内にとどまる
- 既存のブラウザプロファイルを使って、各種サービスのログイン状態を維持する
- 実際のブラウザフィンガープリントを使って、基本的なボット検知やCAPTCHAを回避する
提供ツールと対応対象
- ブラウザ操作に必要なツールを提供する
- Navigate, Go Back, Go Forward, Wait
- Press Key, Click, Drag & Drop, Hover, Type Text
- Snapshot, Screenshot, Get Console Logs
- 対応対象にはCursor、Claude、Windsurf、VSCodeが含まれる
- ドキュメントはDocumentationで確認できる
1件のコメント
Hacker Newsのコメント
[!warning!] このプロジェクトのChrome拡張機能は、PostHogとAmplitudeに詳細なテレメトリデータを送信している: https://storage.googleapis.com/cobrowser-images/telemetry.pn..., https://storage.googleapis.com/cobrowser-images/pings.png
さらに、ローカルMCPサーバーのソースは含まれている一方でChrome拡張のソースはなく、クレジット表記なしで https://github.com/ruifigueira/playwright-crx をバンドルしているように見え、かなり怪しい
ネットワークトラフィックを見れば、個人化された情報や識別可能な情報は一切送っていないことを確認できます。ウェブサイトが訪問者数を数えるのと同じように、匿名化された利用データを集めて拡張機能がどの程度使われているかを把握したいという目的です。複数のプロジェクトに時間を分散しているので、アクティブユーザー数を知ることは、どこに集中すべきか判断する助けになります
拡張機能はすべて自分で書いたもので、現在のリポジトリにMCPサーバーしか入っていない理由は、このGitHubイシューに書いてあります: https://github.com/BrowserMCP/mcp/issues/1#issuecomment-2784...
要するに、すべての拡張機能で共有されるコードが入ったモノレポを使っていて、この拡張だけを切り出し、複数のモノレポを同期して維持するにはかなりの作業が必要です。プロジェクトの構成が気に入らないというのは理解できますが、悪意のあることはしていません
このウェブサイトは「実際のブラウザフィンガープリントを使ってボット検知とCAPTCHAを回避する」と主張しているが、実際にはそうではなかった
数週間前、自分で作った似たようなシステムで、ログイン済みセッション上でAIにブラウザを操作させてみたところ、人間が直接使っているセッションでもCAPTCHAが出始め、最終的には複数のウェブサイトでブロックされた。そういう形でブラウザセッションを使うのをやめると、ブロックは時間とともに消えたが、この方法は万能な解決策ではなく、自分自身のアクセス権まで失う可能性がある
それにこの拡張機能はかなり目立つように見えるので、Cloudflareのボット検知がPlaywrightのようなものとして見抜くのにそう時間はかからないはずだ
だからこういうプロジェクトがある: https://github.com/Kaliiiiiiiiii-Vinyzu/patchright. JavaScriptからデバッグ部分を隠してくれる
あまりに多くの操作をあまりに速く行うのも問題だが、操作間のタイミングも候補になりうる。クリック一つひとつが速くなくても、遅延時間が過度に一定なら、やはり別の非人間的シグナルになる
「ボット検知とCAPTCHAを回避する」というのは、結局そうした仕組みがあなたのような人たちのせいで存在しているということだ。本当にアクセスが必要ならAPIを申請すべきで、料金がかかるかもしれないし、かからないかもしれない。許可されることもあればサイト運営者に断られることもあり、その場合は自分の行動やユースケースが望まれていないものだと受け入れるべきだ
一日寝ていたみたいだけど、今やMCPをあちこちで見かける。MCPが何なのか分からないし、この段階では聞くのも怖い
メソッド名、パラメータ、出力型、用途をモデルに伝えると、LLMはMCPサーバーに関数呼び出しを依頼し、結果を確認したあと必要なら次の関数を呼ぶ。今のChatGPTでは「自分のアカウントでGoogle Mapsを開いて、ニューヨーク近郊の自転車店を検索し、電話番号を取ってきて」と頼むのは難しいが、ブラウザMCPがあればChatGPTがブラウザに「Google Mapsを開く」「スクリーンショットを見せる」「その場所をクリックする」といった指示を送れる
一般の人には概念が妙に倒錯していて直感的ではないが、開発者には自分たちが使うツールのように見えるので、あまり混乱しない
ショッピングサイトでブラウザに「この一覧にあるすべてのサイドボードを見て、155cmより大きく100cmより小さいものだけに絞り込んで。暗い木目で、高さ31.43cmのビニールレコードを入れられるスペースがあるものを優先して」と言えたらいいのにと思う
ページから詳細情報を抽出できるならとても便利そうだが、こういうことができるブラウザがすでにあるのか気になる
たとえば「Xを扱っていてY寄りの結果を優先し、何かを売り込もうとしている結果は下げて」といった感じ。 https://matterrank.ai で試せる
想定しているユースケースももっと聞きたい。すでに見ているサイト上で動くブラウザ拡張なのか、こうした機能を提供するショッピング集約サービスなのか、それともまったく別の形なのかが気になる
よくできている。Claude Desktop で試したところスムーズに動き、Playwright よりずっと煩わしくなかった。正しい方向に進んでいる
もうやっているかは分からないが、ページで CAPTCHA を検出したら自動化を一時停止して、ユーザーに介入が必要だと知らせてくれるとよいと思う。Playwright は CAPTCHA でもそのまま進もうとする
Webで情報を探して Google Sheets のスプレッドシートに結果を入れる作業は、最初はほぼ完璧にできたが、その後の8〜10回の試行では完全に失敗した
ブラウザで起きていることと MCP アプリ、ここでは Claude Desktop の間に遅延の問題があるのではないかと思う。最初の試行では「Allow for this chat」の権限を十分早く押せたが、その後は権限を押すころには LLM が「クリックに問題があったようです。別の参照で再試行します」と報告していた感じだった
最初は完璧にできていた Google スプレッドシートのタイトルクリック後の名前入力のような操作が、その後の試行では100%失敗した。A1、B1のようなセル識別や行入力も同様だった。体験自体は非常にスムーズで、構成と実行は素晴らしいが、遅延と許可ボタンを押す速さのせいで Claude Desktop では実質的に使いにくいように見える
こうした MCP サーバーはありつつ、LLM が Google Sheets のセルを読み書きできる専用ツールを提供するとよいと思う。Webページと一般的にやり取りする代わりに、より具体的な抽象化を与えれば、こうした作業ははるかにうまく処理できるはずだ
例: https://x.com/xing101/status/1903391600040083488
設定: https://github.com/xing5/mcp-google-sheets
人々が新しい ChatGPT バージョンがナーフされたと思い込み続ける理由と同じだ。実際には最初に運が良かっただけで、そのポジティブな最初の結果をもとに非現実的な期待を持ってしまったのだ。バグや欠陥というより、望んだ動作をする統計的確率が低いのに、最初のターンで良いサイコロが出たことに近い
--Error: Cannot access a chrome-extension:// URL of different extensionこういうものには 経費精算 のような手作業で本当に期待している。毎月サービス提供者のサイトに入ってログインし、明細を見つけてダウンロードし、詳細を埋めた Google ドキュメントを作り、ダウンロードし、新しいメールを作成してすべてのファイルを添付しなければならない
添付ファイルが正しいか再確認するにはメール上でそのまま見られず、またダウンロードしなければならないこともある。自動化自体はすでに可能で、きちんとした支出追跡アプリならこの作業の半分はなくせるが、AI ツールには、さらに細かな明細作成の負担を大きく減らす潜在力がある。こうしたワークフローは小さな変更が頻繁に発生するので、特に重要だ
ここにいる大半には自明かもしれないが、MCP サーバーを実行するには Node.js がインストールされている必要がある。この重要な詳細がセットアップ案内にない
https://docs.browsermcp.io/setup-server#node-js
似たものを作った。ハードウェアシンセサイザーを制御して、実際のノブを触らずに サウンドデザイン ができるようにするもの: https://github.com/zerubeus/elektron-mcp
プラグインをリモート制御し、LLM に既存のツールで マスタリングや音色調整 をさせることも想像できる。VST の複雑で過度にグラフィカルな UI は性能上の障壁になり得るが、ラベル付きの MIDI マッピングインターフェースにつないでノブやレベルを制御できる
スクリーンショットに頼らず、Chrome DevTools の アクセシビリティツリー でページをたどれるとよい: https://developer.chrome.com/blog/full-accessibility-tree