Erstellen Sie einen KI-Browser-Agenten mit LLMs, Playwright und Browserverwendung

Die Browser-Nutzung ist ein Werkzeug oder eine Plattform, die entwickelt wurde, um KI-Agenten (wie OpenAIs GPT-Modelle oder andere große Sprachmodelle) zu ermöglichen, auf intelligente und automatisierte Weise mit Webbrowsern zu interagieren und sie zu steuern. Es überbrückt im Wesentlichen die Kluft zwischen KI-Fähigkeiten und realen Browser-Interaktionen, sodass es KI-Systemen möglich ist, Aufgaben wie das Navigieren auf Websites, das Extrahieren von Daten, das Ausfüllen von Formularen, das Klicken auf Schaltflächen und mehr auszuführen – genau wie ein menschlicher Benutzer.

Das Hauptziel der Browser-Nutzung ist es, Websites für KI-Agenten zugänglich und handlungsfähig zu machen, indem es die Komplexitäten der Browser-Automatisierung abstrahiert. Anstatt von Entwicklern zu verlangen, aufwendige Skripte zum Auffinden und Interagieren mit Webseitenelementen zu schreiben, vereinfacht die Browser-Nutzung diesen Prozess, indem sie alle interaktiven Elemente (wie Schaltflächen, Eingabefelder, Links usw.) extrahiert und eine strukturierte Schnittstelle bereitstellt, über die KI-Agenten interagieren können.

Wesentliche Merkmale der Browser-Nutzung

KI-gesteuerte Automatisierung

Die Browser-Nutzung nutzt KI, um Webseiten zu verstehen und mit ihnen zu interagieren. Zum Beispiel kann sie den Inhalt einer Webseite analysieren, relevante Aktionen identifizieren (wie das Klicken auf eine Schaltfläche oder das Ausfüllen eines Formulars) und diese Aktionen autonom ausführen.

Visualisierung + HTML-Extraktion

Sie kombiniert visuelles Verständnis (Erkennen von Elementen auf dem Bildschirm) mit der Extraktion der HTML-Struktur (Analysieren des zugrunde liegenden Codes einer Webseite). Dieser duale Ansatz stellt sicher, dass KI-Agenten mit statischen und dynamischen Web-Elementen interagieren können, auch wenn sie keine klaren Identifikatoren wie IDs oder Klassen haben.

Multi-Tab-Verwaltung

Die Browserverwendung kann gleichzeitig mit mehreren Browser-Tabs umgehen und ermöglicht es KI-Agenten, komplexe Workflows auszuführen, die die Interaktion mit mehreren Webseiten gleichzeitig beinhalten.

Das Tool verfolgt die genauen Aktionen, die vom KI-Agenten ausgeführt werden (z.B. das Klicken auf eine Schaltfläche oder das Ausfüllen eines Formulars) und kann diese Aktionen konsistent replizieren, auch wenn sich das Layout der Website leicht ändert. Dies ist besonders nützlich für die Erstellung von selbstheilenden Tests in der QA-Automatisierung.

Benutzerdefinierte Aktionen

Benutzer können Browser Use erweitern, indem sie benutzerdefinierte Aktionen hinzufügen, wie z.B. das Speichern von Daten in Dateien, das Ausführen von Datenbankoperationen, das Versenden von Benachrichtigungen oder das Behandeln menschlicher Eingaben während bestimmter Schritte im Automatisierungsprozess.

Selbstkorrektur

Browser Use beinhaltet intelligentes Fehlerhandling und automatische Wiederherstellungsmechanismen. Wenn während der Automatisierung etwas schief geht (z.B. ein fehlendes Element oder ein Netzwerkzeitüberschreitung), kann das Tool das Problem erkennen und automatisch versuchen, sich zu erholen, um sicherzustellen, dass Workflows ohne Unterbrechung fortgesetzt werden.

Kompatibilität mit mehreren LLMs

Browser Use unterstützt verschiedene große Sprachmodelle (LLMs), darunter OpenAI’s GPT-4, Anthropic’s Claude und Meta’s Llama 2. Diese Flexibilität ermöglicht es Benutzern, das beste KI-Modell für ihre spezifischen Anforderungen auszuwählen.

Wie Browser Use funktioniert

Browser Use scannt eine Webseite und extrahiert alle interaktiven Elemente (Schaltflächen, Eingabefelder, Links, Formulare usw.). Anschließend bietet es eine strukturierte Darstellung dieser Elemente, die von KI-Agenten verstanden und mit denen interagiert werden kann.

KI-Interaktion

Nachdem die interaktiven Elemente identifiziert wurden, können KI-Agenten Aktionen wie das Klicken auf Schaltflächen, das Ausfüllen von Formularen, das Navigieren zwischen Seiten oder das Extrahieren von Daten durchführen. Der KI-Agent kann auch den Inhalt der Webseite analysieren und Entscheidungen basierend auf den Informationen treffen, die er findet.

Automatisierungs-Workflows

Browser Use ermöglicht es Benutzern, komplexe Automatisierungs-Workflows zu erstellen. Zum Beispiel könnte ein KI-Agent durch eine E-Commerce-Seite navigieren, Artikel in einen Warenkorb legen und einen Kauf abschließen – alles ohne menschliches Eingreifen.

Fehlerbehandlung und Wiederherstellung

Wenn während des Automatisierungsprozesses etwas schiefgeht (z. B. ein fehlendes Element oder eine langsam ladende Seite), kann Browser Use das Problem erkennen und versuchen, automatisch wiederherzustellen. Dies stellt sicher, dass die Workflows auch in unvorhersehbaren Umgebungen reibungslos weiterlaufen.

Installationsanleitung

Der Einstieg in Browser Use ist unkompliziert, erfordert jedoch einige anfängliche Einstellungen, um sicherzustellen, dass alles reibungslos läuft. Im Folgenden finden Sie eine detaillierte Installationsanleitung basierend auf den von Ihnen bereitgestellten Voraussetzungen und Schritten. Diese Anleitung führt Sie durch die lokale Einrichtung von Browser Use auf Ihrem Computer.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Ihr System die folgenden Anforderungen erfüllt:

• Python 3.11 oder höher. Sie können Ihre Python-Version überprüfen, indem Sie den Befehl ausführen:
  Python

   

  python --version
• Git. Git wird benötigt, um das Repository zu klonen

Lokale Installation

Schritt 1: Repository klonen

git clone https://github.com/browser-use/web-ui.git

cd web-ui

Schritt 2: Python-Umgebung einrichten

Wir empfehlen die Verwendung von uv zur Verwaltung der Python-Umgebung (empfohlen für Mac):

curl -LsSf https://astral.sh/uv/install.sh | sh

uv venv -- python 3.11

2. Activate the virtual environment.

• Windows (Eingabeaufforderung):
  Shell

  .venv\Scripts\aktivieren
• macOS/Linux:
  Shell

   

  quelle .venv/bin/aktivieren

Sobald aktiviert, sollten Sie .venv in Ihrer Terminal-Eingabeaufforderung sehen, was darauf hinweist, dass die virtuelle Umgebung aktiv ist.

Schritt 3: Abhängigkeiten installieren

Jetzt, da Ihre Umgebung eingerichtet ist, ist es an der Zeit, die erforderlichen Abhängigkeiten zu installieren.

Python-Pakete installieren. Verwenden Sie den folgenden Befehl, um die in der Datei requirements.txt aufgeführten erforderlichen Python-Pakete zu installieren:

uv pip install -r requirements.txt

Playwright ist eine Browser-Automatisierungs-Bibliothek, die von Browser Use verwendet wird.

Um sie zu installieren, führen Sie den Befehl aus:

playwright install

Lokale Einrichtungsanleitung für Browser Use WebUI

Nachdem Sie die Installationschritte für Browser Use abgeschlossen haben, können Sie die WebUI lokal ausführen. Diese Anleitung führt Sie durch das Starten der Anwendung, das Anpassen ihrer Einstellungen und das Konfigurieren, um bei Bedarf Ihren eigenen Browser zu verwenden.

WebUI ausführen

Nach Abschluss der Installationschritte können Sie die Browser Use WebUI starten, indem Sie den folgenden Befehl ausführen:

python webui.py --ip 127.0.0.1 --port 7788

Die WebUI bietet mehrere Optionen zum Anpassen ihres Verhaltens. Hier ist eine Übersicht über die verfügbaren Flags:

• --ip– die IP-Adresse, an die die WebUI gebunden werden soll
  • Standard – 127.0.0.1 (localhost)
• --port– der Port, an den die WebUI gebunden werden soll
  • Standard – 7788
• --theme – das Thema für die Benutzeroberfläche

Zugriff auf die WebUI

Sobald die WebUI läuft, öffnen Sie Ihren Webbrowser und navigieren Sie zu:

http://127.0.0.1:7788

Once the above command is executed, you should see the Browser Use interface, where you can interact with the tool and configure AI-driven browser automation tasks.

In der LLM-Konfiguration wählen Sie ein Sprachmodell, z.B., gemini. Gemini bietet den kostenlosen API-Schlüssel.

Auf dem folgenden Screenshot sehen Sie, dass wir die mit dem obigen Link generierten API-Schlüssel hinzugefügt haben.

Agent ausführen

In der Agentenausführung geben wir den Hinweis „gehe zu amazon.in und tippe ‚Playwright‘, klicke auf Suchen und gib mir die erste URL.“

Auf dem folgenden Screenshot sehen Sie, dass beim Ausführen des Hinweises der Chromium-Browser geöffnet wird und mit dem gesamten DOM der Seite interagiert wird.

Zuletzt wird der Wert Playwright im Suchfeld eingegeben, wie auf dem folgenden Screenshot zu sehen ist.

Im Hintergrund sehen Sie, dass alle Logs ausgeführt werden; alle Logs, die der Agent ausführt, sind im Hintergrund.

Ergebnis

Im Ergebnis-Tab sehen Sie das endgültige Ergebnis, Aktionsmodell, Gedankenmodell, Trace-Datei und Agentenverlauf.

Video

Sie können das Video herunterladen, indem Sie auf den bereitgestellten Link klicken. Sie können das angehängte Video auch unter dem Register „Aufzeichnungen“ sehen.Wenn Sie das Video abspielen, sehen Sie alle Schritte, die der Agent ausgeführt hat.

Hier sind einige Screenshots des Videos.

Fazit

Die Integration von LLMs, Playwright und der Browser-Nutzung stellt einen neuen Sprung in der Browser-Automatisierung und AI-gesteuerten Workflows dar. Die Kombination dieser Werkzeuge ermöglicht es Ihnen, intelligente Browser-Agenten zu erstellen, die in der Lage sind, komplexe Aufgaben mit minimalem menschlichen Eingriff auszuführen. Von der Automatisierung sich wiederholender Prozesse bis hin zur Ermöglichung dynamischer QA-Tests und der Entscheidungsfindung in Echtzeit sind die Möglichkeiten grenzenlos.

Referenz

• Browser-Nutzung