
Browser-Agent mit OpenAI Agents SDK und Playwright MCP bauen
Der Artikel von Shuai Guo beschreibt Schritt für Schritt, wie ein LLM-Agent mit Browserzugang ausgestattet wird – am Beispiel eines fiktiven Kundensupport-Szenarios. Als Agent-Runtime kommt das OpenAI Agents SDK zum Einsatz, das über die Azure-OpenAI-Integration mit dem Modell gpt-5.4 verbunden wird; für die Kommunikation mit dem Browser dient Playwright MCP. Das Tutorial erklärt zunächst das mentale Modell: Ein Browser-Agent befindet sich in einem kontinuierlichen Interaktionsloop aus Beobachten, Entscheiden und Handeln, bis die Aufgabe als erledigt gilt. Für den Beobachtungskanal wählt der Autor bewusst Accessibility-Snapshots statt Screenshots, weil diese jedem interaktiven Element – Links, Buttons, Eingabefelder – eine stabile Referenz-ID zuweisen, auf die der Agent direkt zugreifen kann. Als Praxisbeispiel dient eine selbst gebastelte, statische Support-Konsole (HTML/CSS/JS, kein Backend), die lokal über Pythons eingebauten HTTP-Server unter http://127.0.0.1:8000 läuft. Der Agent erhält eine bewusst minimal gehaltene System-Instruction und bekommt die eigentliche Aufgabe erst im Prompt übergeben. Das Tutorial zeigt damit konkret, wie sich die Kombination aus strukturierter Seitenbeobachtung und element-gezielten Browser-Aktionen von allgemeinerem Computer-Use (Screenshot plus Koordinaten-basierte Mauseingaben) unterscheidet.
- Verwendetes Modell: gpt-5.4, eingebunden via AsyncAzureOpenAI mit der Responses API des OpenAI Agents SDK.
- Playwright MCP liefert Accessibility-Snapshots als Standard-Beobachtungskanal – interaktive Elemente erhalten Referenz-IDs für zielgenaue Aktionen.
- Die Demo-Support-Konsole ist ein rein statisches Web-App (HTML/CSS/JS), serviert mit Pythons eingebautem HTTP-Server (`python -m http.server 8000`).
- Die Agent-Instruction ist bewusst minimal gehalten ('You are an agent that can interact with a web browser.'); die Aufgabe wird separat im Prompt übergeben.
- Zwei gängige Beobachtungs-/Aktions-Paarungen werden unterschieden: Screenshot + koordinatenbasierte Mauseingaben (generelles Computer-Use) vs. strukturierter Seitenzustand + element-gezielte Browser-Aktionen (Browser-Use).
Frag die KI zum Artikel
Folgefragen zu Headline, Quelle und Volltext — Antwort streamt in wenigen Sekunden.
Verwandte Beiträge

Browser-Agent mit OpenAI Agents SDK und Playwright MCP bauen
Der Artikel von Shuai Guo beschreibt Schritt für Schritt, wie ein LLM-Agent mit Browserzugang ausgestattet wird – am Beispiel eines fiktiven Kundensupport-Szenarios. Als Agent-Runtime kommt das OpenAI Agents SDK zum Einsatz, das über die Azure-OpenAI-Integration mit dem Modell gpt-5.4 verbunden wird; für die Kommunikation mit dem Browser dient Playwright MCP. Das Tutorial erklärt zunächst das mentale Modell: Ein Browser-Agent befindet sich in einem kontinuierlichen Interaktionsloop aus Beobachten, Entscheiden und Handeln, bis die Aufgabe als erledigt gilt. Für den Beobachtungskanal wählt der Autor bewusst Accessibility-Snapshots statt Screenshots, weil diese jedem interaktiven Element – Links, Buttons, Eingabefelder – eine stabile Referenz-ID zuweisen, auf die der Agent direkt zugreifen kann. Als Praxisbeispiel dient eine selbst gebastelte, statische Support-Konsole (HTML/CSS/JS, kein Backend), die lokal über Pythons eingebauten HTTP-Server unter http://127.0.0.1:8000 läuft. Der Agent erhält eine bewusst minimal gehaltene System-Instruction und bekommt die eigentliche Aufgabe erst im Prompt übergeben. Das Tutorial zeigt damit konkret, wie sich die Kombination aus strukturierter Seitenbeobachtung und element-gezielten Browser-Aktionen von allgemeinerem Computer-Use (Screenshot plus Koordinaten-basierte Mauseingaben) unterscheidet.
- Verwendetes Modell: gpt-5.4, eingebunden via AsyncAzureOpenAI mit der Responses API des OpenAI Agents SDK.
- Playwright MCP liefert Accessibility-Snapshots als Standard-Beobachtungskanal – interaktive Elemente erhalten Referenz-IDs für zielgenaue Aktionen.
- Die Demo-Support-Konsole ist ein rein statisches Web-App (HTML/CSS/JS), serviert mit Pythons eingebautem HTTP-Server (`python -m http.server 8000`).
- Die Agent-Instruction ist bewusst minimal gehalten ('You are an agent that can interact with a web browser.'); die Aufgabe wird separat im Prompt übergeben.
- Zwei gängige Beobachtungs-/Aktions-Paarungen werden unterschieden: Screenshot + koordinatenbasierte Mauseingaben (generelles Computer-Use) vs. strukturierter Seitenzustand + element-gezielte Browser-Aktionen (Browser-Use).
Frag die KI zum Artikel
Folgefragen zu Headline, Quelle und Volltext — Antwort streamt in wenigen Sekunden.