これはあなたのために用意されたBrowserMCPの入門チュートリアルです。

🚀 AIに「目」と「手」を生やす：BrowserMCP初心者ガイド

あなたは考えたことがありますか？普段使っているAIアシスタント（例えばCursorやClaude Desktop）がコードを書くだけでなく、チャットや資料検索、フォーム入力、ウェブデータの取得なども直接操作できたらどれほど便利かと。

BrowserMCPはそのために生まれたツールです。これは橋のようなもので、あなたのAIアシスタントとChromeブラウザをつなぎ、AIがブラウザを通じて「世界を見る」ことや操作を実行できるようにします。

🛠️ 準備作業

開始前に、以下のソフトウェアをインストールしていることを確認してください。

Node.js：これはサービスを動かす基盤（必須）。
MCP対応のAIツール：現在Cursor、Claude Desktop、Windsurf、またはVS Codeをサポート。
Chromeブラウザ（またはChromiumエンジン搭載ブラウザ）。

⚡️ 3ステップで簡単に始める

第一歩：大脳の設定 (MCPサーバー)

まず、あなたのAIツールにBrowserMCPサービスへの接続方法を教える必要があります。ここではCursorを例にします（Claude Desktopも同様です）：
Cursorの設定パネルを開きます。
「Tools」(ツール)タブを見つけます。
「New MCP server」(新規MCPサーバー)をクリックします。
設定欄に以下の情報を入力します。

{
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
}

保存/リフレッシュをクリックします。これでAIは指示を送る準備が整いました。

第二歩：両手を装備 (ブラウザ拡張機能)

次に、ブラウザに「受信器」をインストールします。AIから送られるコマンドを実行するためです。

BrowserMCPの公式サイトまたは拡張機能ストアからBrowser MCP拡張をインストールします。

📌 重要なステップ：インストール後、拡張機能のアイコンをブラウザのツールバーに固定 (Pin)して操作を便利にします。

ブラウザ右上のBrowser MCPアイコンをクリックします。
「Connect」(接続)ボタンをクリックします。
注意：この操作は現在のタブとAIを接続します。その後の操作はこのタブ内で行われます。

第三歩：魔法の始まり (自動化開始)
準備完了！今度はあなたのAIツール（例：Cursorのチャット画面）に戻り、いつも通り指示を出します。

ユーザー：Googleを開いて、「Browser MCP」を検索し、最初の検索結果は何か教えて。

裏側で何が起きているのか？

CursorはMCPプロトコルを通じてあなたの言葉をローカルで動作しているサーバーに送信します。

サーバーは指示をブラウザ拡張機能に翻訳します。

ブラウザ拡張機能は自動的にGoogleにアクセスし、文字を入力し、検索をクリックします。
拡張機能はウェブページの内容を読み取り、Cursorに返します。
Cursorは内容を要約してあなたに返信します。

💡 小技のヒント

何ができる？

「このページの内容を要約してください。」

「GitHubでこのプロジェクトの最新Issueを見てください。」

「このテストフォームに記入してください（データ提供必要）。」

今やあなたのAIはチャットボックスに閉じ込められることなく、インターネット上をサーフィンさせることができます！🌊

動画デモ