Agentation

O que é Agentation?

Agentation é uma ferramenta visual de feedback que permite anotar elementos diretamente em uma UI e compartilhar esse feedback com agentes de IA para que eles identifiquem o alvo exato no seu código. Seu propósito principal é transformar feedback do tipo “apontar para isso” em instruções estruturadas e acionáveis por máquinas que os agentes podem executar.

Funciona especialmente bem com ferramentas de codificação de IA que acessam os arquivos do seu projeto, onde a saída do Agentation pode incluir seletores, caminhos de arquivos e informações de estrutura para ajudar o agente a navegar até as linhas e componentes corretos.

Principais Recursos

• Anotações visuais na página: Ative uma barra de ferramentas e clique ou selecione elementos para criar uma anotação vinculada a um alvo específico na tela.
• Alvo de elementos para agentes: O Agentation pode gerar um caminho do elemento, seletores CSS e detalhes de localização de arquivo para que o agente não precise adivinhar qual elemento da UI você quis dizer.
• Contexto do codebase para correções melhores: Quando o agente tem acesso ao codebase (ex.: via ferramentas como Claude Code ou Cursor), ele pode usar seletores para grep, caminhos de arquivos de origem para pular para a linha certa, uma árvore de componentes React para entender a hierarquia e estilos computados para inferir a aparência atual do elemento.
• Saída em markdown formatado: Após adicionar feedback, os usuários podem clicar para copiar markdown formatado e colar no input do agente.
• Suporte a integração MCP: Com MCP, você pode pular o copy-paste porque o agente já vê o contexto da anotação; agentes podem ser instruídos com comandos como “atenda meu feedback” ou “corrija anotação 3”.
• Controles de ciclo de vida de anotações: Agentes podem consultar feedback existente (ex.: listar todas as anotações em páginas) e responder a ações como descartar ou resolver itens (ex.: “limpar todas as anotações”).

Como Usar o Agentation

1. Ative a barra de ferramentas de anotação: A barra está disponível na interface do Agentation (o conteúdo da página nota que a barra está ativa na página de demo).
2. Passe o mouse para identificar elementos: Passe o mouse sobre elementos para ver seus nomes destacados.
3. Crie uma anotação: Clique em um elemento alvo ou selecione texto (por exemplo, nos elementos de demo fornecidos) para criar uma nova anotação, depois insira seu feedback.
4. Envie e compartilhe feedback: Adicione a anotação e clique para copiar a saída em markdown formatado para colar no seu agente.
5. Opcionalmente use MCP: Se o seu agente estiver conectado via MCP, você pode evitar copy-paste manual e pedir ao agente para atender ou corrigir anotações específicas.

Casos de Uso

• Relatos de bugs para um elemento UI específico: Quando você vê um estado de botão “errado” ou estilo, passe o mouse para identificar o elemento, anote com o que esperava vs. o que vê, e compartilhe seletores/info de caminho para o agente localizar o código relevante.
• Feedback de tipografia e espaçamento: Para problemas como padding e dimensionamento, anote a área exata do componente e peça ao agente para decidir entre alternativas (ex.: “24px ou 16px”) ao resolver o feedback.
• Correção de texto/conteúdo: Se um rótulo ou copy tiver erro de digitação, selecione o texto exato e adicione feedback conciso (ex.: “Texto do botão confuso” ou “conteúdo deve ser X”) para o agente mirar na string UI específica.
• Feedback específico de frame de animação: Pause uma animação (via barra de ferramentas) no frame relevante, anote aquele estado visual específico e forneça feedback vinculado ao contexto pausado.
• Coordenação de feedback em equipe ou múltiplas páginas: Peça aos agentes para listar todas as anotações visíveis em páginas, resolva uma por uma e limpe tudo quando a revisão terminar.

FAQ

Como o Agentation ajuda um agente a encontrar a parte certa do meu app?
A saída do Agentation pode incluir seletores CSS, caminhos de arquivos fonte, hierarquia de componentes React e estilos computados, para que um agente possa fazer grep, navegar até a linha correta e entender onde e como o elemento se encaixa.

Preciso copiar e colar o feedback no agente?
Nem sempre. A página nota que, com integração MCP, você pode pular o copy-paste porque o agente já vê o contexto da anotação.

Que tipos de feedback devo escrever nas anotações?
A página recomenda ser específico (ex.: descreva o problema claramente), tratar um problema por anotação e incluir contexto sobre o que você esperava versus o que vê.

Agentes podem fazer perguntas ou responder a anotações?
Sim. Com integração MCP e um Annotation Format Schema, a página descreve interações de agentes como listar anotações, solicitar esclarecimentos, resolver com um resumo e descartar anotações.

Qual é o modelo de licenciamento do Agentation?
Agentation é gratuito para indivíduos e empresas para uso interno. Para redistribuir Agentation como parte de um produto à venda, a página aconselha contatá-los para uma licença comercial.

Alternativas

• Ferramentas interativas de screenshot/markup de UI (com fluxos de revisão humana): Ferramentas que capturam e marcam UI para revisão também suportam compartilhamento de feedback, mas geralmente não geram seletores estruturados/caminhos de arquivos para agentes cientes de código.
• Modelos de issues baseados em texto em um tracker (ex.: tickets de bug): Trackers de bugs ajudam a documentar comportamento esperado vs. atual, mas dependem de descrições em vez de apontar agentes para um caminho específico de elemento UI no codebase.
• Ferramentas de navegação em código compatíveis com agentes sem anotação visual: Assistentes de codificação que entendem seu repositório ainda podem agir sobre feedback, mas sem uma camada de anotação, você geralmente precisa descrever o alvo de forma mais indireta (ex.: nomeando componentes manualmente).