Browserbase MCPサーバーでクラウドブラウザをClaude Codeから操作する

BrowserbaseのMCPサーバーは、クラウド上で動くヘッドレスブラウザーをClaude CodeなどのMCPクライアントから直接操作できるようにする公式ツールです。ローカルにChromeやPlaywrightを用意しなくても、URLへのアクセスからページ操作、情報抽出までを自然言語の指示だけで実行できます。セットアップ方法とツール構成、Anthropic自身が提供するブラウザー操作機能との違いをまとめます。

Browserbase MCPサーバーとは

Browserbaseは、AIエージェント向けにクラウド上のヘッドレスブラウザーを提供するインフラサービスです。同社が開発するStagehandというブラウザー自動化フレームワークを土台に、MCPサーバーを公式に配布しています。

MCPサーバーが公開するnavigateやactといったツールを呼び出すと、Browserbaseのクラウド環境で実際にブラウザーが起動します。ページの操作結果はMCPクライアント側にそのまま返ります。手元のマシンでブラウザープロセスを動かす必要はありません。手元のWindowsデスクトップそのものを動かしたい場合は、Windows-MCPが選択肢になります。

セルフホスト版のGitHubリポジトリはアーカイブ済み

セルフホスト版のソースを公開しているGitHubリポジトリbrowserbase/mcp-server-browserbaseは、最後のコミットが2026年7月20日(UTC)で、現在はアーカイブ(読み取り専用)です。READMEの冒頭には「メンテナンスされていない」とあり、参考実装として公開されたもので、Browserbaseの現行の本番サービスや実装を代表するものではないと明記されています。

一方で、ホスト型のMCPサーバーは稼働を続けています。Browserbaseの公式ドキュメントサイトには、MCPサーバーの紹介ページとセットアップガイドがGitHubリポジトリとは別に用意されています。READMEだけを見てサービス自体が終了したと受け取らないよう、セットアップはドキュメントサイト側の記述に従います。

公開されている6つのツール

MCPサーバーが公開するツールは6つです。ホスト型・セルフホスト型のどちらでも同じ構成になります。

startとendがセッションの開始と終了を担い、navigate・act・observe・extractがページの操作を担います。actには「ログインボタンをクリックして」のような自然言語の指示をそのまま渡せます。CSSセレクターを事前に調べる手間がなく、Stagehandがページ構造から対象要素を推定する仕組みです。すべてのツールは任意のsessionIdパラメーターを共通で受け取れます。

Claude Codeへの追加方法(ホスト型)

ホスト型のMCPサーバーは、Streamable HTTPのエンドポイントhttps://mcp.browserbase.com/mcpにBrowserbaseのAPIキーをクエリパラメーターで渡すだけで使えます。Claude CodeへはCLIコマンド1本で追加できます。

claude mcp add --transport http browserbase \
  "https://mcp.browserbase.com/mcp?browserbaseApiKey=YOUR_BROWSERBASE_API_KEY"

APIキーはBrowserbaseダッシュボードから取得します。クエリパラメーターには、APIキー以外にも使用モデルやセッションの挙動を指定できる任意項目が用意されています。

真偽値を渡すクエリパラメーターは、公式ドキュメントが「"true"または"false"という厳密な文字列でなければならない」と注記しています。1やyesなど別の表記は、公式ドキュメントが想定する値ではありません。

APIキーはどこに保存されるか

セットアップ用のコマンドは、APIキーをURLに含めたまま渡す形です。v2.1.287のclaude mcp add --helpは、保存先を決める-s, --scope <scope>を「local, user, or project」から選び、既定はlocalと表示します。ダミーのキーFAKE_KEY_123で追加した場合の出力と、保存された設定は次のとおりです。

claude mcp add --transport http browserbase \
  "https://mcp.browserbase.com/mcp?browserbaseApiKey=FAKE_KEY_123"
# Added HTTP MCP server browserbase with URL: https://mcp.browserbase.com/mcp to local config

完了メッセージにはクエリ文字列が出ず、キーは画面に表示されません。ところが保存された設定ファイル(~/.claude.json相当)には、プロジェクトのパスの下にURLがそのまま入っています。

"mcpServers": {
  "browserbase": {
    "type": "http",
    "url": "https://mcp.browserbase.com/mcp?browserbaseApiKey=FAKE_KEY_123"
  }
}

-s projectを付けると、同じURLがプロジェクト直下の.mcp.jsonへ平文で書かれます。チームで共有するためのファイルなので、そのままコミットするとキーがリポジトリに入ります。個人で使うだけなら既定のlocalスコープのままで足ります。共有するときは、次の手順でキーを環境変数の参照に置き換えます。

Claude Codeは.mcp.jsonのurlに${VAR}形式の環境変数を展開できるため、キーそのものはファイルに書かずに共有できます。シングルクォートで囲めば、claude mcp addは${BROWSERBASE_API_KEY}を展開せずそのまま保存します。

export BROWSERBASE_API_KEY=実際のキー
claude mcp add -s project --transport http browserbase \
  'https://mcp.browserbase.com/mcp?browserbaseApiKey=${BROWSERBASE_API_KEY}'

変数が未設定のままだと、Claude Codeは${BROWSERBASE_API_KEY}の文字列をそのまま使って読み込みます。接続が認証で失敗するときは、設定した環境変数がclaudeを起動したシェルに渡っているかを先に見ます。未設定の変数名はclaude mcp listの出力と/mcpの画面に警告として出ます。

セッションの扱いで気をつけること

ホスト型のエンドポイントは、MCPのトランスポートごとにアクティブなBrowserbaseセッションを1つ記憶します。ただしMCPクライアントの中には、ツール呼び出しのたびに新しいトランスポート接続を張る実装があり、公式ドキュメントはChatGPTを例に挙げています。この場合サーバー側にアクティブなセッション情報が残らず、No active sessionエラーが返ります。

対処法は、startが返したsessionIdを以降のすべてのツール呼び出しに明示的に渡すことです。明示的なsessionIdは常にトランスポート側の現在セッションより優先されます。存在しないセッションIDを渡した場合はエラーになり、別のセッションへ静かにつながることはありません。

ローカル実行(STDIO)を選ぶ場合

社内ネットワークの制約でホスト型エンドポイントに接続できない場合や、コードを直接カスタマイズしたい場合は、npmパッケージをローカルで動かす選択肢もあります。MCP設定ファイルへ次のように追記します。

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

アーカイブされたGitHub版READMEの設定例にはBROWSERBASE_PROJECT_IDという環境変数も含まれています。しかし現行のセットアップガイドが案内するNPMインストール手順では、BROWSERBASE_API_KEYとGEMINI_API_KEYのみが必須項目として示されています。

ローカル実行時だけ使えるコマンドラインフラグも用意されています。

GitHub版READMEには--advancedStealthという--verifiedの非推奨エイリアスも記載されていますが、現行のセットアップガイドのフラグ一覧からは外れています。現行のフラグ一覧にあるのは--verifiedです。

使用モデルの設定 — 既定はGemini、Claudeへの切り替えも可能

Stagehandを介したブラウザー操作の判断を担うモデルは、既定でGoogleのGemini 2.5 Flash Liteです。Claude Code自体はMCPクライアントとして指示を送るだけで、ページ内の要素をどう解釈するかはStagehand側のモデル設定に従います。

モデルをClaudeに切り替えるには、modelNameにモデルIDを指定し、modelApiKeyにAnthropic API(platform.claude.com)のAPIキーを渡します。

https://mcp.browserbase.com/mcp?browserbaseApiKey=YOUR_BROWSERBASE_API_KEY&modelName=anthropic/claude-sonnet-4.5&modelApiKey=YOUR_ANTHROPIC_API_KEY

ここで必要なAPIキーは、Claude CodeのPro/Maxサブスクリプションとは別に発行するAnthropic APIのキーです。カスタムモデルを指定する場合はmodelApiKeyが必須で、省略するとモデルを呼び出せません。

Anthropicの公式ブラウザ操作ツールとの違い

Anthropicも独自にブラウザー操作機能を提供していますが、Browserbase MCPサーバーとは役割がはっきり分かれています。Anthropic側の「ブラウザー使用ツール」はClaude API自体の機能です。browser_toolset_20260801という1エントリーをMessages APIのtoolsに指定するだけで、既定27種類のメンバーツールが使えるようになります。

両者の一番の違いは、ブラウザーをどこで動かすかです。Browserbase MCPサーバーはMCPプロトコル経由でクラウドのブラウザーを借りる仕組みで、Claude CodeやClaude Desktopにそのまま追加できます。Anthropicのブラウザー使用ツールはClaude API自体の機能で、ブラウザー環境は呼び出し側のアプリケーションが自分で用意します。Anthropic側のインフラでブラウザーが動くわけではありません。

Anthropicのブラウザー使用ツールはClaude Platform on AWS、Amazon Bedrock、Microsoft Foundryでは利用できません。Claude Codeからクラウドのブラウザーをすぐ使いたいだけであれば、自前でブラウザー環境を実装するより、Browserbase MCPサーバーを追加する方が手順は少なく済みます。

同様にブラウザー操作をMCP経由で提供するサーバーは他にもあります。得意分野はそれぞれ異なります。パフォーマンス計測に強いChrome DevTools MCP、スクレイピングに特化したCloudflare Browser Rendering MCPもあわせて検討する価値があります。

ホスト型とローカル実行の使い分け早見表

よくあるつまずき

キーを${ANTHROPIC_API_KEY}で渡してもmodelApiKeyが空になる。リモートサーバーのurlとheadersでは、ANTHROPIC_API_KEYやANTHROPIC_AUTH_TOKENのようなClaude Code自身の認証情報の変数は、設定済みでも空として読まれます。:-defaultの既定値を付けても無視されます。API_KEYのように対象外の名前なら、書いたとおりに展開されます。Anthropic APIのキーを渡したいときは、MY_MODEL_KEYのような自分で付けた名前の変数にコピーして、その名前を参照します。

未設定の変数があっても警告だけでサーバーは読み込まれる。${VAR:-default}と書けば、変数が未設定のときに使う既定値を置けます。ブラウザーのビューポートなど、鍵ではない値をURLに入れる場面で使えます。

まとめ

自分だけで使うなら、キーをクエリパラメーターに入れた1コマンドで足ります。チームで共有するときは、.mcp.jsonに平文のキーを残さない形にしておくのが分かれ目です。

MCPサーバーの追加方法そのものの基礎はClaude Code MCP設定ガイドに、外部ツールへAPIキーを渡す際の注意点はMCPセキュリティガイドにまとめています。Claude CodeでGradioのようなWebデモを作った後の動作確認にも使えます。手順はClaude CodeでGradioデモの作り方にまとめています。