Inspiration
We wanted to create an AI tutor that doesn’t just give answers but actually helps students understand. Everyone learns differently — some people learn best through visuals, others by doing, and others by hearing explanations. Most AI tools today only focus on text. We wanted to build something that can see what students draw, explain concepts step-by-step, and even draw or generate examples to make learning feel natural and interactive. That became Learnr.
What it does
Learnr is an AI educational assistant that helps students understand math and computer science concepts through visual and interactive explanations. Users can draw on a shared whiteboard, ask questions, and the AI interprets their sketches or equations in real time. It responds with clear explanations and, when needed, adds its own drawings, diagrams, or pseudocode directly to the board. Learnr also supports generating quizzes and videos for extra practice and visualization.
How we built it
We built the frontend with React and TypeScript, using Excalidraw as the collaborative whiteboard so users can draw freely. The backend uses Node.js and Express, connected to both the Groq and Claude APIs for reasoning and visual interpretation. When a user submits a question, the AI receives both the whiteboard context and the question, analyzes the drawing, and sends back an explanation — and optionally new elements to draw on the board. We also integrated Manim for generating educational animations and quizzes for deeper understanding.
Challenges we ran into
Getting the AI to understand the whiteboard context was a big challenge. We had to find a way to extract meaningful data from Excalidraw and send it to the AI efficiently. Another challenge was making the AI-generated drawings display correctly on the whiteboard and look natural. We also had to carefully tune the prompts so the AI would explain concepts clearly without giving generic or overly technical answers.
Accomplishments that we're proud of
We’re proud that Learnr can actually look at a user’s drawing and understand what they’re trying to do. It’s able to provide explanations that feel like a real tutor — visual, adaptive, and clear. We also successfully integrated multiple advanced AI models and combined text, images, and interactive elements into one seamless experience. The whiteboard feels intuitive, and the AI’s ability to draw and guide visually makes the experience unique.
What we learned
We learned how powerful multimodal AI can be when applied to education. Text-only tutoring is limiting — once you add visual reasoning and context awareness, the learning experience changes completely. We also gained experience building real-time interfaces with Excalidraw and integrating APIs like Claude Vision and Groq for educational use cases.
What's next for Learnr
We want to expand Learnr into a fully collaborative AI classroom where students and tutors can interact together in real time. Future plans include adding voice narration so the AI can explain out loud, real-time handwriting recognition for math equations, and a memory system that tracks each student’s progress over time. We also plan to release a mobile-friendly version so students can draw, ask, and learn anywhere.
Log in or sign up for Devpost to join the conversation.