Playwright Browserbase MCP サーバー

モデルコンテキストプロトコル（MCP）は、LLMアプリケーションと外部データソースおよびツールとのシームレスな統合を可能にするオープンプロトコルです。AI搭載IDEの構築、チャットインターフェースの拡張、カスタムAIワークフローの作成など、MCPはLLMと必要なコンテキストを接続する標準化された方法を提供します。

MCP jsonでの設定方法

NPM でホストされているサーバーを使用することも、このリポジトリを複製して完全にローカルで実行することもできます。

NPMで実行する（推奨）

MCP Config JSON にアクセスし、Browserbase Server を追加します。

{
   "mcpServers": {
      "browserbase": {
         "command": "npx",
         "args" : ["@browserbasehq/mcp"],
         "env": {
            "BROWSERBASE_API_KEY": "",
            "BROWSERBASE_PROJECT_ID": ""
         }
      }
   }
}

これで完了です。MCP クライアントをリロードすると、Claude は Browserbase を使用できるようになります。

100% ローカルで実行するには:

# Clone the Repo 
git clone https://github.com/browserbase/mcp-server-browserbase.git

# Install the dependencies in the proper directory and build the project
cd browserbase
npm install && npm run build

次に、MCP Config JSONでサーバーを実行します。ローカルで実行するには、STDIOまたはSSE経由のセルフホストを使用できます。

標準入出力:

MCP Config JSON ファイルに以下を追加します。

{
"mcpServers": {
   "browserbase": {
      "command" : "node",
      "args" : ["/path/to/mcp-server-browserbase/browserbase/cli.js"],
      "env": {
         "BROWSERBASE_API_KEY": "",
         "BROWSERBASE_PROJECT_ID": ""
         }
      }
   }
}

SSE:

ターミナルで以下のコマンドを実行してください。設定をカスタマイズするために、必要に応じてフラグ（以下のオプションを参照）を追加できます。

   node cli.js --port 8931

次に、MCP Config JSON ファイルに次の内容を入力します。

   {
      "mcpServers": {
         "browserbase": {
            "url": "http://localhost:8931/sse",
            "env": {
               "BROWSERBASE_API_KEY": "",
               "BROWSERBASE_PROJECT_ID": ""
            }
         }
      }
   }

その後、MCP クライアントをリロードすれば、準備完了です。

Related MCP server: Puppeteer MCP Server

フラグの説明:

Browserbase MCP サーバーは、次のコマンドライン フラグを受け入れます。

これらのフラグは、CLI に直接渡すことも、MCP 構成ファイルで構成することもできます。

注記：

現在、これらのフラグはローカル サーバー (npx @browserbasehq/mcp) でのみ使用できます。

フラグと設定例

プロキシ

プロキシに関するドキュメントはここにあります。

STDIO でプロキシを使用するには、MCP Config で --proxies フラグを設定します。

{
   "mcpServers": {
      "browserbase": {
         "command" : "npx",
         "args" : ["@browserbasehq/mcp", "--proxies"],
         "env": {
            "BROWSERBASE_API_KEY": "",
            "BROWSERBASE_PROJECT_ID": ""
         }
      }
   }
}

高度なステルス

こちらにAdvanced Stealthに関するドキュメントがあります。

STDIO でプロキシを使用するには、MCP Config で --advancedStealth フラグを設定します。

{
   "mcpServers": {
      "browserbase": {
         "command" : "npx",
         "args" : ["@browserbasehq/mcp", "--advancedStealth"],
         "env": {
            "BROWSERBASE_API_KEY": "",
            "BROWSERBASE_PROJECT_ID": ""
         }
      }
   }
}

コンテキスト

コンテキストに関するドキュメントはこちら

STDIO でコンテキストを使用するには、MCP Config で --contextId フラグを設定します。

{
   "mcpServers": {
      "browserbase": {
         "command" : "npx",
         "args" : ["@browserbasehq/mcp", "--contextId", "<YOUR_CONTEXT_ID>"],
         "env": {
            "BROWSERBASE_API_KEY": "",
            "BROWSERBASE_PROJECT_ID": ""
         }
      }
   }
}

クッキーインジェクション

なぜCookieを挿入する必要があるのでしょうか？当社のコンテキストAPIは現在、永続Cookieには対応していますが、セッションCookieには対応していません。そのため、永続認証が機能しない場合があります（この機能の追加に現在取り組んでいます）。

MCP Config に cookies.json を追加することで、MCP に Cookie のフラグを設定できます。

STDIOでプロキシを使用するには、MCP Configで--proxiesフラグを設定してください。CookieのJSONはPlaywright Cookies形式である必要があります。

{
   "mcpServers": {
      "browserbase" {
         "command" : "npx",
         "args" : [
            "@browserbasehq/mcp", "--cookies", 
            '{
               "cookies": json,
            }'
         ],
         "env": {
            "BROWSERBASE_API_KEY": "",
            "BROWSERBASE_PROJECT_ID": ""
         }
      }
   }
}

ブラウザビューポートのサイズ設定

ブラウザ セッションのデフォルトのビューポート サイズは 1024 x 768 です。browserWidth フラグと browserHeight フラグを使用してブラウザ ビューポート サイズを調整できます。

ブラウザのサイズをカスタマイズする方法は次のとおりです。16:9のアスペクト比（例：1920 x 1080、1280、720、1024 x 768）を推奨します。

{
   "mcpServers": {
      "browserbase": {
         "command" : "npx",
         "args" : [
            "@browserbasehq/mcp",
            "--browserHeight 1080",
            "--browserWidth 1920",
         ],
         "env": {
            "BROWSERBASE_API_KEY": "",
            "BROWSERBASE_PROJECT_ID": ""
         }
      }
   }
}

構造

• src/ : TypeScriptのソースコード

  • index.ts : メインエントリポイント、envチェック、シャットダウン

  • server.ts : MCP サーバーのセットアップとリクエストのルーティング

  • sessionManager.ts : Browserbaseセッションの作成/管理を処理します

  • tools/ : ツールの定義と実装

  • resources/ : リソース（スクリーンショット）の処理

  • types.ts : 共有TypeScript型

• dist/ : コンパイルされたJavaScript出力

• tests/ : テストのプレースホルダ

• utils/ : ユーティリティスクリプトのプレースホルダ

• Dockerfile : Dockerイメージを構築するためのもの

• 設定ファイル ( .json 、 .ts 、 .mjs 、 .npmignore )

持続のためのコンテキスト

このサーバーは、ブラウザセッション間で Cookie、認証、キャッシュされたデータを保持できる Browserbase のコンテキスト機能をサポートしています。

1. コンテキストの作成:

   browserbase_context_create: Creates a new context, optionally with a friendly name

2. セッションでコンテキストを使用する:

   browserbase_session_create: Now accepts a 'context' parameter with:
     - id: The context ID to use
     - name: Alternative to ID, the friendly name of the context
     - persist: Whether to save changes (cookies, cache) back to the context (default: true)

3. コンテキストの削除:

   browserbase_context_delete: Deletes a context when you no longer need it

コンテキストを使用すると、次のことがはるかに簡単になります。

• セッション間でログイン状態を維持する

• キャッシュを保存してページの読み込み時間を短縮する

• ブラウザのフィンガープリントを再利用してCAPTCHAと検出を回避する

クッキー管理

このサーバーは、直接的な Cookie 管理機能も提供します。

1. クッキーの追加:

   browserbase_cookies_add: Add cookies to the current browser session with full control over properties

2. クッキーの取得:

   browserbase_cookies_get: View all cookies in the current session (optionally filtered by URLs)

3. クッキーの削除:

   browserbase_cookies_delete: Delete specific cookies or clear all cookies from the session

これらのツールは次の場合に役立ちます。

• ログインページに移動せずに認証Cookieを設定する

• クッキーの状態のバックアップと復元

• クッキー関連の問題のデバッグ

• クッキー属性（有効期限、セキュリティフラグなど）の操作

TODO/ロードマップ

• クリック、タイプ、ドラッグ、ホバー、select_option に対して、真のrefベースのインタラクション ロジックを実装します。

• refを使用して要素固有のスクリーンショットを実装します。

• 標準的な MCP ツール (タブ、ナビゲーションなど) を追加します。

• テストを追加します。