Browserbase - LLMエージェント向けクラウドブラウザでWebスクレイピングを革新

LLMエージェントの普及に伴い、Web上の情報収集や操作を自動化する需要が急速に拡大しています。Browserbaseは、こうしたエージェント専用に設計されたクラウドブラウザインフラとして、従来のスクレイピング環境が抱えていた課題を解決します。本記事では、Browserbaseの特徴と実践的な利用方法を解説します。

Browserbaseとは

Browserbaseは、ヘッドレスブラウザをクラウド上で管理・実行するプラットフォームです。開発者は自前でブラウザインフラを構築・保守する必要がなく、APIを通じてブラウザセッションを起動し、Puppeteer/Playwright互換のエンドポイントに接続するだけで、スクレイピングや自動テストを実行できます。

主要な特徴

• Puppeteer/Playwright完全互換: 既存のコードをほぼそのまま移行可能
• キャプチャ対策: reCAPTCHA等の検出を回避するフィンガープリント管理
• セッション永続化: ログイン状態やCookieを複数実行間で保持
• 並列スケーリング: 数百セッションを同時起動し、大規模な収集タスクに対応
• 統合ロギング: スクリーンショット・コンソールログ・ネットワーク履歴を自動記録
• LLM統合: LangChain・Firecrawl等のエージェントフレームワークと公式統合

なぜBrowserbaseが必要か

従来、ヘッドレスブラウザを本番環境で運用するには以下の課題がありました。

従来の課題

1. インフラ管理のコスト: ChromiumやFirefoxのバイナリ更新、メモリ管理、並列実行制御を自前で実装
2. キャプチャ対策の複雑さ: 各種bot検出技術に対抗するため、フィンガープリント・プロキシ・ユーザーエージェント管理が必須
3. セッション管理: ログイン後のCookieやLocalStorageを保持し、複数タスク間で再利用する仕組みが必要
4. デバッグの困難さ: 本番環境で失敗したセッションを再現・調査するのが難しい

Browserbaseはこれらをすべてマネージドサービスとして提供し、開発者はビジネスロジックの実装に集中できます。

アーキテクチャ

flowchart TB
    subgraph Client["開発者環境"]
        A1["Puppeteer/Playwright<br/>スクリプト"]
        A2["LangChain<br/>エージェント"]
    end

    subgraph Browserbase["Browserbase Cloud"]
        B1["Session Manager"]
        B2["Headless Browser Pool"]
        B3["Fingerprint Manager"]
        B4["Session Storage"]
        B5["Logging & Replay"]
    end

    A1 -->|"WebSocket (CDP)"| B1
    A2 -->|"REST API"| B1
    B1 --> B2
    B2 --> B3
    B2 --> B4
    B2 --> B5

• Session Manager: セッションのライフサイクル（作成・接続・終了）を管理
• Headless Browser Pool: 複数のChromiumインスタンスを並列実行
• Fingerprint Manager: User-Agent・Canvas・WebGL等のフィンガープリントをランダム化
• Session Storage: CookieやLocalStorageを暗号化して保存し、次回実行時に復元
• Logging & Replay: 各セッションのスクリーンショット・コンソールログ・ネットワーク履歴をダッシュボードで閲覧可能

基本的な使い方

インストール

# PuppeteerまたはPlaywrightをインストール
npm install puppeteer-core @browserbasehq/sdk
# または
npm install playwright-core @browserbasehq/sdk

Puppeteerでの接続例

import { Browserbase } from '@browserbasehq/sdk';
import puppeteer from 'puppeteer-core';

const bb = new Browserbase({
  apiKey: process.env.BROWSERBASE_API_KEY,
});

// セッションを作成
const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID,
});

// Puppeteerで接続
const browser = await puppeteer.connect({
  browserWSEndpoint: session.connectUrl,
});

const page = await browser.newPage();
await page.goto('https://example.com');

// スクレイピング処理
const title = await page.title();
console.log('Page title:', title);

await browser.close();

Playwrightでの接続例

import { Browserbase } from '@browserbasehq/sdk';
import { chromium } from 'playwright-core';

const bb = new Browserbase({
  apiKey: process.env.BROWSERBASE_API_KEY,
});

const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID,
  keepAlive: true, // セッション永続化
});

const browser = await chromium.connectOverCDP(session.connectUrl);
const context = browser.contexts()[0];
const page = context.pages()[0];

await page.goto('https://example.com/login');
await page.fill('input[name="email"]', 'user@example.com');
await page.fill('input[name="password"]', 'password123');
await page.click('button[type="submit"]');

// ログイン後のCookieが自動保存される
await browser.close();

LLMエージェントとの統合

BrowserbaseはLangChain・Firecrawl等のフレームワークと公式統合しており、自然言語指示に基づいてWebページを操作するエージェントを簡単に構築できます。

LangChainとの統合例

import { ChatOpenAI } from '@langchain/openai';
import { createReactAgent } from '@langchain/langgraph/prebuilt';
import { BrowserbaseTool } from '@browserbasehq/langchain';

// Browserbaseツールを初期化
const browserTool = new BrowserbaseTool({
  apiKey: process.env.BROWSERBASE_API_KEY,
  projectId: process.env.BROWSERBASE_PROJECT_ID,
});

// エージェントを作成
const agent = createReactAgent({
  llm: new ChatOpenAI({ model: 'gpt-4o' }),
  tools: [browserTool],
});

// 自然言語でタスクを指示
const result = await agent.invoke({
  messages: [
    {
      role: 'user',
      content: 'Go to example.com and extract all article titles from the homepage',
    },
  ],
});

console.log(result.output);

このコードは、LLMがBrowserbaseを通じてブラウザを操作し、指定されたタスクを実行します。

並列実行とスケーリング

Browserbaseは、複数セッションを同時実行することで、大量のページを短時間で処理できます。

並列スクレイピング例

import { Browserbase } from '@browserbasehq/sdk';
import puppeteer from 'puppeteer-core';

const bb = new Browserbase({
  apiKey: process.env.BROWSERBASE_API_KEY,
});

const urls = [
  'https://example.com/page1',
  'https://example.com/page2',
  'https://example.com/page3',
  // ... 100個のURL
];

// 各URLを並列で処理
const results = await Promise.all(
  urls.map(async (url) => {
    const session = await bb.sessions.create({
      projectId: process.env.BROWSERBASE_PROJECT_ID,
    });

    const browser = await puppeteer.connect({
      browserWSEndpoint: session.connectUrl,
    });

    const page = await browser.newPage();
    await page.goto(url);
    const title = await page.title();

    await browser.close();

    return { url, title };
  })
);

console.log(results);

セッション永続化の活用

ログインが必要なサイトでは、セッションを保持することで毎回認証する手間を省けます。

セッション再利用の例

// 初回: ログインしてセッションを保存
const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID,
  keepAlive: true,
});

const browser = await puppeteer.connect({
  browserWSEndpoint: session.connectUrl,
});

const page = await browser.newPage();
await page.goto('https://example.com/login');
// ログイン処理...
await browser.close();

console.log('Session ID:', session.id); // セッションIDを保存

// 2回目以降: 同じセッションIDで接続
const existingSession = await bb.sessions.retrieve(session.id);
const browserReconnect = await puppeteer.connect({
  browserWSEndpoint: existingSession.connectUrl,
});

const pageReconnect = (await browserReconnect.pages())[0];
await pageReconnect.goto('https://example.com/dashboard');
// ログイン状態が維持されている

BrowserbaseとFirecrawlの比較

Browserbaseと似た用途で使われるサービスにFirecrawlがあります。両者の違いを理解しておくと、適切なツールを選択できます。

動的なフォーム入力やログインが必要ならBrowserbase、単にコンテンツを取得するだけならFirecrawlが適しています。

デバッグとロギング

Browserbaseは、各セッションの実行履歴をダッシュボードで確認できます。

ダッシュボードで確認できる情報

• スクリーンショット: ページ遷移ごとの画面キャプチャ
• コンソールログ: console.logやエラーメッセージ
• ネットワーク履歴: すべてのHTTPリクエスト・レスポンス
• セッションタイムライン: 各操作の実行時刻とステータス

// ログをプログラムから取得する例
const logs = await bb.sessions.logs(session.id);
console.log('Console logs:', logs.console);
console.log('Network requests:', logs.network);

料金と制限

Browserbaseはフリープランと有料プランを提供しています（具体的な価格は公式サイトで確認してください）。

フリープラン（目安）

• 月間セッション数: 限定的
• 並列実行数: 1〜2セッション
• セッション保持期間: 短期間

有料プラン（目安）

• 月間セッション数: 無制限または大量
• 並列実行数: 数十〜数百セッション
• セッション保持期間: 長期間
• サポート: 優先サポート

実践的なユースケース

1. 価格監視ボット

ECサイトの商品価格を定期的に取得し、変動を通知するボットを構築できます。

// 毎日特定商品の価格をチェック
const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID,
  keepAlive: true,
});

const browser = await puppeteer.connect({
  browserWSEndpoint: session.connectUrl,
});

const page = await browser.newPage();
await page.goto('https://example-shop.com/product/123');

const price = await page.$eval('.price', (el) => el.textContent);
console.log('Current price:', price);

// 価格が閾値を下回ったら通知
if (parseFloat(price) < 100) {
  // 通知処理（メール・Slack等）
}

await browser.close();

2. 競合分析

競合サイトのコンテンツを定期的に収集し、トレンドを分析します。

const competitors = ['https://competitor1.com', 'https://competitor2.com'];

const data = await Promise.all(
  competitors.map(async (url) => {
    const session = await bb.sessions.create({
      projectId: process.env.BROWSERBASE_PROJECT_ID,
    });

    const browser = await puppeteer.connect({
      browserWSEndpoint: session.connectUrl,
    });

    const page = await browser.newPage();
    await page.goto(url);

    const articles = await page.$$eval('.article-title', (elements) =>
      elements.map((el) => el.textContent)
    );

    await browser.close();

    return { url, articles };
  })
);

console.log('Competitor content:', data);

3. E2Eテスト自動化

実際のブラウザ環境でE2Eテストを実行し、本番環境に近い条件でテストできます。

// CIパイプライン内でBrowserbaseを使用
const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID,
});

const browser = await puppeteer.connect({
  browserWSEndpoint: session.connectUrl,
});

const page = await browser.newPage();
await page.goto('https://staging.example.com');

// テストシナリオ
await page.click('#login-button');
await page.waitForSelector('#dashboard');

const isLoggedIn = await page.$('#user-profile');
if (!isLoggedIn) {
  throw new Error('Login test failed');
}

await browser.close();

まとめ

Browserbaseは、LLMエージェント時代のWebスクレイピング・自動化を支える強力なインフラです。従来のヘッドレスブラウザ運用で必要だったインフラ管理・キャプチャ対策・セッション管理を完全にマネージドサービス化し、開発者はビジネスロジックに集中できます。

Browserbaseを選ぶべきケース

• LLMエージェントにWeb操作タスクを任せたい
• ログインや複雑なフォーム入力が必要
• 並列実行で大量のページを短時間で処理したい
• セッションを再利用してログイン手間を削減したい
• デバッグ・ロギング機能が充実したプラットフォームを求めている

BrowserbaseはPuppeteer/Playwright互換のため、既存のスクレイピングコードをほぼそのまま移行でき、数行の変更でクラウド上のスケーラブルな環境で実行できます。LLMエージェントの普及により、Web自動化の需要はさらに拡大すると予想され、Browserbaseはその中核を担うプラットフォームとして注目されています。

関連記事

• Firecrawl - LLM向けWebスクレイピングAPI
• Cloudflare Workers 2026 - エッジコンピューティング最新動向