Introduction

Certains workflows sont plus faciles à maîtriser quand quelqu’un vous montre où aller et quoi sélectionner. Utilisez Codex pour créer une visite guidée de votre application web qui accompagne les utilisateurs pendant qu’ils effectuent eux-mêmes chaque action.

Grâce aux outils WebMCP qui lui donnent accès aux commandes, à l’état et à la documentation de votre application, Codex peut choisir la consigne suivante en fonction de ce que l’utilisateur voit à l’écran. La première étape sera différente selon que l’utilisateur doit encore connecter un service ou qu’il a déjà terminé la configuration.

Mise en œuvre

1. Ouvrez le dépôt de votre application dans Codex et choisissez un workflow pour la visite guidée, par exemple la connexion à un service ou l’ajout d’un dossier.
2. Fournissez la documentation pertinente et décrivez les états initiaux que la visite doit prendre en charge.
3. Exécutez le prompt de démarrage proposé sur cette page pour ajouter les cibles de la visite, les outils de suivi de l’état de l’interface et l’accès aux instructions de l’application.
4. Testez le parcours dans un navigateur où Codex peut appeler les outils WebMCP de votre application. Demandez à Codex de vous guider, puis effectuez vous-même chaque étape.

Limitez la première visite à une tâche précise. Vérifiez qu’elle guide l’utilisateur depuis la configuration initiale jusqu’à la fin de la tâche avant d’ajouter d’autres workflows.

Exemple : ajoutez un dossier Google Drive dans Runme

Dans Runme, les utilisateurs modifient des notebooks et se servent d’un explorateur de fichiers pour ajouter des dossiers Google Drive et parcourir leur contenu. La visite aide les nouveaux utilisateurs à repérer les commandes et à comprendre les étapes à suivre.

Pour en savoir plus sur Runme, consultez l’article Automatiser les tâches répétitives chez OpenAI avec Codex.

Regardez comment Codex met en évidence les commandes de Runme et explique à quoi elles servent. Les captures d’écran ci-dessous illustrent une autre visite, consacrée à l’ajout d’un dossier Google Drive.

La visite consacrée à Google Drive commence par cette demande :

Connectez Google Drive

Codex vérifie si Google Drive est connecté. Si la connexion reste à établir, Codex met en évidence le bouton Connect Google Drive et demande à l’utilisateur de le sélectionner, puis de terminer la procédure de connexion.

Ouvrez l’explorateur de fichiers

Une fois la connexion établie, Codex guide l’utilisateur vers l’explorateur de fichiers. Il adapte sa consigne au nouvel état de l’application.

Ajoutez le dossier

Une fois que l’utilisateur a déployé la barre d’outils, Codex met en évidence la commande qui permet d’ajouter un dossier Google Drive. L’utilisateur effectue lui-même l’action et apprend où retrouver la commande la prochaine fois.

Donnez à Codex le contexte nécessaire pour guider les utilisateurs

Runme fournit à Codex trois types d’informations : les cibles de la visite, l’état de l’application et sa documentation. Les noms d’outils ci-dessous sont propres à Runme. Adaptez leurs fonctions à votre application.

Rendez les commandes repérables

Attribuez à chaque cible de la visite une valeur data-tour-id stable et explicite, ainsi qu’un libellé et une description. Runme donne accès à ces commandes au moyen de trois outils WebMCP :

• listTargets répertorie les cibles enregistrées avec leurs identifiants, leurs libellés et leurs descriptions.
• showTourStep({ target, title?, message, placement? }) met une cible en évidence et affiche une explication.
• dismiss retire la mise en évidence.

Codex peut ainsi repérer une commande et en expliquer le rôle sans l’activer à la place de l’utilisateur.

Lisez l’état de l’interface et attendez l’action de l’utilisateur

Runme conserve l’état de la visite en dehors de React et le rend accessible via un contrôleur. Son outil getUiSnapshot fournit l’état actuel de l’interface et indique notamment si l’utilisateur est connecté. Avec waitForUiChange(...), Codex peut attendre un changement, par exemple que l’utilisateur sélectionne la commande mise en évidence.

Demandez à Codex de relire l’état de l’interface après chaque interaction. Pour passer à l’étape suivante, Codex doit se fonder sur ce qui s’est produit dans l’application. Le simple affichage d’une consigne ne suffit pas.

Intégrez les instructions à l’application

Runme inclut la documentation Markdown dans l’application et la rend accessible via WebMCP :

• readInstructionsForAIAgents explique comment Codex doit interagir avec l’application et ses outils.
• listDocumentation() répertorie les pages disponibles avec leur description.
• getDocumentation({ name }) renvoie la page sélectionnée au format Markdown.

Vous pouvez distribuer les instructions et les outils de la visite avec l’application, sans avoir à créer de plugin Codex distinct pour la visite.

Vérifiez la visite guidée

Testez la même demande à partir de différents états initiaux. Vérifiez que la visite saute les étapes de configuration déjà effectuées, attend que l’utilisateur agisse et adapte ses consignes lorsque l’interface change.

Testez également le cas où l’utilisateur annule une étape et celui où une commande n’est pas encore visible. Codex doit expliquer ce qui manque ou proposer une étape réalisable. Il ne doit pas affirmer qu’une action a réussi simplement parce qu’il a mis un bouton en évidence.

Conservez les mécanismes d’authentification, les vérifications des autorisations et les actions de l’utilisateur dans le parcours existant de l’application. La visite doit aider les utilisateurs à comprendre l’interface sans contourner ces contrôles.

Pour aller plus loin

Une fois le premier parcours opérationnel, poursuivez dans la même discussion :

• « Testez cette visite lorsque Google Drive est déjà connecté et que l’explorateur de fichiers est fermé. »
• « Prévoyez le cas où l’utilisateur annule une étape, puis demande à reprendre la visite. »
• « Ajoutez une visite pour [next workflow] en réutilisant les cibles et les outils de suivi de l’état existants. »