Tutorial de uso de computador no GPT-5.4: construa um dashboard de notícias em tempo real

Por baixo dos panos, o GPT-5.4 executa o loop do agente de uso de computador:

• O agente recebe uma captura de tela do quadro Kanban juntamente com a URL atual.
• O modelo analisa o layout visual e determina onde estão os cartões de tarefa e as colunas.
• O GPT-5.4 propõe ações de UI como:
• mover o cursor até um cartão
• clicar e segurar
• arrastar o cartão para outra coluna
• O runner executa essas ações por meio de eventos de ponteiro do Playwright.
• Uma nova captura de tela é feita e enviada de volta ao modelo para que ele verifique o estado atualizado do quadro.

O processo continua até que o quadro reflita a configuração desejada.

O interessante aqui é que o modelo não depende de nenhum conhecimento interno sobre o aplicativo Kanban.

Em vez disso, ele raciocina inteiramente a partir do estado visual da interface, decidindo onde clicar, arrastar e soltar elementos com base na captura de tela. Isso demonstra uma vantagem-chave do uso de computador no GPT-5.4: os desenvolvedores conseguem automatizar fluxos de trabalho sem construir integrações personalizadas ou APIs para cada ferramenta.

Interação com canvas de pintura

O cenário Paint lida com tarefas que dependem de layout visual, raciocínio espacial e controle preciso do cursor, em vez de simples preenchimento de formulários. Nesse setup, o agente recebe uma instrução de desenho e precisa concluí-la diretamente dentro do aplicativo de esboço no navegador.

Eu pedi ao agente para rabiscar cenas diferentes no canvas, e o GPT-5.4 deu conta do recado escolhendo cores, localizando a área correta para desenhar e preenchendo a grade conforme necessário.

Diferente do exemplo de Kanban, onde o desafio central era mover cartões estruturados entre colunas, este cenário depende muito mais de interpretar o estado visual do app e tomar uma série de decisões de interação em baixo nível. Veja como o uso de computador fez isso nesta demo:

• Movimento e mira do cursor: o GPT-5.4 primeiro interpreta o layout da interface de desenho, incluindo a paleta de cores à esquerda e o canvas em estilo pixel no centro.
• Seleção de ferramenta e cor: identifica as opções disponíveis na paleta e clica na cor apropriada antes de desenhar. Na execução capturada, o modelo alterna cores e as usa de forma intencional para criar diferentes regiões no canvas.
• Interação com o canvas: em vez de chamar qualquer API do canvas, o agente interage com o app inteiramente por ações de UI, movendo o ponteiro para células específicas e preenchendo-as em padrões repetidos.
• Verificação de estado: após cada lote de ações, o runner captura uma nova imagem e a retorna ao modelo para que ele verifique se o padrão esperado está aparecendo no canvas.

Um ponto interessante é que o GPT-5.4 não estava apenas clicando aleatoriamente. Em vez disso, usava o loop de feedback por captura de tela para decidir onde desenhar, qual cor estava selecionada e como o canvas mudava após cada ação.

Nos quadros finais, dá para ver claramente o canvas evoluindo de uma grade em branco para uma composição estruturada com grandes regiões coloridas, mostrando que o modelo mantinha consciência tanto do progresso quanto do layout ao longo de várias iterações.

Fluxo de reserva (booking)

Neste ambiente, o agente interage com um site simulado de reservas e precisa concluir um fluxo de agendamento. Isso significa atravessar várias telas da UI em sequência, em vez de resolver uma ação isolada.

Veja como o uso de computador é aplicado nesta demonstração:

• Entendimento da interface: o GPT-5.4 começa interpretando o layout atual da tela, identificando botões, campos de formulário, calendários, dropdowns e controles de confirmação.
• Navegação passo a passo: o agente decide qual parte do fluxo concluir primeiro, como escolher uma opção, avançar para a próxima tela ou abrir um elemento de formulário.
• Preenchimento de formulários: ele insere os valores necessários em caixas de texto e interage com controles como dropdowns ou seletores de data.
• Acompanhamento de estado entre etapas: após cada ação, o runner captura uma nova imagem e a retorna ao modelo, permitindo que ele verifique quais campos já estão completos e o que ainda falta fazer.
• Confirmação e conclusão: quando os dados obrigatórios são preenchidos, o agente segue para a etapa final de confirmação e verifica se a reserva foi concluída com sucesso.

Embora os cenários de Kanban, Paint e Booking mostrem controle de UI, precisamos aplicá-los a casos mais práticos.

Na próxima seção, vou usar a mesma ideia para construir um dashboard de notícias em tempo real que coleta matérias recentes, estrutura os resultados e os apresenta em uma interface utilizável usando um fluxo no-code dentro do aplicativo Codex.

Passo 3: criando um dashboard de notícias ao vivo com o GPT-5.4

Nesta etapa, vamos aplicar as mesmas capacidades de uso de computador para construir um dashboard de notícias em tempo real. A meta é criar um pequeno dashboard onde o usuário pode selecionar um tema de interesse, como IA, política, clima, tecnologia, ciência etc., e o sistema irá:

• Coletar notícias recentes de fontes confiáveis
• Extrair informações essenciais desses artigos
• Gerar três resumos objetivos
• Apresentar os resultados em um formato de dashboard estruturado

Em vez de escrever a aplicação manualmente, vamos usar o Codex dentro do ambiente de uso de computador do GPT-5.4 e passar o prompt abaixo para gerar o recurso diretamente no repositório CUA existente.

Como o Codex está conectado ao mesmo ambiente usado pelo app de exemplo CUA, o agente pode analisar o repositório, decidir onde o dashboard deve residir e implementar a UI e a lógica automaticamente.

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

O prompt orienta o Codex a construir um dashboard de notícias em tempo real dentro do repositório existente, servindo como uma especificação de alto nível, e não como código de implementação detalhado.

O Codex primeiro inspeciona a estrutura do projeto para determinar onde a UI do dashboard e a lógica de backend devem ser adicionadas. Em seguida, cria um campo de entrada de tema, recupera artigos recentes de fontes confiáveis em tempo real, extrai metadados essenciais como título, fonte e resumo, e filtra os resultados para garantir relevância.

Por fim, ele exibe exatamente três itens de notícia em um layout limpo e estruturado que pode ser facilmente visualizado ou exportado no dashboard.

O uso de computador no GPT-5.4 viabiliza esse fluxo ao permitir que o modelo observe e interaja com o ambiente de desenvolvimento enquanto gera o recurso.

Em vez de agir apenas como um gerador de código, o Codex analisa o repositório, determina onde os novos componentes devem ficar e implementa o dashboard de forma incremental, verificando os resultados.

O fluxo envolve várias etapas-chave:

• Inspeção do repositório: o Codex examina a estrutura do projeto para identificar onde adicionar a UI do dashboard e a lógica de suporte.
• Interface do usuário: cria um campo de entrada de tema que permite pesquisar assuntos como IA, clima ou tecnologia.
• Busca de notícias em tempo real: o sistema coleta artigos recentes de fontes confiáveis, em vez de depender de exemplos fixos.
• Filtragem e sumarização: o GPT-5.4 extrai metadados úteis, como título, fonte e resumo, garantindo que os resultados se mantenham relevantes ao tema escolhido.
• Renderização estruturada: por fim, o dashboard exibe exatamente três itens de notícia em um layout de cartões para facilitar a leitura.

Observação: o dashboard final não foi gerado com um único prompt. Foram necessárias algumas iterações e ajustes no prompt para chegar ao comportamento e ao formato de saída desejados. Ao rodar experimentos semelhantes, espere um pouco de tentativa e erro enquanto adapta o prompt e as restrições. Além disso, verifique se o seu navegador ou sistema não bloqueia interações automatizadas, pois essas restrições podem atrapalhar fluxos de uso de computador.

Conclusão

Neste tutorial, exploramos como o uso de computador do GPT-5.4 pode ser aplicado para construir agentes que interagem com ambientes de software reais, em vez de depender de APIs tradicionais. Usando o app de exemplo CUA da OpenAI, primeiro examinamos como o loop de uso de computador funciona por meio de alguns cenários sandbox, isto é, como o modelo observa interfaces, propõe ações e verifica resultados por meio de capturas de tela.

Depois, aplicamos o mesmo conceito para construir um dashboard de notícias em tempo real usando o Codex dentro do ambiente CUA. Em vez de escrever a aplicação manualmente, um prompt funcionou como especificação de alto nível, permitindo que o Codex inspecionasse o repositório, gerasse a UI e a lógica do dashboard, recuperasse notícias recentes de fontes confiáveis e exibisse os resultados em um formato estruturado.

A partir daqui, você pode levar essa ideia adiante criando agentes que:

• Automatizam dashboards internos ou ferramentas de relatórios
• Geram pipelines de pesquisa
• Acompanham tendências do mercado em tempo real
• Prototipam novos recursos de produto diretamente em repositórios existentes

À medida que os modelos de uso de computador evoluem, eles tendem a viabilizar agentes de desenvolvimento e automação mais gerais, capazes de interagir tanto com interfaces de software quanto com bases de código.