Browserbase MCP サーバー

「Browserbase」MCP サーバーは何をするのか？

Browserbase MCP サーバーは、Browserbase と Stagehand を活用した強力なクラウドブラウザー自動化機能を提供します。AI 言語モデルが安全なクラウド環境でウェブブラウザーを操作・制御・自動化できるようになり、ページナビゲーション、構造化データ抽出、スクリーンショット取得、コンソールログ監視、JavaScript の実行などをプログラム可能にします。これにより、AI アシスタントがウェブベースのワークフローを処理したり、繰り返しのブラウザー作業を自動化したり、オンラインコンテンツとのやり取りや抽出を行う能力が大幅に向上し、開発者の生産性、テスト、リサーチのワークフローが強化されます。このサーバーはモジュラー統合をサポートし、複数の LLM やモデルに対応した柔軟な設計です。

プロンプト一覧

本リポジトリにはプロンプトテンプレートの情報はありません。

リソース一覧

提供されたドキュメントやリポジトリファイルに明示的なリソース記載はありません。

ツール一覧

以下の機能が特徴として記載されており、Browserbase MCP サーバーが公開するツールに該当すると考えられます。

• ブラウザー自動化：クラウドブラウザーの操作やオーケストレーションが可能。
• データ抽出：任意のウェブページから構造化データを抽出。
• コンソールモニタリング：デバッグや監視のためにブラウザーのコンソールログを追跡・解析。
• スクリーンショット：ページ全体や要素ごとのスクリーンショットを取得。
• ウェブ操作：ページのナビゲーション、クリック、フォーム入力などの操作を実行。
• アトミック命令（Stagehand MCP）：クリックや対象データ抽出など高精度なコマンドを実行。
• ビジョンサポート（Stagehand MCP）：アノテーション付きスクリーンショットで複雑な DOM 操作を実現。

この MCP サーバーのユースケース

• ウェブ自動化 & テスト
  ウェブアプリのエンドツーエンドテストにブラウザータスクを自動化し、手動 QA の負担を削減し信頼性を向上。
• データ抽出 & ウェブスクレイピング
  オンラインソースから構造化データやテーブル、コンテンツを AI ワークフローに直接抽出して研究や分析、レポート作成に活用。
• UI/UXリサーチ
  スクリーンショット取得やコンソールログ監視でユーザー導線やアプリのパフォーマンスを記録・分析。
• AI駆動ブラウジングエージェント
  LLM が自律的なエージェントとしてサイト巡回や入力、ウェブアプリ操作をユーザーの代わりに実行。
• マルチモデル対応 & 統合
  GPT-4 や Claude-3.7 Sonnet など多様な LLM を柔軟かつモデル非依存で統合し、ブラウザー操作・連携を実現。

セットアップ方法

Windsurf

1. 前提条件（例：Node.js）がインストールされていることを確認します。
2. Windsurf の設定ファイルを探します。
3. mcpServers オブジェクトに Browserbase MCP サーバーを追加：

   {
     "mcpServers": {
       "browserbase": {
         "command": "npx",
         "args": ["@browserbase/mcp-server-browserbase@latest"]
       }
     }
   }
   

4. 設定ファイルを保存し、Windsurf を再起動します。
5. サーバーが稼働しアクセス可能であることを確認します。

Claude

1. 必要なランタイム（例：Node.js）があることを確認します。
2. Claude の設定ファイルを開きます。
3. Browserbase MCP サーバーのエントリを追加：

   {
     "mcpServers": {
       "browserbase": {
         "command": "npx",
         "args": ["@browserbase/mcp-server-browserbase@latest"]
       }
     }
   }
   

4. 変更を保存し、Claude を再起動します。
5. MCP サーバーへの接続を確認します。

Cursor

1. 前提条件（Node.js など）がインストール済みか確認します。
2. Cursor の設定ファイルを編集します。
3. mcpServers の下に以下の JSON スニペットを挿入：

   {
     "mcpServers": {
       "browserbase": {
         "command": "npx",
         "args": ["@browserbase/mcp-server-browserbase@latest"]
       }
     }
   }
   

4. 保存して Cursor を再起動します。
5. ログやステータスページで動作を確認します。

Cline

1. Node.js やその他の依存モジュールが揃っていることを確認します。
2. Cline の設定ファイルを探して開きます。
3. Browserbase MCP サーバーを追加：

   {
     "mcpServers": {
       "browserbase": {
         "command": "npx",
         "args": ["@browserbase/mcp-server-browserbase@latest"]
       }
     }
   }
   

4. ファイルを保存し、Cline を再起動します。
5. MCP サーバーがエラーなく初期化されることを確認します。

API キーを環境変数で安全に管理する方法： 機密性の高い設定（API キー等）は環境変数を使いましょう。例：

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbase/mcp-server-browserbase@latest"],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}"
      },
      "inputs": {
        "apiKey": "${BROWSERBASE_API_KEY}"
      }
    }
  }
}

フロー内での MCP の使用方法

FlowHunt で MCP を使う

FlowHunt ワークフローに MCP サーバーを統合するには、まず MCP コンポーネントをフローに追加し、AI エージェントに接続します。

MCP コンポーネントをクリックして設定パネルを開きます。システム用 MCP 設定欄に、次の JSON 形式でサーバー情報を入力します。

{
  "browserbase": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定後、AI エージェントはこの MCP をツールとして利用でき、その全機能にアクセス可能となります。“browserbase” を実際の MCP サーバー名に、URL をご自身の MCP サーバー URL に置き換えてください。

概要

上記の通り、Browserbase MCP サーバーは強力なブラウザー自動化機能と統合ガイダンスを提供しますが、プロンプトやリソースに関する明確なドキュメントはありません。オープンソースライセンスと活発なリポジトリは評価できます。

総評

この MCP サーバーはブラウザー自動化と統合面で優秀ですが、プロンプトやリソースプリミティブのドキュメントが不足しています。それでも十分メンテナンスされ、活発なコミュニティに支えられています。評価：7/10

MCP スコア