Criar sites compatíveis com agentes

Kasper Kulikowski

Omkar More

Seu site tem um novo tipo de visitante. Alguns usuários humanos estão deixando de usar a navegação manual para delegar jornadas orientadas a metas a agentes de IA. Esses sistemas autônomos podem interpretar entradas, planejar e executar ações em nome de um usuário.

No entanto, muitos dos nossos sites são projetados para serem bonitos para humanos, com estados de passar o cursor complexos, layouts variáveis e movimento fluido. Isso é funcionalmente quebrado para agentes.

Como os agentes veem seu site

Os agentes não acessam seu site em um monitor. Eles operam em uma representação legível por máquina do seu site. A qualidade dessa representação determina a performance deles.

Os agentes podem ver seu site de três maneiras principais: capturas de tela, HTML bruto e a árvore de acessibilidade.

Capturas de tela

O agente faz um snapshot da página renderizada e usa um modelo de visão para identificar elementos. Com base na captura de tela, o agente pode reconhecer que uma barra de pesquisa no canto superior direito é uma pesquisa global, enquanto uma caixa no meio provavelmente é um campo de formulário. As pistas visuais podem ser úteis, já que os agentes podem usar cor, tamanho e proximidade para determinar a importância. Um botão grande Excluir provavelmente será interpretado com mais cautela do que um pequeno link "Ajuda". No entanto, analisar capturas de tela pode ser lento e caro (em termos de tokens usados), o que o torna uma boa opção de backup quando a estrutura está confusa.

HTML

O agente analisa o DOM e lê o HTML. Ele entende como os elementos são aninhados, a hierarquia lógica da árvore do DOM, atributos como IDs e classes que definem a estrutura e strings de dados brutos que formam a espinha dorsal informativa do site. Isso ajuda o agente a entender a relação entre os elementos.

Se um botão Comprar agora estiver dentro de um contêiner de produto, o agente vai presumir que ele pertence a esse produto específico.

Árvore de acessibilidade

A árvore de acessibilidade é uma API nativa do navegador que destila o DOM no que é mais importante: funções, nomes e estados de elementos interativos. É o resumo semântico da página, usado por tecnologia adaptativa. Para um agente de IA, ele funciona como um mapa de alta fidelidade que ignora o "ruído" visual do CSS para se concentrar na utilidade pura. Ao interpretar essa árvore, um agente pode aprender a intenção funcional de cada alternância, controle deslizante e campo de entrada.

Ferramentas do WebMCP

O WebMCP é um padrão da Web proposto para reduzir a distância entre sites e agentes, compartilhando propósito e tarefas explícitos com os agentes. Isso é feito definindo ferramentas, que são anotações em JavaScript ou HTML. Os agentes interpretam essas ferramentas com mais rapidez e precisão do que com a ativação padrão.

As ferramentas do WebMCP podem ser usadas para suporte ao cliente, e-commerce, descoberta e muito mais. Algumas ações são sensíveis, como fazer uma compra. Você pode incluir um comando para solicitar a interação do usuário com uma caixa de diálogo de confirmação.

Descubra casos de uso do WebMCP e como criar ferramentas eficazes.

Modalidades combinadas

Confiar em uma única entrada cria uma lacuna semântica. Por exemplo, no DOM, um agente pode ver um <div> sem saber que você configurou isso como um botão funcional com CSS e JavaScript. Com capturas de tela, é possível que um agente identifique onde o botão está na tela, mas ele ainda não sabe o destino ou a ação pretendida que o botão foi projetado para acionar.

Portanto, os agentes modernos combinam várias modalidades. Eles usam o DOM e a árvore de acessibilidade para ter uma lista limpa e estruturada de elementos interativos e comparam isso com uma renderização visual para entender o layout, o agrupamento e as dicas visuais.

Nosso trabalho é fornecer indicadores limpos em todos esses canais.

Criar sites compatíveis com agentes

Para ajudar os agentes a navegar no seu site, todas as ações que um humano ou agente precisa realizar devem ser claramente refletidas na interface do site. Confira algumas práticas recomendadas:

• Evite elementos fantasmas. Evite sobreposições transparentes que ocultem elementos interativos. A análise visual feita pelo agente pode descartar nós cobertos, mesmo que eles pareçam transparentes.
• Use um HTML semântico. Projete elementos acionáveis com HTML semântico. Por exemplo, use as tags <button> e <a> em elementos <div> e <span> modificados. Os agentes reconhecem o primeiro como elementos interativos.
  • Se não for possível usar HTML semântico, sempre forneça ao elemento o role e o tabindex adequados. Por exemplo, <div role="button">.
  • Adicione o atributo for às tags <label> para vinculá-las às entradas. Isso ajuda o agente de IA a entender a finalidade de um campo, indicando o texto do rótulo diretamente anexado à string de ação.
• Use CSS para elementos visuais. Defina cursor: pointer em CSS, que é um sinal forte de capacidade de ação.
• Atenda ao tamanho mínimo para análise visual. Verifique se todos os elementos interativos necessários para concluir uma ação estão visíveis e têm mais de 8 pixels quadrados para evitar serem filtrados na análise visual do modelo.
• Garanta um layout estável. Os agentes que fazem capturas de tela provavelmente vão ficar confusos se o layout do seu site mudar constantemente. Por exemplo, quando um botão Adicionar ao carrinho na página do produto está em um local diferente para cada categoria dos produtos.
• Crie ferramentas do WebMCP para definir tarefas e ações explícitas para agentes que oferecem suporte à API.

Próximas etapas

Tudo o que sugerimos para deixar um site "pronto para agentes" também o torna melhor para humanos.

Tornar os sites compatíveis com agentes de IA é um incentivo para reafirmar os princípios fundamentais de criação de sites bem estruturados, acessíveis e semânticos.

• Audite sua árvore de acessibilidade: use ferramentas atuais para garantir que a hierarquia do site seja legível por máquina e estável.
• Leia sobre o WebMCP, um padrão da Web proposto para ajudar sites a interagir com agentes. As APIs estão disponíveis para testes em produção no Chrome com um teste de origem.