Curso
Retrieval Augmented Generation (RAG) con LangChain
3 h
20.4K
GPT-5.4 incorpora capacidades nativas de uso del ordenador, lo que permite a los modelos interactuar directamente con interfaces de software en lugar de depender de APIs específicas de cada aplicación. Al revisar capturas de pantalla y emitir acciones como hacer clic, escribir y navegar, el modelo puede manejar navegadores y aplicaciones de forma similar a un usuario humano.
En este tutorial, usaremos la aplicación de ejemplo Computer-Using Agent (CUA) de OpenAI para explorar cómo GPT-5.4 interactúa con interfaces reales y, después, ampliaremos el entorno para crear un panel de noticias en directo que recopile y resuma las últimas noticias sobre un tema seleccionado.
Por el camino, primero veremos algunos escenarios integrados de uso del ordenador —como automatización Kanban, dibujo en lienzo y un flujo de reservas— para entender cómo funciona en la práctica el bucle observar–decidir–actuar. Luego aplicaremos la misma idea para crear un pequeño panel que recupere noticias recientes, extraiga la información clave y muestre los resultados en una interfaz estructurada.
Al finalizar este tutorial, sabrás:
- Ejecutar el entorno de uso del ordenador de GPT-5.4
- Observar cómo los agentes interactúan con interfaces reales
- Generar nuevas funcionalidades de aplicación con Codex y
- Crear un panel de noticias en directo
Actualización: si quieres profundizar en la teoría detrás del modelo sucesor de GPT-5.4, te recomendamos leer nuestro blog sobre GPT-5.5.
¿Qué es el uso del ordenador con GPT-5.4?
GPT-5.4 introduce capacidades nativas de uso del ordenador, lo que permite que los modelos interactúen con interfaces de software como lo haría una persona operando el equipo. En lugar de depender de APIs específicas, el modelo trabaja directamente con el estado visual de la interfaz, usando capturas de pantalla y el feedback de la UI para razonar qué acciones realizar a continuación. Así, los agentes pueden interactuar con entornos reales como navegadores, paneles e instrumentos de productividad.
Con el uso del ordenador, el modelo puede realizar acciones como:
- Navegar por páginas web
- Hacer clic en elementos de la interfaz
- Escribir texto en campos
- Desplazar documentos o páginas
- Interactuar con paneles y aplicaciones
Como el modelo razona sobre la propia interfaz, puede completar flujos de trabajo de varios pasos en distintas herramientas sin necesitar integraciones a medida.
Por ejemplo, un agente de uso del ordenador podría buscar información en la web, extraer datos relevantes, generar un informe y actualizar un panel.
Bajo el capó, el sistema funciona con un sencillo bucle de agente que observa la interfaz, decide una acción y verifica el resultado de forma repetida. Así se ejecuta el flujo:
- Enviar una solicitud: la persona desarrolladora proporciona un objetivo, la herramienta de uso del ordenador y una captura inicial de la interfaz.
- Razonamiento y propuesta de acción del modelo: GPT-5.4 analiza la captura y propone acciones de UI como navegar, hacer clic, escribir o desplazar.
- Ejecución: el cliente o runner ejecuta estas acciones en el entorno.
- Devolver el estado actualizado: al completar la acción, se envía al modelo una nueva captura y el estado actual de la página.
- Repetir el bucle: el modelo observa la interfaz actualizada y decide la siguiente acción hasta completar la tarea.
Este ciclo suele resumirse así:
observe -> decide -> act -> observeDemostración de uso del ordenador con GPT-5.4: crea un panel de noticias en directo (con ejemplos adicionales)
En esta sección, crearemos un panel de noticias en directo con el uso del ordenador de GPT-5.4 utilizando la app de ejemplo CUA de OpenAI. El agente interactuará con un navegador real para recopilar las últimas noticias sobre un tema elegido por el usuario, resumir los resultados y mostrarlos en un panel estructurado.
Así funciona el flujo:
- La persona usuaria selecciona un tema de interés en el panel.
- El agente navega por fuentes fiables en el navegador e identifica artículos recientes y relevantes sobre ese tema.
- GPT-5.4 extrae el titular, la fuente y la información clave de cada artículo.
- El agente resume los hallazgos y produce tres resúmenes breves.
- Los resultados se muestran en un diseño tipo panel.
Además del panel de noticias, también exploraremos brevemente algunos prompts más pequeños que demuestran cómo el uso del ordenador con GPT-5.4 puede generar aplicaciones interactivas dentro del mismo entorno.
Bajo el capó, el sistema se ejecuta mediante el bucle del agente de uso del ordenador, donde el modelo observa el entorno a través de capturas de pantalla, propone acciones de UI (como navegación o interacción) y recibe el estado actualizado tras cada paso.
Paso 1: clonar y configurar la app de ejemplo CUA
Para empezar, usaremos la app de ejemplo CUA de OpenAI y configuraremos el repositorio localmente. Simplemente clona el repositorio e instala las dependencias así:
git clone https://github.com/openai/openai-cua-sample-app.git
cd openai-cua-sample-app
corepack enable
pnpm install
cp .env.example .envEsto crea un archivo .env donde añadirás tu clave de API de OpenAI. Inicia sesión en tu cuenta de OpenAI y ve al panel para generar una nueva clave.
Si pnpm install muestra avisos sobre paquetes opcionales como sharp o esbuild, puedes ignorarlos para desarrollo local. A continuación, instala el runtime de Playwright para el navegador:
pnpm playwright:installEn sistemas Linux, puede que también necesites dependencias del SO:
pnpm playwright:install:with-depsPor último, inicia los servidores de desarrollo:
pnpm devAhora puedes abrir la consola del operador de CUA en http://127.0.0.1:3000. Esta consola te permite lanzar ejecuciones de agentes e inspeccionar registros y capturas.
Paso 2: explorar los escenarios integrados de uso del ordenador
La app de ejemplo incluye tres entornos sandbox diseñados para demostrar el comportamiento de uso del ordenador. Estos entornos ayudan a ilustrar cómo GPT-5.4 interactúa con las interfaces.
Automatización de un tablero Kanban
El escenario del tablero Kanban muestra cómo el uso del ordenador con GPT-5.4 puede razonar sobre diseños de interfaz estructurados y manipularlos mediante interacción visual.
En este ejemplo, al agente se le da un objetivo como reorganizar tareas en un tablero Kanban. En lugar de llamar a una API de la aplicación, el agente interactúa con la interfaz igual que una persona: observa el tablero, identifica las tarjetas de tareas y realiza operaciones de arrastrar y soltar.
Así se aplica el uso del ordenador en esta demo:
- Comprensión de la interfaz: GPT-5.4 comienza interpretando el diseño actual de la pantalla, identificando botones, campos de formulario, calendarios, desplegables y controles de confirmación.
- Navegación paso a paso: el agente decide qué parte del flujo completar primero, como elegir una opción, pasar a la siguiente pantalla o abrir un elemento de formulario.
- Relleno de formularios: introduce los valores necesarios en los cuadros de texto e interactúa con controles como desplegables o selectores de fecha.
- Seguimiento de estado entre pasos: tras cada acción, el runner captura una nueva captura y la devuelve al modelo, lo que permite verificar qué campos ya están completos y qué falta por hacer.
- Confirmación y cierre: cuando están completos los datos necesarios, el agente pasa al paso final de confirmación y comprueba que la reserva se ha realizado correctamente.
Aunque los escenarios de Kanban, Paint y Reserva demuestran control de la UI, necesitamos aplicarlos a casos más prácticos.
En la siguiente sección, usaré esta misma idea para crear un panel de noticias en directo que recopile historias recientes, estructure los resultados y los muestre en una interfaz útil mediante un flujo sin código dentro de la aplicación Codex.
Paso 3: crear un panel de noticias en directo con GPT-5.4
En este paso, aplicaremos las mismas capacidades de uso del ordenador para crear un panel de noticias en directo. El objetivo es crear un pequeño panel donde el usuario pueda seleccionar un tema de interés —IA, política, clima, tecnología, ciencia, etc.— y el sistema entonces:
- Recopile noticias recientes de fuentes fiables
- Extraiga la información clave de esos artículos
- Genere tres resúmenes concisos
- Muestre los resultados en un formato de panel estructurado
En lugar de programar la aplicación a mano, utilizaremos Codex dentro del entorno de uso del ordenador de GPT-5.4 y le pasaremos el siguiente prompt para que genere la funcionalidad directamente dentro del repositorio CUA existente.
Como Codex está conectado al mismo entorno que usa la app de ejemplo CUA, el agente puede analizar el repositorio, decidir dónde debe vivir el panel e implementar automáticamente la UI y la lógica.
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 runnerEl prompt indica a Codex que cree un panel de noticias en directo dentro del repositorio existente actuando como una especificación de alto nivel en lugar de código detallado.
Primero, Codex inspecciona la estructura del proyecto para determinar dónde añadir la UI del panel y la lógica de backend. Luego crea un campo de entrada de tema, recupera artículos recientes de fuentes fiables en tiempo real, extrae metadatos clave como titular, fuente y resumen, y filtra los resultados para garantizar su relevancia.
Por último, muestra exactamente tres noticias en un diseño limpio y estructurado que puede verse o exportarse fácilmente desde el panel.
