WebMCP
mcp2everything · Programação
O WebMCP (Web Model Context Protocol) é um padrão web proposto para a integração de agentes de IA na web. Ele deixa os sites exporem ferramentas estruturadas diretamente a agentes de IA que rodam dentro do navegador. Em vez de o agente tirar capturas de tela e adivinhar onde ficam os botões, o site registra funções JavaScript com nomes, descrições e esquemas de parâmetros, e o agente as chama na hora. É uma biblioteca leve de código aberto mais uma API no nível do navegador, voltada a desenvolvedores frontend que querem que suas páginas funcionem de forma limpa com assistentes de IA.
Sobre WebMCP
O que é o WebMCP
O WebMCP é um padrão web aberto para agentes de IA. Ele inverte o modelo comum de automação do navegador: em vez de o agente analisar o DOM ou ler capturas de tela para descobrir o que uma página faz, a própria página declara suas capacidades como ferramentas estruturadas. Depois, o navegador entrega essas ferramentas a qualquer agente de IA conectado, que as invoca como funções locais.
A ideia central se apoia em um único objeto global, o navigator.modelContext. O desenvolvedor chama registerTool com um nome, uma descrição em linguagem simples, um JSON Schema para os argumentos e uma função manipuladora. Os agentes descobrem a ferramenta de forma automática e a chamam com parâmetros reais. Como a ferramenta roda dentro da página ativa, ela já tem a sessão do usuário, os cookies e o estado atual do app, então não é preciso montar nenhuma camada extra de autenticação.
Há um limite real que vale saber desde o começo. O WebMCP vive e morre com a aba do navegador. Feche a aba e as ferramentas somem. Ele cobre apenas ferramentas, não os recursos e os prompts que um servidor MCP completo pode carregar. E parte do princípio de que há uma pessoa presente para autorizar as ações, o que é um recurso de segurança, mas descarta o trabalho em segundo plano totalmente sem supervisão.
Como começar
- Abra o código frontend do seu site e adicione a tag de script do WebMCP (ou rode
npm install webmcp) para que a biblioteca carregue nas suas páginas. - Crie uma instância de
WebMCP. Você pode passar opções de interface como cor, posição e tamanho do botão do widget flutuante de ajuda. - Registre sua primeira ferramenta com
mcp.registerTool(name, description, schema, handler). Aponte o manipulador para uma lógica que seu app já executa. - Registre todas as ferramentas logo depois que o script carregar. Clientes MCP muitas vezes precisam reiniciar para enxergar ferramentas novas.
- Teste em um navegador compatível com um cliente MCP conectado e publique. Uma vez no ar, os agentes podem chamar suas ferramentas.
É isso. Sem backend, sem servidor de autenticação, sem reescrever nada.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de WebMCP.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores frontend
- Donos de sites independentes e equipes pequenas
- Equipes de produto que se preparam para o tráfego de IA
Tarefas
- Expor uma ferramenta de busca para que um agente consulte seu conteúdo por palavra-chave e devolva resultados estruturados em vez de ler uma lista na tela.
- Registrar ações de preenchimento e envio de formulários para que um assistente conclua um pedido ou uma reserva em nome do usuário com a sessão já pronta.
- Empacotar a lógica de negócio existente em JavaScript como funções que um agente possa chamar. Assim você evita uma camada de API paralela feita só para a IA.
Cenários
- Um fluxo de compra em que o agente chama uma ferramenta de adicionar ao carrinho em vez de clicar por um layout que muda.
- Um site de documentação que deixa um assistente puxar o conteúdo da página direto quando o usuário pergunta sobre ele.
- Um painel em que o assistente lê widgets ao vivo por meio de recursos registrados em vez de reanalisar o DOM.
Principais recursos
Registro de ferramentas com JSON Schema
O registerTool é o coração deste padrão web para agentes de IA. Você passa um nome, uma descrição em linguagem natural, um esquema de argumentos e um manipulador, e a ferramenta fica disponível para qualquer agente conectado. O esquema diz ao modelo exatamente quais entradas ele pode enviar, o que reduz chamadas malformadas e adivinhações.
Sessão compartilhada e contexto da página
As ferramentas rodam dentro da página, então herdam o estado de login, os cookies e os dados em memória que o usuário já tem. O agente não precisa reconstruir a autenticação nem se preocupar com barreiras de origem cruzada. Isso simplifica muito as coisas na comparação com levantar um proxy de backend separado para cada ação de IA.
Prompts e recursos ao lado das ferramentas
Além das ações, o WebMCP deixa você registrar modelos de prompt e recursos legíveis identificados por URI. Um prompt pode moldar uma consulta comum e aceitar argumentos que mudam a cada chamada. Um recurso pode expor o conteúdo da página como contexto. Juntos, dão ao agente mais do que botões para apertar.
Sem dependência de framework ou backend
A biblioteca é um pequeno complemento em JavaScript vanilla que funciona em Chrome, Firefox, Safari e Edge, e convive bem com React, Vue e Angular. Você não precisa de servidor novo, banco de dados novo nem reescrever sua arquitetura. Se consegue editar o frontend de uma página, consegue adicionar o WebMCP.
Resistência a mudanças de interface
Como os agentes chamam ferramentas semânticas em vez de localizar elementos na tela, renomear uma classe CSS ou reorganizar o layout não quebra a integração. Agentes baseados em capturas e em scraping do DOM ficam obsoletos no instante em que um designer mexe na página. O WebMCP desvia de toda essa classe de falhas.
Prós e contras
Prós
- Zero mudanças no backend e uma configuração simples com uma tag de script, então o custo de integração fica baixo para equipes pequenas.
- Licença MIT e gratuito, sem conta de fornecedor nem taxa por requisição para rotear o tráfego de IA.
- Reaproveita a lógica frontend existente, então o mesmo código que atende usuários humanos também atende agentes.
- Herda a sessão do usuário de forma automática, o que elimina quase toda a fiação de autenticação no caminho da IA.
- Roda nos principais navegadores e frameworks frontend, então você não fica preso a uma única stack.
Contras
- As ferramentas somem quando a aba fecha, então ele não sustenta automação persistente nem em segundo plano sem interface.
- Não traz suporte a recursos e prompts como um servidor MCP completo oferece, o que limita o que alguns agentes conseguem fazer.
- Exige autorização do usuário por design, o que é mais seguro, mas adiciona um passo antes de os agentes agirem.
- O ecossistema ao redor ainda é jovem, então você pode esbarrar em arestas e em poucos exemplos funcionais.
Perguntas frequentes
Ele deixa um site entregar ferramentas estruturadas a um agente de IA no navegador. O agente chama essas ferramentas direto, então pode buscar, preencher formulários ou disparar ações sem extrair a página nem adivinhar onde clicar.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a WebMCP.
Alternativas a WebMCP
Forefront
Forefront · ProgramaçãoO Forefront é uma plataforma web para construir com IA de código aberto. Você ajusta os principais modelos de linguagem de código aberto com seus próprios dados, avalia o desempenho deles e os roda por uma API ou os exporta para hospedar por conta própria. Desenvolvedores que querem a conveniência de uma plataforma fechada, mas fazem questão de ser donos dos modelos e dos dados, são o público-alvo aqui.
Startkit
StartKit.AI · ProgramaçãoStartkit é um boilerplate para criar produtos de SaaS com IA e wrappers de IA. Pense nele como um boilerplate para startups de IA com as partes chatas já conectadas: autenticação, pagamentos com Stripe e Lemon Squeezy, limites de uso, e-mail transacional e um kit inicial de API de IA que conversa com OpenAI, Anthropic, Groq ou Llama. Você clona o repositório, define seu preço e começa pela parte do produto que as pessoas realmente pagam. Ele é feito em Next.js sobre React e Tailwind, então boa parte do código boilerplate já parece familiar.
Testim
Tricentis · ProgramaçãoO Testim é uma plataforma de automação de testes com IA para criar e executar testes de ponta a ponta em aplicações web, mobile e Salesforce. Ele se apoia no aprendizado de máquina para manter os testes estáveis quando uma interface muda, então as equipes gastam menos tempo consertando seletores quebrados. Nada mal para uma ferramenta de testes automatizados que você pode começar a usar hoje. Você cria testes gravando ações no navegador e depois adiciona JavaScript quando precisa de mais controle. É uma escolha sólida para equipes de QA ocupadas.