Cours
Retrieval Augmented Generation (RAG) avec LangChain
3 h
17.8K
GPT-5.4 introduit des capacités natives d’usage de l’ordinateur, permettant aux modèles d’interagir directement avec des interfaces logicielles sans dépendre d’API spécifiques. En analysant des captures d’écran et en émettant des actions comme cliquer, taper et naviguer, le modèle peut piloter des navigateurs et des applications comme le ferait un utilisateur humain.
Dans ce tutoriel, nous utiliserons l’application d’exemple Computer-Using Agent (CUA) d’OpenAI pour voir comment GPT-5.4 interagit avec de vraies interfaces, puis nous étendrons l’environnement pour créer un tableau de bord d’actualités en direct qui collecte et résume les dernières informations sur un sujet choisi.
En chemin, nous examinerons d’abord quelques scénarios intégrés d’usage de l’ordinateur, comme l’automatisation d’un Kanban, le dessin sur une toile et un flux de réservation, pour comprendre concrètement la boucle observer–décider–agir. Nous appliquerons ensuite la même logique pour créer un petit tableau de bord qui récupère les actualités récentes, en extrait les informations clés et affiche les résultats dans une interface structurée.
À la fin de ce tutoriel, vous saurez :
- Exécuter l’environnement Computer Use de GPT-5.4
- Observer comment les agents interagissent avec de vraies interfaces
- Générer de nouvelles fonctionnalités applicatives avec Codex et
- Construire un tableau de bord d’actualités en direct
Actualisation : pour approfondir la théorie derrière le modèle successeur de GPT‑5.4, nous vous recommandons de consulter notre billet de blog GPT-5.5.
Qu’est-ce que l’usage de l’ordinateur avec GPT-5.4 ?
GPT-5.4 introduit des capacités natives d’usage de l’ordinateur, permettant aux modèles d’interagir avec des interfaces logicielles comme le ferait un opérateur humain. Plutôt que de s’appuyer sur des API spécifiques, le modèle travaille directement à partir de l’état visuel de l’interface, en utilisant des captures d’écran et des retours de l’UI pour raisonner sur les actions à entreprendre. Cela permet aux agents d’interagir avec des environnements réels comme des navigateurs, des tableaux de bord et des outils de productivité.
Grâce à l’usage de l’ordinateur, le modèle peut effectuer des actions comme :
- Naviguer sur des pages web
- Cliquer sur des éléments d’interface
- Saisir du texte dans des champs
- Faire défiler des documents ou des pages
- Interagir avec des tableaux de bord et des applications
Comme le modèle raisonne à partir de l’interface elle-même, il peut mener des parcours multi‑étapes à travers différents outils sans nécessiter d’intégrations sur mesure.
Par exemple, un agent d’usage de l’ordinateur peut parcourir le web pour trouver des informations, extraire des données pertinentes, générer un rapport et mettre à jour un tableau de bord.
En coulisses, le système fonctionne via une boucle d’agent simple qui observe l’interface, décide d’une action et vérifie le résultat. Voici le déroulé :
- Envoyer une requête : le développeur fournit un objectif, l’outil d’usage de l’ordinateur et une première capture d’écran de l’interface.
- Raisonnement du modèle et proposition d’action : GPT-5.4 analyse la capture d’écran et propose des actions d’UI comme naviguer, cliquer, taper ou faire défiler.
- Exécution : le client ou le runner exécute ces actions dans l’environnement.
- Retour d’état mis à jour : une fois l’action terminée, une nouvelle capture d’écran et l’état courant de la page sont renvoyés au modèle.
- Répéter la boucle : le modèle observe l’interface mise à jour et décide de l’action suivante jusqu’à accomplissement de la tâche.
Cette boucle se résume souvent ainsi :
observe -> decide -> act -> observeDémo de l’usage de l’ordinateur avec GPT-5.4 : créer un tableau de bord d’actualités en direct (avec d’autres exemples)
Dans cette section, nous allons créer un tableau de bord d’actualités en direct, propulsé par l’usage de l’ordinateur de GPT-5.4, à l’aide de l’app CUA d’OpenAI. L’agent interagira avec un véritable navigateur pour collecter les dernières informations sur un sujet choisi par l’utilisateur, les résumer et les afficher dans un tableau de bord structuré.
Voici comment le flux fonctionne :
- L’utilisateur sélectionne un sujet d’intérêt dans le tableau de bord.
- L’agent navigue vers des sources d’actualités de confiance et identifie des articles récents et pertinents liés au sujet.
- GPT-5.4 extrait le titre, la source et les informations clés de chaque article.
- L’agent résume les conclusions et produit trois synthèses concises.
- Les résultats sont affichés dans une mise en page de type tableau de bord.
En plus du tableau de bord d’actualités, nous explorerons rapidement quelques invites plus petites qui montrent comment l’usage de l’ordinateur avec GPT-5.4 peut générer des applications interactives dans le même environnement.
Sous le capot, le système exécute la boucle d’agent d’usage de l’ordinateur : le modèle observe l’environnement via des captures d’écran, propose des actions d’UI (navigation, interaction, etc.) et reçoit un état mis à jour après chaque étape.
Étape 1 : cloner et configurer l’app d’exemple CUA
Pour commencer, nous allons utiliser l’app d’exemple CUA d’OpenAI et configurer le dépôt en local sur notre machine. Il suffit de cloner le dépôt et d’installer les dépendances comme suit :
git clone https://github.com/openai/openai-cua-sample-app.git
cd openai-cua-sample-app
corepack enable
pnpm install
cp .env.example .envCela crée un fichier .env dans lequel vous ajouterez votre clé d’API OpenAI. Connectez‑vous à votre compte OpenAI et rendez‑vous sur le tableau de bord pour générer une nouvelle clé d’API.
Si pnpm install affiche des avertissements à propos de paquets optionnels tels que sharp ou esbuild, vous pouvez les ignorer pour le développement local. Ensuite, installez l’environnement d’exécution du navigateur Playwright :
pnpm playwright:installSur les systèmes Linux, vous aurez peut‑être aussi besoin de dépendances système :
pnpm playwright:install:with-depsEnfin, lancez les serveurs de développement :
pnpm devVous pouvez maintenant ouvrir la console opérateur CUA à l’adresse http://127.0.0.1:3000. Cette console vous permet de lancer des exécutions d’agents et d’inspecter les journaux et les captures d’écran.
Étape 2 : explorer les scénarios intégrés d’usage de l’ordinateur
L’application d’exemple inclut trois environnements bac à sable destinés à démontrer le comportement d’usage de l’ordinateur. Ces environnements aident à illustrer comment GPT-5.4 interagit avec des interfaces.
Automatisation d’un tableau Kanban
Le scénario Kanban montre comment l’usage de l’ordinateur avec GPT-5.4 peut raisonner sur des mises en page UI structurées et les manipuler via une interaction visuelle.
Dans cet exemple, l’agent reçoit un objectif comme réorganiser des tâches sur un tableau Kanban. Au lieu d’appeler une API d’application, l’agent interagit avec l’interface comme un humain : il observe le tableau, identifie les cartes de tâche et effectue des opérations de glisser‑déposer.
Voici comment l’usage de l’ordinateur s’applique dans cette démo :
- Compréhension de l’interface : GPT-5.4 commence par interpréter la mise en page courante, en identifiant boutons, champs de formulaire, calendriers, menus déroulants et contrôles de confirmation.
- Navigation pas à pas : l’agent décide quelle partie du parcours compléter en premier, par exemple choisir une option, passer à l’écran suivant ou ouvrir un élément de formulaire.
- Remplissage des formulaires : il saisit les valeurs requises dans les zones de texte et interagit avec des contrôles comme les menus déroulants ou les sélecteurs de date.
- Suivi d’état entre les tours : après chaque action, le runner capture une nouvelle capture d’écran et la renvoie au modèle, ce qui lui permet de vérifier quels champs sont déjà remplis et ce qu’il reste à faire.
- Confirmation et finalisation : une fois les saisies requises effectuées, l’agent passe à l’étape de confirmation finale et vérifie que la réservation a bien abouti.
Si les scénarios Kanban, Paint et Réservation démontrent le pilotage de l’UI, nous devons les appliquer à des usages plus concrets.
Dans la section suivante, j’utiliserai la même approche pour créer un tableau de bord d’actualités en direct qui collecte les articles récents, structure les résultats et les affiche dans une interface exploitable à l’aide d’un workflow no‑code dans l’application Codex.
Étape 3 : créer un tableau de bord d’actualités en direct avec GPT-5.4
Dans cette étape, nous allons appliquer les mêmes capacités d’usage de l’ordinateur pour construire un tableau de bord d’actualités en direct. L’objectif : permettre à un utilisateur de choisir un sujet d’intérêt (IA, politique, climat, technologie, sciences, etc.) et que le système :
- Collecte des articles récents provenant de sources fiables
- Extrait les informations clés de ces articles
- Génère trois synthèses concises
- Affiche les résultats dans un format de tableau de bord structuré
Au lieu d’écrire l’application manuellement, nous utiliserons Codex dans l’environnement d’usage de l’ordinateur de GPT-5.4 et lui transmettrons l’invite suivante pour générer la fonctionnalité directement dans le dépôt CUA existant.
Comme Codex est connecté au même environnement que l’app d’exemple CUA, l’agent peut analyser le dépôt, décider où intégrer le tableau de bord, puis implémenter automatiquement l’UI et la logique.
Invite :
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 runnerCette invite demande à Codex de créer un tableau de bord d’actualités en direct dans le dépôt existant, en servant de cahier des charges de haut niveau plutôt que de code d’implémentation détaillé.
Codex commence par inspecter la structure du projet pour déterminer où ajouter l’UI du tableau de bord et la logique back‑end. Il crée ensuite un champ de saisie de sujet, récupère en temps réel des articles récents de sources de confiance, extrait des métadonnées clés (titre, source, résumé) et filtre les résultats pour garantir leur pertinence.
Enfin, il affiche exactement trois actualités dans une mise en page propre et structurée, facilement consultable ou exportable depuis le tableau de bord.
