Browserbase MCPサーバーでChromeブラウザを制御する方法

あなたのAIがあなたと同じようにウェブを閲覧できたらいいのに、と思ったことはありませんか？さあ、準備してください。今日は、Claude、GPT、GeminiのようなAIモデルがウェブブラウザを制御できるようにする画期的なツール、Browserbase MCPサーバーの世界に飛び込みます。あなたのAIが、ウェブサイトをナビゲートしたり、ボタンをクリックしたり、フォームに入力したり、さらにはスクリーンショットを撮ったりする様子を想像してみてください。これらすべてをAI自身が行うのです。未来的な話に聞こえますか？それは今、現実になっています。特にBrowserbase MCPサーバーを使えば、設定は思っているよりも簡単です。

このガイドでは、Browserbase MCPサーバーとは何か、なぜAI主導のワークフローに不可欠なのか、そしてChromeブラウザを制御するためにそれをセットアップして実行する方法を順を追って説明します。あなたが開発者であろうと、データサイエンティストであろうと、あるいは単にAIに興味があるだけであろうと、このステップバイステップのチュートリアルはあなたをプロのように感じさせるでしょう。さあ、始めましょう！

💡

美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

最大限の生産性で開発チームが協力して作業できる統合されたオールインワンプラットフォームをお探しですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！

button

Browserbase MCPサーバーとは？

Browserbase MCPサーバーは、モデルコンテキストプロトコル（MCP）を使用して大規模言語モデル（LLM）とウェブブラウザを接続するオープンソースツールです。AIがウェブサイトとリアルタイムで対話できるようにする架け橋だと考えてください。このサーバーを使用すると、あなたのAIは次のことができます。

任意のURLに移動する
ボタンをクリックし、フォームに入力する
ウェブページからデータを抽出する
スクリーンショットを撮る
ウェブサイト上でJavaScriptを実行する
複数のブラウザセッションを一度に処理する

これは、あなたのAIにウェブを閲覧するための手を与えるようなものです。そして最高の点は？OpenAIのGPT、AnthropicのClaude、GoogleのGeminiといった人気のあるAIモデルと連携します。

Browserbase MCPサーバーを使用する理由

使い方に飛び込む前に、Browserbase MCPサーバーがなぜ画期的なのかについて話しましょう。

クラウドベースの自動化: ブラウザタスクをクラウドで実行でき、ローカルでのセットアップの手間がありません。
マルチモデル対応: さまざまなAIモデルと連携するため、お気に入りのモデルを選択できます。
並行セッション: 複数のブラウザタスクを一度に処理し、効率を高めます。
視覚機能: スクリーンショットを撮り、ウェブページを視覚的に分析できます。
簡単な統合: Claude DesktopやCursorなどのAIクライアントとシームレスに接続します。

AIを活用したアプリを構築している場合でも、ワークフローを自動化している場合でも、単に実験している場合でも、Browserbase MCPサーバーは時間を節約し、新たな可能性を切り開きます。

Browserbase MCPサーバーのインストールとセットアップ方法

開始するには3つの方法があります。ホストされたリモートサーバーを使用する方法、npmで実行する方法、またはローカルで実行する方法です。あなたに最適な方法を選べるように、これら3つすべてを説明します。

前提条件

AIでChromeブラウザを制御するためにBrowserbase MCPサーバーを使用する前に、以下のものがあることを確認してください。

MCP互換のAIクライアント: モデルコンテキストプロトコル（MCP）をサポートするClaude DesktopやCursorのようなクライアントをインストールします。
Browserbase APIキー: AIをブラウザ自動化に接続するために、Browserbaseから取得します。

ローカルセットアップの場合（オプション）

サーバーをローカルで実行する予定がある場合は、次のものも必要です。

Git: GitHubからリポジトリをクローンするため。
pnpm: 依存関係を処理するために、pnpm.ioからこのパッケージマネージャーをインストールします。
Node.js: サーバーを実行するために、nodejs.orgからダウンロードします。
AIモデルAPIキー: 選択したモデル（例: Gemini）のAPIキーを取得します。

オプション1：BrowserBase MCPサーバーのホストされたリモートサーバーを使用する（最も簡単）

セットアップの手間を省きたい場合は、ホストされたオプションが便利です。方法は次のとおりです。

Smitheryにアクセスする: smithery.aiにアクセスして、APIキーとリモートMCP URLを取得します。

AIクライアントを設定する: 取得したURLをAIクライアントのMCP設定に追加します。例えば、Claude Desktopでは、claude_desktop_config.jsonに次のように追加します。

{
  "mcpServers": {
    "browserbase": {
      "url": "https://your-smithery-url.com"
    }
  }
}

あるいは、mcp-remote CLIを使用している場合：

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-smithery-url.com"]
    }
  }
}

クライアントを再起動する: 変更を適用するために、AIクライアントを閉じて再度開きます。

これで完了です！あなたのAIは、Browserbase MCPサーバーを通じてChromeブラウザを制御できるようになりました。

オプション2：NPMでBrowserBase MCPサーバーを実行する（推奨）

これは、ほとんどのMCPクライアントとの互換性があるため、推奨されるアプローチです。MCP設定JSONファイルに移動し、Browserbaseサーバーの設定を貼り付けます。

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

オプション3：BrowserBase MCPサーバーをローカルにインストールして実行する（完全な制御のため）

内部をいじりたいですか？サーバーをローカルで実行すると、より柔軟性が得られます。方法は次のとおりです。

リポジトリをクローンする:

ターミナルを開き、以下を実行します。

git clone https://github.com/browserbase/mcp-server-browserbase.git
cd mcp-server-browserbase

依存関係をインストールする:

pnpmがインストールされていることを確認してください。次に、以下を実行します。

pnpm install && pnpm build

サーバーを起動する:

STDIOまたはHTTPトランスポートを使用してサーバーを実行できます。
STDIO（ローカルプロセス）の場合：
MCPクライアント設定に以下を追加します。

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

HTTPトランスポートの場合：
以下でサーバーを起動します。

node cli.js --port 3000

クライアントをhttp://localhost:3000に接続するように設定します。

APIキーを追加する: 設定内のプレースホルダーを、実際のBrowserbaseおよびモデルのAPIキーに置き換えます。

クライアントを再起動する: 前と同様に、AIクライアントを再起動してサーバーを有効にします。

サーバーのカスタマイズ

Browserbase MCPサーバーは、その動作を調整するためのフラグを提供します。いくつか便利なものを紹介します。

--proxies: プライバシー保護のためにBrowserbaseプロキシを有効にします。
--advancedStealth: 検出を避けるためにステルスモードを使用します（スケールプランが必要）。
--browserWidth および --browserHeight: ブラウザウィンドウのサイズを設定します。
--modelName: Stagehandに別のAIモデルを選択します。

これらのフラグは、MCP設定のargs配列に追加できます。例えば：

"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]

Browserbase MCPサーバーを使用してChromeを制御する方法

サーバーのセットアップが完了したので、早速使ってみましょう！Browserbase MCPサーバーを使用してChromeブラウザを制御する方法は次のとおりです。

ステップ1：AIクライアントを接続する

AIクライアント（Claude DesktopやCursorなど）が、上記の3つの方法のいずれかを使用してBrowserbase MCPサーバーに接続されていることを確認してください。

ステップ2：コマンドを与える

AIクライアントで、自然言語コマンドを発行してブラウザを制御できるようになりました。いくつか例を挙げます。

URLに移動する:

https://example.com

ボタンをクリックする:

「『サインアップ』ボタンをクリック」

フォームに入力する:

user@example.com

スクリーンショットを撮る:

「ホームページのスクリーンショットを撮る」

データを抽出する:

「このページからすべての製品タイトルを抽出」

AIは、これらのプロンプトをBrowserbase MCPサーバーを使用してブラウザアクションに変換します。

ステップ3：結果を確認する

コマンドに応じて、AIは次のような結果を返します。

アクションの確認（例：「https://example.comに移動しました」）
抽出されたデータ（例：製品タイトルのリスト）
スクリーンショット（設定に応じて、保存または表示）

例えば、スクリーンショットを要求した場合、AIは次のように応答するかもしれません。

「スクリーンショットがキャプチャされ、『homepage.png』として保存されました」

Browserbase MCPサーバーのテスト

実際の例でテストしてみましょう。ウェブサイトでの検索を自動化したいとします。

AIクライアントを開く: この例では、Claude Desktopを使用します。
コマンドを発行する:

https://google.com

3. ブラウザを観察する: HTTPトランスポートでローカルで実行している場合、ブラウザが開き、アクションを実行するのを見ることができるかもしれません。

4. 応答を確認する: Claudeはアクションを確認し、おそらくページタイトルやコンテンツを抽出するでしょう。

この簡単なテストは、Browserbase MCPサーバーがAIにChromeを制御させてウェブタスクを実行させる方法を示しています。

トラブルシューティングのヒント

サーバーが起動しない場合？ 正しいAPIキーを持っていること、そしてpnpm buildが正常に完了したことを確認してください。
クライアントが接続しない場合？ MCP設定を再確認し、AIクライアントを再起動してください。
アクションが機能しない場合？ ウェブサイトの構造を確認してください。一部のサイトでは、高度なステルス機能やプロキシが必要な場合があります。
モデルの問題？ モデルのAPIキーが有効であり、モデルが必要な機能をサポートしていることを確認してください。

結論

これで完了です！Browserbase MCPサーバーを使用してAIでChromeブラウザを制御する方法を学びました。シンプルさのためにホスト型を選択したか、制御のためにnpmまたはローカルセットアップを選択したかにかかわらず、あなたは今やプロのようにウェブタスクを自動化する準備ができています。Browserbase MCPサーバーは、AIとウェブ自動化を組み合わせる強力なツールであり、イノベーションのための無限の可能性を切り開きます。

さらに探求する準備はできましたか？日々のウェブタスクを自動化したり、次のAIプロジェクトに統合したりしてみてください。

💡

button