Stagehand mit Bright Data’s Browser API für skalierbare Cloud-Browser-Automatisierung integrieren

Integrieren Sie Stagehand mit Bright Data’s Browser API, um die Browser-Automatisierung mit KI zu skalieren und dabei Stealth und Zuverlässigkeit in der Cloud zu gewährleisten.
5 min lesen
Stagehand with Bright Data's Browser API

In diesem Blogbeitrag erfahren Sie:

  • Was Stagehand ist und was es für die Browser-Automatisierung bietet.
  • Die Vorteile der gemeinsamen Nutzung von Stagehand mit cloudbasierten Stealth-Browser-Sitzungen über Bright Data’s Browser API.
  • Eine Schritt-für-Schritt-Anleitung zur Einrichtung der Browser API in Stagehand.

Los geht’s!

Was ist Stagehand?

Stagehand ist ein Open-Source-Framework für Browser-Automatisierung, das von Browserbase entwickelt wurde. Es kombiniert natürlichsprachliche KI mit deterministischem Code. Es löst den Kompromiss zwischen fehleranfälligen selectorbasierten Tools (wie Playwright) und unvorhersehbaren KI-Agenten, indem es Ihnen ermöglicht, selbst zu wählen, wann welcher Ansatz verwendet wird.

Es funktioniert, indem es Anweisungen in Browser-Aktionen und strukturierte Ausgaben übersetzt, unter Verwendung eines zugrunde liegenden LLM und einer kontrollierten Ausführungsschicht. Stagehand unterstützt auch die Entwicklung browserbasierter KI-Agenten.

Wachstum der GitHub-Sterne von Stagehand im Zeitverlauf

Es verfügt auch über Funktionen, die es als KI-Web-Scraping-Tool einsetzen lassen. Stagehand wird von einer großen Entwickler-Community unterstützt, mit über 22.900 Sternen auf GitHub und über 1 Million wöchentlichen Downloads auf npm.

Stagehand-Funktionen

Die wichtigsten von Stagehand bereitgestellten Funktionen sind:

  • act()-Ausführung: Browser-Aktionen wie Klicken, Scrollen und Ausfüllen von Formularen mit einfachen Textanweisungen durchführen.
  • extract() strukturierte Daten: Seiteninhalt in streng Zod-validierte Schemata extrahieren für zuverlässige Weiterverarbeitung.
  • observe() Seitenbewusstsein: Aktionsfähige Elemente auf einer Seite erkennen, bevor Operationen ausgeführt werden, was Sicherheit und Präzision verbessert.
  • agent() autonome Workflows: Mehrstufige Browser-Aufgaben mit minimaler Überwachung von Anfang bis Ende ausführen.
  • Selbstheilende Automatisierung: Passt sich an UI-Änderungen an und reduziert fehleranfällige selectorbasierte Ausfälle.
  • Aktions-Caching: Redundante LLM-Aufrufe durch Caching von Aktionen vermeiden und so eine hochgradig vorhersehbare und budgetbewusste Ausführung über mehrere Durchläufe hinweg sicherstellen.
  • LLM-Flexibilität: Funktioniert mit mehreren Anbietern und hält die Ausführung dabei deterministisch und debuggbar.
  • Kombinierbare Grundbausteine: act, extract, observe und agent kombinieren, um individuelle Automatisierungs-Pipelines zu erstellen.
  • Entwicklerorientiertes Tooling: Konzipiert für Wartbarkeit, Reproduzierbarkeit und Integration in moderne KI-Systeme.

Mehr dazu in der offiziellen Dokumentation.

Warum Stagehand mit Bright Data’s Browser API kombinieren

Browser-Automatisierungstools wie Stagehand stoßen auf dieselben grundlegenden Probleme:

  1. Websites blockieren aktiv automatisierten Traffic mithilfe von Bot-Erkennungssystemen, CAPTCHAs, Fingerprinting und IP-Reputationsprüfungen. Das macht Automatisierungen fragil, da ein Skript im Test funktionieren, in der Produktion aber unvorhersehbar scheitern kann.
  2. Viele Browser-Instanzen lokal oder auf selbst verwalteter Infrastruktur zu betreiben, ist ressourcenintensiv. Browser benötigen erhebliche CPU- und Arbeitsspeicherressourcen. Das macht den gleichzeitigen Betrieb vieler Instanzen kostspielig und schwer skalierbar.
  3. Die Verwaltung von Proxys und Geo-Verteilung erzeugt operativen Mehraufwand. Mit der Zeit wird diese Komplexität für produktionsreife Scraping- oder KI-Agenten-Workloads schwer zu warten.
Bright Data's Browser API

Bright Data’s Browser API löst diese Probleme, indem die lokale Browser-Ausführung auf eine vollständig verwaltete, cloudbasierte Infrastruktur verlagert wird, die für Skalierung und Stealth ausgelegt ist.

Anstatt Browser lokal zu verwalten, können Sie sich über einen einzigen CDP-Endpunkt verbinden. Sie erhalten Zugriff auf remote, vorkonfigurierte Browser mit integrierter Proxy-Rotation, CAPTCHA-Lösung und erweiterter Fingerprinting-Umgehung.

Was Bright Data auszeichnet, ist seine Unternehmensarchitektur, die von einem Proxy-Netzwerk mit über 400 Millionen Residential-IPs unterstützt wird. Dies ermöglicht hohe Anonymität, globales Geo-Targeting und unbegrenzte Parallelität bei einer Erfolgsrate von 99,95 % und einer SLA-gesicherten Verfügbarkeit von 99,99 %.

So integrieren Sie Stagehand mit der Browser API

In diesem Kapitel erfahren Sie, wie Sie Stagehand zur Automatisierung von Remote-Browser-Instanzen einsetzen. Im Detail verbinden Sie sich mit Stealth-Anti-Detect-Browser-Sitzungen, die über Bright Data’s Browser API unbegrenzt skalierbar in der Cloud bereitgestellt werden.

Folgen Sie den nachstehenden Anweisungen.

Voraussetzungen

Um diesem Tutorial-Abschnitt folgen zu können, stellen Sie sicher, dass Sie Folgendes haben:

Schritt #1: Das Stagehand-Projekt initialisieren

Richten Sie ein neues Stagehand-Projekt ein, indem Sie der Schnellstartanleitung folgen. Alternativ führen Sie den folgenden Befehl aus:

npx create-browser-app bright-data-stagehand-example

Der npx create-browser-app-Befehl erstellt ein neues Stagehand-Projekt im Verzeichnis bright-data-stagehand-example.

Nach der Ausführung sollten Sie Folgendes erhalten:

Die Ausgabe des Befehls 'npx create-browser-app'

Wechseln Sie anschließend in das Projektverzeichnis:

cd bright-data-stagehand-example

Ihre Projektstruktur sollte wie folgt aussehen:

bright-data-stagehand-example/
├── .cursorrules
├── .env.example
├── claude.md
├── index.ts
├── package.json
├── README.md
└── tsconfig.json

Nehmen Sie sich ein paar Minuten Zeit, um die generierten Dateien zu erkunden und sich mit der Projektstruktur vertraut zu machen. Konzentrieren Sie sich auf index.ts, die Hauptdatei von Stagehand.

Bereinigen Sie nun die Datei index.ts, sodass nur Folgendes übrig bleibt:

import { Stagehand } from "@browserbasehq/stagehand";

Sie werden gleich sehen, wie Sie Stagehand mit Bright Data’s Browser API verbinden. Gut gemacht!

Schritt #2: Lesen von Umgebungsvariablen konfigurieren

Ihr Stagehand-Cloud-Automatisierungsprojekt benötigt einige Geheimnisse (z. B. KI-Anbieter-API-Schlüssel, Bright Data Browser API-Anmeldedaten usw.). Anstatt sie im Code fest einzuprogrammieren, ist es Best Practice, sie aus Umgebungsvariablen zu laden.

Standardmäßig lädt Stagehand .env-Dateien nicht automatisch. Um das zu aktivieren, installieren Sie zunächst das `dotenv-Paket:

npm install dotenv

Fügen Sie anschließend in index.ts Folgendes hinzu:

import dotenv from "dotenv";

dotenv.config({
  path: ".env",
});

Nun müssen Sie eine .env-Datei definieren. Sie können sie erstellen, indem Sie die beim Ausführen von npx create-browser-app generierte .env.example-Datei kopieren. Andernfalls fügen Sie Ihrem Stagehand-Projekt manuell eine .env-Datei hinzu:

bright-data-stagehand-example/
├── .cursorrules
├── .env           # <---------
├── .env.example
├── claude.md
├── index.ts
├── package.json
├── README.md
└── tsconfig.json

Befüllen Sie die .env-Datei mit Ihrem KI-Anbieter-API-Schlüssel (in diesem Fall OpenAI):

OPENAI_API_KEY="<YOUR_OPENAI_API_KEY>"

Ersetzen Sie den Platzhalter <YOUR_OPENAI_API_KEY> durch Ihren tatsächlichen OpenAI-API-Schlüssel.

Stagehand liest den OPENAI_API_KEY automatisch zur Laufzeit aus, sodass keine zusätzliche Konfiguration erforderlich ist. Ausgezeichnet!

Schritt #3: Mit Bright Data Browser API starten

Jetzt ist es Zeit, die CDP-basierte Remote-Verbindungs-URL für die Bright Data Browser API abzurufen.

Falls noch nicht geschehen, erstellen Sie ein Bright Data-Konto. Andernfalls melden Sie sich an und rufen Sie das Kontrollfeld auf:

Das Bright Data-Kontrollfeld

Navigieren Sie anschließend im linken Menü zur Option ‘Web Access > Web Access API’:

Navigation zur Seite 'Web Access API'

Wenn Sie in der Tabelle ‘My APIs’ bereits einen Browser API-Eintrag sehen (wie unten, über die browser_api-API), können Sie direkt loslegen:

Beachten Sie die API namens 'browser_api' vom Typ Browser API

Andernfalls klicken Sie auf das Dropdown-Menü der Schaltfläche ‘Create API’ und wählen Sie ‘Browser API’:

Erstellen einer neuen Browser API

Dadurch wird der Browser API-Einrichtungsassistent gestartet. Geben Sie Ihrer Browser API einen Namen (z. B. browser_api) und konfigurieren Sie die API nach Ihren Bedürfnissen:

Einrichten einer Browser API

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche ‘Add API’. Rufen Sie die Detailseite der Browser API auf:

Die Detailseite der Browser API

Hier finden Sie die Verbindungsdetails für CDP-basierte Integrationen (die URL unter ‘Puppeteer / Playwright’). Die Browser API WebSocket-URL hat folgendes Format:

wss://<BROWSER_API_USERNAME>:<BROWSER_API_USERNAME>@brd.superproxy.io:9222

Kopieren Sie den Browser API-Benutzernamen und das Passwort von der Browser API-Seite und fügen Sie sie Ihrer .env-Datei hinzu:

BRIGHT_DATA_BROWSER_API_USERNAME="<BROWSER_API_USERNAME>"
BRIGHT_DATA_BROWSER_API_PASSWORD="<BROWSER_API_PASSWORD>"

Sie werden diese Variablen später in index.ts verwenden, um die Remote-CDP-Verbindungs-URL zu erstellen.

Sie haben nun alle Bausteine, die für die Cloud-Browser-Automatisierung mit Stagehand über die Bright Data Browser API benötigt werden. Ausgezeichnet!

Schritt #4: In Stagehand mit der Bright Data Browser API verbinden

Lesen Sie in index.ts zunächst die Browser API-Anmeldedaten aus Ihren Umgebungsvariablen aus:

const BRIGHT_DATA_BROWSER_API_USERNAME = process.env.BRIGHT_DATA_BROWSER_API_USERNAME || "";
const BRIGHT_DATA_BROWSER_API_PASSWORD = process.env.BRIGHT_DATA_BROWSER_API_PASSWORD || "";

Initialisieren Sie Stagehand anschließend innerhalb einer main()-Funktion für die Verbindung mit der Bright Data Browser API über die CDP-WebSocket-URL:

async function main() {
  // configure Stagehand to connect remotely to Bright Data's Browser API
  // and use an OpenAI model
  const stagehand = new Stagehand({
    env: "LOCAL",
    localBrowserLaunchOptions: {
      cdpUrl: `wss://${BRIGHT_DATA_BROWSER_API_USERNAME}:${BRIGHT_DATA_BROWSER_API_PASSWORD}@brd.superproxy.io:9222`,
    },
    model: "openai/gpt-5.4-mini",
  });

  // launch Stagehand and get the browser page
  await stagehand.init();
  const page = stagehand.context.pages()[0];
 
  // browser automation logic...

  // close the Stagehand instance and release the browser resources
  await stagehand.close();
}

main().catch(console.error);  

Der obige Ausschnitt konfiguriert Stagehand mit der authentifizierten Browser API WSS-URL, die aus den aus den Umgebungsvariablen gelesenen Anmeldedaten aufgebaut wird. Anschließend startet es eine Remote-Browser-Sitzung und stellt ein Seitenobjekt für die Automatisierung bereit. Nach der Ausführung Ihrer Automatisierungslogik wird die Sitzung beendet und alle Remote-Browser-Ressourcen werden freigegeben.

Im obigen Beispiel haben wir OpenAI GPT-5.4 Mini konfiguriert. Beachten Sie, dass auch jedes andere OpenAI-Modell (oder eine unterstützte KI-Anbieter-Konfiguration) funktioniert.

Das Wesentliche liegt im Stagehand-Konstruktor. Die Konfiguration mag auf den ersten Blick etwas verwirrend wirken, denn um eine Verbindung zu einem Remote-Browser herzustellen, müssen Sie env trotzdem auf "LOCAL" setzen. Dann müssen Sie in localBrowserLaunchOptions die Bright Data Browser API WSS-URL über das Feld cdpUrl angeben.

Obwohl env also auf "LOCAL" gesetzt ist, verbindet sich Stagehand tatsächlich mit den Remote-Anti-Detection-Cloud-Browser-Instanzen von Bright Data.

Jetzt können Sie die Integration mit einem einfachen Beispiel testen, um zu bestätigen, dass alles korrekt funktioniert.

Schritt #5: Die Bright Data Browser API-Integration überprüfen

Um zu überprüfen, ob die Integration mit der Browser API funktioniert, probieren Sie folgende Automatisierungslogik aus:

// connect to the example.com page
await page.goto("https://example.com");

// take the screenshot of the page
await page.screenshot({
  path: "screenshot.png",
  type: "png",
  fullPage: false,
});

Dies weist den Remote-Browser (bereitgestellt über die Bright Data Browser API) an, example.com zu öffnen und einen Screenshot aufzunehmen.

Alles zusammenfügen:

// index.ts 

import { Stagehand } from "@browserbasehq/stagehand";
import dotenv from "dotenv";

// load the environment variables from the .env file
dotenv.config({
  path: ".env",
});

// read the Bright Data Browser API credentials
const BRIGHT_DATA_BROWSER_API_USERNAME = process.env.BRIGHT_DATA_BROWSER_API_USERNAME || "";
const BRIGHT_DATA_BROWSER_API_PASSWORD = process.env.BRIGHT_DATA_BROWSER_API_PASSWORD || "";

async function main() {
  // configure Stagehand to connect remotely to Bright Data's Browser API
  // and use an OpenAI model
  const stagehand = new Stagehand({
    env: "LOCAL",
    localBrowserLaunchOptions: {
      cdpUrl: `wss://${BRIGHT_DATA_BROWSER_API_USERNAME}:${BRIGHT_DATA_BROWSER_API_PASSWORD}@brd.superproxy.io:9222`,
    },
    model: "openai/gpt-5.4-mini",
  });

  // launch Stagehand and get the browser page
  await stagehand.init();
  const page = stagehand.context.pages()[0];

  // connect to the example.com page
  await page.goto("https://example.com");

  // take the screenshot of the page
  await page.screenshot({
    path: "screenshot.png",
    type: "png",
    fullPage: false,
  });

  // close the Stagehand instance and release the browser resources
  await stagehand.close();
}

main().catch(console.error);

Führen Sie das Skript aus mit:

npm run start

Im Terminal sollten Sie ähnliche Logs sehen wie:

Die von Stagehand erzeugten Logs

Wichtig: Die Logs können ‘connecting to local browser’ erwähnen. Dies liegt an der erforderlichen Konfiguration env: "LOCAL". Die tatsächliche Verbindung wird jedoch zur Remote Browser API von Bright Data hergestellt.

Nach Abschluss der Ausführung erscheint eine screenshot.png-Datei in Ihrem Projektverzeichnis:

bright-data-stagehand-example/
├── .cursorrules
├── .env           
├── .env.example
├── claude.md
├── index.ts
├── package.json
├── README.md
├── screenshot.png       # <---------
└── tsconfig.json

Öffnen Sie screenshot.png, und Sie sollten die gerenderte example.com-Seite sehen:

Dies bestätigt, dass Stagehand erfolgreich eine Verbindung zur Zielseite hergestellt und die Browser-Automatisierung wie erwartet ausgeführt hat.

Um zu überprüfen, ob die Bright Data Browser API verwendet wurde, schauen Sie in Ihr Bright Data-Dashboard:

Beachten Sie den Traffic-Anstieg in der Browser API

Sie sollten einen Traffic-Anstieg sehen, der die aktive Nutzung der konfigurierten Browser API-Sitzung über die Remote-CDP-Verbindung anzeigt. Dies bestätigt, dass die gesamte Stagehand-Automatisierung korrekt über Bright Data’s Browser API geleitet wird. Großartig!

Schritt #6: Reale KI-gestützte Remote-Browser-Automatisierung implementieren

Angenommen, Sie möchten Browser-Logik automatisieren, um Nachrichtenartikel-Daten von Yahoo Finance zu sammeln.

So lädt die Yahoo Finance-Startseite neue Artikel

Dies ist ein gutes Beispiel, weil die Yahoo Finance-Startseite Infinite Scrolling verwendet, um neue Artikel dynamisch zu laden. Es ist auch eine Website, die für ihre strengen Anti-Bot- und Anti-Scraping-Schutzmaßnahmen bekannt ist.

Dank der von Browser API bereitgestellten Stealth- und Anti-Bot-Bypass-Funktionen können Sie Yahoo Finance über Stagehand zugreifen, ohne blockiert zu werden.

Da die gescrapten Daten einer bestimmten Struktur folgen sollen, definieren Sie zunächst einen Ausgabedatentyp mit Zod:

import { z } from "zod";

// ...

// structured output schema
const YahooFinanceNewsSchema = z.object({
  news: z.array(
    z.object({
      title: z
        .string()
        .describe("The visible headline text of the news article"),

      articleUrl: z
        .string()
        .describe("The full article URL"),

      imageUrl: z
        .string()
        .describe("The full image URL"),

      source: z
        .string()
        .optional()
        .describe("The publisher name, such as Reuters or Yahoo Finance"),

      timestamp: z
        .string()
        .optional()
        .describe("The visible publication time, such as '4h ago'"),

      marketMoves: z
        .array(
          z.object({
            ticker: z
              .string()
              .describe("The stock ticker symbol, such as NVDA or ^GSPC"),

            changePercent: z
              .string()
              .optional()
              .describe(
                "The visible market percentage change, such as '+2.4%' or '-0.69%'"
              ),
          })
        )
        .optional()
        .describe(
          "List of stock tickers mentioned in the article footer with their change percentages"
        ),
    })
  ),
});

Dies definiert die erwartete Ausgabestruktur für die gescrapten Daten. Insbesondere entspricht es den Informationen, die in den Yahoo Finance-Nachrichtenkarten verfügbar sind:

Beachten Sie die in den Yahoo Finance-Nachrichtenkarten verfügbaren Informationen

Wenn Sie Ihre Stagehand-App über npx create-browser-app initialisieren, müssen Sie zod nicht manuell installieren. Es ist bereits in den Projektabhängigkeiten enthalten. Andernfalls installieren Sie es mit:

npm install zod 

Jetzt können Sie den Browser- und Extraktionsfluss wie folgt automatisieren:

// automate the news article loading
await stagehand.act(
  `Scroll down multiple times and wait for articles to load in the "More News" section. Repeat until at least 20 news articles are loaded.`,
  {
    timeout: 90000, // 90-second timeout
  }
);

// scrape the news information
const data = await stagehand.extract(
  `Scrape all visible news articles`,
  YahooFinanceNewsSchema,
  {
    "timeout": 120000, // 120-second timeout
  }
);

Dies repliziert das Verhalten eines echten Nutzers, der die Seite scrollt, um weitere Artikel zu laden, aber durch KI-Anweisungen gesteuert. Anschließend wird KI-gestützte strukturierte Extraktion verwendet, um den Seiteninhalt in das definierte Schema zu konvertieren.

Beachten Sie, wie das Automatisierungsskript auf zwei KI-gestützte Stagehand-APIs zurückgreift:

  • .act(): Führt Aktionen in der Browser-Sitzung durch (z. B. Scrollen, Klicken, Navigation)
  • .extract(): Extrahiert strukturierte Daten von der Seite anhand eines Schemas

Fantastisch! Der nächste Schritt besteht darin, die gescrapten Daten zu exportieren.

Schritt #7: Die gescrapten Daten extrahieren

An diesem Punkt sind die gescrapten Daten bereits im data-Objekt gespeichert, das von stagehand.extract() zurückgegeben wird. Der letzte Schritt besteht darin, sie in eine news.json-Datei zu exportieren, damit sie später wiederverwendet oder weiterverarbeitet werden können.

Erreichen Sie das mithilfe der nativen fs/promises-API von Node.js:

import fs from "fs/promises";

// ...

// save extracted news to a JSON file
await fs.writeFile(
  "news.json",
  JSON.stringify(data.news, null, 2),
  "utf-8"
);

Dies schreibt eine news.json-Datei mit den strukturierten Nachrichtendaten in einem sauberen, lesbaren Format.

Aufgabe erfüllt! Der Stagehand-Scraping-Workflow, der Browser API als Browser-KI-Agent einsetzt, ist nun vollständig implementiert.

Schritt #8: Alles zusammenfügen

Ihr abschließendes index.ts-Skript zur Automatisierung des Yahoo Finance-Scrapings mit Stagehand sieht wie folgt aus:

import { Stagehand } from "@browserbasehq/stagehand";
import dotenv from "dotenv";
import { z } from "zod";
import fs from "fs/promises";

// load the environment variables from the .env file
dotenv.config({
  path: ".env",
});

// read the Bright Data Browser API credentials
const BRIGHT_DATA_BROWSER_API_USERNAME = process.env.BRIGHT_DATA_BROWSER_API_USERNAME || "";
const BRIGHT_DATA_BROWSER_API_PASSWORD = process.env.BRIGHT_DATA_BROWSER_API_PASSWORD || "";

// structured output schema
const YahooFinanceNewsSchema = z.object({
  news: z.array(
    z.object({
      title: z
        .string()
        .describe("The visible headline text of the news article"),

      articleUrl: z
        .string()
        .describe(
          "The full article URL."
        ),

      imageUrl: z
        .string()
        .describe(
          "The full image URL."
        ),

      source: z
        .string()
        .optional()
        .describe("The publisher name, such as Reuters or Yahoo Finance"),

      timestamp: z
        .string()
        .optional()
        .describe("The visible publication time, such as '4h ago'"),

      marketMoves: z
        .array(
          z.object({
            ticker: z
              .string()
              .describe("The stock ticker symbol, such as NVDA or ^GSPC"),

            changePercent: z
              .string()
              .optional()
              .describe(
                "The visible market percentage change, such as '+2.4%' or '-0.69%'"
              ),
          })
        )
        .optional()
        .describe(
          "List of stock tickers mentioned in the article footer with their market change percentages"
        ),
    })
  ),
});

async function main() {
  // configure Stagehand to connect remotely to Bright Data's Browser API
  // and use an OpenAI model
  const stagehand = new Stagehand({
    env: "LOCAL",
    localBrowserLaunchOptions: {
      cdpUrl: `wss://${BRIGHT_DATA_BROWSER_API_USERNAME}:${BRIGHT_DATA_BROWSER_API_PASSWORD}@brd.superproxy.io:9222`,
    },
    model: "openai/gpt-5.4-mini",
    keepAlive: true,
    verbose: 1,
  });

  // launch Stagehand and get the browser page
  await stagehand.init();
  const page = stagehand.context.pages()[0];

  // go to Yahoo Finance
  await page.goto("https://finance.yahoo.com/");

  // automate the news article loading
  await stagehand.act(
    `Scroll down multiple times and wait for articles to load in the "More News" section. Repeat until at least 20 news articles are loaded.`,
    {
      timeout: 90000, // 90-second timeout
    }
  );

  // scrape the news information
  const data = await stagehand.extract(
    `Scrape all visible news articles`,
    YahooFinanceNewsSchema,
    {
      "timeout": 120000, // 120-second timeout
    }
  );

  // save extracted news to a JSON file
  await fs.writeFile(
    "news.json",
    JSON.stringify(data.news, null, 2),
    "utf-8"
  );
  console.log("News exported to news.json");

  // close the Stagehand instance and release the browser resources
  await stagehand.close();
}

main().catch(console.error);

Die .env-Datei enthält dann:

OPENAI_API_KEY="<YOUR_OPENAI_API_KEY>"
BRIGHT_DATA_BROWSER_API_USERNAME="<BROWSER_API_USERNAME>"
BRIGHT_DATA_BROWSER_API_PASSWORD="<BROWSER_API_PASSWORD>"

Starten Sie das Skript mit:

npm run start

Sobald das Skript abgeschlossen ist, erscheint eine news.json-Datei in Ihrem Projektordner. Wenn Sie sie öffnen, sollten Sie strukturierte Daten wie diese sehen:

Beachten Sie die gescrapten strukturierten Nachrichtendaten in der Datei 'news.json'

Beachten Sie, wie die Datei dieselben Artikel enthält, die auf der Yahoo Finance-Startseite nach mehrmaligem Scrollen erscheinen, jetzt jedoch in einem sauberen, strukturierten Format.

Das beweist, wie Browser API auf dynamische Inhalte zugreifen und Daten in großem Maßstab extrahieren kann, selbst von einer Website mit Anti-Bot-Schutz.

Et voilà! Das war nur ein Beispiel, aber Sie können Stagehand verwenden, um Bright Data Browser API-Workflows in vielen anderen Szenarien und Anwendungsfällen zu automatisieren.

Fazit

In diesem Artikel haben Sie erfahren, was Stagehand ist und wie es Browser-Automatisierung unterstützt. Konkret haben Sie gesehen, wie Sie es mit Bright Data’s Browser API verwenden, um hochskalierbare, unerkannte Cloud-Browser-Sitzungen auszuführen.

Das Ergebnis ist ein Browser-Automatisierungs-Setup, das auf Unternehmensebene skalieren kann. Mit derselben Integration können Sie auch agentische Browser-KI-Operationen implementieren, die von einer groß angelegten Cloud-Infrastruktur unterstützt werden.

Erstellen Sie ein neues Bright Data-Konto und entdecken Sie unsere KI-fähigen Web-Scraping- und Browser-Automatisierungslösungen!