Tutorial sull'uso del computer con GPT-5.4: crea una dashboard di notizie in tempo reale

Sotto il cofano, GPT-5.4 esegue il loop dell'agente di uso del computer:

• L'agente riceve uno screenshot della bacheca Kanban insieme all'URL corrente.
• Il modello analizza il layout visivo e determina dove si trovano le card delle attività e le colonne.
• GPT-5.4 propone azioni sulla UI come:
• spostare il cursore su una card
• cliccare e tenere premuto
• trascinare la card in un'altra colonna
• Il runner esegue queste azioni tramite eventi del puntatore di Playwright.
• Viene catturato un nuovo screenshot e inviato al modello in modo che possa verificare lo stato aggiornato della bacheca.

Il processo continua finché la bacheca non riflette la configurazione desiderata.

Ciò che rende interessante questo esempio è che il modello non si basa su alcuna conoscenza interna dell'applicazione Kanban. 

Invece, ragiona interamente dallo stato visivo dell'interfaccia, determinando dove cliccare, trascinare e rilasciare gli elementi in base allo screenshot. Questo dimostra un vantaggio chiave dell'uso del computer con GPT-5.4: gli sviluppatori possono automatizzare i workflow senza creare integrazioni personalizzate o API per ogni strumento.

Interazione con il canvas di Paint

Lo scenario Paint gestisce compiti che dipendono dal layout visivo, dal ragionamento spaziale e da un controllo preciso del cursore piuttosto che da un semplice riempimento di form. In questo setup, all'agente viene dato un istruzione di disegno e deve completarla direttamente all'interno dell'app di sketch basata su browser. 

Ho chiesto all'agente di disegnare scene diverse sul canvas, e GPT-5.4 ha gestito il compito selezionando i colori, individuando l'area corretta e riempiendo la griglia di conseguenza.

A differenza dell'esempio Kanban, dove la sfida principale era spostare card strutturate tra colonne, questo scenario dipende molto di più dall'interpretazione dello stato visivo dell'app e dal prendere una serie di decisioni di interazione a basso livello. Ecco come l'uso del computer lo ha realizzato in questa demo:

• Movimento e puntamento del cursore: GPT-5.4 interpreta innanzitutto il layout dell'interfaccia di sketch, inclusa la palette colori a sinistra e il canvas in stile pixel al centro.
• Selezione di strumenti e colori: identifica le opzioni della palette disponibili e clicca il colore appropriato prima di disegnare. Nell'esecuzione catturata, il modello cambia colore e li usa intenzionalmente per creare diverse regioni sul canvas.
• Interazione con il canvas: invece di chiamare API del canvas, l'agente interagisce interamente tramite azioni sulla UI spostando il puntatore su celle specifiche e riempiendole con pattern ripetuti.
• Verifica dello stato: dopo ogni batch di azioni, il runner cattura un nuovo screenshot e lo restituisce al modello, così può verificare che il pattern atteso stia comparendo sul canvas.

Una cosa interessante da notare è che GPT-5.4 non stava cliccando a caso. Invece, stava usando il loop di feedback degli screenshot per ragionare su dove dovesse andare il disegno, quale colore fosse selezionato e come fosse cambiato il canvas dopo ogni azione. 

Nei frame successivi, puoi vedere chiaramente il canvas evolversi da una griglia vuota a una composizione strutturata con grandi regioni colorate, mostrando che il modello manteneva la consapevolezza sia dei progressi sia del layout su più turni.

Flusso di prenotazione

In questo ambiente, l'agente interagisce con un sito di prenotazione simulato e gli viene chiesto di completare un flusso di prenotazione. Ciò significa che deve passare attraverso diversi stati della UI in sequenza, piuttosto che risolvere una singola azione isolata.

Ecco come viene applicato l'uso del computer in questa demo:

• Comprensione dell'interfaccia: GPT-5.4 inizia interpretando il layout dello schermo corrente, identificando pulsanti, campi modulo, calendari, menu a discesa e controlli di conferma.
• Navigazione passo passo: l'agente decide quale parte del workflow completare per prima, ad esempio scegliere un'opzione, passare alla schermata successiva o aprire un elemento del form.
• Compilazione dei moduli: inserisce i valori richiesti nelle caselle di testo e interagisce con controlli come menu a discesa o selettori di date.
• Tracciamento dello stato tra i turni: dopo ogni azione, il runner cattura un nuovo screenshot e lo restituisce al modello, permettendogli di verificare quali campi sono già completi e cosa resta da fare.
• Conferma e completamento: una volta inseriti gli input richiesti, l'agente procede alla fase finale di conferma e verifica che la prenotazione sia stata completata con successo.

Sebbene gli scenari Kanban, Paint e Booking mostrino tutti il controllo della UI, dobbiamo applicarli ad applicazioni più pratiche. 

Nella prossima sezione userò la stessa idea per creare una dashboard di notizie in tempo reale che raccoglie storie recenti, struttura i risultati e li visualizza in un'interfaccia utilizzabile con un flusso no-code all'interno dell'applicazione Codex .

Passo 3: Creare una dashboard di notizie in tempo reale con GPT-5.4

In questo passaggio applicheremo le stesse funzionalità di uso del computer per creare una dashboard di notizie in tempo reale. L'obiettivo è creare una piccola dashboard in cui un utente possa selezionare un argomento di interesse, come AI, politica, clima, tecnologia, scienza, ecc., e il sistema poi:

• Raccoglie notizie recenti da fonti affidabili
• Estrae le informazioni chiave da quegli articoli
• Genera tre sintesi concise
• Visualizza i risultati in un formato di dashboard strutturato

Invece di scrivere l'applicazione manualmente, useremo Codex all'interno dell'ambiente di uso del computer di GPT-5.4 e passeremo il seguente prompt per generare la funzionalità direttamente all'interno del repository CUA esistente. 

Poiché Codex è connesso allo stesso ambiente usato dall'app di esempio CUA, l'agente può analizzare il repository, decidere dove debba vivere la dashboard e implementare automaticamente la UI e la logica.

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 runnerOfferto da

Il prompt istruisce Codex a costruire una dashboard di notizie in tempo reale all'interno del repository esistente fungendo da specifica di alto livello piuttosto che da codice di implementazione dettagliato. 

Codex innanzitutto ispeziona la struttura del progetto per determinare dove aggiungere la UI della dashboard e la logica backend. Poi crea un campo di input per l'argomento, recupera in tempo reale articoli recenti da fonti affidabili, estrae metadati chiave come titolo, fonte e riassunto e filtra i risultati per garantirne la pertinenza. 

Infine, visualizza esattamente tre notizie in un layout pulito e strutturato che può essere facilmente consultato o esportato nella dashboard.

L'uso del computer con GPT-5.4 abilita questo workflow consentendo al modello di osservare e interagire con l'ambiente di sviluppo mentre genera la funzionalità. 

Invece di agire puramente come generatore di codice, Codex analizza il repository, determina dove inserire i nuovi componenti e implementa progressivamente la dashboard verificando i risultati.

Il workflow prevede diversi passaggi chiave:

• Ispezione del repository: Codex analizza la struttura del progetto per identificare dove aggiungere la UI della dashboard e la logica di supporto.
• Interfaccia utente: crea un campo di input per l'argomento che consente di cercare temi come AI, clima o tecnologia.
• Recupero notizie in tempo reale: il sistema raccoglie articoli recenti da fonti affidabili invece di basarsi su esempi hardcoded.
• Filtraggio e sintesi: GPT-5.4 estrae metadati utili come titolo, fonte e riassunto, garantendo che i risultati restino pertinenti all'argomento selezionato.
• Render strutturato: infine, la dashboard mostra esattamente tre notizie in un layout a card, così i risultati sono facili da scansionare.

Nota: la dashboard finale non è stata generata con un singolo prompt. Sono servite alcune iterazioni e rifiniture del prompt per ottenere il comportamento e il formato di output desiderati. Quando esegui esperimenti simili, aspettati un po' di tentativi ed errori mentre aggiusti il prompt e i vincoli. Inoltre, assicurati che il tuo browser o sistema non blocchi le interazioni automatizzate del browser, poiché tali restrizioni possono interferire con i workflow di uso del computer.

Conclusione

In questo tutorial, abbiamo esplorato come l'uso del computer con GPT-5.4 possa essere utilizzato per creare agenti che interagiscono con ambienti software reali invece di affidarsi a API tradizionali. Usando l'app di esempio CUA di OpenAI, abbiamo prima esaminato come funziona il loop di uso del computer attraverso alcuni scenari sandbox, cioè come il modello osserva le interfacce, propone azioni e verifica i risultati tramite screenshot.

Abbiamo poi applicato lo stesso concetto per creare una dashboard di notizie in tempo reale usando Codex all'interno dell'ambiente CUA. Invece di scrivere manualmente l'applicazione, un prompt ha agito come specifica di alto livello, permettendo a Codex di ispezionare il repository, generare la UI e la logica della dashboard, recuperare notizie recenti da fonti affidabili e visualizzare i risultati in un formato strutturato.

Da qui, puoi estendere ulteriormente questa idea costruendo agenti che:

• Automatizzano dashboard interne o strumenti di reporting
• Generano pipeline di ricerca
• Tracciano tendenze di settore in tempo reale
• Prototipano nuove funzionalità di prodotto direttamente all'interno di repository esistenti

Man mano che i modelli di uso del computer migliorano, potranno aprire la strada ad agenti di sviluppo e automazione più generali, in grado di interagire sia con interfacce software sia con codebase.