WebMCP: O Protocolo que Pode Transformar a Web em um Toolkit para Agentes de IA

Vale a pena ficar atento a uma nova proposta apresentada no ecossistema do Chrome: o Web Model Context Protocol (WebMCP), um esforço experimental desenvolvido por engenheiros do Google em colaboração com a Microsoft.

A ideia: permitir que sites exponham suas funcionalidades como ferramentas estruturadas para agentes de IA. Sem scraping, sem adivinhação. O site conta pro agente o que ele pode fazer.

Como agentes interagem com sites hoje

Antes de entender o WebMCP, vale olhar o cenário atual. Existem várias abordagens, nenhuma ideal.

Screen scraping visual: o agente tira screenshot da página, manda pra um modelo de visão, e tenta identificar onde clicar por coordenadas. É a mais frágil e cara. Mudou o layout? Quebrou.

DOM/HTML parsing: mais esperto. O agente lê o HTML, navega a árvore DOM, identifica elementos por seletores CSS ou IDs. Funciona melhor, mas depende da estrutura do HTML, que muda entre deploys e nem sempre foi pensada pra consumo programático.

Accessibility tree: usa atributos ARIA e roles semânticos do browser. Provavelmente a melhor opção disponível hoje. O problema é que depende do site ter implementado acessibilidade direito. E a gente sabe que isso não é a regra.

Abordagem híbrida: ferramentas como Playwright combinam DOM parsing com interações programáticas. Funciona bem pra automação controlada, mas o agente ainda precisa inferir o que o site faz olhando a estrutura.

O ponto em comum de todas essas abordagens: o agente tá fazendo engenharia reversa de uma interface feita pra humanos. Ele precisa adivinhar o que cada elemento faz, qual o fluxo esperado, como encadear ações.

O que o WebMCP faz diferente

O WebMCP inverte a lógica. Em vez do agente interpretar a interface, o site declara suas capacidades como ferramentas estruturadas. O agente não precisa adivinhar nada.

Pensa assim: é a diferença entre ler o código-fonte de uma API pra descobrir os endpoints e ter uma spec OpenAPI completa. A informação é a mesma, mas num caso você interpreta, no outro você consome.

Segundo o Google, os ganhos são:

• Benchmarks iniciais mostram reduções de até 67% no overhead computacional em comparação com abordagens baseadas em scraping visual.

• Latência bem menor, porque a comunicação é via dados estruturados direto

Duas formas de integrar

O WebMCP oferece dois caminhos. Escolhe o que faz sentido pro seu caso.

API Declarativa (HTML puro)

A forma mais simples. Adiciona atributos nos forms que você já tem:

<form toolname="search-flights"
      tooldescription="Search available flights between two cities on a specific date">
  <label for="origin">Origem</label>
  <input name="origin" type="text" placeholder="São Paulo (GRU)" required />

  <label for="destination">Destino</label>
  <input name="destination" type="text" placeholder="Lisboa (LIS)" required />

  <label for="date">Data</label>
  <input name="date" type="date" required />

  <label for="passengers">Passageiros</label>
  <input name="passengers" type="number" min="1" max="9" value="1" />

  <button type="submit">Buscar voos</button>
</form>

O Chrome lê toolname e tooldescription, monta o schema JSON a partir dos inputs, e expõe pro agente como uma ferramenta. Dois atributos e seu form já é "agent-ready".

Quando o agente submete, dá pra saber que foi ele (e não um humano) pelo SubmitEvent:

form.addEventListener('submit', (event) => {
  if (event.agentInvoked) {
    analytics.track('agent_booking', { tool: 'search-flights' });
  }
  handleFlightSearch(new FormData(form));
});

Funciona bem pra formulários simples: buscas, cadastros, filtros.

API Imperativa (JavaScript)

Pra fluxos mais complexos, o WebMCP expõe o navigator.modelContext. Você registra ferramentas via JavaScript com schema JSON e um handler:

navigator.modelContext.registerTool({
  name: 'add-to-cart',
  description: 'Add a product to the shopping cart with optional quantity',
  schema: {
    type: 'object',
    properties: {
      productId: {
        type: 'string',
        description: 'The unique product identifier'
      },
      quantity: {
        type: 'number',
        minimum: 1,
        maximum: 99,
        description: 'Number of items to add'
      },
      size: {
        type: 'string',
        enum: ['P', 'M', 'G', 'GG'],
        description: 'Product size'
      }
    },
    required: ['productId']
  },
  handler: async ({ productId, quantity = 1, size }) => {
    const result = await cartService.addItem(productId, quantity, size);
    return {
      success: true,
      itemCount: result.totalItems,
      cartTotal: result.total,
      currency: 'BRL'
    };
  }
});

O retorno do handler volta pro agente como resposta estruturada. Ele sabe exatamente o que aconteceu.

Contexto compartilhado

Dá pra passar informações extras pro agente sobre o estado atual da sessão:

navigator.modelContext.provideContext({
  userTier: 'premium',
  currency: 'BRL',
  language: 'pt-BR',
  cartItems: 3,
  isLoggedIn: true
});

// No logout, limpa tudo
logoutButton.addEventListener('click', () => {
  navigator.modelContext.clearContext();
});

Os 4 métodos do navigator.modelContext

registerTool(config): expõe uma função pro agente. Recebe name, description, schema e handler.

unregisterTool(name): remove a ferramenta. Útil quando o estado muda (usuário deslogou, por exemplo).

provideContext(data): envia metadados pro agente (preferências, sessão, dados do usuário).

clearContext(): limpa os dados compartilhados. Essencial no logout.

Na prática: e-commerce agent-ready

Pra deixar mais concreto, um exemplo de loja online expondo suas operações principais:

// Busca no catálogo
navigator.modelContext.registerTool({
  name: 'search-products',
  description: 'Search products by keyword, category, or price range',
  schema: {
    type: 'object',
    properties: {
      query: { type: 'string', description: 'Search keywords' },
      category: { type: 'string', enum: ['electronics', 'clothing', 'books', 'home'] },
      minPrice: { type: 'number', minimum: 0 },
      maxPrice: { type: 'number', minimum: 0 },
      sortBy: { type: 'string', enum: ['price_asc', 'price_desc', 'rating', 'newest'] }
    },
    required: ['query']
  },
  handler: async (params) => {
    const results = await catalogAPI.search(params);
    return {
      products: results.items.map(p => ({
        id: p.id, name: p.name, price: p.price, rating: p.rating
      })),
      totalResults: results.total,
      page: 1
    };
  }
});

// Checkout
navigator.modelContext.registerTool({
  name: 'checkout',
  description: 'Start the checkout process for items in the cart',
  schema: {
    type: 'object',
    properties: {
      shippingMethod: { type: 'string', enum: ['standard', 'express', 'pickup'] },
      couponCode: { type: 'string', description: 'Optional discount coupon' }
    }
  },
  handler: async ({ shippingMethod = 'standard', couponCode }) => {
    const order = await checkoutService.initiate({ shippingMethod, couponCode });
    return {
      orderId: order.id,
      total: order.total,
      estimatedDelivery: order.deliveryDate,
      requiresConfirmation: true
    };
  }
});

// Contexto da loja
navigator.modelContext.provideContext({
  storeName: 'TechBR',
  currency: 'BRL',
  freeShippingThreshold: 199.90,
  userTier: currentUser?.tier || 'guest'
});

Com isso, um agente consegue buscar produtos, adicionar ao carrinho e fazer checkout. Tudo via dados estruturados, sem tocar na UI.

Segurança

O WebMCP é permission-first. O Chrome funciona como mediador entre o agente e o site.

Ações sensíveis (compras, envio de dados pessoais) pedem confirmação do usuário antes de executar. A execução roda dentro da sessão do usuário, então não precisa re-autenticar. E o clearContext() garante limpeza no logout.

Ou seja, o usuário mantém controle. O agente faz o trabalho pesado, mas decisões críticas passam pelo humano.

Impacto

Pra devs web: o custo de implementação é baixo. No caso simples, são dois atributos HTML. No complexo, algumas dezenas de linhas de JavaScript. Seu site passa a ser acessível pra uma nova geração de interfaces.

Pra empresas: sites agent-ready vão ter vantagem. Quando alguém pedir pro agente "compra a passagem mais barata pra Lisboa", ele vai preferir sites com WebMCP. É mais rápido, confiável e barato.

Pro ecossistema: o WebMCP é pro browser o que o MCP (Model Context Protocol, da Anthropic) é pra ferramentas locais. Juntos, criam um padrão onde agentes podem interagir com qualquer coisa de forma estruturada.

Como testar

O WebMCP tá em Early Preview no Chrome 146.

1. Se inscreva no Early Preview Program

2. Acesse a documentação e demos

3. Teste com diferentes LLMs

Um detalhe importante: a qualidade da description que você escreve nas ferramentas impacta diretamente na capacidade do modelo de usá-las. Descrição vaga gera alucinação. Descrições mais precisas mostraram, em benchmarks experimentais, taxas de sucesso muito elevadas.

Conclusão

A web foi construída pra humanos olharem e clicarem. Agentes de IA tentando usar essa mesma interface, seja por visão, DOM, ou accessibility tree, é sempre algum grau de engenharia reversa.

O WebMCP é um grande passo para um canal de comunicação direto entre sites e agentes. Claro que ainda falta adoção dos outros browsers, falta a spec estabilizar, falta o ecossistema crescer. Mas ao que tudo indica a direção está clara.

Se você desenvolve pra web, vale começar a pensar nos seus sites como toolkits. Não só como interfaces visuais.

---

WebMCP está disponível para preview no Chrome 146 via o Early Preview Program. Documentação oficial em developer.chrome.com/blog/webmcp-epp.

Referências:

• Chrome Developers Blog: WebMCP Early Preview

• Forbes: Google Ships WebMCP

• MarkTechPost: Google AI Introduces WebMCP