Como Adicionar WebMCP ao Seu App Next.js (Guia Completo 2026)

Eu estava assistindo ao Gemini no Chrome tentando usar um aplicativo Next.js que eu havia construído. O agente estava tirando capturas de tela, adivinhando qual campo de entrada era "pesquisa", clicando nos lugares errados, alucinado com os rótulos dos botões.

Foi doloroso de assistir. Como ver alguém ler um livro através de uma janela embaçada.

Esse é exatamente o problema que WebMCP foi criado para resolver.

WebMCP é um padrão de rascunho do W3C que adiciona uma API navigator.modelContext aos navegadores. Em vez de um agente de IA raspando seu DOM e adivinhando o que seu aplicativo faz, seu aplicativo Next.js informa ao agente exatamente o que ele pode fazer — em termos estruturados e legíveis por máquina. O agente chama uma função, obtém dados limpos e segue em frente.

Sem capturas de tela. Sem seletores quebrados. Sem alucinações.

Neste guia: o que é realmente o WebMCP, como ele difere do MCP da Anthropic e uma implementação completa passo a passo no Next.js App Router com código funcional.

WebMCP vs MCP — Esclareça isso primeiro

Isso confunde muitos desenvolvedores. Uma frase cada:

MCP da Anthropic roda no lado do servidor. Seu agente de IA se conecta a um backend via JSON-RPC para acessar bancos de dados, sistemas de arquivos ou APIs externas. Funciona fora do navegador completamente.

WebMCP roda no lado do cliente, dentro da aba do navegador. Seu site registra ferramentas com navigator.modelContext, e agentes no navegador as descobrem e chamam localmente. Sem servidor separado. Sem autenticação extra. O agente usa qualquer sessão que o usuário logado já tenha.

Eles são complementares, não concorrentes. Um site de reserva de voos pode usar WebMCP para que agentes do navegador possam pesquisar voos na interface, enquanto também executa um servidor MCP para que Claude ou GPT possam reservar voos via API no backend.

O W3C publicou o Relatório do Grupo Comunitário do Rascunho do WebMCP em 10 de fevereiro de 2026. O Chrome 146 lançou a primeira implementação atrás de uma flag de recurso. Todos os quatro principais fornecedores de navegadores estão na mesa — Google, Microsoft, Mozilla, Apple. Isso é um forte sinal.

As Duas APIs — Declarativa vs Imperativa

WebMCP oferece duas maneiras de expor ferramentas.

API Declarativa — Atributos HTML (2 minutos para enviar)

Já tem formulários HTML? Adicione dois atributos:

<form
  toolname="searchProducts"
  tooldescription="Pesquise o catálogo de produtos por palavra-chave e categoria. Retorna produtos correspondentes com preço e disponibilidade."
>
  <input name="query" type="text" placeholder="Pesquisar..." />
  <select name="category">
    <option value="">Todas as categorias</option>
    <option value="electronics">Eletrônicos</option>
  </select>
  <input name="maxPrice" type="number" />
  <button type="submit">Pesquisar</button>
</form>

Pronto. Um agente vê uma ferramenta searchProducts com parâmetros tipados inferidos dos campos do seu formulário. Zero JavaScript necessário.

Use para: formulários de pesquisa, filtros, formulários de contato, inscrições em newsletters.

API Imperativa — registerTool()

Para interações dinâmicas, lógica com estado ou fluxos de múltiplas etapas:

if ('modelContext' in navigator) {
  navigator.modelContext.registerTool({
    name: 'getUserDashboard',
    description: "Obtenha o resumo do painel do usuário atual, incluindo pedidos recentes, contagem de desejos e pontos de fidelidade.",
    inputSchema: {
      type: 'object',
      properties: {
        includeOrders: {
          type: 'boolean',
          description: 'Incluir os últimos 5 pedidos na resposta'
        }
      },
      required: []
    },
    async execute({ includeOrders }) {
      const res = await fetch('/api/dashboard', {
        method