Mcp Browser Agent

🤖 MCP Browser Agent

AI エージェント（Claude/GPT）が人間のようにブラウザーを操作できます。 AI エージェントが人間のようにブラウザーを操作できます。

---

📋 ツール一覧（30 個）

🧭 ナビゲーション

ツール	説明
browser_screenshot	Web ページを開いてスクリーンショットを撮影（ページ全体の撮影に対応）
browser_getUrl	現在のページの URL を取得
browser_getTitle	ページのタイトルを取得
browser_getHTML	HTML ソースコードを取得
browser_reload	ページを再読み込み
browser_back	戻る
browser_forward	進む
browser_pdf	現在のページを PDF としてエクスポート

🖱️ インタラクション

ツール	説明
browser_click	要素をクリック（CSS セレクター、テキスト、右クリック）
browser_fill	入力欄に入力（実際の入力をシミュレート）
browser_clear	入力欄をクリア
browser_select	ドロップダウンリストから選択（value/label/index）
browser_pressKey	キーボード操作（Enter/Escape/Tab/ショートカットキー）
browser_hover	マウスをホバー
browser_submit	フォームを送信
browser_scroll	スクロール（上/下/先頭/末尾/要素まで）
browser_drag	要素をドラッグ

📝 抽出

ツール	説明
browser_extract	テキストを抽出（セレクターと属性に対応）
browser_evaluate	カスタム JavaScript を実行
browser_screenshotElement	指定した要素のスクリーンショットを撮影
browser_getCookies	Cookie を取得
browser_deleteCookies	Cookie を削除

📑 タブ管理

ツール	説明
browser_newTab	新しいタブを開く
browser_switchTab	指定したタブに切り替える
browser_closeTab	タブを閉じる

⚡ 高度な機能

ツール	説明
browser_wait	待機（時間、または要素の表示/非表示）
browser_iframe	iframe のコンテキストに切り替える
browser_console	コンソールログを取得
browser_reset	ブラウザーインスタンスをリセット
browser_close	現在のページを閉じる

---

🚀 クイックスタート

前提条件

• Node.js >= 18
• （推奨）Claude Desktop / Cursor / MCP に対応する任意のクライアント

クイック使用

# 全局安装（推荐）
npm install -g @yubao2000/mcp-browser-agent

# 启动服务
mcp-browse-agent

Claude Desktop での設定

設定ファイル claude_desktop_config.json を探します。

プラットフォーム	パス
Windows	%APPDATA%\Claude\claude_desktop_config.json
macOS	~/Library/Application Support/Claude/claude_desktop_config.json
Linux	~/.config/Claude/claude_desktop_config.json

💡 ファイルが見つからない場合は？ Claude Desktop を開き、Developer（開発者）→ Edit MCP Config（MCP 設定を編集）をクリックすると、このファイルが自動的に開くか作成されます。

以下の内容を入力します。

{
  "mcpServers": {
    "browser-agent": {
      "command": "mcp-browse-agent",
      "args": []
    }
  }
}

設定が完了したら、Claude にそのまま話しかけてください。

「百度のトップページを開いて、スクリーンショットを見せて」

「『MCP プロトコル』を検索して、検索結果を抽出して」

「Gmail にログインして、ユーザー名とパスワードを入力し、ログインをクリックして」

Cursor での設定

Cursor を開き、設定 → Features → MCP Servers → Add New MCP Server を選択します。

フィールド	入力内容
Name	browser-agent
Type	command
Command	mcp-browse-agent
Arguments	空欄

または、プロジェクト内に .cursor/mcp.json ファイルを直接作成します。

{
  "mcpServers": {
    "browser-agent": {
      "command": "mcp-browse-agent",
      "args": []
    }
  }
}

設定後、Cursor で ⌘ . または Ctrl . を使って MCP パネルを開き、browser-agent を選択します。

「百度のトップページを開いて、スクリーンショットを見せて」

「現在のページのすべてのリンクを抽出して」

OpenAI Codex での設定

~/.codex/config.toml を編集します。

[mcp_servers.browser-agent]
command = "mcp-browse-agent"
args = []

設定後、Codex セッションで /mcp を使ってサービスが読み込まれていることを確認します。

「百度のトップページを開いて、スクリーンショットを見せて」

「現在のページのテキストを抽出して」

💡 ヒント： Codex で /mcp を使うと、設定されているすべての MCP サービスを一覧表示できます。/mcp verbose を使うと、詳細な状態を確認できます。

---

🛠 設定ファイル

プロジェクトでは .mcp-browser.json 設定ファイルに対応しています（プロジェクトディレクトリ、またはユーザーディレクトリ ~/.mcp-browser.json に配置します）。

{
  "dataDir": "./.browser-data",
  "viewport": { "width": 1280, "height": 800 },
  "headless": true,
  "defaultTimeout": 30000,
  "chromePath": null
}

環境変数でも設定できます。

• BROWSER_DATA_DIR — データディレクトリ（Cookie など）
• MCP_BROWSER_CONFIG — 設定ファイルのパス
• MCP_PRO_LICENSE — Pro 版の License Key

👁️ ブラウザーウィンドウを表示（デバッグ/認証 CAPTCHA 対応）

デフォルトでは、ブラウザーはバックグラウンドで実行されます（非表示）。ブラウザーウィンドウを表示する場合は、次のようにします。

# 方式 1：环境变量
SHOW_BROWSER=true mcp-browse-agent

# 方式 2：配置文件 .mcp-browser.json
{
  "showBrowser": true
}

ブラウザーウィンドウが開き、AI の操作を一つずつ確認できます。次の用途に適しています。

• デバッグ（AI がどこをクリックし、何を入力したかを確認）
• スライド式 CAPTCHA が表示されたときに手動で操作
• デモ/画面録画

🍪 Cookie の永続化

Cookie は .browser-data/cookies.json に自動保存されます。サービスを再起動すると、以前ログインした Web サイトのログイン状態が自動的に復元されます。頻繁なログインが必要な Web サイト（Gmail、知乎、小紅書など）では、一度ログインするだけで済みます。

---

📦 ローカル開発

git clone https://github.com/yubao2000/mcp-browser-server.git
cd mcp-browser-server
npm install
npm run build
npm start

---

💰 Pro 版

機能	無料版	Pro 版（$9.9/月）	買い切り版（$99）
全 34 ツール	✅	✅	✅
Cookie の永続化	✅	✅	✅
タブ管理	✅	✅	✅
一括自動化（CSV 駆動）	❌	✅ 100件/回	✅ 100件/回
複数タブの並列処理	1個	10個	10個
Cookie の暗号化バックアップ	❌	✅	✅
JSON/CSV データのエクスポート	❌	✅	✅
エンタープライズ向け技術サポート	❌	✅	✅
永久無料アップグレード	❌	❌	✅

Pro 版は近日公開予定です。リリース通知に登録して、早期購入特典を受け取りましょう！

---

🤝 コントリビューション

Star、Issue、PR を歓迎します！

---

📄 ライセンス

MIT