Introducción

Algunos flujos de trabajo son más fáciles de aprender cuando alguien te muestra adónde ir y qué seleccionar. Usa Codex para crear un recorrido que guíe a los usuarios por tu aplicación web mientras ellos mismos realizan las acciones.

Con herramientas WebMCP que le dan acceso a los controles, al estado y a la documentación de tu aplicación, Codex puede elegir la siguiente instrucción según lo que ve el usuario. Quien aún no ha conectado un servicio necesita un primer paso distinto del que necesita alguien que ya completó la configuración.

Cómo crear el recorrido

1. Abre el repositorio de tu aplicación en Codex y elige un flujo de trabajo para el recorrido, como conectar un servicio o agregar una carpeta.
2. Proporciona la documentación pertinente y describe los estados iniciales que debe contemplar el recorrido.
3. Ejecuta el prompt inicial de esta página para definir los elementos que se resaltarán en el recorrido, agregar herramientas para consultar el estado de la interfaz y dar acceso a las instrucciones de la aplicación.
4. Prueba el flujo en un entorno de navegador donde Codex pueda invocar las herramientas WebMCP de tu aplicación. Pídele a Codex que te guíe y completa cada paso por tu cuenta.

Limita el alcance del primer recorrido. Antes de agregar más flujos de trabajo, comprueba que pueda guiar al usuario desde la configuración inicial hasta que complete la tarea.

Ejemplo: cómo agregar una carpeta de Google Drive en Runme

En Runme, los usuarios editan notebooks y usan un explorador de archivos para agregar carpetas de Google Drive y navegar por sus archivos. El recorrido ayuda a quienes usan Runme por primera vez a encontrar esos controles y aprender los pasos para agregar una carpeta.

Para saber más sobre Runme, puedes leer Cómo automatizamos tareas repetitivas en OpenAI con Codex.

Observa cómo Codex resalta los controles de Runme y explica para qué sirven. Las capturas de pantalla que siguen muestran otro recorrido, dedicado a agregar una carpeta de Google Drive.

El recorrido de Google Drive comienza con una solicitud:

Conecta Google Drive

Codex comprueba si Google Drive está conectado. Si aún no lo está, Codex resalta Connect Google Drive y le pide al usuario que seleccione esa opción y complete la conexión.

Abre el explorador de archivos

Una vez que se establece la conexión, Codex guía al usuario hasta el explorador de archivos. La siguiente instrucción refleja el nuevo estado de la aplicación.

Agrega la carpeta

Cuando el usuario despliega la barra de herramientas, Codex resalta el control que permite agregar una carpeta de Google Drive. El usuario realiza la acción por su cuenta y aprende dónde encontrar ese control la próxima vez.

Dale a Codex el contexto que necesita para guiar a los usuarios

La implementación de Runme proporciona tres tipos de contexto: los elementos que se pueden resaltar en el recorrido, el estado de la aplicación y la documentación. Los nombres de las herramientas que se describen a continuación son los que usa Runme. Adapta sus funciones a tu aplicación.

Permite que Codex encuentre los controles

Asigna a cada elemento del recorrido un valor de data-tour-id estable y descriptivo, junto con una etiqueta y una descripción. Runme da acceso a estos controles mediante tres herramientas WebMCP:

• listTargets enumera los elementos registrados con sus identificadores, etiquetas y descripciones.
• showTourStep({ target, title?, message, placement? }) resalta un elemento y muestra una explicación.
• dismiss quita el resaltado.

Así, Codex puede identificar un control y explicar para qué sirve sin realizar la acción por el usuario.

Consulta el estado y espera a que el usuario actúe

Runme mantiene el estado del recorrido fuera de React y da acceso a él mediante un controlador. La herramienta getUiSnapshot devuelve el estado actual de la interfaz e indica, entre otras cosas, si el usuario tiene una sesión abierta. Con waitForUiChange(...), Codex puede esperar a que se produzca un cambio, por ejemplo, que el usuario seleccione el control resaltado.

Pídele a Codex que vuelva a consultar el estado después de cada interacción. La decisión de avanzar en el recorrido debe depender de lo que ocurrió en la aplicación. No basta con que Codex ya haya mostrado una instrucción.

Incluye las instrucciones en la aplicación

Runme incluye la documentación en Markdown con la aplicación y permite consultarla mediante WebMCP:

• readInstructionsForAIAgents explica cómo debe interactuar Codex con la aplicación y sus herramientas.
• listDocumentation() enumera las páginas disponibles y sus descripciones.
• getDocumentation({ name }) devuelve la página seleccionada en formato Markdown.

Puedes distribuir las instrucciones y las herramientas del recorrido junto con la aplicación sin necesidad de un complemento de Codex específico para el recorrido.

Revisa el recorrido

Prueba la misma solicitud desde distintos estados iniciales. Comprueba que el recorrido omita los pasos de configuración ya completados, espere a que el usuario actúe y adapte las indicaciones cuando cambie la interfaz.

Prueba también qué sucede si el usuario cancela un paso o si un control aún no está visible. Codex debe explicar qué falta o elegir un paso válido para continuar. No debe afirmar que una acción se completó con éxito solo porque resaltó un botón.

Mantén la autenticación, las comprobaciones de permisos y las acciones del usuario dentro del flujo existente de la aplicación. El recorrido debe ayudar a los usuarios a entender la interfaz sin eludir esos controles.

Prompts para continuar

Una vez que funcione el primer flujo, continúa en el mismo chat:

• “Prueba este recorrido con Google Drive ya conectado y el explorador de archivos cerrado”.
• “Haz que el recorrido permita al usuario cancelar un paso y luego pedir que el recorrido continúe”.
• “Agrega un recorrido para [next workflow] y reutiliza los elementos del recorrido y las herramientas de estado existentes”.