O Que o WebMCP Realmente Desbloqueia?

Eu comecei a brincar com WebMCP em março.

A ideia imediatamente fez sentido para mim: em vez de forçar um agente de IA a inspecionar uma página da web, descobrir o que tudo significa e interagir com uma interface construída inteiramente para nós, o site pode expor ferramentas estruturadas que dizem ao agente o que ele pode realmente fazer.

Avançando alguns meses, o WebMCP de repente está em toda parte. Eu vi demonstrações de agentes preenchendo formulários, navegando em páginas, adicionando itens ao carrinho e interagindo com sites. São demonstrações legais, mas eu acho que há uma ideia maior escondida por trás delas.

WebMCP não é apenas uma maneira melhor para um agente operar uma página da web. Ele dá ao site uma maneira de participar da experiência do agente.

Isso significa que o agente pode entender mais do que as ações disponíveis para ele. A página da web também pode expor o contexto da experiência em que já estamos: qual produto eu selecionei, qual imagem estou olhando, qual parte da aplicação estou ou se há uma mudança aguardando minha aprovação.

Eu queria construir algo que tornasse essa relação visível. Então, eu construí uma pequena experiência de comerciante usando WebMCP, Cloudinary e Goose onde posso trabalhar ao lado do meu agente de IA no mesmo fluxo de trabalho de produto.

O objetivo não era ver se um agente poderia editar uma imagem. Já sabemos que ele pode. Eu queria mostrar o que acontece quando o agente não está apenas operando a página da web, mas realmente entende a experiência em que já estamos.

A Demonstração

Assista ao fluxo de trabalho completo acima: selecionando um produto, perguntando ao Goose o que estou olhando, pesquisando na Biblioteca de Mídia, visualizando a edição do Cloudinary e aplicando-a à vitrine.

O espaço de trabalho do comerciante é intencionalmente simples. Há três produtos, uma Biblioteca de Mídia conectada à minha conta do Cloudinary e uma vitrine voltada para o cliente.

A página da web expõe ferramentas WebMCP para as coisas que um agente pode precisar fazer dentro dessa experiência: listar produtos, navegar entre seções, entender qual produto eu tenho atualmente selecionado, pesquisar minha Biblioteca de Mídia, selecionar um ativo, criar uma prévia de imagem, aplicar ou descartar essa prévia e publicar uma nova imagem de produto.

Eu comecei perguntando ao Goose:

Abra localhost:8002. Usando as ferramentas WebMCP expostas por esta página, diga-me quais produtos estão disponíveis.

Goose encontrou todos os três produtos.

Então eu cliquei no Midnight Slip Dress eu mesmo. Eu não disse ao Goose o que cliquei ou dei a ele um ID de produto. Eu simplesmente perguntei:

Qual produto estou olhando?

Ele sabia.

Isso parece uma pequena interação, mas é uma das maneiras mais fáceis de ver o que o WebMCP muda. O agente e eu estamos trabalhando contra a mesma página da web e o mesmo estado.

A partir daí, eu perguntei:

Leve-me à Biblioteca de Mídia e encontre algumas outras imagens de vestidos pretos.

A página navegou para a Biblioteca de Mídia e pesquisou minha conta do Cloudinary por ativos correspondentes.

Então:

Use o melhor. Faça o vestido azul, coloque o modelo em um estúdio de moda de luxo brilhante e prepare-o para a grade de produtos. Mostre-me uma prévia, mas não aplique ainda.

O Cloudinary cuidou do trabalho de mídia:

• Generative Recolor mudou o vestido de preto para azul
• Generative Background Replace criou o novo ambiente ao redor do modelo
• As capacidades de transformação do Cloudinary prepararam a imagem resultante para a grade de produtos

Mas o agente não atualizou imediatamente o produto. A página me retornou ao editor de produtos com um PRÉ-VISÃO DE IA — NÃO APLICADA para que eu pudesse revisar o resultado primeiro.

Uma vez que eu estava satisfeito com isso, eu disse ao Goose:

Parece perfeito. Aplique-o.

O vestido azul agora foi publicado na minha vitrine.

Todo o fluxo de trabalho parecia algo assim:

O Que Está Acontecendo Realmente?

A interação que inicia esse fluxo de trabalho é a que eu considero mais útil para entender o WebMCP: eu seleciono um produto eu mesmo e o agente sabe a que estou me referindo.

Normalmente, se eu quisesse que um agente modificasse um produto específico, eu precisaria dar a ele informações suficientes para descobrir qual produto eu quis dizer. Eu poderia dizer o nome, dar um ID ou, se ele tiver acesso ao navegador, deixá-lo inspecionar a página e tentar determinar com o que estou interagindo.

O WebMCP nos dá outra opção. A própria página pode expor esse estado.

A API Imperativa do WebMCP do Chrome permite que um site registre ferramentas usando document.modelContext. Cada ferramenta pode definir um nome, descrição, esquema de entrada e implementação em JavaScript para uma ação que o site sabe como realizar.

Na minha demonstração, uma dessas ferramentas é get_page_context:

await document.modelContext.registerTool({
  name: "get_page_context",
  title: "Obter contexto atual",