# Project export: LoveLace This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2026 - Tagline: LoveLace is an AI-powered Teaching Assistant changing how students interact with math by building mathematical intuition, confidence, and passion from beautiful, automated animations. - Devpost: https://devpost.com/software/lovelace-310caj - GitHub: https://github.com/aanikat07/TreeHacks-Project - Demo: https://tree-hacks-project.vercel.app/ - Video: https://www.youtube.com/embed/ho6sXro3hTQ?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 1 GitHub contributor(s) — Om Shah (39 commits) ## Devpost submission (written by the team) ### Inspiration How many of you would see this equation: $$\int_0^\infty \left(\sum_{k=1}^{\infty} \frac{(-1)^k x^{2k}}{(2k)!}\right)e^{-\alpha x}\, dx$$ and immediately reach for ChatGPT? From algebra to multivariable calculus, many students in these classes find themselves relying on AI tools to finish assignments faster. This widens the gap between those who use AI to deepen understanding and those who rely on it to survive. Inspired by the way real learning happens in office hours—through messy thinking, dialogue, and visualization—we built a multimodal AI Teaching Assistant focused on intuition-building. ### What it does Students can speak their reasoning, sketch ideas, generate graphs with natural language, or type traditionally, and the AI interprets partial understanding, corrects misconceptions, and responds with dynamic visual explanations—including automatically generated animated math videos. Users can also upload course-specific materials so explanations match their class’s notation and philosophy, creating private, personalized office hours anytime. In addition, learners can generate and interact with both 2D and 3D graphs using natural language, exploring mathematical concepts dynamically and intuitively in real time. ### How we built it Using OpenAI’s real-time GPT-4o transcription and text-to-speech tools, we enabled natural spoken interaction, while rapidly iterating on the full-stack infrastructure despite having no prior full-stack experience. Sponsor tools and AI agents accelerated development dramatically, allowing us to integrate retrieval-based personalization and dynamic animation generation into a cohesive learning experience. ### Challenges we ran into AI allowed us to scale and prototype incredibly fast, but that speed meant we had to learn new tools, architectures, and constraints just as quickly, often redesigning components in real time. One of the biggest obstacles we faced was grounding the math animations in step-by-step tutorial reasoning. We navigated token limits, extensive prompt engineering to regulate the AI’s level of autonomy, and the delicate balance between guiding animations and graphs toward well-behaved outputs while still preserving flexibility. Managing multiple input modalities and adapting our design to time and technical constraints required constant iteration and tight coordination across the team. ### Accomplishments we're proud of We are especially proud of designing and deploying a fully multimodal, personalized learning system that couples a Retrieval-Augmented Generation (RAG) pipeline with generative visual reasoning. Our RAG architecture indexes and embeds course-specific artifacts and textbook resources, processes user query by retrieving semantically relevant chunks in real time, and conditions LLM outputs on this grounded context to produce syllabus-aligned, citation-aware “TA in Office Hours”-esque responses. Then, we developed an animation layer that translates this symbolic reasoning into stepwise, elegant visualizations, enabling students to see abstract transformations unfold dynamically and intuitively. The system highlights smooth, real-time interaction through a digital whiteboard and natural speech input, so students can sketch ideas, write out steps, and talk through their thinking naturally. In addition to a back-and-forth system, we developed a custom low-level graphing experience. Students can use natural language to directly customize functions ranging from the simple line to a sophisticated sinusoidal wave in 3D. To accomplish this, we had to develop a custom layer for the agent to interface with the Desmos API and generate reliable modifications to the graph from organic, sometimes imprecise, user input. We bridged the gap between math and natural language for students who want to learn the graphical relevance of function parameters. Together, LoveLace creates a fluid, back-and-forth experience that feels much closer to real office hours, allowing students to explore, make mistakes, and refine their understanding while still receiving clear, structured guidance. ### What we learned Through this project, we learned how powerful AI agents can be—not just as tools, but as collaborators across design, infrastructure, and debugging. We discovered that the best project is built with a strong vision for how people want to interact with technology. We discovered how to work effectively with agents: breaking ambitious ideas into smaller components, iterating rapidly, and then stitching everything back together into a cohesive system. As first-time hackathon builders, we learned how to take a vision from concept to full-scale application and realized we’re no longer limited by unfamiliar tech stacks or lack of prior experience. ### What's next Next, we plan to expand LoveLace’s accessibility by adding Spanish language support, making high-quality, conceptual math tutoring available to a broader community of learners. We also aim to optimize animation rendering time through GPU acceleration, improving responsiveness so visual explanations feel seamless and real-time. ## README (from the GitHub repository) ## Animation Pipeline (Claude -> Render Worker -> Vercel Blob) This app now supports an async animation flow in the `Animation` tab: 1. User prompt goes to `POST /api/chat` with `mode: "animation"`. 2. Claude generates Python Manim code. 3. The app creates a render job in Blob (`manim-jobs/...json`). 4. The app enqueues your Render worker. 5. Worker renders video and calls `POST /api/animation/callback`. 6. Callback stores video in Blob (`manim-renders/.mp4`) and marks the job completed. 7. Frontend polls `GET /api/animation/jobs/[id]` and displays the video. ### Required env vars (Next app) Add these to `.env.local`: ```bash ANTHROPIC_API_KEY=... BLOB_READ_WRITE_TOKEN=... RENDER_WORKER_URL=https://your-render-worker.onrender.com RENDER_WORKER_SECRET=your-shared-secret RENDER_CALLBACK_SECRET=your-callback-secret # optional if callback origin differs from request origin # RENDER_CALLBACK_URL=https://your-app-domain.com/api/animation/callback ``` ### Worker scaffold Worker code is in `worker/render_worker.py`. Expected deployment env var for worker: ```bash RENDER_WORKER_SECRET=your-shared-secret ``` Deploy on Render with: 1. Runtime: Python 2. Build command: `pip install -r worker/requirements.txt` 3. Start command: `python worker/render_worker.py` ### Run locally ```bash npm run dev ``` ## Detected evidence (automated analysis) Indexed codebase: 30 recognized source files, 124 KB. - Anthropic (technology) — detected in the code - CSS (language) — detected in the code - Flask (technology) — detected in the code - Next.js (technology) — detected in the code - OpenAI (technology) — detected in the code - Python (language) — detected in the code - React (technology) — detected in the code - Supabase (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code - Docker (technology) — claimed on Devpost, not found in the code - JavaScript (language) — claimed on Devpost, not found in the code - Vercel (technology) — claimed on Devpost, not found in the code - AI coding agent: Claude Code — evidence: commit authorship or trailers ## Codebase structure (from repository index) ### Files (36 of 36) ``` .gitignore app/api/animation/callback/route.ts app/api/animation/jobs/[id]/route.ts app/api/chat/route.ts app/api/realtime/session/route.ts app/api/tts/route.ts app/api/upload/route.ts app/globals.css app/layout.tsx app/page.tsx app/session/page.tsx app/workspace/page.tsx biome.json components/SpirographCanvas.tsx components/Whiteboard.tsx lib/animation-jobs.ts lib/lecture/ingest.ts lib/lecture/transcribe.ts lib/rag/chunking.ts lib/rag/hash.ts lib/rag/openai.ts lib/render-worker.ts lib/security/rate-limit.ts lib/session/animation-prompt.ts lib/session/retrieve.ts lib/supabase/server.ts lib/upload/extract.ts lib/whiteboard/vision.ts next.config.ts package.json postcss.config.mjs README.md tsconfig.json types/pdf-parse.d.ts worker/render_worker.py worker/requirements.txt ``` ### Dependencies - package.json: @anthropic-ai/sdk@^0.74.0, @biomejs/biome@2.2.0, @supabase/supabase-js@^2.95.3, @tailwindcss/postcss@^4, @types/node@^20, @types/react@^19, @types/react-dom@^19, @vercel/blob@^2.2.0, babel-plugin-react-compiler@1.0.0, lucide-react@^0.511.0, next@16.1.6, openai@^6.22.0, pdf-parse@^1.1.1, react@19.2.3, react-dom@19.2.3, tailwindcss@^4, typescript@^5 - worker/requirements.txt: flask@==3.1.0, manim@==0.19.0, requests@==2.32.3 ### Recent commits (newest first) - test - sdf - yay? - sefsdf - sdf - sdf - sdf - sdf - new - Sdf - Sdfnew - new inference pattern - Sdf - new - new - sdaf - sdaf - sdaf - new - sdf ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "treehacks", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "biome check", "format": "biome format --write" }, "dependencies": { "@anthropic-ai/sdk": "^0.74.0", "@supabase/supabase-js": "^2.95.3", "@vercel/blob": "^2.2.0", "lucide-react": "^0.511.0", "next": "16.1.6", "openai": "^6.22.0", "pdf-parse": "^1.1.1", "react": "19.2.3", "react-dom": "19.2.3" }, "devDependencies": { "@biomejs/biome": "2.2.0", "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "babel-plugin-react-compiler": "1.0.0", "tailwindcss": "^4", "typescript": "^5" } } ``` ### worker/requirements.txt ``` flask==3.1.0 requests==2.32.3 manim==0.19.0 ``` ### app/layout.tsx ```typescript import type { Metadata } from "next"; import "./globals.css"; export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### app/page.tsx ```typescript "use client"; import { useRouter } from "next/navigation"; import { useEffect, useRef, useState } from "react"; import SpirographCanvas from "@/components/SpirographCanvas"; const symbols = ["∫", "∇", "π", "Σ", "∞", "θ", "λ", "Δ", "x²", "eᶦπ"]; const hearts = ["♥", "♡", "❤", "❥", "❣"]; export default function Home() { const router = useRouter(); const [transitioning, setTransitioning] = useState(false); const transitionTimerRef = useRef | null>(null); const handleBegin = () => { if (transitioning) return; setTransitioning(true); transitionTimerRef.current = setTimeout(() => { router.push("/session"); }, 2000); }; useEffect(() => { return () => { if (transitionTimerRef.current) { clearTimeout(transitionTimerRef.current); } }; }, []); return (
{symbols.map((symbol, index) => ( {symbol} ))} {hearts.map((heart, index) => ( {heart} ))}

LoveLace

Ask questions, reason visually, and generate math animations with grounded support from your working context.

{transitioning && (
)}
); } ``` ### lib/supabase/server.ts ```typescript import { createClient } from "@supabase/supabase-js"; export function canUseSupabaseAdmin() { return Boolean( process.env.SUPABASE_URL && process.env.SUPABASE_SERVICE_ROLE_KEY, ); } export function supabaseAdmin() { const url = process.env.SUPABASE_URL; const key = process.env.SUPABASE_SERVICE_ROLE_KEY; if (!url || !key) { throw new Error("Supabase admin env vars are not configured."); } return createClient(url, key, { auth: { persistSession: false } }); } ``` ### app/session/page.tsx ```typescript "use client"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useEffect, useRef, useState } from "react"; import SpirographCanvas from "@/components/SpirographCanvas"; function formatBytes(bytes: number) { if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`; } export default function SessionPage() { const router = useRouter(); const inputRef = useRef(null); const [files, setFiles] = useState([]); const [isDragging, setIsDragging] = useState(false); const [isUploading, setIsUploading] = useState(false); const [uploadError, setUploadError] = useState(null); const [transitioning, setTransitioning] = useState(false); const transitionTimerRef = useRef | null>(null); const addFiles = (incoming: FileList | null) => { if (!incoming) return; const next = Array.from(incoming); setFiles((prev) => { const seen = new Set(prev.map((file) => `${file.name}:${file.size}`)); const merged = [...prev]; for (const file of next) { const key = `${file.name}:${file.size}`; if (seen.has(key)) continue; seen.add(key); merged.push(file); } return merged; }); }; const handleStartSession = async () => { if (transitioning || isUploading) return; setUploadError(null); const lessonId = `lesson-${Date.now()}`; if (files.length > 0) { setIsUploading(true); try { const formData = new FormData(); formData.set("lessonId", lessonId); for (const file of files) { formData.append("files", file); } const response = await fetch("/api/upload", { method: "POST", body: formData, }); if (!response.ok) { const payload = (await response.json().catch(() => null)) as { error?: string; } | null; throw new Error(payload?.error || "File ingestion failed."); } const payload = (await response.json()) as { lessonId?: string }; const resolvedLessonId = payload.lessonId || lessonId; window.localStorage.setItem("lovelace:lessonId", resolvedLessonId); } catch (error) { const message = error instanceof Error ? error.message : "File upload failed."; setUploadError(message); setIsUploading(false); return; } finally { setIsUploading(false); } } else { window.localStorage.setItem("lovelace:lessonId", lessonId); } setTransitioning(true); transitionTimerRef.current = setTimeout(() => { router.push("/workspace"); }, 2000); }; useEffect(() => { return () => { if (transitionTimerRef.current) { clearTimeout(transitionTimerRef.current); } }; }, []); return (

LoveLace

Back

Customize Your Teaching Assistant

Add lecture videos, audio, textbooks, or notes for better responses in your workspace.