A inteligência artificial está começando a interagir com a web de uma maneira completamente nova. Em vez de navegar manualmente pelas páginas, os agentes de IA agora podem realizar ações diretamente em sites.

No entanto, a maioria dos sites hoje é construída apenas para humanos. Os agentes de IA frequentemente dependem de técnicas frágeis, como:

• Análise de DOM
• Clique automatizado
• Extração de HTML
• Interpretação de capturas de tela

Essas abordagens falham sempre que a interface do usuário muda.

Para resolver esse problema, uma nova capacidade do navegador chamada WebMCP (Protocolo de Contexto de Modelo da Web) permite que os sites exponham sua funcionalidade como ferramentas estruturadas que os agentes de IA podem executar diretamente.

Neste tutorial, você aprenderá:

• O que é WebMCP
• Como o WebMCP funciona
• Como implementar a API Declarativa
• Como implementar a API Imperativa
• Como construir um exemplo real de WebMCP

Ao final deste guia, você terá criado seu primeiro recurso de site pronto para agentes de IA.

O que é WebMCP?

WebMCP é um protocolo que permite que os sites exponham ações estruturadas que os agentes de IA podem chamar diretamente.

Em vez de navegar pelos elementos da interface do usuário passo a passo, o agente simplesmente chama uma ferramenta fornecida pelo site.

Por exemplo, considere um site de comércio eletrônico.

Sem o WebMCP, um agente de IA pode precisar:

1. Carregar a página inicial
2. Encontrar o campo de busca
3. Inserir o nome de um produto
4. Clicar no botão de busca
5. Analisar a página de resultados

Com o WebMCP, o agente pode chamar diretamente:

searchProducts("tênis de corrida")

O site então retorna resultados estruturados.

Isso torna as interações de IA:

• mais rápidas
• mais confiáveis
• independentes do layout da interface do usuário

Por números (a partir de dados da especificação W3C):

• 89% de redução de tokens em comparação com métodos baseados em captura de tela
• Zero manutenção de seletor de UI após a implementação
• Funciona dentro da sessão do navegador existente — sem sobrecarga de autenticação extra

Como o WebMCP Funciona

A arquitetura do WebMCP tem três camadas principais.

1. Ferramentas do Site

O site define as ações que deseja expor para os agentes de IA.

Exemplos:

searchProducts()
addToCart()
createSupportTicket()
bookFlight()

Cada ferramenta contém:

• nome
• descrição
• esquema de entrada
• formato de saída

2. Integração com o Navegador

Os navegadores detectam ferramentas WebMCP em uma página da web e as expõem para os agentes de IA.

Isso permite que os agentes descubram quais ações um site suporta.

3. Execução de IA

Quando um agente de IA deseja realizar uma ação, ele chama a ferramenta com parâmetros.

Exemplo:

Agente → searchProducts("tênis de corrida")
Site → retorna resultados JSON estruturados

Duas Maneiras de Implementar o WebMCP

O WebMCP suporta dois métodos de implementação.

1. API Declarativa (HTML)
2. API Imperativa (JavaScript)

Ambas as abordagens expõem ferramentas para agentes de IA.

Método 1: API Declarativa (Formulários HTML)

A API declarativa é a maneira mais fácil de implementar o WebMCP.

Formulários HTML existentes podem ser transformados em ferramentas de IA usando atributos como:

toolname
tooldescription
toolautosubmit

Exemplo: Ferramenta de Busca de Voos

<form toolname="searchFlights"
      tooldescription="Buscar voos entre dois aeroportos"
      toolautosubmit="true"
      action="/api/flights/search"
      method="GET">

<label>Origem</label>
<input name="origin" type="text" required pattern="[A-Z]{3}">

<label>Destino</label>
<input name="destination" type="text" required pattern="[A-Z]{3}">

<label>Data</label>
<input name="date" type="date" required>

<label>Passageiros</label>
<input name="passengers" type="number" min="1" max="9" value="1">

<button type="submit">Buscar Voos</button>

</form>

Quando o navegador detecta este formulário, ele converte automaticamente os campos em um esquema de ferramenta.

O agente de IA vê algo como:

searchFlights(origem, destino, data, passageiros)

O agente pode preencher os campos e enviar o formulário automaticamente.

Método 2: API Imperativa (Ferramentas JavaScript)

A API imperativa oferece mais flexibilidade e é usada para ações complexas.

Em vez de formulários, os desenvolvedores registram ferramentas diretamente usando JavaScript.

Isso é feito usando a interface de contexto de modelo do navegador.

Exemplo: Adicionar Produto ao Carrinho

if ("modelContext" in navigator) {

navigator.modelContext.registerTool({

name: "addToCart",

description: "Adicionar um produto ao carrinho de compras",

inputSchema: {
type: "object",
properties: {
sku: {
type: "string",
description: "SKU do produto"
},
quantity: {
type: "number",
description: "Quantidade do produto"
}
}
});
}