WebMCP vs MCP: Diferenças, Quando Usar e Como Combinar

Duas faces do mesmo objetivo

MCP (Model Context Protocol) e WebMCP (Web Model Context Protocol) compartilham um objetivo: permitir que agentes de IA interajam com aplicações de forma estruturada. Mas operam em camadas completamente diferentes.

Não competem. Complementam-se. Entender quando usar cada um (e quando combinar) é o que separa uma arquitetura agentic coerente de uma gambiarra que funciona “mais ou menos”.

Tabela comparativa completa

A analogia oficial do Chrome

O time do Chrome usa uma analogia de empresa que ajuda bastante:

MCP = Call center da empresa

• Disponível em qualquer plataforma, a qualquer hora
• Puxa dados de sistemas internos
• Resolve tarefas core (pedidos, suporte, consultas)
• Não sabe como é a loja física
• Opera por telefone — sem contexto visual

WebMCP = Especialista na loja

• Disponível apenas quando o cliente está na loja (site aberto)
• Conhece o layout, as prateleiras, os botões
• Ajuda o agente a entender a UI projetada para humanos
• Acessa o que está na tela — em tempo real
• Opera com contexto visual completo

Faz sentido? O call center resolve sem ver. O especialista na loja resolve porque vê.

O que cada um acessa

MCP acessa:

• Bancos de dados (via API keys)
• Serviços externos (Stripe, GitHub, Slack)
• Filesystems locais
• Endpoints de API protegidos por auth
• Dados que existem independente do browser

WebMCP acessa:

• DOM ao vivo da página
• Cookies e session storage
• Estado do formulário preenchido
• UI renderizada com dados do usuário logado
• Contexto visual que muda a cada interação

Nota: Essa diferença é fundamental. Um MCP server de um e-commerce acessa o catálogo via API. Mas só o WebMCP sabe que o usuário está logado, tem 3 itens no carrinho, e está olhando a página de checkout com o campo CEP preenchido.

Controle de UI

Em MCP, seu app é guest dentro da UI do agente. Em WebMCP, o agente é guest dentro da sua plataforma.

Essa inversão de controle muda tudo na experiência do usuário.

Vantagens do WebMCP sobre actuation

Actuation é o que agentes fazem hoje: simulam cliques e input de texto. WebMCP substitui isso com chamadas estruturadas.

Quando usar cada um

Use apenas MCP quando:

• Tarefa não envolve UI (processamento de dados, APIs)
• Precisa operar sem browser aberto
• Integra com serviços externos (Slack, GitHub, DBs)
• Executa em background por longos períodos
• Não há sessão de usuário envolvida

Use apenas WebMCP quando:

• Interação acontece na página web aberta
• Precisa de dados de sessão (cookies, localStorage)
• UI precisa de feedback visual para o usuário
• Formulários e navegação são o core da interação
• Quer progressive enhancement (funciona sem agente)

Use ambos quando:

• E-commerce: MCP para catálogo/estoque, WebMCP para carrinho/checkout
• SaaS: MCP para operações de conta, WebMCP para UI do app
• Suporte: MCP para ticket system, WebMCP para formulários do help desk
• Reservas: MCP para disponibilidade, WebMCP para seleção visual de assentos

Padrão de uso combinado

O Chrome recomenda este padrão:

┌─────────────────────────────────────────────────────────┐
│                    AGENTE DE IA                           │
│                                                          │
│  ┌──────────────┐         ┌───────────────────────┐     │
│  │     MCP      │         │       WebMCP           │     │
│  │              │         │                        │     │
│  │  • APIs      │         │  • DOM ao vivo         │     │
│  │  • Databases │    +    │  • Session/cookies     │     │
│  │  • Serviços  │         │  • Formulários         │     │
│  │  • Background│         │  • Navegação visual    │     │
│  │              │         │                        │     │
│  └──────────────┘         └───────────────────────┘     │
│                                                          │
│  CAMADA DE SERVIÇO          INTERAÇÃO CONTEXTUAL         │
│  (fundacional)              (tempo real)                  │
└─────────────────────────────────────────────────────────┘

Exemplo concreto: Booking de viagem

1. MCP: Consulta API de voos, verifica disponibilidade, busca preços → camada de dados
2. WebMCP: Preenche formulário de busca na página, seleciona opções visuais, navega entre resultados → camada de interação
3. Resultado: O agente usa MCP para decidir e WebMCP para executar na UI

Analogia técnica

Se você conhece arquitetura web:

Ou em termos de frameworks:

• MCP é como um API Gateway — centraliza acesso a múltiplos serviços
• WebMCP é como um SDK frontend — fornece interface tipada para operações no cliente

Limitações de cada abordagem

Limitações do MCP

• Não acessa estado do browser (cookies, session, DOM)
• Não pode interagir com UI visível ao usuário
• Requer infraestrutura de servidor
• Não tem progressive enhancement

Limitações do WebMCP

• Requer tab aberta — sem suporte headless
• Chrome-only por enquanto
• Sem conceito de Resources (apenas Tools)
• Efêmero — tools desaparecem quando tab fecha
• Spec em evolução ativa

Migração progressiva

Já tem um MCP server? Não precisa reescrever nada. Migre incrementalmente:

Fase 1: WebMCP para formulários existentes

<!-- Adicione atributos aos forms — zero breaking change -->
<form toolname="contact_sales"
      tooldescription="Submit a sales inquiry"
      method="POST" action="/api/sales">
  <!-- campos existentes -->
</form>

Fase 2: WebMCP para navegação e busca

Use astro-webmcp para expor conteúdo automaticamente.

Fase 3: Coordenação MCP + WebMCP

O agente usa MCP para dados e WebMCP para ação:

Agente:
1. [MCP] getProductRecommendations(userId: "123") → lista
2. [WebMCP] search_products({ query: "recommended item" })
3. [WebMCP] go_to({ slug: "products/item-123" })
4. [MCP] createOrder(productId: "123", userId: "123")

Resumo decisional

Na dúvida: use ambos. MCP como camada de dados, WebMCP como camada de interação.

O futuro dos dois protocolos

Ambos estão em evolução ativa:

• MCP ganhando adoção massiva com SDKs em múltiplas linguagens e integração em IDEs, assistentes e automações
• WebMCP em Origin Trial no Chrome, com specs sendo refinadas no W3C

A tendência é convergência: agentes usarão MCP para planejamento e dados, WebMCP para execução em interfaces web. Não é questão de “qual escolher” — é questão de em qual camada cada interação acontece.

Sites que implementam WebMCP hoje ganham vantagem de primeiro mover. Quando agentes de browser se tornarem mainstream, esses sites vão funcionar nativamente. Os outros vão depender de actuation frágil.

Próximos passos

• Introdução ao WebMCP — Fundamentos do protocolo
• Best Practices — Como construir tools eficazes
• astro-webmcp — Implementação prática para sites Astro