Browserbase Functions

公式の bb CLI を使用して、サーバーレス ブラウザ自動化をデプロイします。

前提条件

API キーとプロジェクト ID を以下から取得します: https://browserbase.com/settings

export BROWSERBASE_API_KEY="your_api_key"
export BROWSERBASE_PROJECT_ID="your_project_id"

Function プロジェクトの作成

1. 初期化

pnpm dlx @browserbasehq/sdk-functions init my-function
cd my-function

以下のファイルが作成されます:

my-function/
├── package.json
├── index.ts        # Function コード
└── .env            # 認証情報をここに追加

2. .env に認証情報を追加

echo "BROWSERBASE_API_KEY=$BROWSERBASE_API_KEY" >> .env
echo "BROWSERBASE_PROJECT_ID=$BROWSERBASE_PROJECT_ID" >> .env

3. 依存関係をインストール

pnpm install

Function の構造

import { defineFn } from "@browserbasehq/sdk-functions";
import { chromium } from "playwright-core";

defineFn("my-function", async (context) => {
  const { session, params } = context;

  // ブラウザに接続
  const browser = await chromium.connectOverCDP(session.connectUrl);
  const page = browser.contexts()[0]!.pages()[0]!;

  // 自動化処理
  await page.goto(params.url || "https://example.com");
  const title = await page.title();

  // JSON シリアライズ可能な結果を返す
  return { success: true, title };
});

主要オブジェクト:

• context.session.connectUrl - Playwright を接続する CDP エンドポイント
• context.params - 呼び出しからの入力パラメータ

開発ワークフロー

1. Dev サーバーを起動

pnpm bb dev index.ts

サーバーは http://127.0.0.1:14113 で実行されます

2. ローカルでテスト

curl -X POST http://127.0.0.1:14113/v1/functions/my-function/invoke \
  -H "Content-Type: application/json" \
  -d '{"params": {"url": "https://news.ycombinator.com"}}'

3. 反復開発

Dev サーバーはファイル変更時に自動リロードされます。デバッグには console.log() を使用してください - 出力はターミナルに表示されます。

デプロイ

pnpm bb publish index.ts

出力:

Function published successfully
Build ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Function ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Function ID を保存してください - 呼び出すときに必要です。

クイックリファレンス

コマンド	説明
pnpm dlx @browserbasehq/sdk-functions init <name>	新しいプロジェクトを作成
pnpm bb dev <file>	ローカル dev サーバーを起動
pnpm bb publish <file>	Browserbase にデプロイ

呼び出しの例、一般的なパターン、トラブルシューティングについては、REFERENCE.md を参照してください。