Browser Cloud API nutzen: Anleitung und Tipps

Dieses Tutorial führt Sie durch alles, was Sie wissen müssen, um die Leistungsfähigkeit der KI-gesteuerten Browser-Automatisierung zu nutzen. Egal, ob Sie Daten extrahieren, Ihre Webanwendungen testen oder komplexe Überwachungstools erstellen möchten, dieser Leitfaden liefert Ihnen das Wissen und die Beispiele, um loszulegen.

Was ist Browser Use Cloud?

Browser Use Cloud ist eine leistungsstarke Plattform, mit der Sie intelligente Browser-Automatisierungsagenten programmatisch erstellen und verwalten können. Stellen Sie sich vor, Sie hätten eine Flotte virtueller Assistenten, die im Web surfen, mit Websites interagieren und komplexe Aufgaben in Ihrem Namen ausführen können.

Im Kern der Plattform steht das Konzept einer "Aufgabe". Eine Aufgabe ist eine Reihe von Anweisungen, die Sie einem Agenten in natürlicher Sprache geben. Sie könnten einem Agenten zum Beispiel die Aufgabe geben: "Gehe zu hacker-news.com, finde die Top 5 Artikel und speichere deren Titel und URLs in einer Datei." Der Agent verwendet dann ein großes Sprachmodell (LLM), um diese Anweisungen in einer echten Browserumgebung zu verstehen und auszuführen.

Eines der aufregendsten Features von Browser Use Cloud ist die Echtzeit-Feedbackschleife. Jede von Ihnen erstellte Aufgabe wird mit einer live_url geliefert. Diese URL bietet eine Live-Vorschau dessen, was der Agent gerade tut. Sie können dem Agenten in Echtzeit beim Surfen zusehen und bei Bedarf sogar die Kontrolle übernehmen. Dies macht das Debugging und die Überwachung unglaublich intuitiv.

API-Schlüssel erhalten

Bevor Sie mit der Erstellung von Agenten beginnen können, benötigen Sie einen API-Schlüssel. Der API-Schlüssel authentifiziert Ihre Anfragen und verknüpft sie mit Ihrem Konto.

<Hinweis> Um Ihren API-Schlüssel zu erhalten, benötigen Sie ein aktives Abonnement für Browser Use Cloud. Sie können Ihr Abonnement verwalten und Ihren API-Schlüssel auf der Abrechnungsseite erhalten: cloud.browser-use.com/billing. </Hinweis>

Sobald Sie Ihren API-Schlüssel haben, bewahren Sie ihn sicher auf. Behandeln Sie ihn wie ein Passwort und geben Sie ihn niemals im Client-Side-Code preis oder speichern Sie ihn in der Versionskontrolle. Am besten speichern Sie ihn in einer sicheren Umgebungsvariable.

export BROWSER_USE_API_KEY="your_api_key_here"

Das Preismodell verstehen

Die Browser Use Cloud API hat ein einfaches Pay-as-you-go-Preismodell. Dies stellt sicher, dass Sie nur für das bezahlen, was Sie nutzen, was es sowohl für kleine als auch für große Projekte kostengünstig macht. Die Preisgestaltung besteht aus zwei Hauptteilen:

1. Kosten für die Aufgabeninitialisierung: Für jede gestartete Aufgabe wird eine Pauschalgebühr von $0,01 berechnet. Dies deckt die Kosten für das Hochfahren der Browserumgebung für Ihren Agenten ab.
2. Kosten pro Aufgabenschritt: Dies sind die Kosten für jede Aktion oder jeden "Schritt", den der Agent ausführt. Die Kosten pro Schritt hängen vom LLM ab, das Sie zur Steuerung Ihres Agenten wählen.

LLM-Schrittpreise

Verschiedene LLMs haben unterschiedliche Fähigkeiten und Preise. Sie können das Modell wählen, das am besten zu Ihren Anforderungen an Leistung und Kosten passt. Hier ist eine Aufschlüsselung der Kosten pro Schritt für jedes verfügbare Modell:

Beispiel für die Kostenberechnung

Stellen Sie sich vor, Sie möchten eine Aufgabe automatisieren, die das Anmelden auf einer Website, das Navigieren zu einer bestimmten Seite und das Extrahieren einiger Daten beinhaltet. Sie schätzen, dass dies etwa 15 Schritte dauern wird. Wenn Sie das leistungsstarke Modell GPT-4o verwenden, würden die Gesamtkosten wie folgt berechnet:

• Aufgabeninitialisierung: $0.01
• Aufgabenschritte: 15 Schritte × $0.03/Schritt = $0.45
• Gesamtkosten: $0.01 + $0.45 = $0.46

Diese transparente Preisgestaltung ermöglicht es Ihnen, Ihre Kosten effektiv vorherzusagen und zu kontrollieren.

Erstellung Ihres ersten Agenten: Ein "Hallo, Welt!" Beispiel

Nun zum spannenden Teil! Lassen Sie uns Ihren ersten Browser-Automatisierungsagenten erstellen. Wir beginnen mit einer sehr einfachen Aufgabe: Gehen Sie zu Google und suchen Sie nach "Browser Use".

Wir verwenden curl, um eine POST-Anfrage an den Endpunkt /api/v1/run-task zu senden. Dies ist der primäre Endpunkt zum Erstellen neuer Aufgaben.

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"
  }'

Lassen Sie uns diesen Befehl aufschlüsseln:

• curl -X POST ...: Wir senden eine HTTP POST-Anfrage an die angegebene URL.
• H "Authorization: Bearer $BROWSER_USE_API_KEY": Dies ist der Authentifizierungs-Header. Er enthält Ihren API-Schlüssel. Wir verwenden die zuvor festgelegte Umgebungsvariable.
• H "Content-Type: application/json": Dieser Header teilt der API mit, dass wir Daten im JSON-Format senden.
• d '{ "task": "..." }': Dies ist der Body unserer Anfrage. Das Feld task enthält die Anweisungen in natürlicher Sprache für unseren Agenten.

Die API-Antwort verstehen

Wenn Sie diese Anfrage senden, antwortet die API mit einem JSON-Objekt, das Informationen über die neu erstellte Aufgabe enthält. Hier ist ein Beispiel, wie diese Antwort aussehen könnte:

{
  "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: Dies ist eine eindeutige Kennung für Ihre Aufgabe. Sie verwenden diese ID, um die Aufgabe später zu verwalten (z. B. um sie anzuhalten, fortzusetzen oder zu stoppen).
• status: Dies gibt den aktuellen Status der Aufgabe an. Anfangs wird es running sein.
• live_url: Dies ist die URL für die Live-Vorschau. Kopieren Sie diese URL und fügen Sie sie in Ihren Browser ein, um Ihren Agenten in Aktion zu sehen!

Interaktive Live-Vorschauen

Die live_url ist eines der leistungsstärksten Features der Browser Use Cloud. Es ist nicht nur ein schreibgeschützter Videostream; es ist eine vollständig interaktive Sitzung.

Sie können die live_url direkt in Ihre eigenen Anwendungen einbetten, indem Sie ein iframe verwenden. Dies ermöglicht es Ihnen, benutzerdefinierte Dashboards und Überwachungstools zu erstellen, die eine Echtzeitansicht Ihrer Agenten enthalten.

Hier ist ein einfacher HTML-Schnipsel zum Einbetten der Live-Vorschau:

<!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>

Ersetzen Sie YOUR_LIVE_URL_HERE durch die live_url aus der API-Antwort. Wenn Sie diese HTML-Datei in einem Browser öffnen, sehen Sie den Bildschirm des Agenten. Sie können klicken, tippen und scrollen, genau wie beim Surfen auf Ihrem eigenen Computer. Dies ist unglaublich nützlich für:

• Debugging: Wenn ein Agent stecken bleibt, können Sie sofort sehen, warum und was auf seinem Bildschirm zu sehen ist.
• Manuelle Intervention: Wenn eine Aufgabe einen Schritt erfordert, der schwer zu automatisieren ist (wie das Lösen eines komplexen CAPTCHAs), können Sie die Kontrolle übernehmen, den Schritt manuell ausführen und den Agenten dann seine Arbeit fortsetzen lassen.
• Demonstrationen: Es ist eine großartige Möglichkeit, Stakeholdern zu zeigen, was Ihre Automatisierung tut.

Verwaltung des Aufgabenlebenszyklus

Sobald eine Aufgabe ausgeführt wird, haben Sie die volle Kontrolle über ihren Lebenszyklus. Sie können Aufgaben über die API anhalten, fortsetzen und stoppen. Für alle Verwaltungsoperationen benötigen Sie die task_id.

Anhalten und Fortsetzen einer Aufgabe

Es gibt viele Gründe, warum Sie eine Aufgabe anhalten möchten. Vielleicht müssen Sie die Webseite manuell überprüfen, oder Sie möchten auf ein externes Ereignis warten, bevor Sie fortfahren.

Um eine Aufgabe anzuhalten, senden Sie eine POST-Anfrage an den Endpunkt /api/v1/pause-task:

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"
  }'

Der Agent beendet seinen aktuellen Schritt und wechselt dann in den Status paused.

Um die Aufgabe fortzusetzen, senden Sie eine POST-Anfrage an den Endpunkt /api/v1/resume-task:

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"
  }'

Der Agent macht genau dort weiter, wo er aufgehört hat.

Stoppen einer Aufgabe

Wenn Sie eine Aufgabe dauerhaft beenden möchten, können Sie den Endpunkt /api/v1/stop-task verwenden. Dies ist nützlich, wenn die Aufgabe abgeschlossen ist, schiefgelaufen ist oder nicht mehr benötigt wird.

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"
  }'

<Hinweis> Sobald eine Aufgabe gestoppt wurde, kann sie nicht wieder aufgenommen werden. Die Browserumgebung wird zerstört und alle zugehörigen Ressourcen werden bereinigt. </Hinweis>

Erweiterte Aufgabenerstellung

Das "Hallo, Welt!" Beispiel war nur der Anfang. Der Endpunkt run-task unterstützt mehr als nur einen einfachen task-String. Sie können das Verhalten Ihres Agenten anpassen, indem Sie zusätzliche Parameter bereitstellen.

Auswahl eines LLM

Wie wir im Abschnitt zur Preisgestaltung gesehen haben, können Sie aus mehreren verschiedenen LLMs wählen, um Ihren Agenten zu steuern. Sie können das Modell in der run-task-Anfrage über den Parameter model angeben.

Um beispielsweise das Modell Claude 3.7 Sonnet zu verwenden, würden Sie die folgende Anfrage stellen:

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"
  }'

Wenn Sie kein Modell angeben, verwendet die API ein Standardmodell, das in der Regel eine kostengünstige und leistungsstarke Option wie GPT-4o mini ist.

Einen eigenen Client erstellen

Während curl für einfache Tests großartig ist, werden Sie die Browser Use Cloud API wahrscheinlich in Ihre Anwendungen integrieren wollen, indem Sie eine geeignete Client-Bibliothek verwenden. Der beste Weg, dies zu tun, ist die Verwendung unserer OpenAPI-Spezifikation zur Generierung eines typsicheren Clients.

Die OpenAPI-Spezifikation ist eine standardisierte Methode zur Beschreibung von REST-APIs. Unsere Spezifikation finden Sie hier: http://api.browser-use.com/openapi.json.

Python-Client-Generierung

Für Python-Entwickler empfehlen wir openapi-python-client. Es generiert einen modernen, async-first Client mit vollständigen Typ-Hints.

Installieren Sie zunächst das Generator-Tool:

# Wir empfehlen die Verwendung von pipx, um Ihre globale Umgebung sauber zu halten
pipx install openapi-python-client --include-deps

Generieren Sie nun den Client:

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

Dadurch wird ein neues Verzeichnis erstellt, das Ihr Python-Client-Paket enthält. Sie können es mit pip installieren:

pip install .

Jetzt können Sie den Client in Ihrem Python-Code verwenden:

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-Client-Generierung

Für Frontend- oder Node.js-Projekte ist openapi-typescript ein ausgezeichnetes Tool zur Generierung von TypeScript-Typdefinitionen aus der OpenAPI-Spezifikation.

Installieren Sie zunächst den Generator als Entwicklungsabhängigkeit:

npm install -D openapi-typescript

Führen Sie dann den Generator aus:

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

Dadurch wird eine einzelne Datei, src/browser-use-api.ts, erstellt, die alle Typdefinitionen für die API enthält. Sie können diese Typen dann mit Ihrem bevorzugten HTTP-Client, wie fetch oder axios, verwenden, um typsichere Anfragen zu stellen.

Hier ist ein Beispiel mit fetch in einem TypeScript-Projekt:

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();