É Assim Que Vamos Construir Sites em Breve? (Demonstração ao Vivo do webMCP 🚀)

Há alguns anos, começamos a adaptar nossos sites para dispositivos móveis. Depois, os adaptamos para acessibilidade. E agora, podemos estar prestes a adaptá-los mais uma vez. Desta vez... para agentes de IA.

Para ver como isso poderia ser na prática, construí um Simulador de CEO de IA completamente sério e absolutamente pronto para empresas.

Voltaremos ao nosso líder visionário em um momento.

A propósito, obrigado a todos pela incrível discussão sob meu artigo anterior. De alguma forma, conseguimos gerar aproximadamente um bilhão de comentários 🩷 Muitos deles provavelmente eram mais inteligentes que o próprio artigo. A coisa sensata a fazer seria escrever um post de acompanhamento resumindo tudo.

Mas, honestamente, eu precisava de uma pausa desse tópico antes que eu explodisse.

Às vezes, eu só preciso escrever algo técnico, caso contrário, vou sufocar. Felizmente, ninguém me paga por esses artigos, então posso fazer o que quiser 😁 Voltaremos à IA no desenvolvimento de software em outra ocasião.

O Que É webMCP? 🤖

Por enquanto, vamos falar sobre webMCP.

O Google está atualmente experimentando o suporte ao webMCP no Chrome, uma abordagem projetada para facilitar a interação de agentes de IA com sites.

O problema que ele tenta resolver é na verdade bastante simples.

Hoje, quando um agente quer usar um site, ele precisa inspecionar a página, descobrir quais elementos são importantes, clicar por aí, analisar os resultados e repetir esse processo várias vezes. Funciona, mas é lento, caro e nem sempre confiável.

O webMCP permite que os sites exponham informações estruturadas sobre as ações disponíveis, para que os agentes possam entender o que podem fazer sem ter que raspar a página sem parar e adivinhar.

Hora de uma Simulação de Negócios Completamente Séria 🚀

Mas chega de teoria.

Vamos construir algo completamente sério e pronto para empresas.

@cart0ne mencionou sob meu artigo anterior que a IA efetivamente se tornou o CEO de sua startup.

Então, como uma pessoa responsável, construí um Simulador de CEO de IA em React + TypeScript.

GitHub: https://github.com/sylwia-lask/ai-ceo-webMCP

Demo ao vivo: https://sylwia-lask.github.io/ai-ceo-webMCP/

Como Ativar o webMCP

Antes de você correr para implementar o webMCP em sua aplicação de produção, um pequeno aviso.

Por enquanto, esta ainda é uma tecnologia experimental. Atualmente, funciona apenas no Chrome Canary, Chrome Beta ou Chrome com a flag experimental apropriada ativada.

Para ativá-lo:

1. Abra `chrome://flags`
2. Pesquise por "MCP"
3. Ative os recursos experimentais relacionados ao MCP
4. Reinicie o Chrome

Se você preferir não brincar com flags experimentais do navegador, tudo bem. Você pode simplesmente olhar as capturas de tela abaixo.

Ou clique ao redor da aplicação você mesmo, porque tudo ainda funciona perfeitamente como um site normal.

Isso é, na verdade, uma das coisas que eu mais gosto sobre essa abordagem. O webMCP é apenas uma melhoria para agentes, assim como os recursos de acessibilidade são melhorias para usuários que dependem de leitores de tela. Nada quebra, nada muda para usuários regulares.

A aplicação simplesmente se torna mais fácil de entender para um tipo diferente de visitante.

Duas Maneiras de Usar o webMCP

Atualmente, existem duas maneiras principais de expor informações através do webMCP.

Opção 1: API Declarativa / Anotações HTML

A primeira abordagem é adicionar metadados diretamente aos elementos HTML:

<form
  mcp-name="createSupportTicket"
  mcp-description="Criar um novo ticket de suporte ao cliente">

Isso permite que os agentes entendam o propósito dos elementos da interface do usuário sem depender inteiramente da interpretação visual.

Opção 2: API Imperativa / Ferramentas JavaScript

A segunda abordagem é expor ferramentas MCP diretamente do código da sua aplicação.

Essa é a abordagem que usei na minha demonstração:

registerTool({
  name: 'contratar_funcionario',
  description: 'Contratar um novo funcionário'
});

registerTool({
  name: 'demitir_funcionario',
  description: 'Demitir um funcionário'
});

Na minha aplicação, essas ferramentas correspondem diretamente às ações disponíveis através de botões na página.

Por exemplo, eu exponho ferramentas como:

contratarDesenvolvedores()
demitirDesenvolvedores()
adotarIA()
reescreverEmRust()
pivotarParaAgentes()
corrigirBugsDeProducao()

Em outras palavras: gerenciamento de startup completamente normal.

Conectando um Agente de IA

Então, o que acontece quando conectamos um agente de IA real?

Em vez de construir meu próprio agente, usei a extensão WebMCP – Model Context Protocol Inspector. Você pode conectar uma chave de API do Gemini e começar a experimentar imediatamente. Há até uma cota de token gratuita. Pequena, mas ainda assim suficiente para tomar algumas decisões estratégicas questionáveis 😅

Como na maioria dos sistemas alimentados por LLM, tudo começa com um prompt.

Cenário #1: O CEO do LinkedIn 😎

Vamos ver como nosso CEO se sai quando recebe a seguinte instrução:

Atue como um CEO que acabou de ler três artigos sobre IA no LinkedIn.