GPT-5.4 Computer Use-tutorial: Bouw een live nieuwsdashboard

Onder de motorkap doorloopt GPT-5.4 de agentlus voor computergebruik:

• De agent ontvangt een screenshot van het Kanbanbord samen met de huidige URL.
• Het model analyseert de visuele lay-out en bepaalt waar taakkaarten en kolommen zich bevinden.
• GPT-5.4 stelt UI-acties voor zoals:
• de cursor naar een kaart verplaatsen
• klikken en vasthouden
• de kaart naar een andere kolom slepen
• De runner voert deze acties uit via Playwright-pointerevents.
• Er wordt een nieuwe screenshot gemaakt en teruggestuurd naar het model zodat het de bijgewerkte bordstatus kan verifiëren.

Het proces gaat door totdat het bord de gewenste configuratie weerspiegelt.

Wat dit voorbeeld interessant maakt, is dat het model niet vertrouwt op interne kennis van de Kanbanapplicatie. 

In plaats daarvan redeneert het volledig vanuit de visuele status van de interface, waarbij het op basis van de screenshot bepaalt waar het moet klikken, slepen en neerzetten. Dit toont een belangrijk voordeel van GPT-5.4 computer use: ontwikkelaars kunnen workflows automatiseren zonder voor elke tool aangepaste integraties of API’s te bouwen.

Interactie met teken-canvas

Het Paint-scenario pakt taken aan die afhankelijk zijn van visuele lay-out, ruimtelijk redeneren en nauwkeurige cursorbesturing in plaats van simpel formulierinvullen. In deze setup krijgt de agent een tekeninstructie en moet die direct in de browsergebaseerde schetsapplicatie uitvoeren. 

Ik gaf de agent de opdracht om verschillende scènes over het canvas te schetsen, en GPT-5.4 pakte de taak aan door kleuren te selecteren, het juiste tekengebied te lokaliseren en het raster overeenkomstig te vullen.

In tegenstelling tot het Kanbanvoorbeeld, waar de kernuitdaging bestond uit het verplaatsen van gestructureerde kaarten tussen kolommen, is dit scenario veel meer afhankelijk van het interpreteren van de visuele status van de app en het nemen van een reeks low-level interactiebeslissingen. Zo deed computer use het in deze demo:

• Cursorbeweging en -targeting: GPT-5.4 interpreteert eerst de lay-out van de schetsinterface, inclusief het kleurpalet links en het lege pixelachtige canvas in het midden.
• Tool- en kleurselectie: Het identificeert de beschikbare paletopties en klikt voor het tekenen op de juiste kleur. In de vastgelegde run wisselt het model van kleur en gebruikt die bewust om verschillende gebieden op het canvas te creëren.
• Canvasinteractie: In plaats van een canvas-API aan te roepen, interageert de agent volledig via UI-acties met de app door de pointer naar specifieke cellen te verplaatsen en deze in herhaalde patronen te vullen.
• Statusverificatie: Na elke batch acties maakt de runner een nieuwe screenshot en stuurt die terug naar het model, zodat het kan verifiëren dat het verwachte patroon op het canvas verschijnt.

Interessant is dat GPT-5.4 niet zomaar willekeurig klikte. Het gebruikte juist de feedbacklus via screenshots om te redeneren waar de tekening moest komen, welke kleur op dat moment geselecteerd was en hoe het canvas na elke actie veranderde. 

In de latere frames zie je duidelijk hoe het canvas zich ontwikkelt van een leeg raster naar een gestructureerde compositie met grote kleurvlakken, wat laat zien dat het model zich over meerdere beurten bewust bleef van zowel voortgang als lay-out.

Boekingsworkflow

In deze omgeving interageert de agent met een gesimuleerde boekingswebsite en krijgt de opdracht een reserveringsflow te voltooien. Dat betekent dat het door meerdere UI-staten na elkaar moet gaan in plaats van één geïsoleerde actie op te lossen.

Zo wordt computer use toegepast in deze demo:

• Interfacebegrip: GPT-5.4 begint met het interpreteren van de huidige schermlay-out en identificeert knoppen, formuliervelden, kalenders, dropdowns en bevestigingsknoppen.
• Stap-voor-stap navigatie: De agent beslist welk deel van de workflow eerst moet worden voltooid, zoals een optie kiezen, naar het volgende scherm gaan of een formelement openen.
• Formulieren invullen: Het voert de vereiste waarden in tekstvakken in en interageert met controls zoals dropdowns of datumkiezers.
• Statustracking over beurten heen: Na elke actie maakt de runner een nieuwe screenshot en stuurt die terug naar het model, zodat het kan verifiëren welke velden al zijn ingevuld en wat er nog moet gebeuren.
• Bevestiging en afronding: Zodra de vereiste invoer is gevuld, gaat de agent door naar de laatste bevestigingsstap en controleert of de reservering succesvol is afgerond.

Hoewel de Kanban-, Paint- en Booking-scenario’s allemaal UI-bediening demonstreren, moeten we ze toepassen op praktischere toepassingen. 

In de volgende sectie gebruik ik hetzelfde idee om een live nieuwsdashboard te bouwen dat recente verhalen verzamelt, de resultaten structureert en ze in een bruikbare interface weergeeft via een no-code workflow binnen de Codex-applicatie.

Stap 3: Een live nieuwsdashboard maken met GPT-5.4

In deze stap passen we dezelfde mogelijkheden voor computergebruik toe om een live nieuwsdashboard te bouwen. Het doel is een klein dashboard te maken waar een gebruiker een onderwerp kan kiezen, zoals AI, politiek, klimaat, technologie, wetenschap, enz., en dat het systeem vervolgens:

• Recente nieuwsverhalen uit betrouwbare bronnen verzamelt
• Kerninformatie uit die artikelen extraheert
• Drie beknopte samenvattingen genereert
• De resultaten in een gestructureerd dashboardformaat weergeeft

In plaats van de applicatie handmatig te schrijven, gebruiken we Codex binnen de GPT-5.4-omgeving voor computergebruik en geven we de volgende prompt door om de functionaliteit direct binnen de bestaande CUA-repository te genereren. 

Omdat Codex is verbonden met dezelfde omgeving die door de CUA-voorbeeldapp wordt gebruikt, kan de agent de repository analyseren, bepalen waar het dashboard moet komen en de UI en logica automatisch implementeren.

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

De prompt instrueert Codex om een live nieuwsdashboard binnen de bestaande repository te bouwen door te fungeren als een high-level specificatie in plaats van gedetailleerde implementatiecode. 

Codex inspecteert eerst de projectstructuur om te bepalen waar de dashboard-UI en backendlogica moeten worden toegevoegd. Vervolgens maakt het een invoerveld voor het onderwerp, haalt het in real time recente artikelen op uit betrouwbare bronnen, extraheert het kerndata zoals kop, bron en samenvatting, en filtert het de resultaten om relevantie te waarborgen. 

Tot slot rendert het precies drie nieuwsitems in een strakke, gestructureerde lay-out die eenvoudig in het dashboard kan worden bekeken of geëxporteerd.

GPT-5.4 computer use maakt deze workflow mogelijk doordat het model de ontwikkelomgeving kan observeren en ermee kan interacteren terwijl de functionaliteit wordt gegenereerd. 

In plaats van puur als codegenerator op te treden, analyseert Codex de repository, bepaalt waar nieuwe componenten moeten komen en implementeert het stapsgewijs het dashboard terwijl het de resultaten verifieert.

De workflow omvat verschillende kernstappen:

• Repository-inspectie: Codex scant de projectstructuur om te identificeren waar de dashboard-UI en ondersteunende logica moeten worden toegevoegd.
• Gebruikersinterface: Het maakt een invoerveld voor onderwerpen waarmee gebruikers kunnen zoeken naar thema’s zoals AI, klimaat of technologie.
• Realtime nieuws ophalen: Het systeem verzamelt recente artikelen uit betrouwbare bronnen in plaats van te vertrouwen op hardcoded voorbeelden.
• Filteren en samenvatten: GPT-5.4 extraheert nuttige metadata zoals de kop, bron en samenvatting, zodat de resultaten relevant blijven voor het gekozen onderwerp.
• Gestructureerde weergave: Tot slot toont het dashboard precies drie nieuwsitems in een kaartachtige lay-out zodat de resultaten makkelijk te scannen zijn.

Opmerking: Het uiteindelijke dashboard is niet met één enkele prompt gegenereerd. Er waren een paar iteraties en promptverfijningen nodig om het gewenste gedrag en uitvoerformaat te krijgen. Als je vergelijkbare experimenten uitvoert, reken dan op wat trial-and-error terwijl je de prompt en randvoorwaarden bijstelt. Zorg er ook voor dat je browser of systeem geautomatiseerde browserinteracties niet blokkeert, want dergelijke beperkingen kunnen de workflows voor computergebruik verstoren.

Conclusie

In deze tutorial hebben we verkend hoe GPT-5.4 Computer Use kan worden gebruikt om agents te bouwen die met echte softwareomgevingen interacteren in plaats van te vertrouwen op traditionele API’s. Met de CUA-voorbeeldapp van OpenAI bekeken we eerst hoe de lus voor computergebruik werkt via een paar sandbox-scenario’s, dus hoe het model interfaces observeert, acties voorstelt en resultaten via screenshots verifieert.

Vervolgens pasten we hetzelfde concept toe om binnen de CUA-omgeving met Codex een live nieuwsdashboard te bouwen. In plaats van de applicatie handmatig te schrijven, fungeerde een prompt als high-level specificatie, waardoor Codex de repository kon inspecteren, de UI en logica voor het dashboard kon genereren, recent nieuws uit betrouwbare bronnen kon ophalen en de resultaten in een gestructureerd formaat kon weergeven.

Van hieruit kun je dit idee verder uitbouwen door agents te maken die:

• Interne dashboards of rapportagetools automatiseren
• Onderzoeks­pipelines genereren
• Industrietrends in real time volgen
• Nieuwe productfuncties direct binnen bestaande repositories prototypen

Naarmate modellen voor computergebruik verbeteren, kunnen ze worden ingezet voor meer generalistische ontwikkel- en automatiseringsagents die met zowel software-interfaces als codebases kunnen interacteren.