Como preparei meu site React para agentes em 100 linhas

Esta é uma submissão para o Desafio de Escrita do Google I/O

Uma receita de 100 linhas para tornar um site React pronto para agentes, com o diff, os novos resultados da auditoria Lighthouse Agentic Browsing e o que está por vir.

1. O gancho

No Google I/O 2026, Matias mencionou, a caminho de uma demonstração diferente, que as Diretrizes Modernas da Web do Google aumentam as taxas de aprovação de agentes de codificação em tarefas de desenvolvimento web em 37 pontos percentuais em comparação com a codificação sem orientação. Ele disse isso uma vez e seguiu em frente, mas o número ficou na minha cabeça. Por trás dessa única estatística está a mudança mais acionável na plataforma web do ano: a "web pronta para agentes". Eu queria saber o que realmente é necessário para tornar um site real pronto para agentes, então construí uma pequena demonstração em React, adicionei três novos arquivos e um punhado de atributos HTML, e executei a nova auditoria Lighthouse Agentic Browsing.

Sobre cem linhas de código, 3 de 3 em Agentic Browsing, a pontuação de acessibilidade ainda é 100. Aqui está a receita.

2. As quatro peças

Quatro peças da pilha pronta para agentes valem a pena serem conhecidas pelo nome:

• WebMCP. Um padrão de navegador proposto que permite que seu site exponha ferramentas tipadas para agentes de IA. A API do lado do produtor é enviada no teste de origem do Chrome 149.
• llms.txt. Um mapa do site Markdown para modelos, servido na raiz do site.
• Metadados de formulário declarativos. HTML5 padrão autocomplete (no especificação desde 2014), funções e rótulos ARIA, e os novos atributos WebMCP (toolname, tooldescription, toolparamdescription) em formulários e entradas.
• Lighthouse Agentic Browsing. Uma nova categoria de auditoria que é enviada com o Chrome DevTools para Agentes, disponível no I/O 2026 para Antigravity e mais de vinte outros agentes de codificação.

Uma frase sobre a linhagem: WebMCP é a adaptação do lado do navegador do Google do Protocolo de Contexto de Modelo (que se originou na Anthropic e agora é amplamente adotado entre os fornecedores de modelos), desenvolvido de forma aberta no Grupo de Trabalho da Comunidade de Aprendizado de Máquina da W3C, um corpo multi-fornecedor. A partir daqui, vou chamá-lo de Web ML CG.

3. O diff, llms.txt primeiro

A receita começa com o menor arquivo possível. Coloque um public/llms.txt na raiz do seu site. Aqui está o arquivo inteiro da minha demonstração, 21 linhas, palavra por palavra:

# Painel Acme

Acme é uma ferramenta de gerenciamento de projetos para desenvolvedores solo. Este é o painel do cliente.

## Páginas principais
- [Entrar](/login)
- [Página inicial do painel](/dashboard)
- [Configurações da conta](/settings/account)
- [Cobrança](/settings/billing)

## Documentos públicos
- [Referência da API](/docs/api)
- [Introdução](/docs/quickstart)

## Notas para modelos
- A autenticação é via email + senha ou Google OAuth.
- O painel requer uma sessão autenticada.
- O formulário de login é anotado com atributos WebMCP declarativos (`toolname="signIn"`); o painel expõe ferramentas WebMCP imperativas (`signOut`, `changePlan`) via `navigator.modelContext.registerTool()`.

A forma é direta: um título H1 de uma linha, um breve resumo, seções H2 para páginas principais, documentos públicos e notas para modelos. A verificação llms-txt do Lighthouse requer que o arquivo seja servido, que tenha pelo menos um H1 e que contenha pelo menos um link. Além disso, o formato é uma convenção. Pense nisso como o contraparte voltada para o modelo de robots.txt e sitemap.xml: uma introdução educada e determinística ao seu site, expressa na linguagem que o consumidor (um modelo de linguagem) realmente analisa bem.

A seção de notas para modelos é a parte de alto impacto. É onde você descreve comportamentos e restrições que não são óbvios apenas pelos títulos das páginas: requisitos de autenticação, qual formulário é o formulário de login, quais ferramentas o painel expõe. Passe um minuto escrevendo como se um novo contratado estivesse lendo isso.

4. O diff, atributos WebMCP declarativos

O segundo arquivo a ser tocado é o formulário de login. Aqui está a versão "antes", o tipo de código que um desenvolvedor React em funcionamento entrega às pressas:

<form onSubmit={(e) => {
  e.preventDefault();
  if (email && pw) setSignedIn(true);
}}>
  <input
    type="email"
    placeholder="Email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />
  <input
    type="password"
    placeholder="Senha"
    value={pw}
    onChange={(e) => setPw(e.target.value)}
  />
  <button