Lumen Tutor
An AI tutor that draws its explanations onto a live whiteboard.
Preview.
Lumen is an AI tutor that teaches by drawing. I wanted an explanation you could watch appear instead of read, so I had the model narrate calculus onto a live whiteboard: you ask a question, GPT-4o synthesizes structured **canvas commands**, and my renderer strokes them onto an Excalidraw board axis by axis, curve by curve. A separate calculus toolkit draws the moves a human tutor reaches for: tangents, secants, the area under a curve, critical and inflection points, Taylor series, and limits.
This is the earlier, full-stack chapter of the Lumen project, the one **Lumen Frontier** deliberately punted on. Here the backend is real: a FastAPI service with a semantic cache that reuses an answer when a new question embeds within 0.95 cosine of an old one, a visualization service that repairs malformed model JSON with a cheaper model, exemplar prompting, externalized prompt packs, and fine-tuning scripts. The frontend pairs Excalidraw with Plotly and Mathbox, a chat module with flashcards and history, and Supabase for persistence. I built it in an intense eleven-day sprint in October 2025; it is a prototype, dormant since, but the demo is still live.
Most AI tutors answer in walls of text, and math is exactly where that fails: a paragraph about a tangent line teaches far less than watching the line touch the curve. Lumen makes the model teach the way a person at a whiteboard would, by drawing, which means turning free-form model output into reliable, structured drawing commands, fast enough and cheap enough to feel live.
- **I made the model teach by drawing, not typing.** My visualization service has GPT-4o synthesize structured canvas commands and auto-repairs malformed JSON with a cheaper gpt-4o-mini pass, in visualization_service.py (605 lines).
- **I cached answers by meaning to keep it fast and cheap.** cache_service.py (528 lines) reuses a cached response when a new question embeds within 0.95 cosine similarity of a past one, with TTL expiry and per-call cost tracking.
- **I built the whiteboard as a real rendering engine.** excalidrawRenderer.ts (618 lines) compiles canvas commands into Excalidraw elements, and GraphPlotHandler.tsx (958 lines) marries Excalidraw to Plotly so plotted graphs share the board.
- **I gave it the moves a calculus tutor actually uses.** mathTeachingTools.ts (681 lines) draws tangents, secants, area under a curve, critical points, inflection points, Taylor series, and limits as first-class primitives.
- **I engineered the prompting instead of hard-coding it.** Exemplar prompting plus externalized prompt packs steer command synthesis, with fine-tuning scripts ready to push accuracy as examples accumulate.
- **I shipped it as a genuine full-stack build.** Roughly 17,600 lines (12,675 TypeScript and TSX, 4,946 Python) across 89 commits in eleven days, wired with CI, a Dockerfile, cloudbuild, GCP Cloud Run, and Vercel.
backendserviceA FastAPI service that turns questions into drawing commands: visualization_service.py (605 lines) has GPT-4o synthesize canvas commands with gpt-4o-mini JSON auto-repair, and cache_service.py (528 lines) reuses answers within 0.95 cosine similarity, all steered by exemplar prompting and externalized prompt packs.
whiteboardappThe Astro and React drawing surface: excalidrawRenderer.ts (618 lines) strokes canvas commands onto an Excalidraw board and GraphPlotHandler.tsx (958 lines) fuses it with Plotly so plotted graphs live beside hand-drawn work.
calculus-toolslibrarymathTeachingTools.ts (681 lines), a toolkit that draws tangents, secants, the area under a curve, critical and inflection points, Taylor series, and limits as reusable teaching primitives.
chatappThe conversation module with flashcards and full history, backed by Supabase persistence, where each answer can spawn a drawn explanation on the shared whiteboard.