GPT-5.4-datoranvändning: Bygg en live-nyhetsdashboard

Under huven kör GPT-5.4 igenom agentloopen för datoranvändning:

• Agenten får en skärmdump av Kanban-tavlan tillsammans med den aktuella URL:en.
• Modellen analyserar den visuella layouten och avgör var uppgiftskort och kolumner finns.
• GPT-5.4 föreslår UI-åtgärder som:
• flytta pekaren till ett kort
• klicka och hålla ned
• dra kortet till en annan kolumn
• Köraren utför dessa åtgärder via Playwrights pekhändelser.
• En ny skärmdump tas och skickas tillbaka till modellen så att den kan verifiera tavlans uppdaterade tillstånd.

Processen fortsätter tills tavlan återspeglar den önskade konfigurationen.

Det intressanta här är att modellen inte förlitar sig på någon intern kunskap om Kanban-applikationen. 

I stället resonerar den helt utifrån gränssnittets visuella tillstånd, och avgör var den ska klicka, dra och släppa element baserat på skärmdumpen. Detta visar en nyckelfördel med GPT-5.4-datoranvändning: utvecklare kan automatisera arbetsflöden utan att bygga anpassade integrationer eller API:er för varje verktyg.

Interaktion på rit-canvas

Paint-scenariot hanterar uppgifter som beror på visuell layout, rumsligt resonemang och exakt pekarkontroll snarare än enkel formulärifyllning. I den här uppsättningen får agenten en ritinstruktion och måste slutföra den direkt i den webbläsarbaserade skissapplikationen. 

Jag gav agenten i uppdrag att skissa olika scener över canvasen, och GPT-5.4 hanterade uppgiften genom att välja färger, hitta rätt rityta och fylla rutnätet därefter.

Till skillnad från Kanban-exemplet, där kärnutmaningen var att flytta strukturerade kort mellan kolumner, beror detta scenario mycket mer på att tolka appens visuella tillstånd och fatta en serie lågnivåbeslut om interaktion. Så här gick datoranvändningen till i den här demon:

• Pekarrörelser och målsökning: GPT-5.4 tolkar först skissgränssnittets layout, inklusive färgpaletten till vänster och den tomma canvasen i pixelstil i mitten.
• Val av verktyg och färg: Den identifierar de tillgängliga palettalternativen och klickar på lämplig färg innan den ritar. I den fångade körningen byter modellen färger och använder dem medvetet för att skapa olika områden på canvasen.
• Canvasinteraktion: I stället för att anropa något canvas-API interagerar agenten helt med appen via UI-åtgärder genom att flytta pekaren till specifika celler och fylla dem i upprepade mönster.
• Tillståndsverifiering: Efter varje åtgärdssats tar köraren en ny skärmdump och returnerar den till modellen så att den kan verifiera att det förväntade mönstret framträder på canvasen.

En intressant sak att notera är att GPT-5.4 inte bara klickade slumpmässigt. I stället använde den feedbackloopen med skärmdumpar för att resonera kring var teckningen skulle placeras, vilken färg som för närvarande var vald och hur canvasen hade förändrats efter varje åtgärd. 

I de senare bildrutorna kan du tydligt se hur canvasen utvecklas från ett tomt rutnät till en strukturerad komposition med stora färgade ytor, vilket visar att modellen upprätthöll medvetenhet om både framsteg och layout över flera steg.

Bokningsflöde

I denna miljö interagerar agenten med en simulerad bokningswebbplats och ombeds att slutföra ett bokningsflöde. Det innebär att den måste gå igenom flera UI-tillstånd i följd snarare än att lösa en enskild isolerad åtgärd.

Så här används datoranvändning i den här demon:

• Förståelse av gränssnittet: GPT-5.4 börjar med att tolka den aktuella skärmlayouten och identifiera knappar, formulärfält, kalendrar, rullgardinsmenyer och bekräftelsekontroller.
• Stegvis navigering: Agenten bestämmer vilken del av arbetsflödet som ska göras först, till exempel att välja ett alternativ, gå till nästa skärm eller öppna ett formulärelement.
• Formulärifyllning: Den fyller i nödvändiga värden i textrutor och interagerar med kontroller som rullgardinsmenyer eller datumväljare.
• Tillståndsspårning över steg: Efter varje åtgärd tar köraren en ny skärmdump och returnerar den till modellen, vilket gör att modellen kan verifiera vilka fält som redan är ifyllda och vad som återstår att göra.
• Bekräftelse och slutförande: När de nödvändiga inmatningarna är ifyllda går agenten vidare till det sista bekräftelsesteget och kontrollerar att bokningen slutförts.

Även om scenarierna Kanban, Paint och Bokning alla visar UI-styrning behöver vi tillämpa dem på mer praktiska tillämpningar. 

I nästa avsnitt använder jag samma idé för att bygga en live-nyhetsdashboard som samlar in senaste artiklar, strukturerar resultaten och renderar dem i ett användbart gränssnitt med ett no-code-arbetsflöde i Codex-applikationen.

Steg 3: Skapa en live-nyhetsdashboard med GPT-5.4

I detta steg tillämpar vi samma funktioner för datoranvändning för att bygga en live-nyhetsdashboard. Målet är att skapa en liten dashboard där en användare kan välja ett ämne av intresse, såsom AI, politik, klimat, teknik, vetenskap etc., och systemet kommer sedan att:

• Samla in senaste nyhetsartiklar från pålitliga källor
• Extrahera nyckelinformation från dessa artiklar
• Generera tre kortfattade sammanfattningar
• Rendera resultaten i ett strukturerat dashboardformat

I stället för att skriva applikationen manuellt använder vi Codex i GPT-5.4-miljön för datoranvändning och skickar följande prompt för att generera funktionen direkt i det befintliga CUA-repot. 

Eftersom Codex är anslutet till samma miljö som CUA-exempelappen använder kan agenten analysera repot, avgöra var dashboarden ska finnas och implementera UI och logik automatiskt.

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

Prompten instruerar Codex att bygga en live-nyhetsdashboard i det befintliga repot genom att fungera som en hög-nivåspecifikation snarare än detaljerad implementationskod. 

Codex inspekterar först projektstrukturen för att avgöra var dashboardens UI och backendlogik ska läggas till. Den skapar sedan ett inmatningsfält för ämne, hämtar senaste artiklar från pålitliga källor i realtid, extraherar nyckelmetadata som rubrik, källa och sammanfattning, och filtrerar resultaten för att säkerställa relevans. 

Slutligen renderar den exakt tre nyhetsposter i en ren, strukturerad layout som enkelt kan visas eller exporteras i dashboarden.

GPT-5.4-datoranvändning möjliggör detta arbetsflöde genom att låta modellen observera och interagera med utvecklingsmiljön samtidigt som funktionen genereras. 

I stället för att agera enbart som en kodgenerator analyserar Codex repot, avgör var nya komponenter ska finnas och implementerar successivt dashboarden samtidigt som resultaten verifieras.

Arbetsflödet innefattar flera viktiga steg:

• Repo-inspektion: Codex skannar projektstrukturen för att identifiera var dashboardens UI och stödfunktioner ska läggas till.
• Användargränssnitt: Den skapar ett inmatningsfält för ämnen som låter användare söka efter ämnen som AI, klimat eller teknik.
• Nyhetshämtning i realtid: Systemet samlar in senaste artiklar från pålitliga källor i stället för att förlita sig på hårdkodade exempel.
• Filtrering och sammanfattning: GPT-5.4 extraherar användbar metadata såsom rubrik, källa och sammanfattning, och säkerställer att resultaten förblir relevanta för det valda ämnet.
• Strukturerad rendering: Slutligen visar dashboarden exakt tre nyhetsposter i en kortlayout så att resultaten blir lätta att överblicka.

Obs: Den slutliga dashboarden genererades inte från en enda prompt. Det krävdes några iterationer och justeringar av prompten för att få önskat beteende och utdataformat. När du kör liknande experiment, räkna med en del trial-and-error samtidigt som du justerar prompten och begränsningarna. Se också till att din webbläsare eller ditt system inte blockerar automatiserade webbläsarinteraktioner, eftersom sådana begränsningar kan störa arbetsflöden för datoranvändning.

Slutsats

I den här guiden utforskade vi hur GPT-5.4-datoranvändning kan användas för att bygga agenter som interagerar med verkliga programvarumiljöer i stället för att förlita sig på traditionella API:er. Med OpenAI:s CUA-exempelapp granskade vi först hur loopen för datoranvändning fungerar genom några sandlådescenarier, det vill säga hur modellen observerar gränssnitt, föreslår åtgärder och verifierar resultat via skärmdumpar.

Sedan tillämpade vi samma koncept för att bygga en live-nyhetsdashboard med Codex i CUA-miljön. I stället för att skriva applikationen manuellt fungerade en prompt som en hög-nivåspecifikation, vilket gjorde det möjligt för Codex att inspektera repot, generera UI och logik för dashboarden, hämta senaste nyheter från pålitliga källor och rendera resultaten i ett strukturerat format.

Härifrån kan du bygga vidare på idén genom att skapa agenter som:

• Automatiserar interna dashboards eller rapporteringsverktyg
• Genererar forskningsflöden
• Följer branschtrender i realtid
• Prototypar nya produktfunktioner direkt i befintliga repos

Allt eftersom modeller för datoranvändning fortsätter att förbättras kan de bli öppna för mer allmänna utvecklings- och automationsagenter som kan interagera med både programgränssnitt och kodbaser.