DEV Community

Taina Costa
Taina Costa

Posted on

webMCP: você vai anotar HTML para agentes de IA

#beginners #javascript #tutorial #webdev

Há alguns anos, você adaptou seu site para mobile. Depois, para acessibilidade. Agora o Google está sugerindo que você adapte para agentes de IA — e o webMCP (Web Model Context Protocol) é a proposta experimental que pode mudar como construímos interfaces para serem consumidas por LLMs.

O problema que resolve

Quando um agente de IA tenta usar um site hoje, ele faz o mesmo que um usuário humano: inspeciona o DOM, tenta adivinhar o que cada botão faz, clica, analisa o resultado, repete. Essa dança custosa desperdiça tokens e é pouco confiável — um layout redesenhado pode quebrar toda a lógica do agente.

O webMCP inverte essa lógica: em vez de forçar o agente a deduzir o que é possível fazer, você declara diretamente no HTML ou via JavaScript.

Como funciona (versão declarativa)

Você anota seus elementos com metadados que descrevem a intenção, não só a aparência:

<button 
  data-mcp-action="checkout" 
  data-mcp-params='{"cartId": "abc123"}'>
  Finalizar compra
</button>
Enter fullscreen mode Exit fullscreen mode

O agente lê a anotação, entende que aquele botão dispara uma ação de checkout com o parâmetro cartId, e interage diretamente — sem precisar interpretar CSS ou localização visual.

Pense nisso como ARIA para agentes: você já adiciona role="button" e aria-label para screen readers; webMCP é o mesmo conceito estendido para LLMs.

Versão imperativa (JavaScript)

Se você prefere controle programático, pode registrar ferramentas (tools) via MCP:

window.mcp.registerTool('hireDevelopers', {
  description: 'Contrata desenvolvedores para o time',
  parameters: { count: 'number', skills: 'string[]' },
  handler: async ({ count, skills }) => {
    // lógica de contratação
    return { hired: count, roles: skills }
  }
})
Enter fullscreen mode Exit fullscreen mode

O agente descobre as tools disponíveis, lê os schemas, e chama as funções diretamente — sem clicar em nada.

O que muda na prática

Antes: você escreve testes E2E com Playwright que simulam cliques. O agente faz a mesma coisa, mas sem os testes salvos.

Depois: você expõe um contrato explícito de ações possíveis. O agente consome esse contrato como consumiria uma REST API.

A diferença é menos sobre capacidade nova e mais sobre confiabilidade e custo. Um agente que lê anotações usa 10× menos tokens do que um que precisa fazer scraping visual.

Caveats

  • Experimental: só funciona no Chrome Canary/Beta com flags habilitadas. Não é standard da web (ainda).
  • Manutenção dupla: você vai manter UI para humanos + anotações para agentes. Isso pode ficar fora de sincronia.
  • Segurança: expor actions via MCP é expor superfície de ataque. Validação de entrada vira ainda mais crítica.
  • Adoção: se só o Google empurrar isso, pode morrer na praia. Web standards exigem consenso.

Quando vale a pena

Se você já tem uma aplicação que seria útil para agentes (dashboards, admin panels, ferramentas internas), adicionar webMCP pode torná-la consumível por LLMs sem construir uma API separada.

Se você está começando um produto novo voltado para automação, considere desenhar com anotações MCP desde o início — especialmente se o use case inclui usuários técnicos que vão querer scripting.

TL;DR

  • webMCP permite que sites declarem suas ações possíveis via HTML ou JS, em vez de forçar agentes a adivinhar clicando.
  • Funciona como progressive enhancement: usuários humanos não veem diferença, agentes ganham um contrato explícito.
  • Reduz custo de tokens e aumenta confiabilidade quando LLMs interagem com seu site.
  • Ainda experimental (Chrome Canary), mas sinaliza um futuro onde "otimizar para IA" vira padrão, assim como mobile e acessibilidade.
  • Vale considerar se seu produto já é target de automação ou scraping por agentes.

Top comments (0)