Como transformei um site estático em um site de curso totalmente agentivo usando MCP e agentes de IA

Quando começamos a construir First Break AI, tínhamos uma limitação que acabou se tornando uma vantagem: queríamos um site de curso real — lições, blogs, horários de atendimento, um roteiro, documentos — mas não queríamos executar uma aplicação web completa apenas para servir conteúdo. Sem LMS. Sem reescrita do Next.js de um currículo. Sem renderização de páginas no servidor a cada solicitação. Sites estáticos são rápidos e baratos, mas não podem interagir com seus visitantes, responder perguntas ou ajudá-los em sua jornada. Percebemos que precisávamos parar de tratar a IA como um bot de FAQ — em vez disso, tratá-la como uma camada agente que executa todo o seu site.

Escolhemos Quarto. Você escreve arquivos .qmd, executa quarto render, e obtém HTML estático. Nós implantamos essa saída no Cloudflare Pages. As páginas carregam rapidamente. As URLs permanecem limpas. Tudo vive no Git. Os alunos podem bifurcar o repositório e acompanhar. Para uma coorte gratuita e aberta, essa base era exatamente certa.

Mas este site estático tinha o mesmo problema, ele não lembra quem você é & não pode verificar seu progresso ou dizer o que fazer a seguir. Cole um widget de chatbot genérico em cima e você obtém respostas — mas não respostas fundamentadas em seu conteúdo, e certamente não um agente que pode validar seu repositório ou sincronizar o progresso entre seu terminal e seu navegador.

Então fizemos uma pergunta diferente: e se o site permanecesse estático, e agentes de IA se tornassem a camada dinâmica por cima?

Foi assim que o First Break AI se tornou o que chamamos de uma coorte totalmente agente — não porque substituímos o site por agentes, mas porque os agentes agora respondem perguntas em contexto, validam trabalhos contra rubricas, rastreiam progresso e aparecem dentro do seu IDE. O HTML ainda é a saída simples do Quarto. A experiência de aprendizado não é.

O problema com cursos "potencializados por IA"

A maioria dos cursos "potencializados por IA" significa uma de duas coisas: um chatbot que não sabe nada sobre o curso, ou uma plataforma que o prendeu em sua pilha desde o primeiro dia.

Não queríamos nenhum dos dois. Queríamos que os alunos lessem lições como páginas estáticas rápidas, perguntassem "o que é GGUF?" e obtivessem uma resposta do nosso conteúdo da lição, executassem um comando no terminal para ver se o Passo 1 realmente passou, e instalassem as mesmas ferramentas no Cursor que usamos nos horários de atendimento. Mesma coorte, mesma rubrica, esteja você no site, no CLI ou programando em par com Claude.

Isso exigiu uma arquitetura onde conteúdo e agência estavam separados — e deliberadamente conectados.

Como as peças se encaixam

Pense nisso em duas camadas.

A camada de conteúdo é chata da melhor maneira. O Quarto constrói o site. O Cloudflare Pages o serve. Quando você abre o roteiro ou uma lição sobre Hugging Face, você está lendo HTML pré-renderizado. O Google vê texto real. Não há JavaScript necessário para ler a lição. Isso importa para velocidade, acessibilidade e SEO.

A camada agente fica ao lado desse conteúdo, não dentro dele. Um Cloudflare Worker hospeda nosso servidor MCP — o ponto de extremidade do Modelo de Contexto de Protocolo que os assistentes de IA chamam quando precisam de ferramentas da coorte. FetchLens.ai alimenta o widget "Pergunte Qualquer Coisa" no site e nos dá visibilidade sobre como os agentes usam o site. Um pequeno pacote npm, @aiedx/firstbreakai, dá aos alunos um CLI e um servidor MCP local para verificações offline. O OAuth do Discord une a identidade: faça login uma vez, e o mesmo registro de aluno o segue no site, no terminal e no widget.

Nada nessa segunda camada substitui o Quarto. Não convertimos .qmd em componentes React ou movemos lições para um banco de dados. Adicionamos tecido conectivo — pontos de extremidade HTTP, scripts e ferramentas — para que páginas estáticas pudessem conversar com agentes que realmente fazem coisas.

Aqui está o fluxo em linguagem simples:

1. Um aluno lê uma lição (HTML estático, rápido).
2. Ele tem uma pergunta → o widget FetchLens chama o Worker → o agente responde com base no conhecimento da coorte, não na web aberta.
3. Ele termina o exercício → firstbreakai validate 1 executa verificações de rubrica local → os resultados podem ser sincronizados com seu perfil se ele estiver logado.
4. Ele trabalha no Cursor → a URL remota do MCP dá ao agente do IDE as mesmas ferramentas de ask, find, validate e next que a coorte expõe em todos os outros lugares.

Mesma mente, muitas superfícies. O site permanece estático. Os agentes são infraestrutura compartilhada.

Camada por camada — o que realmente construímos

Pergunte Qualquer Coisa em cada página

O ponto de entrada mais leve é o widget. Depois que o Quarto renderiza uma página, incluímos um script diferido que monta um botão flutuante "Pergunte Qualquer Coisa". Ele aponta para nosso ponto de extremidade apoiado pelo FetchLens no Worker. Da perspectiva do aluno, parece um tutor que leu toda a coorte — porque, na verdade, ele leu.

Não mudamos como o Quarto constrói páginas. Apenas adicionamos uma inclusão no nível do site:

<script src="/public/scripts/fba-lens-widget.js" defer
  data-endpoint="https://fba-mcp.throbbing-thunder-4d33.workers.dev/widget/mcp"
  data-button-label="Pergunte Qualquer Coisa"></script>

Entrega estática inalterada. O agente carrega de forma assíncrona. Se o script falhar, a lição ainda funciona.

MCP no IDE

O mesmo Worker expõe um servidor MCP público via HTTP. Se você usar o Cursor, Claude Desktop, Claude Code ou OpenAI Codex, você cola uma URL e seu assistente de IA ganha ferramentas da coorte: fazer perguntas, encontrar lições, validar envios, sugerir próximos passos.

Para o Cursor, a configuração é algumas linhas em ~/.cursor/mcp.json:

{
  "mcpServers": {
    "fba-cohort": {
      "url": "https://fba-mcp.throbbing-thunder-4d33.workers.dev/mcp"
    }
  }
}

Esse foi o momento em que a coorte deixou de ser "um site que você visita" e se tornou "infraestrutura que seu agente pode chamar." Um aluno depurando seu blog Quarto no Cursor pode pedir ao seu agente para verificar os requisitos da coorte sem mudar de aba. Isso é aprendizado agente na prática — não um chatbot em uma barra lateral, mas ferramentas conectadas ao local onde as pessoas já trabalham.

Um CLI que valida de verdade

Algumas verificações não devem ser deixadas ao julgamento de um LLM. O Passo 1 pede que você envie um blog Quarto no GitHub. Você criou _quarto.yml? Existe um arquivo .qmd? O remoto do Git está apontando para o GitHub? Esses são fatos do sistema de arquivos. Nós os codificamos em rubricas e os executamos localmente: