Todo formulário da web deve ser acessível por agentes de IA (e o seu pode ser hoje)
Agentes de IA estão se tornando bons em usar computadores. Eles podem navegar na web, clicar em botões, ler e-mails, escrever código. Mas quando se trata de preencher formulários da web, eles ainda fazem isso da maneira difícil: seletores CSS, consultas XPath frágeis, raspagem de DOM que quebra toda vez que um designer altera o nome de uma classe.
O Chrome está prestes a mudar isso.
WebMCP: registro de ferramentas estruturadas, integrado ao navegador
O Chrome 146 lançou uma Prévia Antecipada do WebMCP, uma API nativa do navegador que permite que os sites registrem seus elementos interativos como ferramentas estruturadas. Pense nisso como MCP (Modelo de Protocolo de Contexto) para IA de desktop, mas construído diretamente no próprio navegador.
Quando uma página registra uma ferramenta via WebMCP, um agente de IA pode ver:
-
Como a ferramenta é chamada (por exemplo,
submit_flight_search) - O que ela faz (por exemplo, "Buscar voos disponíveis entre duas cidades")
- Quais entradas ela espera: um JSON Schema completo com tipos de campo, restrições e descrições
Chega de adivinhações a partir do HTML. Chega de seletores frágeis. O agente apenas chama a ferramenta.
O problema: adotar o WebMCP manualmente é tedioso
Veja o que é necessário para registrar um único formulário manualmente:
navigator.modelContext.registerTool({
name: 'search_flights',
description: 'Buscar voos disponíveis entre dois aeroportos em uma data específica.',
inputSchema: {
type: 'object',
properties: {
origin: { type: 'string', description: 'Código IATA do aeroporto de partida' },
destination: { type: 'string', description: 'Código IATA do aeroporto de chegada' },
departure_date: { type: 'string', format: 'date', description: 'Data de partida (AAAA-MM-DD)' },
passengers: { type: 'integer', minimum: 1, maximum: 9 },
cabin_class: { type: 'string', enum: ['economy', 'business', 'first'] }
},
required: ['origin', 'destination', 'departure_date']
},
execute: async (params) => {
// preencha o formulário, envie, retorne o resultado
}
});
Isso é para um formulário. Um site típico tem dezenas.
Então você tem que mantê-lo toda vez que um campo muda. E escrevê-lo para cada plataforma em que seus usuários estão: WordPress, Shopify, HubSpot, Zendesk, ServiceNow...
A solução: uma tag de script
auto-webmcp é uma biblioteca de código aberto que faz tudo isso automaticamente.
Coloque uma tag de script na sua página:
<script
src="https://cdn.jsdelivr.net/npm/auto-webmcp@0.2.1/dist/auto-webmcp.iife.js"
async>
</script>
É isso. Cada <form> na página é automaticamente:
- Escaneado — MutationObserver captura formulários adicionados por JavaScript também
- Analisado — nome inferido a partir do botão de envio, cabeçalho ou ID do formulário; descrição a partir da legenda ou aria-label
- Gerado por esquema — tipos de entrada HTML mapeados para JSON Schema com restrições, enums e títulos de campo
-
Registrado — via
navigator.modelContext.registerTool()com total conformidade de especificação
Sem escrita manual de esquema JSON. Sem anotações necessárias. Sem alterações no backend.
Ele lê seu HTML existente de forma inteligente
auto-webmcp infere tudo o que precisa do seu markup existente:
