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

Aspecto MCP (Backend) WebMCP (Frontend)
Propósito Dados e ações disponíveis a qualquer hora Interação instantânea quando o usuário visita o site
Ciclo de vida Persistente (servidor/daemon) Efêmero (vinculado à tab)
Conectividade Global (desktop, mobile, cloud, web) Específico do browser
Interação com UI Headless — sem acesso ao DOM Integrado ao browser — DOM-aware
Discovery Registro específico do agente (config, manifesto) Tools registradas na página durante visita
Protocolo JSON-RPC (SDKs em Rust, Python, TS) JavaScript/HTML nativo no browser
Conceitos Resources, Prompts, Tools, Sampling Apenas Tools (sem resources)
Acesso a dados API keys, databases, serviços externos Session, cookies, DOM ao vivo
Segurança TLS, API keys, OAuth Origin isolation, Permissions Policy
Caso de uso Tarefas de API em background Navega e atua em UI web ao vivo

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

Aspecto MCP WebMCP
Quem é host App roda dentro do agente Agente interage com seu site
Controle da experiência Agente decide como mostrar dados Você decide como agente interage
Renderização Agente renderiza UI do app Seu site renderiza, agente opera
Visibilidade para usuário Pode ser invisível Sempre visível na tab

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.

Aspecto Actuation WebMCP
Velocidade Round-trips de renderização Comunicação interna do browser (quase instantânea)
Durabilidade Quebra com redesign (classes CSS, IDs) Conecta à lógica, não ao design
Controle Agente adivinha onde clicar Você define exatamente o que está disponível
Precisão Pode confundir elementos visuais Schema tipado elimina ambiguidade
Custo Tokens para interpretar DOM Schema compacto

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:

Conceito Web MCP equivale a WebMCP equivale a
Backend API REST/GraphQL endpoints —
Frontend — JavaScript + DOM APIs
Database Data source do MCP server —
Browser events — Tool execution no browser
Server-side rendering MCP gera dados —
Client-side interaction — WebMCP executa no client

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

Pergunta Se SIM → Se NÃO →
Precisa de browser aberto? WebMCP MCP
Acessa dados de sessão? WebMCP MCP
Opera em background? MCP WebMCP
Precisa de UI feedback? WebMCP MCP
Integra API externa? MCP WebMCP
Progressive enhancement? WebMCP MCP
Multi-plataforma? MCP WebMCP

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