nützliche Arbeit findet immer noch innerhalb von Webschnittstellen statt.
Um ein Ticket zu lösen, muss das Help-Staff eine Admin-Konsole verwenden. Ein Betriebsteam verlässt sich auf Dashboards, um Alarme im Auge zu behalten. Bevor ein Vertriebsmitarbeiter mit einem Kunden spricht, wird er wahrscheinlich zunächst das CRM überprüfen.
Damit LLM-Agenten in diesen Arbeitsabläufen nützlich sind, müssen sie direkt über den Browser arbeiten.
In diesem Beitrag erstellen wir einen browserbasierten Agenten mit OpenAI Brokers SDK und Playwright MCP. Wir betrachten zunächst den Kreislauf hinter der Browsernutzung und setzen ihn dann anhand einer konkreten Fallstudie in die Praxis um.
1. Das mentale Modell
Auf einer höheren Ebene wird ein Browser-verwendender Agent am besten als ein LLM verstanden, der in einer Interaktionsschleife mit einem Browser platziert ist.
Die Schleife läuft folgendermaßen ab: Der Agent startet mit einer Aufgabe und dem aktuellen Standing des Browsers. Der Agent interpretiert dann diesen Zustand, entscheidet, was als nächstes zu tun ist, und sendet eine Aktion zurück an den Browser. Diese Aktion würde einen neuen Browserstatus erzeugen, der als Eingabe für die nächste Entscheidung dient.
Diese Schleife wird fortgesetzt, bis der Agent glaubt, dass die Aufgabe abgeschlossen ist.
Damit die Schleife funktioniert, benötigen wir zwei Verbindungen zwischen dem Agenten und dem Browser:
- Ein Beobachtungskanaldamit der Agent den aktuellen Browserstatus erhalten kann.
- Ein Aktionskanaldamit der Agent mit dem Browser interagieren kann.
Zu den gängigen Optionen für den Beobachtungskanal gehören Screenshots, strukturierte Seiteninformationen (z. B. Dokumentobjektmodell oder Barrierefreiheitsbaum) oder eine Kombination aus beidem.
Für den Aktionskanal kann der Agent Maus- und Tastatursteuerungen verwenden, auf bestimmte Seitenelemente abzielen oder übergeordnete Browserbefehle ausgeben.
Die Beobachtungs- und Handlungsentscheidungen sind normalerweise unabhängig voneinander, in der Praxis sind jedoch häufig zwei Paarungen zu beobachten:
- Screenshot + koordinatenbasierte Maus- und Tastaturaktionen
- Strukturierter Seitenstatus + elementbezogene Browseraktionen
Die erste Paarung tendiert zum Allgemeinen Computernutzungdie sich über den Browser hinaus auf andere Desktop-Anwendungen erstreckt. Die zweite Möglichkeit ist spezifischer für die Verwendung im Browser, da sie die Struktur nutzt, die bereits in einer Webseite vorhanden ist.
In diesem Beitrag konzentrieren wir uns auf strukturierte Seitenbeobachtungen zusammen mit elementbezogenen Browseraktionen.
2. Fallstudie: Lösung einer Kundensupportanfrage
Für unsere Fallstudie erstellen wir einen browserbasierten Agenten, der eine Kundenanfrage über eine webbasierte Supportkonsole löst.
2.1 Vorbereiten der Help-Konsole
Um die Browserumgebung zu erstellen, habe ich eine kleine Kundensupportkonsole mit Vibe-Code versehen. Es handelt sich um eine statische Webanwendung, die mit einfachem HTML, CSS und JavaScript erstellt wurde. Es gibt kein Anwendungs-Backend oder eine Datenbank: Alle Daten befinden sich im Browser.
Wir können die Konsole lokal mit dem integrierten HTTP-Server von Python bereitstellen:
cd toy_app
python -m http.server 8000 --bind 127.0.0.1Dadurch wird die Konsole unter http://127.0.0.1:8000 verfügbar, unter der wir später den Agenten übergeben APP_URL:
Die linke Seite der Konsole funktioniert wie ein Help-Posteingang. Sobald ein Fall ausgewählt ist, werden im Relaxation der Konsole die zugehörige Bestellung, der Kundenkontext und die Lösungsrichtlinien angezeigt. Von dort aus kann der Fall mit einer internen Notiz geklärt werden. Die Konsole verfügt außerdem über ein Audit-Protokoll, das das Replace verfolgt.
Die Aufgabe des Agenten ist einfach: Untersuchen Sie einen eingehenden Help-Fall und führen Sie ihn bis zur Lösung durch, und zwar vollständig über diese Konsolenschnittstelle.
2.2 Definieren des Browser-verwendenden Agenten
Als nächstes konfigurieren wir den Browser-verwendenden Agenten.
Für den Tech-Stack verwenden wir hier den OpenAI Brokers SDK um die Agent-Laufzeit mit Strom zu versorgen und Dramatiker MCP um den Agenten mit dem Browser zu verbinden.
Unser endgültiger, konfigurierter Agent sieht so aus:
# pip set up openai-agents
from brokers import Agent, ModelSettings
from openai.sorts.shared import Reasoning
agent = Agent(
title="Help Console Browser Agent",
mannequin="gpt-5.4",
model_settings=ModelSettings(
reasoning=Reasoning(effort="medium"),
),
directions=AGENT_INSTRUCTIONS,
mcp_servers=(playwright_server),
)Es gibt drei Teile, die wir hier entpacken müssen, nämlich den LLM-Consumer, die Agentenanweisung und die Browser-Instruments.
Zuerst verbinden wir das Brokers SDK mit Azure OpenAI:
import os
from openai import AsyncAzureOpenAI
from brokers import (
set_default_openai_api,
set_default_openai_client,
)
azure_client = AsyncAzureOpenAI(
api_key=os.environ("OPENAI_API_KEY"),
api_version=os.environ("OPENAI_API_VERSION"),
azure_endpoint=os.environ("OPENAI_API_BASE"),
)
set_default_openai_client(azure_client)
set_default_openai_api("responses")Wir registrieren den Consumer beim Brokers SDK und konfigurieren ihn für die Verwendung der Responses API.
Dann haben wir die folgende Anweisung, die absichtlich minimal ist:
AGENT_INSTRUCTIONS = """
You might be an agent that may work together with an internet browser.
""".strip()Wir richten lediglich die Rolle des Agenten ein. Die eigentliche Aufgabe kommt später in der Eingabeaufforderung, die an den Agenten gesendet wird.
Als nächstes müssen wir das Playwright MCP einrichten.
Was ist Dramatiker MCP?
Playwright ist eine Browser-Automatisierungsbibliothek. Es steuert in Ihrem Namen einen echten Browser und übernimmt das Klicken, Tippen, Navigieren und Lesen aller Inhalte auf der Seite.MCP (Mannequin Context Protocol) ist eine Standardmethode, um Instruments einem LLM zur Verfügung zu stellen, damit ein Agent sie direkt aufrufen kann. Playwright MCP ist das, was Sie erhalten, wenn Sie beides zusammenfügen, nämlich die Browserfunktionen von Playwright, die als Instruments zur Verfügung stehen, die ein Agent in die Hand nehmen und verwenden kann.
Das Interessante daran ist, wie es dem Agenten die Seite zeigt. Anstelle eines Screenshots verwendet Playwright MCP standardmäßig einen Schnappschuss der Barrierefreiheitwas im Grunde eine strukturierte Lektüre dessen ist, was auf der Seite steht. Interaktive Elemente wie Hyperlinks, Schaltflächen und Eingabefelder erhalten jeweils eine Referenz-ID, auf die der Agent direkt abzielen kann. Das ist genau die Kombination aus strukturierter Beobachtung und elementbezogener Aktion, über die wir zuvor gesprochen haben.
Playwright MCP läuft über Node.js. So installieren Sie Node.js unter Home windows:
winget set up OpenJS.NodeJS.LTSAuf macOS:
brew set up nodeUnd unter Linux:
curl -o- https://uncooked.githubusercontent.com/nvm-sh/nvm/v0.40.5/set up.sh | bash
. "$HOME/.nvm/nvm.sh"
nvm set up --ltsÜberprüfen Sie dann die Set up:
node --version
npx --versionWir können das Brokers SDK folgendermaßen konfigurieren, um den MCP-Server zu starten npx Befehl:
from brokers.mcp import MCPServerStdio
playwright_server = MCPServerStdio(
title="Playwright MCP",
params={
"command": "npx",
"args": (
"-y",
"@playwright/mcp@newest",
"--browser",
"chrome",
),
},
)Hier, npx Ruft das neueste Playwright MCP-Paket ab und führt es aus. Der -y Flag akzeptiert automatisch die npx Bestätigungsaufforderung, während --browser chrome teilt Playwright mit, welcher Browser gestartet werden soll. Chrome ist auch der Standardbrowser von Playwright MCP. Wenn er bereits installiert ist, ist keine separate Browserinstallation erforderlich.
MCPServerStdio konfiguriert das Brokers SDK so, dass Playwright MCP als lokaler Prozess gestartet wird. Wenn der Agent zum ersten Mal ein Browser-Instrument aufruft, öffnet Playwright MCP ein sichtbares Chrome-Fenster und führt die angeforderte Browser-Aktion aus.
2.3 Ausführen des Agenten
Jetzt können wir dem Agenten eine konkrete Aufgabe geben:
APP_URL = "http://127.0.0.1:8000"
TASK = f"""
Open {APP_URL} and resolve the help case for order ORD-1042.
The client says they acquired the flawed merchandise. Use the data obtainable within the
utility to find out and apply the suitable decision. Add a concise inside
notice and ensure the decision was efficiently recorded.
Report what you probably did when the duty is full.
""".strip()In der Aufgabenaufforderung haben wir den Zugriff auf die Anwendung und das gewünschte Ergebnis beschrieben.
Anschließend führen wir den Agenten aus mit:
from brokers import Runner
async with playwright_server:
end result = await Runner.run(
agent,
TASK,
max_turns=20,
)
print(end result.final_output)Der async with Der Block startet den Playwright MCP-Prozess und hält ihn verbunden, während der Agent ausgeführt wird. Wir verwenden max_turns um eine Obergrenze dafür festzulegen, wie viele Runden der Agent ausführen kann.
Nach dem Begin öffnete sich Chrome und wir konnten über die Help-Konsole beobachten, wie der Agent arbeitete.
Die endgültige Antwort fasste das Ergebnis richtig zusammen:
Resolved CASE-4107 for order ORD-1042 with Alternative.
The case now reveals Resolved, the recorded motion is Alternative,
and the audit log comprises the corresponding decision entry.Wenn Sie möchten, können Sie die Browser-Instrument-Aufrufe und ihre Ausgaben auch auf diese Weise überprüfen:
for merchandise in end result.new_items:
print(sort(merchandise).__name__, merchandise)Bei meinem Durchlauf hat der Agent den damit verbundenen Fall gefunden ORD-1042 Außerdem wurden die Bestellung, die Kundenanfrage, der Bestandsstatus und die relevanten Lösungsrichtlinien überprüft. Anschließend kam es zu dem Schluss, dass eine Ersetzung angebracht sei, fügte einen internen Vermerk hinzu und reichte den Beschluss ein. Abschließend überprüfte es das aktualisierte Fall- und Auditprotokoll, um zu bestätigen, dass die Aktion aufgezeichnet wurde.
Das ist genau das Agentenverhalten, das wir wollen.
3. Von der Browsernutzung zur Computernutzung
Was wir in dieser Fallstudie erstellt haben, ist ein Browser-verwendender Agent. Dennoch ist das zugrunde liegende Muster, das heißt das beobachten, entscheiden, handeln und wiederholen Schleife, erstreckt sich natürlich auf allgemein Computernutzung.
Was sich ändert, sind die Beobachtungs- und Handlungskanäle.
In unserem Fall versorgt Playwright MCP den Agenten mit strukturierten Seiteninformationen und ermöglicht ihm die gezielte Ausrichtung auf einzelne Webelemente. Ein allgemeinerer Computernutzer könnte stattdessen anhand von Screenshots arbeiten und Maus und Tastatur über Koordinaten steuern.
Das Repo zu unserer Fallstudie finden Sie hier: https://github.com/ShuaiGuo16/llm-browser-agent/tree/most important