WebMCP: o que é e como preparar o site para agentes de IA

O que é WebMCP?

WebMCP é uma proposta de padrão web em que a página registra ferramentas (com nome, descrição e parâmetros) para que agentes de IA no navegador executem tarefas no site de forma estruturada. Em vez de o agente ler a tela e adivinhar em que botão clicar, o site diz: "aqui está a ferramenta buscar_produtos, ela recebe estes parâmetros e devolve isto".

Hoje, um agente que navega por você (para comparar preços, preencher um formulário ou marcar um horário) trabalha como uma pessoa que nunca viu o site: tira prints, procura campos, tenta clicar. Isso é lento, caro e quebra quando o layout muda. O WebMCP troca o "clicar no lugar certo" por uma chamada de função.

O nome vem do MCP, o Model Context Protocol, criado pela Anthropic para conectar agentes a ferramentas externas. A diferença é onde a ferramenta mora:

Em que pé está o WebMCP?

É uma proposta em teste: o Chrome oferece a API em origin trial, e a especificação é um rascunho de grupo comunitário do W3C, não um padrão. Ela é editada por Brandon Walderman, da Microsoft, e por Khushal Sagar e Dominic Farolino, do Google.

E a adoção? Análises independentes de meados de 2026 apontam que quase nenhum site implementou o WebMCP e que os agentes mais usados ainda não consomem essas ferramentas. As extensões de exemplo do Chrome usam o Gemini pela API, e o próprio Chrome avisa que elas são separadas do Gemini no Chrome. Ou seja: é um tema para preparar, não para esperar resultado amanhã.

Onde o WebMCP entra no SEO e no GEO?

Depois da busca: quando um agente já chegou à sua página e precisa concluir uma tarefa. SEO e GEO cuidam de ser encontrado e citado; o WebMCP cuida de ser usável por quem não é humano.

Se você ainda está estruturando as duas primeiras camadas, comece pelo guia sobre GEO. E nada disso funciona se o CDN barra os agentes antes de eles chegarem à página, o que acontece com mais frequência do que parece, como mostra o post sobre o Cloudflare e os robôs de IA.

Como implementar com formulários HTML (API declarativa)?

Adicione os atributos toolname e tooldescription a um formulário: o navegador transforma o formulário em uma ferramenta e os campos viram os parâmetros. É o caminho mais simples, quase sem JavaScript.

<form toolname="buscar_artigos"
      tooldescription="Busca artigos do blog sobre SEO, GEO e growth por palavra-chave."
      action="/blog/artigos">
  <label for="q">Palavra-chave</label>
  <input id="q" type="search" name="q" required>
  <button type="submit">Buscar</button>
</form>

Os atributos disponíveis:

Repare no último item: se o campo tem <label>, o navegador já usa o texto do label como descrição do parâmetro. Formulários acessíveis estão, na prática, meio prontos para agentes.

Para devolver uma resposta ao agente (ou um erro de validação), o evento de envio ganhou o agentInvoked e o respondWith():

form.addEventListener('submit', (e) => {
  if (!e.agentInvoked) return; // envio feito por uma pessoa: segue normal
  e.preventDefault();
  e.respondWith(buscarArtigos(new FormData(form).get('q')));
});

Há ainda duas pseudo-classes CSS, :tool-form-active e :tool-submit-active, para mostrar ao usuário que o agente está usando aquele formulário.

Como implementar com JavaScript (API imperativa)?

Chame document.modelContext.registerTool() com o nome, a descrição, o esquema dos parâmetros (JSON Schema) e a função que executa a ação. É o caminho para ações que não são um formulário, como filtrar uma lista, mudar uma configuração ou montar um carrinho.

if ('modelContext' in document) {
  const controle = new AbortController();

  document.modelContext.registerTool({
    name: 'filtrar_por_tema',
    title: 'Filtrar artigos por tema',
    description: 'Lista os artigos do blog de um tema. Use quando o usuário pedir artigos sobre um assunto específico.',
    inputSchema: {
      type: 'object',
      properties: {
        tema: { type: 'string', enum: ['seo-tecnico', 'geo-aeo', 'entity-seo', 'conteudo', 'growth'] },
      },
      required: ['tema'],
    },
    annotations: { readOnlyHint: true },
    execute: async ({ tema }, { signal }) => {
      const res = await fetch(`/blog/tema/${tema}`, { signal });
      return res.ok ? `Artigos de ${tema} abertos em /blog/tema/${tema}` : 'Tema não encontrado';
    },
  }, { signal: controle.signal });

  // Para remover a ferramenta depois: controle.abort();
}

O if ('modelContext' in document) garante que nada roda em navegadores sem suporte, que hoje são quase todos. É implementação progressiva: quem não tem a API não carrega nada a mais.

As anotações de segurança

As anotações dizem ao navegador e ao agente o que a ferramenta faz, e o navegador pode pedir confirmação ao usuário com base nelas.

Que ferramentas expor no seu site?

As ações que um cliente faria de qualquer jeito: buscar, filtrar, consultar, agendar, orçar e comprar. Comece pela ação que mais gera receita ou contato, e não por tudo de uma vez.

Para lojas, o WebMCP complementa os protocolos de compra dentro das IAs, explicados no guia de feeds de produto e comércio agêntico.

Algumas regras para nomes e descrições, que é o que o agente lê para decidir:

• Nome pelo que a ferramenta faz: agendar_consulta, e não form1 ou submit.
• Descrição com o "quando usar": "Use quando o usuário quiser marcar um horário" ajuda o agente a escolher a ferramenta certa.
• Parâmetros com valores fechados quando possível: um enum evita que o agente invente valores.
• Respostas curtas e úteis: devolva o resultado ou o próximo passo, não a página inteira.

Como testar o WebMCP?

Ative a flag chrome://flags/#enable-webmcp-testing no Chrome e use o Model Context Tool Inspector para ver e chamar as ferramentas da página. Para testar com visitantes reais, há a origin trial a partir do Chrome 149.

1. Ative a flag e reinicie o Chrome.
2. Abra a página e confira se as ferramentas aparecem no Model Context Tool Inspector.
3. Peça a tarefa em linguagem natural ("ache artigos sobre GEO") e veja se o agente escolhe a ferramenta certa, com os parâmetros certos.
4. Use o DevTools para conferir como o navegador interpretou o JSON Schema.
5. Inscreva o domínio na origin trial se quiser que a API funcione para visitantes, não só no seu navegador.

Quais erros evitar?