ブラウザ利用クラウドAPIの使い方

このチュートリアルでは、AIを活用したブラウザ自動化の力を最大限に引き出すために知っておくべきことすべてを順を追って説明します。データ抽出の自動化、ウェブアプリケーションのテスト、洗練された監視ツールの作成など、どのような目的であっても、このガイドは開始するための知識と例を提供します。

💡

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

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

Apidogはこれらのすべての要望に応え、Postmanよりもはるかに手頃な価格で置き換えます！

button

Browser Use Cloudとは？

Browser Use Cloudは、インテリジェントなブラウザ自動化エージェントをプログラムで作成・管理できる強力なプラットフォームです。まるで、ウェブを閲覧したり、ウェブサイトとインタラクトしたり、あなたに代わって複雑なタスクを実行できる仮想アシスタントの集団を持っているかのように考えてください。

プラットフォームの中核にあるのは「タスク」の概念です。タスクとは、エージェントに自然言語で提供する一連の指示です。例えば、「hacker-news.comに行って、トップ5の記事を見つけ、そのタイトルとURLをファイルに保存してください」のようなタスクをエージェントに与えることができます。エージェントは、大規模言語モデル（LLM）を使用してこれらの指示を理解し、実際のブラウザ環境で実行します。

Browser Use Cloudの最もエキサイティングな機能の1つは、リアルタイムのフィードバックループです。作成するすべてのタスクにはlive_urlが付与されます。このURLは、エージェントが何をしているかのライブでインタラクティブなプレビューを提供します。エージェントがリアルタイムでブラウジングしている様子を見たり、必要に応じてコントロールを引き継ぐことさえできます。これにより、デバッグと監視が信じられないほど直感的になります。

APIキーの取得

エージェントの作成を開始する前に、APIキーが必要です。APIキーはリクエストを認証し、あなたのアカウントにリンクします。

<注意> APIキーを取得するには、Browser Use Cloudのアクティブなサブスクリプションが必要です。サブスクリプションの管理とAPIキーの取得は、請求ページ(cloud.browser-use.com/billing)で行えます。</注意>

APIキーを取得したら、安全に保管してください。パスワードのように扱い、クライアントサイドのコードで公開したり、バージョン管理にコミットしたりしないでください。安全な環境変数に保存するのが最善です。

export BROWSER_USE_API_KEY="your_api_key_here"

価格モデルの理解

Browser Use Cloud APIは、シンプルで従量課金制の価格モデルを採用しています。これにより、使用した分だけ支払うことができ、小規模プロジェクトから大規模プロジェクトまでコスト効率が高くなります。価格は主に2つの部分で構成されています。

タスク初期化コスト: 開始するすべてのタスクに対して、固定料金の$0.01が課金されます。これは、エージェントのためにブラウザ環境を起動するコストをカバーします。
タスクステップコスト: これは、エージェントが実行する各アクションまたは「ステップ」に対するコストです。ステップあたりのコストは、エージェントを動かすために選択したLLMによって異なります。

LLMステップ価格

異なるLLMは、異なる機能と価格帯を持っています。パフォーマンスとコストのニーズに最適なモデルを選択できます。利用可能な各モデルのステップあたりのコストの内訳は以下のとおりです。

モデル	ステップあたりのコスト
GPT-4o	$0.03
GPT-4.1	$0.03
Claude 3.7 Sonnet (2025-02-19)	$0.03
GPT-4o mini	$0.01
GPT-4.1 mini	$0.01
Gemini 2.0 Flash	$0.01
Gemini 2.0 Flash Lite	$0.01
Llama 4 Maverick	$0.01

コスト計算例

ウェブサイトにログインし、特定のページに移動してデータを抽出するタスクを自動化したいと想像してください。これには約15ステップかかると見積もります。強力なGPT-4oモデルを使用することを選択した場合、合計コストは次のように計算されます。

タスク初期化: $0.01
タスクステップ: 15ステップ × $0.03/ステップ = $0.45
合計コスト: $0.01 + $0.45 = $0.46

この透明性の高い価格設定により、コストを効果的に予測および制御できます。

最初のエージェントを作成する：「Hello, World!」の例

さて、いよいよエキサイティングな部分です！最初のブラウザ自動化エージェントを作成しましょう。Googleにアクセスして「Browser Use」を検索するという非常にシンプルなタスクから始めます。

curlを使用して、/api/v1/run-taskエンドポイントにPOSTリクエストを行います。これは新しいタスクを作成するための主要なエンドポイントです。

curl -X POST <https://api.browser-use.com/api/v1/run-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task": "Go to google.com and search for Browser Use"
  }'

このコマンドを分解してみましょう。

curl -X POST ...: 指定されたURLにHTTP POSTリクエストを送信しています。
H "Authorization: Bearer $BROWSER_USE_API_KEY": これは認証ヘッダーです。あなたのAPIキーが含まれています。以前に設定した環境変数を使用しています。
H "Content-Type: application/json": このヘッダーは、JSON形式でデータを送信することをAPIに伝えます。
d '{ "task": "..." }': これはリクエストのボディです。taskフィールドには、エージェントに対する自然言語の指示が含まれています。

APIレスポンスの理解

このリクエストを送信すると、APIは新しく作成されたタスクに関する情報を含むJSONオブジェクトで応答します。以下は、その応答がどのように見えるかの例です。

{
  "task_id": "ts_2a9b4e7c-1d0f-4g8h-9i1j-k2l3m4n5o6p7",
  "status": "running",
  "live_url": "<https://previews.browser-use.com/ts_2a9b4e7c-1d0f-4g8h-9i1j-k2l3m4n5o6p7>"
}

task_id: これはあなたのタスクの一意の識別子です。後でタスクを管理するためにこのIDを使用します（例：一時停止、再開、停止）。
status: これはタスクの現在の状態を示します。最初はrunningになります。
live_url: これはライブプレビューのURLです。このURLをブラウザにコピー＆ペーストして、エージェントの動作を確認してください！

インタラクティブなライブプレビュー

live_urlは、Browser Use Cloudの最も強力な機能の1つです。これは単なる読み取り専用のビデオストリームではなく、完全にインタラクティブなセッションです。

live_urlは、iframeを使用して独自のアプリケーションに直接埋め込むことができます。これにより、エージェントのリアルタイムビューを含むカスタムダッシュボードや監視ツールを構築できます。

ライブプレビューを埋め込むための簡単なHTMLスニペットを以下に示します。

<!DOCTYPE html>
<html>
<head>
  <title>Agent Live Preview</title>
  <style>
    body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
    iframe { width: 100%; height: 100%; border: none; }
  </style>
</head>
<body>
  <iframe src="YOUR_LIVE_URL_HERE"></iframe>
</body>
</html>

YOUR_LIVE_URL_HEREをAPIレスポンスのlive_urlに置き換えてください。このHTMLファイルをブラウザで開くと、エージェントの画面が表示されます。まるで自分のコンピューターでブラウジングしているかのように、クリック、入力、スクロールができます。これは、以下の場合に非常に役立ちます。

デバッグ: エージェントがスタックした場合、すぐにその理由と画面に何が表示されているかを確認できます。
手動介入: タスクが自動化が難しいステップ（複雑なCAPTCHAの解決など）を必要とする場合、コントロールを引き継ぎ、ステップを手動で完了させてから、エージェントに作業を再開させることができます。
デモンストレーション: ステークホルダーに自動化が何をしているかを示すのに最適な方法です。

タスクライフサイクルの管理

タスクが実行されると、そのライフサイクルを完全に制御できます。APIを使用してタスクを一時停止、再開、停止できます。すべての管理操作にはtask_idが必要です。

タスクの一時停止と再開

タスクを一時停止したい理由はたくさんあります。手動でウェブページを検査する必要がある場合や、続行する前に外部イベントが発生するのを待ちたい場合などです。

タスクを一時停止するには、/api/v1/pause-taskエンドポイントにPOSTリクエストを送信します。

curl -X POST <https://api.browser-use.com/api/v1/pause-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task_id": "YOUR_TASK_ID_HERE"
  }'

エージェントは現在のステップを完了し、paused状態に入ります。

タスクを再開するには、/api/v1/resume-taskエンドポイントにPOSTリクエストを送信します。

curl -X POST <https://api.browser-use.com/api/v1/resume-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task_id": "YOUR_TASK_ID_HERE"
  }'

エージェントは中断したところから再開します。

タスクの停止

タスクを完全に終了したい場合は、/api/v1/stop-taskエンドポイントを使用できます。タスクが完了した場合、問題が発生した場合、または不要になった場合に便利です。

curl -X POST <https://api.browser-use.com/api/v1/stop-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task_id": "YOUR_TASK_ID_HERE"
  }'

<注意> タスクが停止されると、再開できません。ブラウザ環境は破棄され、関連するすべてのリソースはクリーンアップされます。</注意>

高度なタスク作成

「Hello, World!」の例は始まりにすぎません。run-taskエンドポイントは、単純なtask文字列以上のものをサポートしています。追加のパラメータを提供することで、エージェントの動作をカスタマイズできます。

LLMの選択

価格セクションで見たように、エージェントを動かすためにいくつかの異なるLLMから選択できます。run-taskリクエストでmodelパラメータを使用してモデルを指定できます。

例えば、Claude 3.7 Sonnetモデルを使用するには、次のリクエストを行います。

curl -X POST <https://api.browser-use.com/api/v1/run-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task": "Go to reddit.com/r/programming and find the top post of the day.",
    "model": "claude-3.7-sonnet-20250219"
  }'

モデルを指定しない場合、APIはデフォルトのモデルを使用します。これは通常、GPT-4o miniのようなコスト効率が高くパフォーマンスの良いオプションです。

独自のクライアントの構築

curlは簡単なテストには便利ですが、Browser Use Cloud APIを適切なクライアントライブラリを使用してアプリケーションに統合したいと思うでしょう。これを行う最良の方法は、OpenAPI仕様を使用してタイプセーフなクライアントを生成することです。

OpenAPI仕様は、REST APIを記述するための標準化された方法です。当社の仕様はここで見つけることができます：http://api.browser-use.com/openapi.json。

Pythonクライアントの生成

Python開発者向けには、openapi-python-clientをお勧めします。これは、完全な型ヒントを備えた最新の非同期ファーストクライアントを生成します。

まず、ジェネレーターツールをインストールします。

# グローバル環境をきれいに保つためにpipxの使用をお勧めします
pipx install openapi-python-client --include-deps

次に、クライアントを生成します。

openapi-python-client generate --url <http://api.browser-use.com/openapi.json>

これにより、Pythonクライアントパッケージを含む新しいディレクトリが作成されます。pipを使用してインストールできます。

pip install .

これで、Pythonコードでクライアントを使用できます。

import asyncio
from browser_use_api import Client
from browser_use_api.models import RunTaskRequest

async def main():
    client = Client(base_url="<https://api.browser-use.com/api/v1>")
    request = RunTaskRequest(task="Go to ycombinator.com and list the top 3 companies.")

    response = await client.run_task.api_v1_run_task_post(
        client=client,
        json_body=request,
        headers={"Authorization": f"Bearer {YOUR_API_KEY}"}
    )

    if response:
        print(f"Task created with ID: {response.task_id}")
        print(f"Live URL: {response.live_url}")

if __name__ == "__main__":
    asyncio.run(main())

TypeScript/JavaScriptクライアントの生成

フロントエンドまたはNode.jsプロジェクトの場合、openapi-typescriptは、OpenAPI仕様からTypeScriptの型定義を生成するための優れたツールです。

まず、ジェネレーターを開発依存関係としてインストールします。

npm install -D openapi-typescript

次に、ジェネレーターを実行します。

npx openapi-typescript <http://api.browser-use.com/openapi.json> -o src/browser-use-api.ts

これにより、APIのすべての型定義を含む単一のファイルsrc/browser-use-api.tsが作成されます。これらの型を、fetchやaxiosなど、お好みのHTTPクライアントと組み合わせて、タイプセーフなリクエストを行うことができます。

TypeScriptプロジェクトでfetchを使用した例を以下に示します。

import { paths } from './src/browser-use-api';

const API_URL = "<https://api.browser-use.com/api/v1>";

type RunTaskRequest = paths["/run-task"]["post"]["requestBody"]["content"]["application/json"];
type RunTaskResponse = paths["/run-task"]["post"]["responses"]["200"]["content"]["application/json"];

async function createTask(task: string, apiKey: string): Promise<RunTaskResponse> {
  const body: RunTaskRequest = { task };

  const response = await fetch(`${API_URL}/run-task`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`,
    },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    throw new Error(`API request failed with status ${response.status}`);
  }

  return response.json() as Promise<RunTaskResponse>;
}

async function run() {
  const apiKey = process.env.BROWSER_USE_API_KEY;
  if (!apiKey) {
    throw new Error("API key not found in environment variables.");
  }

  try {
    const result = await createTask("Find the current weather in New York City.", apiKey);
    console.log("Task created:", result);
  } catch (error) {
    console.error("Failed to create task:", error);
  }
}

run();

💡

button