BrowserStack MCPサーバー統合

「BrowserStack」MCPサーバーの概要

BrowserStack MCPサーバーは、Model Context Protocol（MCP）サーバーとして、AIアシスタントや開発者ツールをBrowserStackのクラウド型テスト基盤へ直接接続します。開発者やテスターは、お気に入りのAI駆動ワークフローからBrowserStackの実機・ブラウザクラウドを自動化・管理・操作できます。実機上での手動・自動テストの起動、アプリクラッシュのデバッグ、各種ブラウザでのWebサイトテスト、高度なアプリプロファイリングの統合などが、標準化されたMCPツールとプロンプトにより実現可能です。AIアシスタントとBrowserStackの強力なテストプラットフォームを橋渡しすることで、テストプロセスの効率化、デバッグの強化、手動テスターと自動化エンジニア双方の開発ワークフローを加速します。

プロンプト例一覧

• 「open my app on a iPhone 15 Pro Max」
  BrowserStackクラウド上の指定された実機であなたのモバイルアプリを起動します。
• 「My app crashed on Android 14 device, can you help me debug?」
  指定デバイスとOSバージョンで発生したアプリクラッシュのデバッグ・診断を開始します。
• 「open my website hosted on localhost:3001 on Edge」
  BrowserStackインフラ上の実機・ブラウザでローカルWebサイトを開きます。

リソース一覧

• デバイスグリッドリソース
  BrowserStackクラウドで利用可能な実機・ブラウザ/OS組み合わせの全リストにアクセスできます。
• アプリプロファイリングデータ
  実機テストセッションから得られるアプリのパフォーマンス・プロファイリング指標を提供します。
• テストセッションアーティファクト
  テストセッション中に生成されたログ・スクリーンショット・動画を取得し、分析に役立てます。
• デバイス・ブラウザドキュメント
  利用可能なデバイス・OSバージョン・対応ブラウザのドキュメントリンクを提供します。

ツール一覧

公開ドキュメントやコードツリーからは（server.py等を含め）直接的なツール一覧は提供されていません。

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

• 手動アプリテスト
  様々な実機上でモバイルアプリを即座に起動・操作でき、エミュレータ不要で現実のシナリオを再現・デバッグ可能です。
• アプリクラッシュのデバッグ
  プロファイリングや診断ツールを活用し、BrowserStackクラウド上の特定デバイス/OS組み合わせで発生したクラッシュを解析・解決します。
• 手動Webテスト
  ローカルホストも含め、実機や実ブラウザでWebサイトをテストでき、ローカルブラウザのインストール不要でクロスブラウザ検証が可能です。
• 自動テスト統合
  BrowserStackのデバイス・ブラウザグリッドを自動QAフローに組み込み、CI/CDパイプラインの一部として継続的テストを実現します。
• 包括的なデバイスカバレッジ
  最新ハードウェアを含む豊富な実機・ブラウザを活用し、テストカバレッジを最大化・最新化します。

セットアップ方法

Windsurf

1. お使いのシステムにNode.jsがインストールされていることを確認してください。
2. Windsurfの設定ファイルを探します。
3. mcpServersオブジェクトに以下のJSONスニペットを追加します:

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

4. 設定を保存し、Windsurfを再起動します。
5. サーバーが起動しアクセス可能かを確認してください。

Claude

1. Node.jsが未インストールの場合はインストールしてください。
2. Claudeの連携/設定画面を開きます。
3. 以下のようにBrowserStack MCPサーバーを追加します:

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

4. 変更を保存し、Claudeを再起動します。
5. ClaudeのツールパネルからMCPサーバーに接続できるか確認します。

Cursor

1. Node.jsがインストールされていることを確認します。
2. CursorのmcpServers設定を編集します。
3. 挿入例:

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

4. Cursorを再起動し、サーバー設定を適用します。
5. プロンプトを発行し、BrowserStackのオプションが表示されるか確認します。

Cline

1. 前提: Node.jsがインストールされていること。
2. Clineの設定ファイルへ移動します。
3. MCPサーバーを追加します:

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

4. 保存してClineを再起動します。
5. ClineのUIでBrowserStackテスト機能が利用可能か確認します。

APIキーの安全な管理

BrowserStack APIキーの安全性を確保するため、環境変数を利用してください:

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

“${BROWSERSTACK_API_KEY}“は、ご自身の環境変数やシークレットマネージャ参照に置き換えてください。

フロー内でのMCP利用方法

FlowHuntでのMCP利用

FlowHuntワークフローにMCPサーバーを組み込むには、まずMCPコンポーネントをフローに追加し、AIエージェントと接続してください。

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

{
  "browserstack-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定後、AIエージェントはこのMCPをツールとして利用し、すべての機能へアクセスできます。“browserstack-mcp"は実際のMCPサーバー名に、URL部分も自身のMCPサーバーURLに適宜変更してください。

概要

総評

BrowserStack MCPサーバーは、AIやMCPによる実機・ブラウザテストを堅牢に統合し、明確なセットアップガイドや有用なプロンプト・リソースを提供します。ただし、明示的なツールリストや高度なMCP機能（roots, sampling等）の情報が不足している点が、パワーユーザー向けにはやや透明性を欠く部分です。

MCPスコア

スコア: 7/10
ドキュメントが充実しており、有用なリソースやプロンプト例も掲載。より明確なツールドキュメントや高度なMCP機能の詳細が加われば、さらに評価が高まります。