Implementando WebMCP em um Site de Recrutamento

Pensar sobre como, exatamente, o futuro de um site "parece" na era agente é uma proposta desafiadora. Pode ser que, na maioria dos casos, nossos futuros espectadores/leitores/clientes possam fazer tudo, desde seu chatbot de preferência, sem nunca visitar seu site.

WebMCP é uma parte desse quebra-cabeça. O protocolo direciona um agente a parar de adivinhar o que um botão faz e começa a chamar ferramentas com entradas digitadas, com um protocolo de registro de ferramentas fundamentalmente simples.

Então, o que é WebMCP? WebMCP é "um padrão emergente do W3C desenvolvido pelo Google e Microsoft que atua como uma API de navegador para transformar sites em ferramentas interativas para agentes de IA".

Este é o futuro e eu acho que é muito empolgante. Para me divertir, adicionei suporte ao WebMCP ao YubHub , (meu site de recrutamento).

Hoje, vou falar sobre o que aprendi construindo, as escolhas de design que fizemos que funcionaram, um rastreamento de agente que capturou uma alucinação em um sistema de produção (corrigido) e por que (na minha opinião!) um site de recrutamento se mostrou um ajuste incomum para esse protocolo.

YubHub no Chrome 146 com a Ferramenta de Inspeção de Contexto do Modelo aberta.

Por que um Site de Recrutamento?

Porque sites novos e antigos terão que mudar rapidamente (e eu realmente gosto de começar negócios online do zero – o teste de um verdadeiro martech marketer!).

A maioria dos explicadores do WebMCP que li enquanto pesquisava isso usa um fluxo de checkout, uma lista de tarefas ou um seletor de cores. Brinquedos. Eles funcionam para ilustrar a superfície da API (o que essa nova coisa pode fazer?), mas sem implementar e brincar com o protocolo você mesmo, temo que a ficha simplesmente não caia.

O verdadeiro valor do WebMCP surge quando um agente precisa raciocinar sobre muitos dados estruturados que já estão por trás de uma boa estrutura de URL – e sites de recrutamento são construídos exatamente em torno dessa forma: detalhes do trabalho, faixas salariais, habilidades necessárias ou locais de emprego.

YubHub já fornecia dados limpos em URLs previsíveis (/jobs/skill/figma, /jobs/at/anthropic) e emite marcação JobPosting do schema.org. O que ele não tinha era um "contrato". Qualquer agente navegando pelo site poderia ver o HTML e JSON-LD, tenho certeza, mas fazer um agente navegar pelo seu site em busca de uma resposta via Chrome é simplesmente a maior perda de tempo quando ideias tão fundamentais quanto uma API existem há décadas.

WebMCP corrige isso publicando a interface explicitamente, com entradas digitadas e respostas estruturadas. Prompt em > "encontre-me um X para um Y em Z". Portanto, para um site cujo trabalho é "ser descoberto", o WebMCP é um grande negócio.

O fluxo básico. A página registra ferramentas em navigator.modelContext, o agente as descobre e as invoca, a página responde com dados estruturados. Sem captura de tela no meio.

O que é WebMCP?

WebMCP é um padrão web proposto, co-autorado por engenheiros do Google e Microsoft sob o grupo de comunidade W3C Web Machine Learning, que permite que um site exponha um conjunto de ferramentas chamáveis para um agente de IA executando no navegador. Existem duas APIs: imperativa (navigator.modelContext.registerTool() chamada do JavaScript) e declarativa.

Pense nisso como um contrato que o site publica para qualquer agente que aterrissa nele. Em vez de o agente adivinhar que um div com class="btn-primary" significa "checkout", a página diz: aqui está uma ferramenta de checkout, aqui está o que ela precisa, aqui está o que você receberá de volta.

Isso é um salto bem-vindo da captura de tela e controle de navegador baseado em MCP. O benchmark rápido do Chrome DevTools MCP avaliou uma tarefa simples de "definir contador para 42" em 3.801 tokens usando capturas de tela e 433 tokens usando WebMCP. Isso representa uma redução de 89% no uso de tokens!

A especificação atual está no site do grupo de comunidade W3C (webmachinelearning.github.io/webmcp), com o anúncio de pré-visualização inicial do Chrome e postagens detalhadas em developer.chrome.com/blog/webmcp-epp. Ele é enviado atrás de uma bandeira no Chrome Canary 146. O Google Chrome Labs mantém uma extensão de referência – a Ferramenta de Inspeção de Contexto do Modelo – que lista as ferramentas que qualquer página registrou e permite que você as chame manualmente. Se você está planejando construir algo com isso, você vai querer ter ambas instaladas.

Como o WebMCP Difere do MCP

Os nomes não ajudam muito, ajudam! O Protocolo de Contexto do Modelo (MCP) é do lado do servidor – você implanta um servidor MCP ao qual um agente se conecta, ele roda em seu próprio processo, expõe ferramentas para seu assistente de IA via JSON-RPC. Temos uma biblioteca crescente de nossos próprios conectores MCP como meus favoritos Gemini MCP e Houtini-LM.

WebMCP é o irmão do lado do navegador. Seu código de ferramenta roda no contexto JavaScript da página, então ele tem os cookies do usuário, sua sessão, suas permissões – tudo que o usuário já tem acesso. Não há implantação, nenhuma ponte de autenticação, nenhum servidor para pagar. Bem, na maioria das vezes – você ainda tem que manter a página, obviamente, mas não há nada extra. Se seu site já autentica o usuário, suas ferramentas WebMCP herdam essa autenticação de graça.

A consequência prática: MCP é a escolha certa para agentes que precisam de dados de terceiros (GitHub, Gmail, um banco de dados). WebMCP é a escolha certa para agentes que precisam interagir com um site específico que o usuário solicitou.

Configurando

Se você tem o Chrome Canary 146 ou superior, você já está configurado. Os canais estáveis, Beta e Dev do Chrome não enviam a bandeira WebMCP – então você precisa habilitá-la:

Abra uma nova aba em chrome://flags/#enable-webmcp-testing e defina "WebMCP para teste" como Habilitado. Clique em Reiniciar.