How to vibe codeBrilliant
Learn math, data, and computer science interactively
brilliant.org ↗Education / EdTech
The verdict: can you vibe code Brilliant?
You can build a personal study clone with a general course viewer and a generic AI tutor, but replicating their massive library of custom interactive physics and math widgets will require weeks of intense frontend work.
Vibecoding a personal Brilliant clone is a heavy multi-week commitment because the core value isn't just a CRUD app or a standard video player—it's the custom interactive learning canvas. While an AI agent can rapidly scaffold Next.js, database schemas, and integrate an LLM for 'Koji', building interactive math manipulatives, physics simulations, and stateful code puzzle blocks requires writing extensive custom React/SVG components for every single lesson. If you want a fun playground to learn STEM concepts using AI generation for your own custom courses, it's a rewarding project; if you just want to learn math, paying for Brilliant is infinitely faster.
Estimated effort: 3-4 weeks of focused development and debugging
What you can't replicate
- The proprietary catalog of hundreds of hand-crafted interactive STEM courses and puzzle engines
- The 14-year curriculum refinement loop designed by MIT and Harvard experts
- Massive community base and league leaderboards
Founded
2012
Raised
$60M – $94M+
Team
50–200 employees
Cheapest paid tier
$27.99/mo
What Brilliant does
An interactive, gamified online learning platform focused on STEM fields through bite-sized, hands-on visual problems and an AI tutor named Koji.
Core features
- Interactive pedagogical canvas engine (custom SVG/D3 math & physics puzzles)
- AI tutor integration ('Koji') inspecting rendered screen state to guide learners
- Adaptive learning path generation and knowledge modeling
- Gamification system (Streaks, XP, levels, daily goals)
- Math and code rendering pipeline (KaTeX/MathJax, mini code runner)
- Sequential and free-form course navigation
The business
Pricing
- FreeFree
- Monthly$27.99/mo
- Annual$161.88/yr
Funding
$60M – $94M+ from Social Capital, TPG Rise Select, SoftBank Vision Fund, Learn Capital, Kapor Capital, 500 Startups
Pay vs build, cumulative
Break-even at month 1 — after that, every month is money kept.
The hard parts of vibe coding Brilliant
- Building dozens of unique, bespoke interactive puzzle components (physics sims, graph interactives, code editors)
- Contextual AI tutoring pipeline that accurately reads canvas state without giving away direct answers
- Authoring deep, high-quality STEM curriculum content with pedagogical validation loops
- Cross-device progress and state synchronization engine
How to vibecode Brilliant
Prerequisites
Node.jsfree
Required runtime for running Next.js and frontend tooling
GitHubfree
Source control and deployment pipeline integration
Anthropic API Keypay-as-you-go
Powers the Koji AI tutor persona and prompt context analysis
AI coding tools
Recommended stack
| Frontend | Next.js (React) with Tailwind CSS, KaTeX for math rendering, and Lucide icons |
|---|---|
| Backend | Next.js Server Actions and API Routes |
| Database | Turso (SQLite at the edge) for lightweight course progress and user state |
| Auth | better-auth for self-hosted, passwordless or email-based local single-user auth |
| Payments | None (Personal-use clone) |
| Other | Anthropic API (Claude 3.5 Sonnet) for the Koji AI tutor, PostHog for personal usage analytics |
Hosting & infrastructure
| Cloudflare | Full-stack deployment of the Next.js app and edge caching | $0/mo |
| Turso | Serverless SQLite database for storing lessons, user progress, and streaks | $0/mo |
Build guide
01Scaffold Next.js App & Database Schema
Initialize a Next.js project with Tailwind CSS, configure Turso SQLite with Drizzle ORM, and set up the core data models for courses, chapters, lessons, user progress, and daily streaks.
Create a new Next.js 16 project with Tailwind CSS, TypeScript, and Drizzle ORM configured for Turso SQLite. Define database schemas for users, courses, chapters, lessons, user_progress (tracking completion status, score, and timestamps), and streaks. Include migration scripts and a seed script with 2 sample STEM courses (e.g., Visual Algebra and Intro to Python) containing multi-step lesson structures.02Build the Interactive Lesson & Canvas Renderer
Build a modular lesson viewer component that supports rich text, KaTeX mathematical equations, and custom interactive puzzle blocks (sliders, drag-and-drop graphs, visual state evaluators).
Build a lesson player page in Next.js (/courses/[courseId]/lessons/[lessonId]) with a split layout: left side for instructional cards and interactive questions, right side for an interactive canvas widget. Integrate KaTeX for math formula rendering. Create a pluggable component architecture for interactive question types (e.g., a number slider puzzle, a coordinate graph point-clicker, and a multiple-choice concept selector) that validate answers client-side and return success state.03Implement Koji AI Tutor Drawer
Create a contextual AI tutoring drawer ('Koji') that reads the current lesson content, user state, and recent wrong answers to provide hints without giving away the direct solution.
Implement a slide-out AI tutor drawer named 'Koji' in the lesson player. Connect it to an API route that uses the Anthropic API (Claude Sonnet). Pass the current lesson metadata, problem statement, user's recent incorrect attempts, and current puzzle state as context. Configure the system prompt so Koji acts like a patient Socratic tutor who asks guiding questions and never directly hands out the final answer.04Add Gamification & Progress Tracking
Implement daily streaks, XP counters, level progression milestones, and dashboard overview metrics.
Build a user dashboard and gamification engine. Calculate and display daily learning streaks based on UTC lesson completion dates, award XP points per completed puzzle, and show a progress path tree for each course. Update the database schema and server actions to record completion events and refresh streak stats instantly upon lesson finish.05Polish & Deploy to Cloudflare
Perform responsive UI polish, handle error states, test edge cases, and deploy the application to Cloudflare Workers or Pages.
Review all UI components for responsive mobile and desktop layout stability. Add error boundaries around interactive math components and the Koji AI chat drawer. Configure output deployment for Cloudflare using OpenNext or Cloudflare Pages adapter, ensuring environment variables for Turso and Anthropic are properly documented in a .env.example file.
Cost vs paying for Brilliant
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- AI Coding Assistant Subscription (Claude Pro / Cursor)$20
Total~$20 one-time
Ongoing costs (monthly)
- Cloudflare & Turso Free Tiers$0
- Anthropic API usage for Koji AI tutor~$3-5/mo
Total~$4/mo
Paying for Brilliant
$27.99/mo
Your time to build
35-50 hours
AI tool credits
$20 (Claude Pro / Cursor)
Break-even
Under 1 month of subscription savings
Vibe code Brilliant: FAQ
- Can you vibe code Brilliant yourself?
- Serious undertaking — 45/100 vibecodeable. You can build a personal study clone with a general course viewer and a generic AI tutor, but replicating their massive library of custom interactive physics and math widgets will require weeks of intense frontend work.
- How long does it take to vibe code Brilliant?
- 3-4 weeks of focused development and debugging — roughly 35-50 hours of hands-on time with an AI coding agent.
- How do you build your own Brilliant?
- Scoped to personal use: Next.js (React) with Tailwind CSS, KaTeX for math rendering, and Lucide icons on the front, Next.js Server Actions and API Routes behind it, Turso (SQLite at the edge) for lightweight course progress and user state for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Brilliant without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 3-4 weeks of focused development and debugging. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Brilliant instead of paying?
- About ~$20 one-time to start and ~$4/mo to run, versus $27.99/mo for Brilliant. Break-even: Under 1 month of subscription savings.
- What stack should you use to vibe code Brilliant?
- Next.js (React) with Tailwind CSS, KaTeX for math rendering, and Lucide icons; Next.js Server Actions and API Routes; Turso (SQLite at the edge) for lightweight course progress and user state; plus Anthropic API (Claude 3.5 Sonnet) for the Koji AI tutor, PostHog for personal usage analytics.