O que é WebMCP? A API nativa do Chrome para agentes de IA
Agentes de IA estão se tornando bons em usar a web. Mas a maneira como eles interagem com ela hoje é frágil: seletores CSS, consultas XPath, análise visual e raspagem do DOM que quebra toda vez que um designer renomeia uma classe.
O Chrome 146 traz uma prévia inicial de algo que muda isso: WebMCP.
O problema com a forma como os agentes usam a web hoje
Quando um agente de IA precisa preencher um formulário de busca de voos, ele normalmente faz algo assim:
- Faz uma captura de tela ou analisa o DOM
- Adivinha qual entrada é "origem" e qual é "destino"
- Descobre o formato do seletor de data
- Clica em enviar e espera que a estrutura da página não tenha mudado
Isso funciona mal. É lento, frágil e requer manutenção constante à medida que os sites atualizam sua interface. O agente está essencialmente aprendendo a usar uma interface projetada para humanos, não para máquinas.
WebMCP inverte esse modelo.
O que é WebMCP?
WebMCP é um padrão web proposto que permite que sites publiquem ferramentas estruturadas diretamente para agentes de IA no navegador. Em vez de o agente raspar o DOM para adivinhar como um formulário funciona, a página diz explicitamente ao agente: aqui está o que eu posso fazer, aqui estão as entradas que espero, aqui está o que retornarei.
Pense nisso como MCP (Protocolo de Contexto de Modelo) embutido no próprio navegador.
A principal diferença em relação ao MCP do lado do servidor: as ferramentas WebMCP são definidas no cliente, dentro de uma página da web, e estão disponíveis apenas enquanto essa página estiver aberta em uma aba do navegador. Sem servidor para implantar, sem infraestrutura para manter.
Como o WebMCP funciona
O Chrome expõe uma nova API JavaScript: navigator.modelContext. Este objeto é a ponte entre sua página da web e qualquer agente de IA em execução no navegador.
WebMCP oferece duas maneiras de definir ferramentas: a API Imperativa (JavaScript) e a API Declarativa (anotações HTML).
A API Imperativa
Use registerTool() para definir uma ferramenta em JavaScript:
navigator.modelContext.registerTool({
name: "addTodo",
description: "Adicionar um novo item à lista de tarefas",
inputSchema: {
type: "object",
properties: {
text: { type: "string" }
}
},
execute: ({ text }) => {
addItemToList(text);
return { content: [{ type: "text", text: `Tarefa adicionada: ${text}` }] };
}
});
A função execute é chamada pelo agente com parâmetros estruturados que correspondem ao seu esquema. Você preenche a interface, executa a ação e retorna um resultado que o agente pode ler.
Para remover uma ferramenta (por exemplo, quando o usuário navega para longe de um estado onde faz sentido):
navigator.modelContext.unregisterTool("addTodo");
Essa registro dinâmico é útil para aplicativos de página única onde as ações disponíveis mudam com base no estado da interface.
A API Declarativa
Para formulários, você não precisa de JavaScript. Adicione alguns atributos HTML e o navegador gera a definição da ferramenta automaticamente:
<form
toolname="search_flights"
tooldescription="Buscar voos disponíveis entre dois aeroportos"
action="/search"
>
<label for="origin">Aeroporto de partida</label>
<input type="text" name="origin" id="origin">
<label for="destination">Aeroporto de chegada</label>
<input type="text" name="destination" id="destination">
<select name="cabin_class" toolparamdescription="Preferência de classe da cabine">
<option value="economy">Economia</option>
<option value="business">Executiva</option>
<option value="first">Primeira</option>
</select>
<button type="submit">Buscar</button>
</form>
O navegador lê a estrutura do formulário e gera automaticamente um esquema JSON completo, incluindo tipos de campo, campos obrigatórios e opções de enumeração de elementos <select> e <input type="radio">.
Os três atributos principais:
