Seu site está pronto para a era dos agentes de 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.

// 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:

// 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:

// src/App.tsx
const WebMCPInitializer = () => {
  useWebMCP();
  return null;
};

// Dentro do BrowserRouter:
<WebMCPInitializer />

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.

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 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:

// 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 ou habilite chrome://flags/#enable-webmcp-testing e abra o DevTools. A spec completa está em webmachinelearning.github.io/webmcp.

Dúvidas ou quer implementar no seu projeto? Me encontra no LinkedIn ou GitHub.