---
title: "Seu site está pronto para a era dos agentes de IA?"
slug: webmcp-site-pronto-era-agentes-ia
date: 2026-03-23
category: "Arquitetura"
tags: ["web-mcp", "ia", "agentes", "browser-api", "arquitetura", "javascript", "typescript", "react"]
readTime: "8 min"
excerpt: "Web MCP é o protocolo que permite agentes de IA interagirem diretamente com o seu site no browser. Entenda por que isso muda tudo, como implementamos no eliseu.dev com 11 tools, e como validar hoje mesmo."
url: https://eliseu.dev/blog/webmcp-site-pronto-era-agentes-ia
---
Você já parou pra pensar em como consome conteúdo hoje comparado a 10 anos atrás?
Em 2014 você abria o notebook, entrava no site, lia o que precisava e fechava. Em 2018 você começava no desktop, continuava no celular no metrô e finalizava no tablet no sofá. Hoje? Você pode começar uma pesquisa no Chrome, continuar pedindo pra Alexa resumir enquanto faz café, e finalizar com um agente de IA que navega pelo site por você enquanto você faz outra coisa.
A forma de consumir conteúdo mudou. Mas a maioria dos sites ainda foi construída pensando apenas no olho humano na frente de uma tela.
**É hora de mudar isso.**
## 🌊 A evolução que muita gente ainda não percebeu
Pensa comigo na linha do tempo:
- **Desktop first** (2000–2012): uma tela, um mouse, leitura linear
- **Mobile first** (2012–2018): múltiplos dispositivos, mesmo conteúdo, diferentes contextos
- **Voice first** (2018–2022): Alexa, Google Assistant, Siri — conteúdo por voz
- **Agent first** (2022–hoje): agentes de IA que navegam, consomem e interagem com seu site *por conta própria*
Cada virada dessas exigiu que a gente repensasse como entregamos conteúdo. A web responsiva foi a resposta ao mobile. As APIs de voz foram a resposta ao voice. E agora chegou a vez dos agentes.
A diferença é que dessa vez a superfície de consumo não é uma tela — é um modelo de linguagem. E modelos não leem HTML, não clicam em botões, não fazem scroll. Eles precisam de **ferramentas estruturadas** para interagir com seu sistema.
## 🤖 O que é o Web MCP?
**Web MCP** (Web Machine Learning Context Protocol) é uma especificação ainda em beta do W3C que define uma API JavaScript nativa para que páginas web exponham ferramentas (`tools`) consumíveis por agentes de IA diretamente no browser.
A ideia é simples: seu site registra o que ele sabe fazer, e um agente rodando no browser pode invocar essas ferramentas sem precisar de scraping, sem precisar de integração customizada, sem precisar de uma API separada.
```javascript
// O conceito em uma linha
navigator.modelContext.registerTool({
name: "get_blog_posts",
description: "Lista todos os posts do blog",
execute: async () => blogPosts
})
```
É o mesmo princípio do MCP que o Claude usa com ferramentas externas — mas rodando **no browser**, **client-side**, **sem servidor**.
## 🛠️ Como implementamos no eliseu.dev
Eu vi esse protocolo sendo especificado e pensei: **vamos ser early adopters**.
A implementação foi toda client-side, sem adicionar uma linha de backend. A estrutura ficou assim:
**1. Um hook que registra as tools** — `useWebMCP` — que vive dentro do `BrowserRouter` para ter acesso ao `useNavigate`:
```typescript
// src/hooks/use-webmcp.ts
function getModelContext(): ModelContext | null {
if (typeof navigator === "undefined") return null;
return "modelContext" in navigator
? (navigator as any).modelContext
: null;
}
export function useWebMCP() {
const navigate = useNavigate();
useEffect(() => {
const mc = getModelContext();
if (!mc) return; // graceful degradation em browsers sem suporte
mc.registerTool({ /* ... */ });
return () => mc.unregisterTool("tool_name"); // cleanup
}, [navigate]);
}
```
O guard `if (!mc) return` é fundamental. Em browsers sem suporte (a maioria ainda), o site funciona normalmente. Zero impacto para usuários comuns.
**2. Um inicializador dentro do Router:**
```typescript
// src/App.tsx
const WebMCPInitializer = () => {
useWebMCP();
return null;
};
// Dentro do BrowserRouter:
```
**3. Os dados extraídos das páginas para arquivos dedicados:**
Um passo importante foi extrair os dados que estavam hardcoded nos componentes para arquivos em `src/data/`. Isso evita duplicação entre a página e as tools MCP:
```
src/data/
blog-posts.ts → carrega os .md do blog
projects.ts → projetos e iniciativas
talks.ts → palestras e workshops
guides.ts → guias técnicos com capítulos
uses.ts → setup por categoria
experience.ts → experiência + educação
```
Tanto os componentes das páginas quanto o hook MCP importam da mesma fonte. **Uma fonte de verdade.**
## 📦 As 11 tools que expusemos
Registramos tools para expor praticamente todo o conteúdo do site:
| Tool | O que retorna |
|------|--------------|
| `list_blog_posts` | Todos os posts com metadata |
| `get_blog_post` | Conteúdo completo por slug |
| `list_projects` | Projetos e iniciativas |
| `list_talks` | Palestras (futuras + passadas) com slides/vídeo |
| `list_guides` | Guias técnicos com chapterCount |
| `get_guide` | Todos os capítulos de um guia |
| `get_setup` | Hardware e software por categoria |
| `get_experience` | Histórico profissional + educação |
| `get_profile` | Perfil estruturado com especialidades |
| `search_content` | Busca cross-content (blog + guias + projetos) |
| `navigate` | Navega para qualquer rota do site |
A tool `search_content` é a que mais me empolga. Um agente pode perguntar "quais posts falam sobre observabilidade?" e receber resultados filtrados por título, excerpt, tags e categoria — sem fazer scraping de HTML.
```typescript
mc.registerTool({
name: "search_content",
description: "Busca em blog posts, guias e projetos por keyword",
inputSchema: {
type: "object",
properties: {
query: { type: "string" },
types: {
type: "array",
items: { type: "string", enum: ["blog", "guide", "project"] }
}
},
required: ["query"]
},
annotations: { readOnlyHint: true },
execute: async ({ query, types }) => {
// filtra blogPosts, guides e projects pelo termo
// retorna resultados com tipo, título, excerpt e URL
}
})
```
Detalhe importante: o campo `annotations: { readOnlyHint: true }` sinaliza pro agente que essa tool não modifica estado. A única tool com `readOnlyHint: false` é o `navigate`, que de fato muda o estado do browser.
## ✅ Como validar hoje (ainda é beta)
O Web MCP ainda não está disponível em browsers por padrão. Mas já dá pra testar de duas formas:
### Opção 1 — Chrome Flag
Acesse `chrome://flags/#enable-webmcp-testing` no Chrome, habilite a flag e reinicie o browser. Agora o `navigator.modelContext` estará disponível para testes locais.
### Opção 2 — Extensão Chrome
Instale a extensão **[WebMCP - Model Context Tool](https://chromewebstore.google.com/detail/webmcp-model-context-tool/gbpdfapgefenggkahomfgkhfehlcenpd)** diretamente da Chrome Web Store. Ela injeta suporte ao protocolo e expõe as tools registradas para agentes compatíveis.
Com qualquer uma das opções ativa, você pode abrir o DevTools e verificar:
```javascript
// No console do browser
console.log('modelContext' in navigator) // true
// Lista as tools registradas
const tools = await navigator.modelContext.listTools()
console.log(tools.map(t => t.name))
// ['list_blog_posts', 'get_blog_post', 'list_projects', ...]
```
## 🔭 Por que se antecipar?
Essa tecnologia ainda é beta. O spec pode mudar. A adoção dos browsers vai levar tempo. Então por que implementar agora?
**Porque o custo de entrada é baixo e o aprendizado é alto.**
Implementar Web MCP aqui levou poucas horas. Mas o processo forçou uma disciplina valiosa: **extrair todos os dados hardcoded das páginas para arquivos de dados bem tipados**. Isso por si só já valeu — o código ficou mais limpo, os dados têm uma fonte única de verdade, e as páginas ficaram menores.
Além disso, pensa no padrão que está se formando:
- Você já tem `robots.txt` para crawlers
- Você já tem `llms.txt` para modelos de linguagem
- Em breve você vai ter Web MCP tools para agentes
São camadas complementares de como você disponibiliza seu conteúdo para diferentes tipos de "consumidores".
Um agente que usa seu site hoje pode:
- Resumir seus posts mais recentes sobre um tema
- Navegar até o post certo baseado em uma pergunta
- Montar um briefing sobre você antes de uma reunião
- Buscar referências cruzando blog + guias + projetos
Tudo isso sem scraping, sem API key, sem backend — usando apenas o que você registrou no browser.
## 💡 O padrão que está surgindo
A analogia que mais me faz sentido: assim como você tem uma interface visual pra humanos e uma API REST pra sistemas, você vai precisar de uma **interface semântica pra agentes**.
Web MCP é exatamente isso. Uma camada de abstração que diz: "aqui está o que meu site sabe fazer, descrito em linguagem natural, com schemas tipados."
## Conclusão
O consumo de conteúdo não é mais linear, não é mais apenas visual, e não é mais apenas humano.
Seu site hoje precisa funcionar bem para a pessoa que lê no desktop, para quem navega no celular no metrô, para quem pergunta por voz no carro — e agora também para o agente de IA que está pesquisando por conta dela.
Implementar Web MCP no eliseu.dev foi um exercício de **se antecipar a uma mudança que já está acontecendo**. O protocolo é beta, mas o comportamento que ele representa — sites como plataformas de dados consumíveis por agentes — já é uma realidade crescente.
Vale a pena entrar cedo, enquanto o custo de aprendizado é baixo e o diferencial ainda existe.
---
*Para testar o Web MCP no eliseu.dev, instale a [extensão Chrome](https://chromewebstore.google.com/detail/webmcp-model-context-tool/gbpdfapgefenggkahomfgkhfehlcenpd) ou habilite `chrome://flags/#enable-webmcp-testing` e abra o DevTools. A spec completa está em [webmachinelearning.github.io/webmcp](https://webmachinelearning.github.io/webmcp/).*
*Dúvidas ou quer implementar no seu projeto? Me encontra no [LinkedIn](https://linkedin.com/in/eliseusantos) ou [GitHub](https://github.com/EliseuSantos).*