Introdução

Alguns fluxos de trabalho são mais fáceis de aprender quando alguém mostra aonde ir e o que selecionar. Use o Codex para criar um tour que oriente os usuários no seu aplicativo web enquanto eles mesmos executam cada ação.

Com ferramentas WebMCP que dão acesso aos controles, ao estado e à documentação do aplicativo, o Codex pode escolher a próxima instrução com base no que o usuário vê. A primeira etapa para quem ainda não conectou um serviço é diferente da etapa indicada para quem já concluiu a configuração.

Como usar

1. Abra o repositório do aplicativo no Codex e escolha um fluxo de trabalho para o tour, como conectar um serviço ou adicionar uma pasta.
2. Forneça a documentação relevante e descreva os estados iniciais que o tour deve contemplar.
3. Execute o prompt inicial desta página para definir os elementos que o tour pode destacar, adicionar ferramentas de consulta ao estado da interface e dar acesso às instruções do aplicativo.
4. Teste o fluxo em um navegador no qual o Codex possa chamar as ferramentas WebMCP do aplicativo. Peça orientação ao Codex e execute você mesmo cada etapa.

Limite o escopo do primeiro tour. Antes de adicionar outros fluxos de trabalho, verifique se o tour consegue orientar o usuário desde a configuração até a conclusão da tarefa.

Exemplo de como adicionar uma pasta do Google Drive no Runme

No Runme, os usuários editam notebooks e usam um explorador de arquivos para adicionar pastas do Google Drive e navegar pelos arquivos. O tour ajuda quem está começando a encontrar esses controles e a aprender o passo a passo.

Para saber mais sobre o Runme, leia Como automatizamos tarefas repetitivas na OpenAI com o Codex.

Veja como o Codex destaca os controles do Runme e explica para que serve cada um. As capturas de tela abaixo mostram outro tour, voltado especificamente para a tarefa de adicionar uma pasta do Google Drive.

O tour do Google Drive começa com este pedido:

Conectar o Google Drive

O Codex verifica se o Google Drive está conectado. Se ainda não estiver, o Codex destaca Connect Google Drive e pede ao usuário que selecione essa opção e conclua a conexão.

Abrir o explorador de arquivos

Depois que a conexão é concluída, o Codex mostra ao usuário como acessar o explorador de arquivos. A próxima instrução leva em conta o estado atualizado do aplicativo.

Adicionar a pasta

Quando o usuário expande a barra de ferramentas, o Codex destaca o controle que permite adicionar uma pasta do Google Drive. O próprio usuário executa a ação e aprende onde encontrar esse controle da próxima vez.

Dê ao Codex o contexto necessário para orientar os usuários

A implementação do Runme fornece três tipos de contexto: os elementos que o tour pode destacar, o estado do aplicativo e a documentação. Os nomes das ferramentas abaixo são os usados pelo Runme. Adapte a função de cada ferramenta ao seu aplicativo.

Permita que o Codex encontre os controles

Atribua a cada elemento do tour um valor data-tour-id estável que indique sua função, além de um rótulo e uma descrição. O Runme disponibiliza esses controles por meio de três ferramentas WebMCP:

• listTargets lista os elementos registrados com seus IDs, rótulos e descrições.
• showTourStep({ target, title?, message, placement? }) destaca um elemento e exibe uma explicação.
• dismiss remove o destaque.

Assim, o Codex pode identificar um controle e explicar para que ele serve sem executar a ação pelo usuário.

Consulte o estado e aguarde a ação do usuário

O Runme mantém o estado do tour fora do React e dá acesso a ele por meio de um controlador. A ferramenta getUiSnapshot informa o estado atual da interface, inclusive se o usuário fez login. Com waitForUiChange(...), o Codex pode aguardar uma mudança, por exemplo, quando o usuário seleciona o controle em destaque.

Peça ao Codex que consulte o estado novamente após cada interação. O tour só deve avançar com base no que aconteceu no aplicativo. Exibir uma instrução, por si só, não basta para passar à próxima etapa.

Mantenha as instruções junto ao aplicativo

O Runme inclui a documentação em Markdown no aplicativo e a disponibiliza por meio do WebMCP:

• readInstructionsForAIAgents explica como o Codex deve interagir com o aplicativo e suas ferramentas.
• listDocumentation() lista as páginas disponíveis e suas descrições.
• getDocumentation({ name }) retorna a página selecionada em Markdown.

Você pode distribuir as instruções e as ferramentas do tour junto com o aplicativo, sem precisar de um plugin separado do Codex para o tour.

Revise o tour

Faça o mesmo pedido a partir de diferentes estados iniciais. Verifique se o tour pula as etapas de configuração já concluídas, aguarda a ação do usuário e ajusta as orientações quando a interface muda.

Teste também o que acontece quando o usuário cancela uma etapa e quando um controle ainda não está visível. O Codex deve explicar o que falta ou indicar uma próxima etapa válida. Ele não deve afirmar que uma ação foi concluída com sucesso só porque destacou um botão.

Mantenha a autenticação, as verificações de permissão e as ações do usuário no fluxo existente do aplicativo. O tour deve ajudar os usuários a entender a interface sem contornar esses controles.

Sugestões para continuar

Quando o primeiro fluxo estiver funcionando, continue no mesmo chat:

• “Teste este tour com o Google Drive já conectado e o explorador de arquivos fechado.”
• “Adapte o tour para o caso em que o usuário cancela uma etapa e depois pede para continuar.”
• “Adicione um tour para [next workflow], reutilizando os elementos do tour e as ferramentas de consulta ao estado já existentes.”