Como Adicionar WebMCP ao seu App Next.js

Agentes de IA frequentemente têm dificuldade em entender aplicações web. Eles fazem o scraping do DOM e tentam adivinhar o que os botões fazem. Isso leva a erros e alucinações.

O WebMCP resolve isso. É um padrão W3C que adiciona uma API modelContext aos navegadores. Em vez de adivinhar, seu app Next.js diz ao agente exatamente quais funções ele pode executar.

WebMCP vs Anthropic MCP

O Anthropic MCP roda no servidor. Ele utiliza JSON-RPC para se conectar a bancos de dados ou APIs. Ele reside fora do navegador.

O WebMCP roda na aba do navegador. Ele registra ferramentas localmente. Ele utiliza a sessão existente do usuário. Não é necessária autenticação extra ou backend.

Eles trabalham juntos. Você pode usar o MCP para tarefas de backend e o WebMCP para interações de frontend.

Duas maneiras de expor ferramentas:

  • HTML Forms: Adicione os atributos toolname e tooldescription aos seus formulários. O agente vê a ferramenta e os parâmetros sem qualquer JavaScript. Use isso para buscas e filtros.

  • JavaScript: Use a API navigator.modelContext para lógica dinâmica. Isso é ideal para fluxos de múltiplas etapas.

Implementação no Next.js

  1. Instale o polyfill para suporte no navegador: npm install @mcp-b/global @mcp-b/react-webmcp

  2. Crie um WebMCPProvider para inicializar o polyfill no seu layout.

  3. Use o hook useWebMCP em seus componentes de cliente. Este hook gerencia o registro e a limpeza das ferramentas automaticamente.

Exemplo de configuração de ferramenta:

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

Melhores Práticas

  • Use HTTPS. O WebMCP requer uma conexão segura em produção.
  • Mantenha a contagem de ferramentas baixa. Ferramentas demais incham o contexto da IA e tornam o raciocínio mais lento. Mantenha abaixo de 50 ferramentas por página.
  • Forneça descrições detalhadas. Os agentes dependem dessas strings para entender quando usar uma ferramenta.
  • Use uma camada de serviço (service layer). Não dependa do estado do React dentro dos handlers das ferramentas. Use funções puras para evitar dados obsoletos.

Testes

Abra o Chrome 146 ou superior. Ative a flag WebMCP em chrome://flags. Use a extensão Model Context Tool Inspector para testar suas ferramentas sem um agente de IA.

O WebMCP é o futuro da navegação web agêntica. Comece a implementá-lo agora para estar preparado quando os navegadores o habilitarem por padrão.

Fonte: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp