mcpField
B
browserstage

browserstage

ローカル
github.com/CloudCorpRecordsブラウザ自動化02 週間前に更新

browserstage について

browserstageは、アクセシビリティスナップショットを基にブラウザーを操作するCLI兼stdio MCPサーバーです。スナップショットからページ要素を特定したいエージェント向けで、利用にはPlaywright互換の実行器の注入が必要です。ブラウザー本体は含まれません。

主な機能

  1. 01アクセシビリティスナップショットと要素検索
  2. 02移動、クリック、ホバー、ドラッグ
  3. 03入力、フォーム入力、ファイル送信
  4. 04コンソールメッセージとネットワークリクエストの取得
  5. 05タブ管理とダイアログ処理

活用シーン

  1. 01ページスナップショットから要素を操作
  2. 02フォーム入力とファイル送信
  3. 03コンソールとネットワークの確認

MCP 対応

stdio MCPサーバーとして、移動、スナップショット、ブラウザー操作、タブ管理、診断のツールをMCPクライアントに提供します。操作にはPlaywright互換のブラウザー実行器が必要です。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"cloudcorprecords-browserstage": {
"command": "npx",
"args": [
"-y",
"@reneturcios/browserstage"
]
}
}
}
起動コマンドnpx -y @reneturcios/browserstage

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@reneturcios/browserstage0.1.0
ocighcr.io/cloudcorprecords/browserstage:0.1.0

ツール

24

掲載時のツール一覧 · 2 週間前に更新

パラメーター型必須説明
urlstringはいページの移動先 URL

詳細

browserstage

スナップショット駆動のブラウザー自動化を、CLI と stdio MCP サーバーとして 1 つのバイナリで提供します。ページに移動してアクセシビリティスナップショットを取得し、そのスナップショット内の参照を使って要素を操作します。クリック、ホバー、ドラッグ、ドロップ、入力、フォーム全体への入力、オプションの選択、キーの押下、ファイルのアップロード、ダイアログの処理が可能です。コンソールメッセージとネットワークリクエストをツールで確認でき、タブの一覧表示、作成、終了、選択もできます。

ブラウザーは、注入可能なエグゼキューターインターフェイス(src/types.ts の StageBrowser)を介して動作します。このパッケージにはブラウザーはバンドルされておらず、ダウンロードもされません。エグゼキューターが設定されていない場合、ブラウザーコマンドは「Browser unavailable」という明確なエラーで失敗します。デプロイ時に Playwright 互換のエグゼキューターを注入すると、実際のブラウザーを操作できます。browser_run_code_unsafe ツールは元の設計ではページに対して任意のコードを実行します。その名称と警告をここでも維持しています。自分で任意のコードを実行する場合に限り、有効にしてください。

インストール

npx -y @reneturcios/browserstage mcp

CLI

browserstage mcp
browserstage navigate <url>
browserstage snapshot
browserstage press <key>
browserstage resize <width> <height>
browserstage --version

終了コード:0 は成功、1 はブラウザーエラー、2 は使用方法のエラーです。

MCP ツール

24 個のコアツール:browser_navigate、browser_navigate_back、browser_snapshot、browser_find、browser_click、browser_hover、browser_drag、browser_drop、browser_select_option、browser_type、browser_press_key、browser_fill_form、browser_take_screenshot、browser_run_code_unsafe、browser_evaluate、browser_wait_for、browser_handle_dialog、browser_file_upload、browser_console_messages、browser_network_requests、browser_network_request、browser_tabs、browser_close、browser_resize。

MCP クライアントの設定:

{
  "mcpServers": {
    "browserstage": {
      "command": "npx",
      "args": ["-y", "@reneturcios/browserstage", "mcp"]
    }
  }
}

Docker

docker run -i ghcr.io/cloudcorprecords/browserstage          # MCP server
docker run --rm ghcr.io/cloudcorprecords/browserstage --version

開発

npm install
npm run build
npm test

MIT ライセンス。

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。