Mcp Browser

✅ MCPBrowser（MCP Browser）

⚠️ セキュリティに関する注意： MCPBrowser はウェブページのコンテンツを抽出し、AI エージェント（例：GitHub Copilot、Claude、Kiro、Antigravity）に提供します。エージェントはそのコンテンツを、処理のために利用する LLM プロバイダー（例：Anthropic、OpenAI、GitHub）に送信します。エージェントと LLM プロバイダーの両方を信頼できることを確認してください。特に、機密データやプライベートなデータが含まれるページにアクセスする場合は注意が必要です。MCPBrowser は、プライベートデータへのアクセス、信頼できないコンテンツへの露出、外部との通信（MCP の「致命的な三位一体」）を組み合わせています。すべてのツールのアノテーションでこれらのリスクを正確に宣言しているため、MCP クライアントは適切な安全制御を適用できます。詳細は MCPBrowser/docs/MCP_COMPLIANCE.md を参照してください。

💡 Puppeteer／Playwright の MCP サーバーではなく、MCPBrowser を選ぶ理由は？ Puppeteer と Playwright はブラウザー自動化ライブラリです。これらの MCP サーバーは、エージェントに低レベルのブラウザーコマンドをそのまま提供します。MCPBrowser は内部で Puppeteer を使用し、AI エージェント専用に構築されており、難しい処理を自動で行うインテリジェンスレイヤーを追加しています。

エージェントは、すっきりした HTML（90％小さくなります）、SPA の自動検出（React、Vue、Angular）、認証フローの処理（SSO、リダイレクト、複数ステップのログイン）、複数のフィールドに入力できるフォームの検出、次のステップのガイダンスを含む構造化された応答、ドメインベースのタブ再利用、ページを再読み込みしない即時の DOM 再抽出を利用できます。MCPBrowser のツール呼び出しはそれぞれ、ブラウザー自動化の生の呼び出し 5～8 回分を置き換えます。MCPBrowser なら通常 4 ステップのワークフローが、Puppeteer／Playwright MCP では 20 回以上の呼び出しを必要とするため、トークンを節約し、エージェントを大幅に高速化できます。詳しい比較はこちらをご覧ください。

MCPBrowser は、実際の Chrome、Edge、または Brave ブラウザーを使ってウェブページを閲覧する機能を AI アシスタントに提供する MCP ブラウザーサーバーです。 このブラウザーベースの MCP サーバーを使うと、AI アシスタント（Claude、Copilot、Kiro、Antigravity）は、特に認証、CAPTCHA、ボット対策、または JavaScript のレンダリングが必要なウェブサイトにアクセスできます。実際のブラウザーセッションを使ってウェブ自動化を行うため、一度ログインすれば、AI がページを移動し、ボタンをクリックし、フォームに入力して、自動リクエストをブロックするサイトからコンテンツを抽出できます。

Model Context Protocol (MCP) を基盤とするこのウェブブラウザー MCP サーバーは、Claude Desktop、Claude Code（CLI）、GitHub Copilot、Kiro、Antigravity、および MCP 互換のあらゆる AI アシスタントとシームレスに連携します。企業向け SSO、CAPTCHA、Cloudflare の保護、SPA、ダッシュボード、自動リクエストをブロックするあらゆるサイトに対応します。AI は、あなたと同じブラウザーアクセスを利用できます。特別な API も、ヘッドレスブラウザーの検出も必要なく、認証済みのブラウザーセッションを使うだけです。

AI アシスタントが MCPBrowser を使うワークフローの例

1. browser_fetch_webpage    → Load the login page
2. browser_type_text        → Enter username & password (multiple fields at once)
3. browser_click_element    → Click "Sign In"
4. browser_get_current_html → Extract the content after login

目次

• Puppeteer／Playwright の MCP サーバーより MCPBrowser を選ぶ理由
• 要件
• インストール
  • Amp
  • Claude Code
  • Claude Desktop
  • Cline
  • Codex
  • Copilot CLI
  • Cursor
  • Factory
  • Gemini CLI
  • Goose
  • Kiro
  • LM Studio
  • opencode
  • OpenClaw
  • Qodo Gen
  • VS Code（GitHub Copilot）
  • VS Code 拡張機能
  • Warp
  • Windsurf
• MCP ツール
  • browser_fetch_webpage
  • browser_execute_javascript
  • browser_click_element
  • browser_type_text
  • browser_get_current_html
  • browser_scroll_page
  • browser_take_screenshot
  • browser_close_tab
• CLI モード
• 設定（任意）
• トラブルシューティング
• 開発者向け
• リンク
• ライセンス

要件

• Chrome、Edge、または Brave ブラウザー
• Node.js 18+（npm を含む）

注： システムに Node.js がインストールされている必要があります。VS Code 拡張機能と npm パッケージのどちらも、MCP サーバーの実行に Node.js が必要です。まだインストールされていない場合は、nodejs.org からダウンロードしてください。

Puppeteer／Playwright MCP サーバーではなく、MCPBrowser を選ぶ理由

Puppeteer と Playwright はブラウザー自動化ライブラリです。これらの MCP サーバーが公開するのは低レベルのブラウザーコマンドであり、エージェントは SPA、認証フロー、複雑な HTML、エッジケースに自力で対処する必要があります。**MCPBrowser は AI エージェント専用に開発されました。**内部では Puppeteer を使用し、インテリジェンスレイヤーを追加することで、エージェントがブラウザーとの格闘ではなく、タスクに集中できるようにします。

	MCPBrowser	Puppeteer／Playwright MCP
HTML 出力	クリーンで LLM 向けに最適化（約 90％小型化）— スクリプト、スタイル、SVG、トラッキング属性を削除し、相対 URL を変換します	生の DOM
SPA 対応	React、Vue、Angular、Svelte、Next.js、Nuxt を自動検出し、フレームワークに応じた待機戦略を適用します	エージェントが待機方法を手動で設定する必要があります
認証	ログインページ、SSO リダイレクト、多段階認証を検出し、リダイレクトチェーンに従います。タイムアウトは 2 段階（SSO は 5 秒 → 手動認証は 20 分）です	エージェントが認証の各ステップをスクリプト化する必要があります
フォーム操作	browser_detect_forms で全フィールド、ラベル、制約を検出し、browser_type_text で複数のフィールドに一度に入力します	手動セレクターを使い、1 回に 1 フィールドずつ入力します
レスポンス形式	nextSteps によるガイダンス付きの型付き構造化レスポンス — 回復アクションを伴う、軽微な失敗と重大な失敗の区別	生の結果と汎用エラー
タブ管理	ドメインごとにプール化 — タブを再利用し、ブラウザー再接続後も維持します	リクエストごとに新しいコンテキストを作成
DOM の再抽出	browser_get_current_html — リロード不要で即時に実行（10～50 倍高速）	ページ全体を再取得する必要があります
プラグインシステム	URL／DOM パターンで既知のサイトを検出し、信頼度スコア付きでサイト固有のアクションを提示します	該当なし
用途	AI エージェント	ブラウザーテスト自動化
エージェントの効率	1 回のツール呼び出しで、生のブラウザー呼び出し 5～8 回分を置き換えます — 4 ステップのログインフローは 20 回以上ではなく 4 回の呼び出しで完了し、トークンと往復回数を節約できます	各ステップ（移動、待機、検索、入力、クリック）が個別の呼び出しです

インストール

はじめに

まず、MCP クライアントに MCPBrowser をインストールします。

標準設定はほとんどのツールで動作します。

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

---

Amp

Amp の VS Code 拡張機能の設定画面から追加するか、settings.json ファイルを更新します。

"amp.mcpServers": {
  "mcpbrowser": {
    "command": "npx",
    "args": ["-y", "mcpbrowser@latest"]
  }
}

Amp CLI のセットアップ：

amp mcp add mcpbrowser -- npx -y mcpbrowser@latest

---

Claude Code

Claude Code CLI を使用して MCPBrowser MCP サーバーを追加します。

claude mcp add mcpbrowser --scope user -- npx -y mcpbrowser@latest

動作を確認します。

claude mcp list

次のように表示されます。

mcpbrowser: npx -y mcpbrowser@latest - ✓ Connected

---

Claude Desktop

設定ファイルに追加します（存在しない場合は作成してください）。

Windows： %APPDATA%\Claude\claude_desktop_config.json（例：C:\Users\<username>\AppData\Roaming\Claude\claude_desktop_config.json）
Mac： ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

保存後、Claude Desktop を再起動します。

---

Cline

Configuring MCP Servers のセクションにある手順に従ってください。

cline_mcp_settings.json ファイルに次の内容を追加します。

{
  "mcpServers": {
    "mcpbrowser": {
      "type": "stdio",
      "command": "npx",
      "timeout": 30,
      "args": ["-y", "mcpbrowser@latest"],
      "disabled": false
    }
  }
}

---

Codex

Codex CLI を使用して MCPBrowser MCP サーバーを追加します。

codex mcp add mcpbrowser npx "-y" "mcpbrowser@latest"

または、設定ファイル ~/.codex/config.toml を作成または編集し、次の内容を追加します。

[mcp_servers.mcpbrowser]
command = "npx"
args = ["-y", "mcpbrowser@latest"]

詳しくは、Codex MCP のドキュメントをご覧ください。

---

Copilot CLI

Copilot CLI を使用して、対話形式で MCPBrowser MCP サーバーを追加します。

/mcp add

プロンプトが表示されたら、次の値を入力します。

フィールド	値
サーバー名	mcpbrowser
サーバーの種類	1（ローカル）
コマンド	npx -y mcpbrowser@latest
環境変数	(空欄のまま)
ツール	*

または、設定ファイル ~/.copilot/mcp-config.json を作成または編集し、次の内容を追加します。

{
  "mcpServers": {
    "mcpbrowser": {
      "type": "local",
      "command": "npx",
      "tools": ["*"],
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

詳しくは、Copilot CLI のドキュメントをご覧ください。

---

Cursor

または手動でインストール：

Cursor Settings -> MCP -> Add new MCP Server に移動します。任意の名前を付け、command タイプを選択し、コマンドに npx -y mcpbrowser@latest を使用します。Edit をクリックすると、設定を確認したり、引数などのコマンドを追加したりすることもできます。

---

Factory

Factory CLI を使用して MCPBrowser MCP サーバーを追加します。

droid mcp add mcpbrowser "npx -y mcpbrowser@latest"

または、Factory droid 内で /mcp と入力すると、MCP サーバーを管理するための対話型 UI が開きます。

詳しくは、Factory MCP のドキュメントをご覧ください。

---

Gemini CLI

MCP のインストールガイドに従い、上記の標準設定を使用します。

---

Goose

または、手動でインストールします：

Advanced settings -> Extensions -> Add custom extension に移動します。任意の名前を付け、タイプに STDIO を選択し、command に npx -y mcpbrowser@latest を設定します。「Add Extension」をクリックします。

---

Kiro

MCP サーバーのドキュメントに従ってください。たとえば、.kiro/settings/mcp.json の場合：

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

---

LM Studio

または、手動でインストールします：

右サイドバーの Program -> Install -> Edit mcp.json に移動します。上記の標準設定を使用します。

---

opencode

MCP サーバーのドキュメントに従ってください。たとえば、~/.config/opencode/opencode.json の場合：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "mcpbrowser": {
      "type": "local",
      "command": ["npx", "-y", "mcpbrowser@latest"],
      "enabled": true
    }
  }
}

---

OpenClaw

OpenClaw は、お使いのデバイス上で動作するパーソナル AI アシスタントです。CLI を使って MCPBrowser を追加します：

openclaw mcp add mcpbrowser -- npx -y mcpbrowser@latest

動作を確認します：

openclaw mcp list

詳しくは、OpenClaw MCP ドキュメントをご覧ください。

---

Qodo Gen

VSCode または IntelliJ でQodo Gen のチャットパネルを開き、Connect more tools → + Add new MCP → 上記の標準設定を貼り付けます。

Save をクリックします。

---

VS Code (GitHub Copilot)

または、手動でインストールします：

MCP インストールのガイドに従い、上記の標準設定を使用します。VS Code CLI を使って MCPBrowser MCP サーバーをインストールすることもできます：

# For VS Code
code --add-mcp '{"name":"mcpbrowser","command":"npx","args":["-y","mcpbrowser@latest"]}'

インストール後、VS Code で AI エージェントが MCPBrowser MCP サーバーを使用できるようになります。

---

VS Code 拡張機能

VS Code Marketplace または Open VSX Registry からインストールするか、次を実行します：

code --install-extension cherchyk.mcpbrowser

この拡張機能は、AI エージェント（GitHub Copilot、Kiro Agent、Antigravity Agent）に必要なものをすべて自動的にインストールして設定します。VSCodium や、Open VSX 互換のその他のエディターでも動作します。

---

Warp

Settings -> AI -> Manage MCP Servers -> + Add に移動して、MCP サーバーを追加します。上記の標準設定を使用します。

または、Warp のプロンプトでスラッシュコマンド /add-mcp を使用し、上記の標準設定を貼り付けます。

---

Windsurf

Windsurf MCP のドキュメントに従ってください。上記の標準設定を使用します。

MCP ツール

browser_fetch_webpage

Chrome／Edge／Brave ブラウザーを使用してウェブページを取得します。認証、CAPTCHA、SSO、ボット対策、JavaScript を多用するサイトに対応しています。URL をブラウザーのタブで開き（同じドメインの既存タブがあれば再利用します）、ページが完全に読み込まれるまで待ってからコンテンツを返します。SPA（React、Vue、Angular）を自動検出し、JavaScript によるコンテンツの描画を待ちます。

パラメーター：

• url（文字列、必須）- 取得する URL
• removeUnnecessaryHTML（ブール値、任意、デフォルト：true）- 不要な HTML を削除して、サイズを約 90％削減します
• postLoadWait（数値、任意、デフォルト：0）- ページ読み込み後、HTML を抽出する前に追加で待機する時間（ミリ秒）。描画に時間がかかるページで使用します。

例：

// Basic fetch
{ url: "https://example.com" }

// Fetch with extra wait time for slow-rendering pages
{ url: "https://dashboard.example.com", postLoadWait: 2000 }

// Keep full HTML without cleanup
{ url: "https://example.com", removeUnnecessaryHTML: false }

---

browser_execute_javascript

アクティブなページのコンテキストで JavaScript スニペットを実行し、メタデータ（実行時間、切り詰めフラグ、URL 変更の検出）とともに結果を返します。構造化データの抽出（受信トレイの行など）や、プロトコルによるクリックでは確実に操作できない、JavaScript 駆動の UI 操作に使用します。

⚠️ 注意： 先に browser_fetch_webpage でページを読み込んでおく必要があります。

パラメーター：

• url（文字列、必須）- ページの URL（以前に取得したページと一致する必要があります）
• script（文字列、必須）- ページのコンテキストで実行する JavaScript ソース
• timeoutMs（数値、任意、デフォルト：30000、最大：60000）- 実行タイムアウト
• returnType（文字列、任意、デフォルト：json）- json | text | void

戻り値： シリアライズされた結果（DOM ノードの場合は outerHTML）、type、executionTimeMs、truncated、urlChanged、currentUrl、および失敗時の構造化された error。

例：

// Extract structured data from a page
{
  url: "https://mail.google.com/",
  script: "[...document.querySelectorAll('tr.zA')].slice(0,5).map(r => ({sender: r.querySelector('.zF')?.textContent, subject: r.querySelector('.bog')?.textContent}))"
}

// Click an element via JS when protocol clicks fail
{ url: "https://example.com", script: "document.querySelector('#tricky-button').click(); return 'clicked';" }

// Return void (side-effect only)
{ url: "https://example.com", script: "localStorage.clear();", returnType: "void" }

---

browser_click_element

ボタン、リンク、onclick ハンドラーを持つ div など、クリック可能な要素をクリックします。CSS セレクターまたは画面に表示されるテキストで指定できます。要素が表示される位置まで自動的にスクロールし、クリック後にページが安定するまで待ちます。

⚠️ 注意： 先に browser_fetch_webpage でページを読み込んでおく必要があります。

パラメーター：

• url（文字列、必須）- ページの URL（以前に取得したページと一致する必要があります）
• selector（文字列、任意）- 要素の CSS セレクター（例：#submit-btn、.login-button）
• text（文字列、任意）- セレクターを指定しない場合に検索するテキスト（例：「サインイン」、「送信」）
• returnHtml（ブール値、任意、デフォルト：true）- クリック後、ページが安定するまで待って HTML を返すかどうか。フォームの高速な操作（チェックボックス、ラジオボタン）では false に設定します
• removeUnnecessaryHTML（ブール値、任意、デフォルト：true）- 不要な HTML を削除してサイズを削減します。returnHtml が true の場合のみ使用されます
• postClickWait（数値、任意、デフォルト：1000）- クリック後、SPA が動的コンテンツを描画するまで待機する時間（ミリ秒）
• waitForElementTimeout（数値、任意、デフォルト：1000）- 要素を待つ最大時間（ミリ秒）

例：

// Click by text content
{ url: "https://example.com", text: "Sign In" }

// Click by CSS selector
{ url: "https://example.com", selector: "#login-button" }

// Click without waiting for HTML (fast checkbox toggle)
{ url: "https://example.com", selector: "#agree-checkbox", returnHtml: false }

// Click with custom wait time
{ url: "https://example.com", text: "Load More", postClickWait: 2000 }

フォールバック動作： 要素の特定後にネイティブのクリックがタイムアウトすると、MCPBrowser は JavaScript によるクリックを自動的に再試行します。応答には fallbackUsed、nativeAttempt、fallbackAttempt のメタデータが含まれます。両方の試行が失敗した場合は、別の方法を選べるよう、両方のエラーが一覧表示されます。

---

browser_type_text

1 回の呼び出しで、1 つ以上の入力フィールドにテキストを入力します。効率的な自動化のため、フォーム全体をまとめて入力できます。デフォルトでは、既存のテキストを自動的に消去します。

⚠️ Note: まず browser_fetch_webpage でページを読み込んでおく必要があります。

Parameters:

• url (string, required) - ページの URL（以前に取得したページと一致する必要があります）
• fields (array, required) - 入力するフィールドの配列。各フィールドオブジェクトには次の内容が含まれます。
  • selector (string, required) - 入力要素の CSS セレクター（例：#username、input[name="email"]）
  • text (string, required) - フィールドに入力するテキスト
  • clear (boolean, optional, default: true) - 最初に既存のテキストを消去するかどうか
  • waitForElementTimeout (number, optional, default: 5000) - 要素を待機する最大時間（ミリ秒）
• returnHtml (boolean, optional, default: true) - 安定するまで待機し、入力後に HTML を返すかどうか
• removeUnnecessaryHTML (boolean, optional, default: true) - サイズ削減のために不要な HTML を削除します。returnHtml が true の場合のみ使用されます
• postTypeWait (number, optional, default: 1000) - SPA が動的コンテンツを描画するまで、入力後に待機する時間（ミリ秒）

Examples:

// Fill multiple fields at once (login form)
{
  url: "https://example.com/login",
  fields: [
    { selector: "#username", text: "[email protected]" },
    { selector: "#password", text: "secretpass123" }
  ]
}

// Single field input
{ url: "https://example.com", fields: [{ selector: "#search", text: "query" }] }

// Append text without clearing
{ url: "https://example.com", fields: [{ selector: "#notes", text: " additional text", clear: false }] }

// Fast form fill without HTML return
{
  url: "https://example.com/signup",
  fields: [
    { selector: "#firstName", text: "John" },
    { selector: "#lastName", text: "Doe" },
    { selector: "#email", text: "[email protected]" }
  ],
  returnHtml: false
}

Error handling: フィールドの入力に失敗した場合、応答には次の内容が示されます。

• 失敗したフィールド番号（例：「3 件中 2 件目のフィールドで失敗」）
• 正常に入力されたフィールド
• 入力済みのフィールドには再入力しないよう明確な案内

---

browser_get_current_html

すでに読み込まれているページから、ナビゲーションや再読み込みをせずに現在の HTML を取得します。現在の DOM の状態を抽出するだけなので、browser_fetch_webpage よりもはるかに高速です。操作（クリック、入力）後に使用すると、更新されたページの内容を効率的に取得できます。

⚠️ Note: まず browser_fetch_webpage でページを読み込んでおく必要があります。

Parameters:

• url (string, required) - ページの URL（以前に取得したページと一致する必要があります）
• removeUnnecessaryHTML (boolean, optional, default: true) - サイズを約 90％削減するために不要な HTML を削除します

Examples:

// Get current HTML after interactions
{ url: "https://example.com" }

// Get full HTML without cleanup
{ url: "https://example.com", removeUnnecessaryHTML: false }

Performance comparison:

• browser_fetch_webpage：2～5 秒（ページ全体を再読み込み）
• browser_get_current_html：0.1～0.3 秒（HTML の抽出のみ）✅

---

browser_scroll_page

すでに読み込まれているページ内をスクロールします。ページの異なる部分を撮影するために browser_take_screenshot の前に使用したり、操作の前に要素が表示される位置までスクロールしたりできます。複数のスクロール方法に対応しています。

• 方向を指定：ピクセル数を指定して上下左右にスクロール
• 要素を指定：特定の要素が表示されるまでスクロール
• 位置を指定：絶対座標までスクロール

⚠️ Note: まず browser_fetch_webpage でページを読み込んでおく必要があります。

Parameters:

• url (string, required) - ページの URL（以前に取得したページと一致する必要があります）
• direction (string, optional) - スクロールする方向：up、down、left、right。amount と併用します。
• amount (number, optional, default: 500) - 指定した方向にスクロールするピクセル数（ビューポートのおよそ半分）
• selector (string, optional) - 表示位置までスクロールする要素の CSS セレクター。方向とスクロール量の指定は無視されます。
• x (number, optional) - 水平方向の絶対スクロール位置。y と併用します。
• y (number, optional) - 垂直方向の絶対スクロール位置。x と併用します。

Examples:

// Scroll down by 500px (default)
{ url: "https://example.com", direction: "down" }

// Scroll down by 1000px
{ url: "https://example.com", direction: "down", amount: 1000 }

// Scroll an element into view
{ url: "https://example.com", selector: "#footer" }

// Scroll to specific position
{ url: "https://example.com", x: 0, y: 2000 }

// Scroll to top of page
{ url: "https://example.com", x: 0, y: 0 }

Returns: 現在のスクロール位置、ページの寸法、ビューポートのサイズを返します。ページ内の現在位置を把握するのに役立ちます。

---

browser_take_screenshot

視覚的な分析のために、読み込み済みのページのスクリーンショットを撮影します。HTML の解析だけでは不十分な場合に役立ちます。たとえば、グラフ、画像、複雑なレイアウト、ポップアップ、HTML だけでは把握しにくい視覚的なコンテンツがあるページなどです。PNG 画像を返します。

⚠️ 注意： 事前に browser_fetch_webpage を使ってページを読み込んでおく必要があります。

パラメーター：

• url（文字列、必須）- ページの URL（前に取得したページと一致する必要があります）
• fullPage（ブール値、任意、デフォルト：false）- 表示領域だけでなく、スクロール可能なページ全体をキャプチャします

使用例：

// Capture viewport screenshot (default)
{ url: "https://example.com" }

// Capture full scrollable page
{ url: "https://dashboard.example.com", fullPage: true }

ユースケース：

• HTML の解析が難しい場合にページのレイアウトを視覚化する
• グラフ、チャート、データの可視化をキャプチャする
• ポップアップ、モーダル、オーバーレイをデバッグする
• 視覚的なフィードバック（ハイライト、アニメーション）を把握する
• 要素のクリックを妨げているものを確認する

---

browser_close_tab

指定した URL のホスト名に対応するブラウザータブを閉じます。タブプールからページを削除し、次にそのホスト名へアクセスするときに新しいセッションを開始します。認証状態のクリア、メモリの管理、またはドメインで新たに開始するときに便利です。

⚠️ 注意： ホスト名は完全一致で判定されます（www.example.com と example.com は別のタブとして扱われます）。

パラメーター：

• url（文字列、必須）- 閉じるホスト名のタブに対応する URL

使用例：

// Close tab for a domain
{
  url: 'https://example.com';
}

// This will close the tab for portal.azure.com
{
  url: 'https://portal.azure.com/dashboard';
}

ユースケース：

• 認証／セッション状態をクリアする
• ブラウザーのメモリを解放する
• 新しいログインの前に状態をリセットする

---

CLI モード

MCPBrowser はスタンドアロンのコマンドラインツールとしても使用できるため、シェルスクリプト、CI/CD パイプライン、またはシェルコマンドを通じて動作する AI エージェント（GitHub Copilot CLI など）から簡単に利用できます。

# Show help
mcpbrowser --help

# Fetch a page (handles auth, SSO, SPAs automatically)
mcpbrowser fetch https://eng.ms/docs/my-page

# Fetch with raw HTML output
mcpbrowser fetch https://github.com --browser chrome --raw

# Take a screenshot
mcpbrowser screenshot https://example.com --output page.png --full-page

# Click an element on a loaded page
mcpbrowser click https://example.com --selector "#login-btn"

# Type into a form field
mcpbrowser type https://example.com --selector "input[name=q]" --text "search query"

# Execute JavaScript
mcpbrowser exec https://example.com --script "document.title"

# Get current HTML of a loaded page
mcpbrowser html https://example.com

CLI モードと MCP モードの違い： 引数なしで実行すると、MCPBrowser は MCP サーバーとして起動します（stdin/stdout の JSON-RPC）。サブコマンドを指定して実行すると、そのコマンドを実行して終了します。MCP プロトコルは必要ありません。

---

設定（任意）

高度なセットアップ用の環境変数：

変数	説明	デフォルト
CHROME_PATH	Chrome/Edge/Brave のパス	自動検出
CHROME_USER_DATA_DIR	ブラウザープロファイルのディレクトリ	%LOCALAPPDATA%/ChromeAuthProfile
CHROME_REMOTE_DEBUG_PORT	DevTools のポート	9222

トラブルシューティング

ブラウザーが開きませんか？

• Chrome、Edge、または Brave がインストールされていることを確認してください
• CHROME_PATH を明示的に設定してみてください

ブラウザーに接続できませんか？

• Chrome のすべてのインスタンスを閉じて、もう一度お試しください
• ポート 9222 が使用中でないか確認してください

認証状態が保持されませんか？

• ブラウザータブを開いたままにしてください（デフォルトの動作です）
• 関連するリクエストでは同じドメインを使用してください

npx／プライベート npm レジストリで E401 エラーが発生しますか？

プロジェクトの .npmrc がプライベートレジストリ（Azure Artifacts、GitHub Packages、Artifactory など）を参照している場合、npx は npmjs.org ではなく、そのレジストリから mcpbrowser を取得しようとして、E401 で失敗します。

解決方法： MCP 設定の env ブロックに npm_config_registry を追加してください。

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"],
      "env": {
        "npm_config_registry": "https://registry.npmjs.org"
      }
    }
  }
}

別の方法： グローバルにインストールすると、npx を使わずに済みます。

npm install -g mcpbrowser

その後、MCP 設定の args を指定せずに、"command": "mcpbrowser" を使用してください。

開発者向け

クローンとセットアップ：

git clone https://github.com/cherchyk/MCPBrowser.git
cd MCPBrowser
npm run install:all  # Installs dependencies for all workspace packages

テストの実行：

# Test everything
npm test

# Test MCP server only
npm run test:mcp

# Test extension only
npm run test:extension

両方のプロジェクトをビルドしてフォーマット：

pnpm build   # Creates the MCP server .tgz and VS Code extension .vsix
pnpm format  # Formats the entire workspace

リンク

• GitHub
• npm
• Open VSX レジストリ
• VS Code Marketplace
• イシュー

ライセンス

MIT