Скачать или смотреть WebMCP: Agora a IA CONSEGUE Usar Qualquer Site (Tutorial Completo)

O Google e a Microsoft acabaram de lançar juntos um novo padrão web chamado WebMCP. E isso muda completamente como agentes de IA interagem com sites. Antes a IA tirava screenshot, tentava adivinhar onde clicar e errava mais da metade das vezes. Agora o site conta pra IA exatamente o que ele faz e ela chama as funções direto. Sem clicar em nada.

❇️ Garanta seu desconto na Formação Vibe Coding: https://app.horadecodar.com.br/lp/esq...

🟪 Hospedagem para n8n que eu indico: https://hostinger.com.br/matheusbattisti (use o cupom HORADECODAR para ter +10% de desconto)

📘 Guia Engenharia de Prompt: https://app.horadecodar.com.br/ebookp...

Canary: https://www.google.com/intl/pt-BR/chr...

Extensão MCP: https://chromewebstore.google.com/det...

Nesse vídeo eu explico o que é o WebMCP, por que é diferente do MCP que a gente já conhece, e mostro na prática criando um e-commerce completo com tools que a IA consegue usar.

Primeiro explico o problema que o WebMCP resolve. Hoje quando um agente de IA precisa fazer algo num site, ele funciona como um cego no computador. Tira screenshot, manda pra um Vision Model, tenta adivinhar onde tá o botão, simula clique, e se erra repete tudo. Resultado: 45% de acurácia, custo alto com tokens de imagem, lento e frágil. Mudou um botão de lugar e o agente quebra.

O WebMCP resolve isso de um jeito elegante. Ao invés do agente adivinhar o que o site faz, o site conta pra ele. É uma API nova do navegador que permite que qualquer site exponha tools, funções JavaScript estruturadas com nome, descrição e parâmetros, que agentes de IA descobrem e chamam diretamente. Como um menu de serviços invisível que só a IA enxerga. Resultado: acurácia perto de 98%, redução de 67% no custo de tokens e latência muito menor.

Explico a diferença crucial entre WebMCP e MCP. O MCP da Anthropic é protocolo de backend, você sobe um servidor em Python ou Node e a IA se conecta. O WebMCP roda dentro do navegador, no client-side, no JavaScript do frontend. Não precisa de servidor. A página web vira o servidor. E os dois são complementares.

Mostro as duas formas de implementar. A API Declarativa é a mais simples: você pega um formulário HTML que já existe e adiciona três atributos. O browser transforma automaticamente numa tool estruturada. A API Imperativa é via JavaScript com navigator.modelContext.registerTool(), pra quando precisa de mais controle e lógica dinâmica.

Na demonstração prática criei a TechStore, uma loja fictícia com 6 produtos. Visualmente é um e-commerce normal. Mas quando abro a extensão Model Context Tool Inspector do Google, aparecem 8 tools registradas: busca de produtos, newsletter, carrinho, favoritos, quantidade. Executo as tools ao vivo pela extensão e a UI inteira reage. Adiciono produto no carrinho, favorito, busco, tudo com uma chamada de função. Zero screenshot, zero adivinhação.

Falo sobre o impacto no mercado. Especialistas já chamam o WebMCP da maior mudança no SEO técnico desde dados estruturados. SEO deixa de ser só sobre descoberta e vira sobre ação. Sites que não expõem tools podem ficar invisíveis pra agentes. Pra e-commerce é transformador: imagina um agente fazendo compras pelo usuário chamando funções direto. E pra acessibilidade é uma evolução enorme pra tecnologias assistivas.

Encerro mostrando como testar hoje: Chrome Canary, ativar a flag WebMCP for testing no chrome://flags, instalar a extensão Model Context Tool Inspector e abrir o projeto.

Quem tá por trás disso é Google, Microsoft e W3C. Quando essas empresas se juntam pra criar um padrão web, vira realidade. Foi assim com Service Workers, WebAssembly, e agora com WebMCP. Anunciado oficialmente em fevereiro de 2026.


Entre no nosso servidor de Discord e me siga nas redes:

🟣 Discord Hora de Codar:   / discord  
🔴 Instagram:   / horadecodar  
🔷 Telegram: https://t.me/horadecodar

TIMESTAMPS

00:00 O novo padrão da web o WebMCP
01:55 Porque o WebMCP é tão importante (MCP x WebMCP)
05:26 Como utilizar o WebMCP (teste WebMCP)
07:40 Projeto com WebMCP na prática
08:24 Como implementar o WebMCP no projeto
11:33 Executando o WebMCP no navegador
14:08 Minha opinião sobre o WebMCP