WebMCP na prática: app de lista de tarefas mostra como agentes operam uma página

O exemplo parte do TodoMVC e expõe sete ferramentas a agentes. Cada tool tem nome, descrição em linguagem natural, input schema em JSON Schema e dicas opcionais. O modelo só enxerga essas quatro peças, nunca o código. Por isso a descrição pesa tanto. A diferença para um MCP comum é onde roda: o WebMCP executa na página, na aba do usuário, com a sessão dele.

Há dois caminhos de definição. No declarativo, um formulário HTML ganha toolname, tooldescription e toolautosubmit, e o navegador monta o schema a partir dos campos. Na submissão, event.agentInvoked indica que foi um agente, e respondWith() devolve a resposta. No imperativo, as tools são registradas em document.modelContext com registerTool(). Não existe unregisterTool(): passa-se um AbortSignal no registro e abort() remove a tool, o que permite oferecer clear_completed só quando há item concluído.

O autor aponta hábitos de segurança. list_todos usa untrustedContentHint, porque títulos são texto digitado por pessoas e podem conter instruções maliciosas. delete_todo e clear_completed levam consequentialHint, para pedir confirmação antes de executar. O schema orienta o modelo, mas não o obriga, então execute continua validando a entrada e devolve mensagens que dizem o que fazer, como chamar list_todos para obter os ids. Num teste com Claude em Chrome 159, ambos os caminhos levaram quatro idas e voltas, mas o custo em tokens foi menor com as tools (cerca de 500 a 600 tokens de definições contra cerca de 1.200 de screenshots em meio tamanho).

O texto também delimita o escopo: WebMCP não serve para testar UI (continue com Playwright, e teste o execute das tools), não substitui uma API ou servidor MCP e não é o Playwright MCP. É um rascunho de um W3C Community Group, com origin trial no Chrome 149, e a API migrou de navigator.modelContext para document.modelContext em meados de 2026. Outros navegadores ainda não entregaram.

Em 11 de fevereiro de 2026, o CEVIU noticiou "Chrome 146 inclui uma prévia inicial do WebMCP para agentes de IA". Em 7 de maio de 2026, em "Como Implementar o WebMCP: Uma Análise da Demonstração Ao Vivo do Google", o foco era definir tools claras. Em 10 de agosto de 2026, a cobertura registrou a prévia da Cloudflare. Agora o assunto sai do anúncio e vira código concreto, com as sete tools do TodoMVC, as dicas de segurança e o aviso de que a API passou a document.modelContext, o que deixa tutoriais antigos defasados.

Em 26 de outubro de 2026, o CEVIU publicou "UI pura na era dos agentes: tornar o estado explícito evita botões que não deveriam aparecer". O tema conversa com o cuidado do exemplo atual em manter a UI sincronizada com as tools.

Para quem desenvolve front-end, a leitura é que escrever uma tool se parece com projetar uma API pequena: descrição boa, schema fechado com enum, erros que orientam o próximo passo. Quem já cuida de acessibilidade sai na frente, já que o label do campo vira descrição do parâmetro. E como a tool roda com a sessão do usuário, marcar o que é conteúdo não confiável e o que é irreversível deixa de ser detalhe e vira requisito.