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 サーバーは、次のコマンドラインフラグを受け入れます。

フラグ	説明
`--browserbaseApiKey <key>`	認証用のBrowserbase APIキー
`--browserbaseProjectId <id>`	BrowserbaseプロジェクトID
`--proxies`	セッションでBrowserbaseプロキシを有効にする
`--advancedStealth`	Browserbase Advanced Stealth を有効にする (Scale プランユーザーのみ)
`--contextId <contextId>`	使用するブラウザベースのコンテキストIDを指定します
`--persist [boolean]`	Browserbaseコンテキストを永続化するかどうか（デフォルト: true）
`--port <port>`	HTTP/SSE トランスポートをリッスンするポート
`--host <host>`	サーバーをバインドするホスト (デフォルト: localhost、すべてのインターフェースで 0.0.0.0 を使用)
`--cookies [json]`	ブラウザに挿入するCookieのJSON配列
`--browserWidth <width>`	ブラウザのビューポート幅（デフォルト: 1024）
`--browserHeight <height>`	ブラウザのビューポートの高さ（デフォルト: 768）

これらのフラグは、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 のコンテキスト機能をサポートしています。

コンテキストの作成:
browserbase_context_create: Creates a new context, optionally with a friendly name
セッションでコンテキストを使用する:
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)
コンテキストの削除:
browserbase_context_delete: Deletes a context when you no longer need it

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

セッション間でログイン状態を維持する
キャッシュを保存してページの読み込み時間を短縮する
ブラウザのフィンガープリントを再利用してCAPTCHAと検出を回避する

クッキー管理

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

クッキーの追加:
browserbase_cookies_add: Add cookies to the current browser session with full control over properties
クッキーの取得:
browserbase_cookies_get: View all cookies in the current session (optionally filtered by URLs)
クッキーの削除:
browserbase_cookies_delete: Delete specific cookies or clear all cookies from the session

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

ログインページに移動せずに認証Cookieを設定する
クッキーの状態のバックアップと復元
クッキー関連の問題のデバッグ
クッキー属性（有効期限、セキュリティフラグなど）の操作

TODO/ロードマップ

クリック、タイプ、ドラッグ、ホバー、select_option に対して、真のrefベースのインタラクションロジックを実装します。
refを使用して要素固有のスクリーンショットを実装します。
標準的な MCP ツール (タブ、ナビゲーションなど) を追加します。
テストを追加します。

mcp-server-browserbase