How First Break AI Turned a Static Site Into a Fully Agentic AI Course

1. The constraint: static content, dynamic learning

The checklist above is the short version; below is the full constraint breakdown.

When First Break AI started, the requirements were clear:

• Real course site: lessons, blog, roadmap, office hours, docs
• Fast pages, clean URLs, forkable in Git
• No traditional LMS, no Next.js curriculum rewrite, no server rendering on every request

Quarto was the obvious choice. Write .qmd files, run quarto render, deploy static HTML to Cloudflare Pages. Learners get speed, SEO-friendly text, and a repo they can clone.

Static sites have a gap, though. They do not remember who you are. They cannot check homework. They cannot tell you what to do next. A generic chatbot answers from the open web — not from yoursyllabus, and not with tools that validate a learner's repo or sync progress across browser, terminal, and IDE.

The question First Break AI asked: what if the site stayed static, and AI agents became the dynamic layer?

That is how First Break AI became a fully agentic cohort — agents answer in context, validate against rubrics, track progress, and show up inside the IDE. The HTML is still plain Quarto output. The learning experience is not.

2. Two-layer architecture

Think of two layers that share a brain but not a codebase.

Content layer (boring on purpose). Quarto builds the site. Cloudflare Pages serves it. Opening the roadmap or a lesson serves pre-rendered HTML. No JavaScript required to read a lesson. Google gets real text. Forks get real files.

Agentic layer (beside the content, not inside it). A Cloudflare Worker hosts the MCP server. FetchLens.ai powers the on-site “Ask Anything” widget and observability. The npm package @aiedx/firstbreakai provides CLI commands and a local MCP server. Discord OAuth ties identity together — one learner record across site, terminal, and widget.

Nothing in the agentic layer replaces Quarto. First Break AI added connective tissue: HTTP endpoints, scripts, and tools so static pages could talk to agents that do things.

┌──────────────────────────────────────────────────────────────┐
│  LEARNER SURFACES                                            │
│  Browser (Quarto pages)  │  Terminal (CLI)  │  IDE (MCP)     │
└────────────┬─────────────┴────────┬─────────┴────────┬───────┘
             │                      │                  │
             ▼                      ▼                  ▼
┌──────────────────────────────────────────────────────────────┐
│  AGENTIC LAYER — Cloudflare Worker + FetchLens               │
│  MCP: ask · do · find · validate · next · profile            │
│  Widget endpoint · Discord OAuth · D1 progress               │
└────────────┬─────────────────────────────────────────────────┘
             │ ingests / syncs
             ▼
┌──────────────────────────────────────────────────────────────┐
│  CONTENT LAYER — Quarto → docs/ → Cloudflare Pages           │
│  cohort.bubblnet.com (static HTML, JSON-LD, sitemap)         │
└──────────────────────────────────────────────────────────────┘

Learner flow

1. Read a lesson — static HTML, fast.
2. Ask a question — FetchLens widget → Worker → answer from cohort knowledge.
3. Finish an exercise — firstbreakai validate 1 runs local rubric checks; results sync if logged in.
4. Work in Cursor — remote MCP URL exposes the same tools as the widget and CLI.

Same brain, many surfaces. The site stays static. The agents are shared infrastructure.

3. The logic layer: what First Break AI built

In FetchLens MCP lifecycle research, the analysis shows that 52% of MCP servers die because they ship protocol plumbing without a logic layer. First Break AI is the production proof: infrastructure was ~40% of effort; the logic layer was ~60% and 100% of what makes the cohort usable.

Build scale (for MCP builders): the full agentic stack — Cloudflare Worker, cohort site integration, CLI, and content corpus — took about ~6 weeks full-time and ~6,800 lines across those layers (not logic-layer-only). Most effort went to content curation, tool orchestration, and validation rubrics — not MCP protocol plumbing.

This case study expands section 5 of Why 52% of MCP Servers Die Within 90 Days.

4. Surfaces: widget, MCP, CLI

Ask Anything on every page

The lightest entry point is the widget. After Quarto renders, a deferred script mounts a floating “Ask Anything” button:

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

Static delivery unchanged. Agent loads asynchronously. If the script fails, the lesson still works.

MCP in the IDE

The Worker exposes a public MCP server over HTTP. One URL in Cursor, Claude Desktop, Claude Code, or Codex — cohort tools available where learners already work. See the Model Context Protocol for the transport standard:

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

Remote MCP: https://fba-mcp.throbbing-thunder-4d33.workers.dev/mcp
Local MCP (via npm): npx @aiedx/firstbreakai mcp

CLI that validates for real

Some checks should not be left to LLM judgment. Step 1 asks learners to ship a Quarto blog on GitHub. Did they create _quarto.yml? Is there a .qmd? Is the Git remote GitHub? Those are filesystem facts — encoded in rubrics:

npm install -g @aiedx/firstbreakai
firstbreakai doctor       # Git, Python, Quarto, HuggingFace CLI
firstbreakai validate 1   # rubric checks for Step 1
firstbreakai status       # roadmap position
firstbreakai mcp          # local MCP for IDE

AI agents handle open-ended Q&A. Rubrics handle pass/fail. That split keeps validation honest.

MCP tools exposed everywhere

Always call next after do or validate to drive the cohort flow.

5. Identity without an app server

Static sites do not have sessions. First Break AI did not add a Node backend for login. Discord OAuth runs on the Worker: navbar “Log in” → authenticate → token in localStorage → widget and CLI share identity. Progress lives in D1 behind the Worker.

The Quarto repo builds the same HTML for everyone. Auth is an overlay. Curriculum stays open and forkable; personalization is optional, not a paywall.

6. What First Break AI deliberately avoided

This mirrors the anti-patterns that kill MCP servers: shipping a transport layer and calling it a product.

7. Production results

What held up

Live links

• Cohort: cohort.bubblnet.com
• Roadmap: cohort.bubblnet.com/roadmap
• npm: @aiedx/firstbreakai
• Dev.to write-up: How I turned a static site into a fully agentic AI course site
• GitHub landing (SEO feeder): thefirehacker.github.io/firstbreakai

Quarto is the content machine. AI agents are the learning machine. Together they behave more like a teaching assistant that scales than a video platform with a comment section. If you are building MCP infrastructure, the lesson is simple: keep your content layer boring, invest in the logic layer, and expose the same tools everywhere learners show up.

8. Frequently asked questions