GPT-5.4 Computer Use Tutorial: Erstelle ein Live-News-Dashboard

Unter der Haube läuft GPT-5.4 durch den Computer-Use-Agent-Loop:

• Der Agent erhält einen Screenshot des Kanban-Boards zusammen mit der aktuellen URL.
• Das Modell analysiert das visuelle Layout und ermittelt die Positionen von Karten und Spalten.
• GPT-5.4 schlägt UI-Aktionen vor wie:
• Den Cursor zu einer Karte bewegen
• Klicken und halten
• Die Karte in eine andere Spalte ziehen
• Der Runner führt diese Aktionen über Playwright-Pointer-Events aus.
• Ein neuer Screenshot wird aufgenommen und an das Modell zurückgesendet, damit es den aktualisierten Board-Zustand prüfen kann.

Der Prozess läuft weiter, bis das Board der gewünschten Konfiguration entspricht.

Spannend ist hierbei, dass das Modell keinerlei internes Wissen über die Kanban-App nutzt. 

Stattdessen schließt es vollständig aus dem visuellen Zustand der Oberfläche, wo geklickt, gezogen und abgelegt werden muss. Das zeigt einen zentralen Vorteil von GPT-5.4 Computer Use: Entwicklerinnen und Entwickler können Workflows automatisieren, ohne für jedes Tool eigene Integrationen oder APIs zu bauen.

Interaktion mit der Zeichenfläche

Das Paint-Szenario löst Aufgaben, die stark von visuellem Layout, räumlichem Denken und präziser Cursorsteuerung abhängen statt von einfachem Formularausfüllen. In diesem Setup erhält der Agent eine Zeichenanweisung und muss sie direkt in der browserbasierten Skizzen-App umsetzen. 

Ich habe den Agenten gebeten, verschiedene Szenen über die Leinwand zu skizzieren, und GPT-5.4 hat die Aufgabe gemeistert, indem es Farben auswählte, die richtige Zeichenfläche lokalisierte und das Raster entsprechend füllte.

Anders als beim Kanban-Beispiel, wo die Kernaufgabe das Verschieben strukturierter Karten zwischen Spalten war, hängt dieses Szenario viel stärker vom Interpretieren des visuellen Zustands der App und einer Reihe von Niedriglevel-Interaktionen ab. So hat Computer Use es in dieser Demo gelöst:

• Cursorbewegung und Zielauswahl: GPT-5.4 interpretiert zuerst das Layout der Skizzieroberfläche, inklusive Farbleiste links und der pixelartigen, leeren Leinwand in der Mitte.
• Tool- und Farbauswahl: Es identifiziert die verfügbaren Palettenoptionen und klickt vor dem Zeichnen die passende Farbe an. In der aufgezeichneten Ausführung wechselt das Modell gezielt die Farben und setzt sie bewusst für verschiedene Bereiche auf der Leinwand ein.
• Interaktion mit der Leinwand: Ohne eine Canvas-API aufzurufen, interagiert der Agent rein über UI-Aktionen: Er bewegt den Zeiger zu bestimmten Zellen und füllt sie in wiederholten Mustern.
• Zustandsprüfung: Nach jeder Aktionsserie nimmt der Runner einen neuen Screenshot auf und gibt ihn an das Modell zurück, damit es prüfen kann, ob sich das erwartete Muster auf der Leinwand abzeichnet.

Bemerkenswert ist, dass GPT-5.4 nicht zufällig geklickt hat. Es nutzte vielmehr den Screenshot-Feedback-Loop, um zu entscheiden, wo gezeichnet werden soll, welche Farbe aktuell aktiv ist und wie sich die Leinwand nach jeder Aktion verändert hat. 

In späteren Frames siehst du klar, wie sich die Leinwand von einem leeren Raster zu einer strukturierten Komposition mit großen Farbflächen entwickelt hat – ein Zeichen dafür, dass das Modell über mehrere Schritte hinweg den Fortschritt und das Layout im Blick behielt.

Buchungs-Workflow

In dieser Umgebung interagiert der Agent mit einer simulierten Buchungs-Website und soll eine Reservierung abschließen. Er muss also mehrere UI-Zustände der Reihe nach durchlaufen statt nur eine einzelne Aktion auszuführen.

So wird Computer Use in dieser Demo angewandt:

• Interface-Verständnis: GPT-5.4 interpretiert zunächst das aktuelle Bildschirm-Layout, erkennt Buttons, Formfelder, Kalender, Dropdowns und Bestätigungselemente.
• Schrittweise Navigation: Der Agent entscheidet, welchen Teil des Workflows er zuerst erledigt, z. B. eine Option auswählen, zum nächsten Screen wechseln oder ein Formelement öffnen.
• Formularausfüllung: Er trägt die erforderlichen Werte in Textfelder ein und interagiert mit Steuerelementen wie Dropdowns oder Datumswählern.
• Zustandsverfolgung über mehrere Schritte: Nach jeder Aktion wird ein neuer Screenshot aufgenommen und an das Modell zurückgegeben, sodass es prüfen kann, welche Felder bereits ausgefüllt sind und was noch fehlt.
• Bestätigung und Abschluss: Sobald die erforderlichen Eingaben vorliegen, geht der Agent zum finalen Bestätigungsschritt über und prüft, ob die Reservierung erfolgreich abgeschlossen wurde.

Auch wenn Kanban-, Paint- und Buchungs-Szenarien UI-Steuerung zeigen, müssen wir sie auf praxisnahe Anwendungen übertragen. 

Im nächsten Abschnitt nutze ich denselben Ansatz, um ein Live-News-Dashboard zu bauen, das aktuelle Meldungen sammelt, strukturiert aufbereitet und in einer nutzbaren Oberfläche rendert – per No-Code-Workflow in der Codex-Anwendung.

Schritt 3: Ein Live-News-Dashboard mit GPT-5.4 erstellen

In diesem Schritt setzen wir dieselben Computer-Use-Funktionen ein, um ein Live-News-Dashboard zu bauen. Ziel ist ein kleines Dashboard, in dem Nutzerinnen und Nutzer ein Thema wie KI, Politik, Klima, Technologie, Wissenschaft usw. auswählen können und das System anschließend Folgendes tut:

• Aktuelle Nachrichten aus vertrauenswürdigen Quellen sammeln
• Schlüsselinformationen aus diesen Artikeln extrahieren
• Drei prägnante Zusammenfassungen generieren
• Die Ergebnisse in einem strukturierten Dashboard-Format rendern

Anstatt die Anwendung manuell zu schreiben, nutzen wir Codex innerhalb der GPT-5.4-Computer-Use-Umgebung und geben folgenden Prompt, um das Feature direkt im bestehenden CUA-Repository zu erzeugen. 

Da Codex mit derselben Umgebung verbunden ist wie die CUA Sample-App, kann der Agent das Repository analysieren, entscheiden, wo das Dashboard liegen soll, und UI sowie Logik automatisch implementieren.

Prompt: 

Build a live News Dashboard in this repo.
Goal:
Create a dashboard where a user can enter a topic of interest, fetch the latest important news in real time from trusted sources, and render exactly 3 structured results that are meaningful and topic-relevant.
Requirements:
- The dashboard must allow the user to type a topic such as AI, politics, climate, health, science, or tech.
- Fetch live results at request time. Do not hardcode stories.
- Use trusted sources appropriate to the topic. Prefer official or well-known outlets.
- Return exactly 3 items.
- Each item must include:
  - HEADLINE
  - SOURCE
  - SUMMARY
- Summaries must be in your own words, concise, and clearly related to the article and topic.
- Avoid low-quality results such as homepages, category pages, generic aggregator wrappers, or meaningless titles.
- Prefer direct article URLs over search/aggregator wrapper links.
- Keep the UI minimal and consistent with the repo’s existing design language.
- Reuse the existing framework/tooling. Do not add new dependencies unless truly necessary.
Implementation plan:
1. Inspect the repo and place the dashboard in the existing app structure without breaking the current console.
2. Add a topic input UI with a search action and a loading/error state.
3. Add a server-side news fetch path that:
   - maps topics to trusted source sets
   - fetches recent results in real time
   - filters out irrelevant or low-quality matches
   - resolves direct article URLs where possible
   - extracts useful metadata for headline/source/summary
4. Render the dashboard with:
   - page title
   - topic
   - date
   - intro
   - exactly 3 cards/items
   - a structured export block that can be copied into another dashboard
5. Keep the export block in this exact format:
---BEGIN DASHBOARD CONTENT---
TITLE: News Brief — [TOPIC]
DATE: [today's date]
INTRO: Top 3 [TOPIC] updates from trusted sources.
ITEM 1:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 2:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 3:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
SOURCES_USED: [comma-separated list of sites used]
---END DASHBOARD CONTENT---
Deliverables:
- A working live dashboard route in the app
- Real-time topic search
- Exactly 3 relevant results per search
- Structured export block visible in the UI
- Short run instructions
- Basic tests for parsing/formatting logic if the repo already has a test runner

Der Prompt weist Codex an, innerhalb des bestehenden Repositories ein Live-News-Dashboard zu bauen – als grobe Spezifikation statt als detaillierter Implementierungscode. 

Codex prüft zunächst die Projektstruktur, um festzulegen, wo UI und Backend-Logik des Dashboards ergänzt werden sollen. Anschließend erstellt es ein Themen-Eingabefeld, ruft in Echtzeit aktuelle Artikel aus vertrauenswürdigen Quellen ab, extrahiert Schlüsselmetadaten wie Überschrift, Quelle und Zusammenfassung und filtert die Ergebnisse auf Relevanz. 

Zum Schluss rendert es genau drei News-Items in einem klaren, strukturierten Layout, das sich im Dashboard leicht ansehen oder exportieren lässt.

GPT-5.4 Computer Use ermöglicht diesen Workflow, indem das Modell die Entwicklungsumgebung während der Feature-Generierung beobachten und mit ihr interagieren kann. 

Statt nur als Codegenerator zu agieren, analysiert Codex das Repository, entscheidet, wo neue Komponenten hingehören, und implementiert das Dashboard schrittweise, während die Ergebnisse laufend verifiziert werden.

Der Workflow umfasst mehrere Schlüsselschritte:

• Repository-Inspektion: Codex scannt die Projektstruktur, um zu identifizieren, wo Dashboard-UI und -Logik ergänzt werden sollen.
• Benutzeroberfläche: Es erstellt ein Themen-Eingabefeld, über das nach Themen wie KI, Klima oder Technologie gesucht werden kann.
• Echtzeit-Nachrichtenabruf: Das System sammelt aktuelle Artikel aus vertrauenswürdigen Quellen statt auf Hardcodierung zu setzen.
• Filterung und Zusammenfassung: GPT-5.4 extrahiert nützliche Metadaten wie Überschrift, Quelle und Zusammenfassung und stellt sicher, dass die Ergebnisse themenrelevant bleiben.
• Strukturierte Darstellung: Abschließend zeigt das Dashboard genau drei News-Karten an, die sich schnell überfliegen lassen.

Hinweis: Das finale Dashboard entstand nicht aus einem einzigen Prompt. Es brauchte einige Iterationen und Feinschliff am Prompt, um Verhalten und Ausgabeformat zu treffen. Plane bei ähnlichen Experimenten etwas Trial-and-Error ein und passe Prompt und Constraints an. Achte außerdem darauf, dass dein Browser bzw. System automatisierte Browserinteraktionen nicht blockiert – solche Einschränkungen können Computer-Use-Workflows stören.

Fazit

In diesem Tutorial haben wir gezeigt, wie sich mit GPT-5.4 Computer Use Agenten bauen lassen, die mit echten Softwareumgebungen interagieren, statt nur auf klassische APIs zu setzen. Mit der CUA Sample-App von OpenAI haben wir zunächst den Computer-Use-Loop in Sandbox-Szenarien betrachtet – also wie das Modell Oberflächen beobachtet, Aktionen vorschlägt und Ergebnisse per Screenshot prüft.

Anschließend haben wir dasselbe Konzept genutzt, um mit Codex innerhalb der CUA-Umgebung ein Live-News-Dashboard zu bauen. Statt die Anwendung manuell zu schreiben, diente ein Prompt als grobe Spezifikation: Codex inspizierte das Repository, generierte UI und Logik des Dashboards, rief aktuelle News aus vertrauenswürdigen Quellen ab und stellte die Ergebnisse strukturiert dar.

Darauf aufbauend kannst du die Idee erweitern und Agenten entwickeln, die:

• Interne Dashboards oder Reporting-Tools automatisieren
• Research-Pipelines generieren
• Branchentrends in Echtzeit verfolgen
• Neue Produktfeatures direkt in bestehenden Repositories prototypen

Mit der Weiterentwicklung von Computer-Use-Modellen werden sie sich zu allgemeiner einsetzbaren Entwicklungs- und Automationsagenten entwickeln, die sowohl mit Softwareoberflächen als auch mit Codebasen interagieren können.