Eu Construí uma Ponte para a Nova Especificação WebMCP do Google — Aqui Está o Que Quebrou

Oi, pessoal.
Eu geralmente sou conhecido como tanahiro2010 no Japão.
Sou membro do GDG Greater Kwansai.
Eu fiz a apresentação da primeira metade na sessão prática do Google I/O Extended Osaka 2026, "Vamos Construir o WebMCP e Chamá-lo de um Agente de IA!"
Este é um resumo daquela sessão prática para o Qiita (traduzido aqui para o Dev.to).
Aqui está o codelab que usamos:
https://learn.gdgs.jp/webmcp-agent/

Isso é para pessoas que já conhecem o MCP, mas nunca ouviram falar do WebMCP, e para pessoas que querem saber "como é essa nova especificação que o Google lançou, na verdade?"

Você já ouviu falar do WebMCP?

Deixe-me perguntar diretamente: você já ouviu falar do WebMCP?
Eu nem sabia que existia até começar a montar os materiais práticos.
Só pelo nome, eu assumi que era "a versão Web do MCP".
Mas, uma vez que realmente li a especificação e a implementei, descobri que era uma especificação muito mais peculiar do que eu esperava.
Neste artigo, vou explicar o que realmente está contido nela e o que aprendi ao me envolver com ela.

Primeiro, o que é MCP?

Antes de entrar no WebMCP, vamos recapitular o MCP (Modelo de Contexto de Protocolo).
O MCP é uma interface comum para conectar ferramentas externas a um Agente de IA.
O fluxo se parece com isso:

sequenceDiagram
    participant Agent as Agente de IA
    participant Server as Servidor MCP
    Agent->>Server: Iniciar (stdio / HTTP)
    Server-->>Agent: ferramentas/lista (lista de ferramentas disponíveis)
    Agent->>Server: ferramentas/chamar (nome da ferramenta + args)
    Server->>Server: Executar a ferramenta
    Server-->>Agent: Retornar o resultado

O ponto chave é que as ferramentas permanecem registradas enquanto o Agente estiver em execução.
Seja uma operação de arquivo local ou uma ferramenta que acesse uma API interna, você pode continuar chamando-a enquanto não encerrar o Agente.
O webmcp-bridge-mcp que construí para isso também é apenas um Servidor MCP comum ouvindo no stdio.
Do ponto de vista de um cliente como o Antigravity CLI, não é mais do que "mais um Servidor MCP comum".
O que é incomum é o lado do WebMCP, que abordarei a seguir.

O que é WebMCP?

WebMCP é uma especificação preliminar publicada pelo Grupo de Comunidade de Aprendizado de Máquina da W3C.
https://webmachinelearning.github.io/webmcp/
No momento da redação, é o rascunho de fevereiro de 2026 — ainda na fase de proposta.

Em uma frase:

Um mecanismo pelo qual uma página da web declara suas próprias funcionalidades como ferramentas para um Agente.

Existem duas maneiras de registrar uma ferramenta.

Imperativa

Você registra uma ferramenta diretamente do JavaScript.

await document.modelContext.registerTool({
  name: "reservar_hotel",
  description: "Reservar um hotel",
  inputSchema: {
    type: "object",
    properties: { cidade: { type: "string" } },
    required: ["cidade"],
  },
  execute: async ({ cidade }) => ({ ok: true, cidade }),
});

A estrutura — name / description / inputSchema / execute — é quase idêntica à definição de ferramenta do MCP.
Qualquer um que tenha lidado com o MCP olhará para isso e imediatamente pensará: "oh, essa é a mesma estrutura que aquela."

Declarativa

Você transforma um <form> existente em uma ferramenta apenas adicionando atributos a ele.

<form toolname="buscar_hoteis" tooldescription="Buscar hotéis">
  <input name="cidade" toolparamdescription="Cidade para buscar hotéis" required />
  <button type="submit">Buscar</button>
</form>

Quando um formulário com toolname / tooldescription é encontrado, um JSON Schema é automaticamente montado a partir de cada <input>'s name, required, e toolparamdescription (ou, se isso estiver ausente, o texto do <label> associado).

Aqui está a parte interessante: internamente, o formulário declarativo é normalizado na mesma chamada registerTool() que a forma imperativa.
Em vez de ter duas APIs separadas, a forma declarativa é implementada como açúcar sintático sobre a forma imperativa.
Pessoalmente, eu realmente gosto desse design.

O resultado da submissão é recebido via SubmitEvent#respondWith(), conforme especificado.

form.addEventListener("submit", (evento) => {
  evento.preventDefault();
  if (evento.agentInvoked) {
    evento.respondWith(Promise.resolve({ ok: true /* ... */ }));
  }