MathChat AI

Inspiration- We noticed that while AI tools are becoming more common in education, very few are tailored specifically for young learners. We wanted to bridge that gap by combining the power of generative AI with a child-friendly interface, focusing on topics like fractions, decimals, and early algebra.

What it does- MathChat AI is a friendly, interactive chatbot built to make math learning fun, accessible, and engaging for middle schoolers. Inspired by the struggles many students face when learning math for example, confusion, frustration, and hesitation to ask for help, we set out to create a tool that feels more like chatting with a helpful friend than studying from a textbook.

How we built it- We used:

• next.js
• tailwindcss and shadcn for styling
• webspeech api
• vercel for ci/cd hosting
• framer motion
• The OpenAI GPT-3.5-turbo API to generate conversational math explanations
• A custom prompt system to simulate a kid-friendly tutor

Challenges we ran into-

• Prompt tuning: Making sure the AI used vocabulary appropriate for middle schoolers without being too simple or too formal
• Time management: Balancing design, coding, and testing within a short timeframe
• UX design: Creating a layout that was both functional and fun, without overwhelming users

Accomplishments that we're proud of

• Working on something that helps the youth!

What we learned

• How to integrate the OpenAI GPT API into a custom frontend
• How to design a simple and intuitive UI for younger audiences
• The importance of prompt engineering to make AI output clear, concise, and age-appropriate
• How to scope and ship a functional MVP under a strict hackathon deadline

What's next for MathChat AI

• Voice input/output to make it more accessible
• Gamified challenges to encourage learning through play
• User progress tracking for parents or teachers

Built With

• next.js
• openai
• shadcn
• tailwindcss
• vercel
• webspeech