Tudo o que Você Precisa Saber Sobre Navegação Agêntica

Navegação Agêntica é uma nova categoria (que você já deve ter percebido) que está sendo usada no Pagespeed Insights do Google e - obviamente - também na biblioteca Lighthouse. Isso é um divisor de águas desse mecanismo de análise, pois antes o foco era exclusivamente na experiência do usuário humano, agora tem um (por enquanto) pequeno espaço para medir o quão "legível" o seu site é para agentes de inteligência artificial.

Caso real: Um cliente me ligou de manhã e me contou que ficou surpreso, pois foi fazer um orçamento de reforma estrutural na casa de uma pessoa, e na entrevista perguntaram a ela se teve alguma indicação. A resposta foi surpreendente e engraçada: o Claude.

Sim, dessa forma, "o Claude". Como se fosse um amigo em comum. Isso mostra que estamos em um caminho sem volta, ou você se atualiza, ou pode perder negócios importantes.

O que isso tem a ver com Navegação Agêntica? Não tenho ideia, pode ser por isso que o cliente do meu cliente agendou o orçamento, pode ser que não. Mas que é um fato muito engraçado, é.

Ok, de volta ao assunto! Essa nova categoria de análise tem quatro pilares:

WebMCP

O site expõe ferramentas estruturadas para agentes?

Aqui temos o core dessa mudança inteira, WebMCP é o padrão proposto pelo Google, que vai permitir aos desenvolvedores expor as funcionalidades do site diretamente para a IA. O seu site vai chegar para a IA e falar "ei, colega! Não precisa fazer scraping, o mapa do tesouro está aqui...".

Segundo a documentação oficial, "O WebMCP pode ajudar a diminuir a distância entre aplicativos da Web e agentes, melhorando a eficiência, a confiabilidade e a conclusão de tarefas, ao fornecer regras para interação. Em vez de um agente analisar o elemento, como um botão ou um campo, para entender a finalidade dele, o site declara o propósito do elemento, para que ele seja usado corretamente.".

O site vai declarar explicitamente suas capacidades para os agentes, via json schema ou html declarativo (da mesma forma que o Schema.org faz). Isso vai facilitar para o agente efetuar tarefas sem ficar maluco (aka. alucinar) e errar tudo. Como no exemplo simples e rudimentar abaixo:

// Registro de uma ferramenta via JS
document.modelContext.registerTool({
  name: 'buscar_voos',
  description: 'Busca voos disponíveis entre duas cidades em datas específicas.',
  inputSchema: {
    type: 'object',
    properties: {
      origem: { type: 'string', description: 'Código IATA da cidade de origem (ex: GRU)' },
      destino: { type: 'string', description: 'Código IATA do destino (ex: JFK)' },
      data: { type: 'string', format: 'date' },
      classe: { type: 'string', enum: ['economica', 'executiva', 'primeira'] }
    },
    required: ['origem', 'destino', 'data']
  },
  execute: async ({ origem, destino, data, classe }) => {
    // Lógica interna do site para chamar sua API de backend
    const resultados = await minhaApiDeVoos(origem, destino, data, classe);
    return JSON.stringify(resultados); // Retorno estruturado para a IA
  }
});

Coisas interessantes nesse js:

inputSchema utiliza o padrão JSON Schema para validar a entrada da IA antes mesmo da função ser executada, reduzindo erros de processamento.
execute é uma função assíncrona, o retorno é enviado de volta para o "pensamento" da IA.

Nesse ciclo de vida, você pode usar um AbortController para desativar a ferramenta dinamicamente (quando o usuário faz logoff, por exemplo).

E olha, dá pra fazer direto no html, como no exemplo abaixo:

<form
  toolname="solicitarSuporte"
  tooldescription="Envia um ticket de suporte técnico para a equipe."
  toolautosubmit="true"
  action="/api/suporte"
>
  <label for="tipo">Tipo de Problema:</label>
  <select name="tipo" toolparamdescription="Categoria do problema técnico.">
    <option value="login">Problema de Acesso</option>
    <option value="pagamento">Erro de Cobrança</option>
  </select>

  <label for="msg">Descrição:</label>
  <textarea name="msg"></textarea>

  <button type="submit">Enviar Ticket</button>
</form>

Coisas interessantes nesse formulário:

toolname e tooldescription identificam a ferramenta para o modelo de IA.
toolparamdescription ajuda a IA a entender o que cada campo do formulário espera, aumentando a precisão do preenchimento
toolautosubmit, se definido como true, avisa a IA que pode preencher e enviar o formulário sem intervenção humana (útil para tarefas totalmente autônomas).

Dá também para reagir quando uma IA interage, usando o evento toolactivated:

window.addEventListener('toolactivated', (event) => {
  console.log(`A ferramenta ${event.toolName} foi ativada por um Agente de IA.`);
});

No site oficial é possível conhecer de forma muito mais profunda, ler todos os parâmetros, como conhecer os conceitos de segurança para evitar que a IA execute ações maliciosas.

Aviso Importante!

O WebMCP ainda é experimental, ele não roda "de graça" no PageSpeed Insights. O suporte a WebMCP é experimental, exige Chrome 150 ou superior, e os audits de WebMCP só funcionam se você registrar a sua origem no origin trial. Para ativar, você precisa de um token. O fluxo é o mesmo de qualquer origin trial do Chrome, pega o token gerado pra sua origem e cola ele numa meta tag no <head> de cada página:

<meta http-equiv="origin-trial" content="{SEU TOKEN AQUI}">

Pra brincar localmente sem token, dá pra ligar a flag em chrome://flags/#enable-webmcp-testing. Compensa ter esse trabalho todo? Com certeza, ele não é só promissor: é o caminho natural, e a largada já foi dada. Melhor ficar pronto antes.

"Gemini, me ensine a viver"

O arquivo `llms.txt`

Existe um guia de contexto para a IA na raiz do domínio?

Não basta ter um robots.txt, agora você precisa de um llms.txt, que vai servir de mapa pra IA entender o seu site sem se perder no caminho. Observe esse exemplo oficial:

# Title

> Optional description goes here

Optional details go here

## Section name

- [Link title](https://link_url): Optional link details

## Optional

- [Link title](https://link_url)

A documentação deixa claro: "While sitemaps list all pages for search engines, llms.txt offers a curated overview for LLMs" e "robots.txt and llms.txt have different purposes—robots.txt is generally used to let automated tools know what access to a site is considered acceptable ... On the other hand, llms.txt information will often be used on demand when a user explicitly requests information about a topic, such as when including a coding library’s documentation in a project, or when asking a chat bot with search functionality for information".

Seu llms.txt vai ser um arquivo de contexto, guia de uso e uma curadoria de conteúdo do seu site. Tem um exemplo completo do FastHTML, que você pode ler na íntegra.

O mais irônico é que o projeto usa um .txt que escreve .md. Contraintuitivo, certo? Com certeza, mas tem um motivo para isso: a infra espalhada pela web é absurdamente legada, usar .txt é uma forma de trazer compatibilidade universal e facilidade de configuração nesses servidores do tempo de Dante.

Ba Dum Ts!

Árvore de acessibilidade

A estrutura de acessibilidade permite a navegação por máquinas?

Agentes também precisam de acessibilidade! A boa notícia é se você já segue as boas práticas da árvore de acessibilidade, seu site já deve estar com isso 100% ajustado: tags semânticas no lugar certo, organização de títulos e subtítulos, formulários com labels declaradas, e etc.

Vou ser sincero com você: esse pilar e o próximo não têm muito o que cobrir. São dois campos que já existiam e já foram documentados bem antes da Navegação Agêntica aparecer, não são novidade nenhuma. Estou citando porque fazem parte da categoria, mas não vou me aprofundar neles - seria reinventar a roda.

Cumulative Layout Shift

O layout é estável o suficiente para um agente clicar com precisão?

Como avisei ali em cima, também não muda nada! Se o seu site está com o CLS bom para um humano, vai estar bom para o agente também! Um trabalho a menos.

Conclusão

Olhando os quatro pilares juntos, dá pra perceber uma coisa importante: dois deles você já tem de graça se já faz frontend bem feito. Árvore de acessibilidade e CLS são lição de casa antiga, se você cuida da experiência do usuário humano, o agente herda isso sem você levantar um dedo.

O llms.txt é trabalho de uma tarde, no máximo (estou preparando um gerador para ter menos trabalho com isso 🫣). O divisor de águas real é o WebMCP, e é nele que vale investir energia agora.

A web está começando (ou forçando, o que não importa, se o resultado vai ser o mesmo) a tratar agentes como cidadãos de primeira classe, não como "scrapers que a gente tolera". Em alguns anos, ter um WebMCP bem desenhado vai ser tão básico quanto ter um robots.txt é hoje - e quem chegar primeiro vai colher os frutos de agentes que escolhem seu site porque é o mais fácil de usar.