STEM Sage

An AI STEM coach that diagnoses, explains, hints, quizzes, and adapts in one guided flow.

STEM Sage turns AI into a structured tutoring system rather than a free-form chatbot. A student submits a STEM question by text or image, and the app identifies the topic, estimates difficulty, generates a step-by-step explanation, offers adaptive hints (not spoilers), and creates a short quiz. The learner's responses update a lightweight mastery model so the next recommendation is personalized.

Inspiration

We wanted to build something that feels less like a search box and more like a real tutor. A lot of STEM tools either give answers too quickly or assume students already know what to do next, so we set out to make an AI companion that actually teaches through the process. The goal was to make learning feel supportive, interactive, and accessible for students at different levels.

What it does

STEM Sage lets students type or upload a math, physics, chemistry, or coding problem and then walks them through a personalized learning flow. It diagnoses the topic and likely understanding level, gives step-by-step explanations, offers adaptive hints, and finishes with a short quiz to check comprehension. It also tracks mastery over time, supports multilingual and voice modes, and recommends the next best lesson based on what the student needs most.

How we built it

We built STEM Sage with Next.js 14, React, TypeScript, Tailwind CSS, shadcn/ui, and Framer Motion for a polished student-friendly experience. Prisma and SQLite handle session history and mastery tracking, while Zod and Next.js route handlers keep the data flow structured and reliable. For AI behavior, we used an OpenAI-compatible local mock engine with rule-based fallback so the app works without external API keys, and we added Tesseract.js OCR plus Web Speech API support for image input and voice playback.

Challenges

One of the biggest challenges was designing an AI flow that feels genuinely educational instead of just generating a quick answer. We also had to make OCR, diagnosis, hints, quizzes, and mastery tracking work together smoothly without making the experience feel heavy or confusing. Balancing flexibility for different STEM subjects with a clean, simple interface took a lot of iteration.

Accomplishments

We're proud that STEM Sage feels like a complete learning product rather than a demo stitched together from separate features. The guided flow from problem intake to explanation, quiz, and next-step recommendation makes the experience feel coherent and useful. We also love that the app is accessible by default, with image input, multilingual support, and optional voice explanations built in.

What we learned

We learned how much thoughtful product design matters when building AI for education. It is not enough to generate correct content; the system has to pace itself, adapt to the learner, and build confidence step by step. We also gained a lot of experience integrating OCR, local AI fallback logic, and persistent learner profiles into one app.

What's next

Next, we want to improve the quality of the topic diagnosis and make the mastery model more personalized over time. We'd also like to expand subject coverage, add richer visual explanations for harder STEM concepts, and support more languages. In the long term, we want STEM Sage to become a truly adaptive study companion for students anywhere.

Made with ❤️ for learners everywhere.

Built With

• docker
• framer-motion
• lucide-react
• next.js-14+-(app-router)
• next.js-route-handlers
• openai-compatible-local-mock-ai-engine
• prisma-orm
• react
• shadcn/ui
• sqlite
• tailwind-css
• tesseract.js
• typescript
• web-speech-api
• zod