Supports browser automation in Firefox, allowing for navigation, DOM manipulation, form filling, and JavaScript execution through Playwright.
Demonstrated capability to navigate to Google, perform searches, and interact with search results through browser automation.
Enables execution of arbitrary JavaScript code in browser context, with the ability to capture console logs and return results.
タイムスタンプをクリックすると、ビデオのそのセクションにジャンプします。
00:00 - MCPをGoogleで検索
Googleホームページにアクセスし、「Model Context Protocol」を検索します。Claude DesktopでMCP統合を使用して基本的なウェブ検索を実行し、結果を処理するデモです。
00:33 -スクリーンショットキャプチャ
検索結果のスクリーンショットをカスタムファイル名で撮影し、Finderで表示します。ブラウザ自動化中に、ClaudeがWebページからビジュアルコンテンツをキャプチャして保存する方法を紹介します。
01:00 - Wikipedia検索
Wikipedia.org にアクセスし、「Model Context Protocol」を検索します。Claude が MCP 統合を通じてさまざまなウェブサイトやその検索機能とやり取りする様子を示します。
01:38 -ドロップダウンメニューインタラクション I
テストウェブサイト（the-internet.herokuapp.com/dropdown）に移動し、ドロップダウンメニューから「オプション1」を選択します。Claudeがフォーム要素を操作して選択する能力を示します。
01:56 -ドロップダウンメニューインタラクション II
同じドロップダウンメニューから「オプション2」を選択に変更します。Claude が同じフォーム要素を複数回操作し、異なる選択を行う能力を示しています。
02:09 -ログインフォームの完了
ログインページ（the-internet.herokuapp.com/login）に移動し、ユーザー名フィールドに「tomsmith」、パスワードフィールドに「SuperSecretPassword!」を入力します。フォーム入力の自動化のデモです。
02:28 -ログイン送信
ログイン資格情報を送信し、認証プロセスを完了します。Claude がフォームの送信をトリガーし、複数のステップからなるプロセスをナビゲートする能力を示します。
02:36 - APIリクエストの実行
JSONPlaceholder APIエンドポイントへのGETリクエストを実行します。Claudeが直接API呼び出しを行い、MCP統合を通じて返されたデータを処理できる能力を示します。
このパッケージには、Playwrightとブラウザ自動化の実行に必要な依存関係が含まれています。npm npm install実行すると、必要なPlaywrightの依存関係がインストールされます。このパッケージは以下のブラウザをサポートしています。
Playwright は、ブラウザの種類を初めて使用する際に、必要に応じて対応するブラウザドライバを自動的にインストールします。また、以下のコマンドで手動でインストールすることもできます。
Safariに関する注意：PlaywrightはSafariブラウザを直接サポートしていません。代わりに、Safariを動かすブラウザエンジンであるWebKitを使用しています。
Edgeに関する注意：ブラウザの種類としてEdgeを選択した場合、エージェントは実際にはChromiumではなくMicrosoft Edgeを起動します。技術的には、Playwrightでは、Microsoft EdgeはChromiumをベースにしているため、Chromiumブラウザインスタンスと「msedge」チャネルパラメータを使用してEdgeが起動されます。
MCP サーバーを実行するには 2 つの方法があります。
Claude Desktopの使用中は、このターミナルウィンドウを開いたままにしてください。ターミナルを閉じるまでサーバーは稼働し続けます。
Claude Desktopは、必要に応じてMCPサーバーを自動的に起動できます。設定手順は次のとおりです。
Claude Desktop の構成ファイルは次の場所にあります。
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json~/.config/Claude/claude_desktop_config.jsonこのファイルを編集して、ブラウザエージェントMCP設定を追加します。ファイルが存在しない場合は作成してください。
重要: ABSOLUTE_PATH_TO_DIRECTORY 、MCP をインストールした完全な絶対パスに置き換えてください。
/Users/username/mcp-browser-agentC:\\Users\\username\\mcp-browser-agent既に他のMCPを設定している場合は、「mcpServers」オブジェクト内に「browserAgent」セクションを追加するだけです。複数のMCPを設定する例を以下に示します。
MCPブラウザエージェントは複数のブラウザタイプをサポートしています。デフォルトではChromeが使用されますが、以下の方法で別のブラウザを指定することもできます。
ホームディレクトリに.mcp_browser_agent_config.jsonファイルを作成または編集します。
browserTypeでサポートされている値は次のとおりです。
chrome - インストールされているChromeを使用します（デフォルト）firefox - Firefox 'Nightly' ブラウザを使用webkit - WebKit エンジンを使用します (注: これは Safari 自体ではなく、Safari を動かす WebKit レンダリング エンジンです)edge - Microsoft Edge を使用しますSafariに関する注意：PlaywrightはSafariブラウザを直接サポートしていません。代わりに、Safariを動かすブラウザエンジンであるWebKitを使用しています。PlaywrightのWebKit実装はSafariブラウザと同様の機能を提供しますが、Safariブラウザのエクスペリエンスと完全に同一ではありません。
MCP サーバーを手動で起動する場合は、ブラウザの種類を指定できます。
MCP_BROWSER_TYPE環境変数を設定します。
Claude Desktop のclaude_desktop_config.jsonで MCP を構成するときに、ブラウザの種類を指定できます。
MCPブラウザエージェントはモデルコンテキストプロトコル（MCP）上に構築されており、ClaudeがPlaywrightを介してヘッドフルブラウザと対話することを可能にします。実装は4つの主要コンポーネントで構成されています。
基本的な統合とは異なり、MCP ブラウザ エージェントは次の方法で真の AI エージェントとして機能します。
| ツール名 | 説明 | パラメータ |
|---|---|---|
browser_navigate | URLに移動する | url (必須)、 timeout 、 waitUntil |
browser_screenshot | スクリーンショットをキャプチャする | name (必須)、 selector 、 fullPage 、 mask 、 savePath |
browser_click | 要素をクリック | selector （必須） |
browser_fill | フォーム入力 | selector （必須）、 value （必須） |
browser_select | ドロップダウンオプションを選択 | selector （必須）、 value （必須） |
browser_hover | 要素の上にマウスを移動 | selector （必須） |
browser_evaluate | JavaScriptを実行する | script （必須） |
| ツール名 | 説明 | パラメータ |
|---|---|---|
api_get | GETリクエスト | url （必須）、 headers |
api_post | POSTリクエスト | url （必須）、 data （必須）、 headers |
api_put | PUTリクエスト | url （必須）、 data （必須）、 headers |
api_patch | PATCHリクエスト | url （必須）、 data （必須）、 headers |
api_delete | 削除リクエスト | url （必須）、 headers |
MCP ブラウザ エージェントは次のリソースを公開します。
browser://logs - ブラウザコンソールのログにアクセスするscreenshot://[name] - 名前でスクリーンショットにアクセスしますClaude で MCP ブラウザ エージェントを使用する実際の例をいくつか示します。
これらの例は、MCP ブラウザ エージェントの実際の機能を表し、現在の状態で何が達成できるかをより現実的に示しています。
Claude Desktop で「MCP ブラウザ エージェント: サーバーが切断されました」というエラーが表示される場合:
node dist/index.js手動で実行します。claude_desktop_config.jsonの絶対パスがシステムに合っていることを確認してください\\ ）を使用していることを確認してくださいブラウザが起動しない、または表示されない場合は、次の手順に従ってください。
ChromiumおよびChromeブラウザでは、使用後にプロセスが正常に終了しないことがあるという既知の問題があります。この問題が発生した場合は、以下の手順に従ってください。
ps aux | grep chromeまたはps aux | grep chromiumを実行してプロセスを見つけ、 kill <PID>で終了します。[!注意] このMCP統合はPlaywrightをベースに構築されており、 Playwrightには動作に影響を与える可能性のある既知の問題やバグがあります。ブラウザ自動化で問題が発生した場合は、PlaywrightのGitHub issuesまでご報告ください。Playwrightチームはこれらの問題への対応に継続的に取り組んでいますが、このエージェントはこれらの制限にもかかわらず、Claude Desktopのブラウザ自動化機能の基盤を提供します。
src/index.ts : メインエントリポイントとMCPサーバーの初期化src/tools.ts : ツールのスキーマと登録src/handlers.ts : ツールとリソースの MCP リクエスト ハンドラーsrc/executor.ts : Playwright を使用したツール実装ロジックこのプロジェクトには、コア機能とブラウザの処理を検証するためのテストが含まれています。
テストでは、設定の整合性、ブラウザ自動化機能、エラー処理、プロセスのクリーンアップを検証します。テストスイートは、Chrome/Chromiumの終了に関する既知の問題を考慮し、ブラウザプロセスの適切な処理に特に重点を置いています。
[!注意] このMCP統合により、Claudeは自律的なブラウザ制御機能を利用できるようになります。禁止事項、セキュリティへの影響、ベストプラクティスに関する重要な情報については、セキュリティポリシーをご確認ください。
MCPブラウザエージェントは正当な自動化タスクのために設計されていますが、悪用される可能性があります。ユーザーは、適用されるすべての法律、利用規約、および倫理ガイドラインを遵守して使用する責任を負います。詳細については、詳細なセキュリティポリシーをご覧ください。
MCP ブラウザエージェントへの貢献を歓迎します！貢献できる分野は以下のとおりです。
このプロジェクトは、Mozilla Public License 2.0 に基づいてライセンスされています。詳細については、 LICENSEファイルを参照してください。
This server cannot be installed
local-only server
The server can only run on the client's local machine because it depends on local resources.
Claude Desktop に自律的なブラウザ自動化機能を提供するモデルコンテキストプロトコル（MCP）統合。このエージェントにより、Claude は Web コンテンツとの対話、DOM 要素の操作、JavaScript の実行、API リクエストの実行が可能になります。