STEMPlay AI

Inspiration

Coming from a background in visual design, engineering, and game development, I’ve seen how difficult STEM concepts can be for students in marginalized schools, especially when English is not their primary language. Terms like force, mass, or acceleration often make no sense verbally, but visually these students understand immediately. That gap between verbal explanation and visual comprehension inspired me to build STEMPlay AI — a tool that lets students see science instead of struggling to interpret it through language.

What it does

STEMPlay AI takes raw STEM text (formulas) and converts it into a structured, interactive visual breakdown. Using a Daytona LLM runtime, it extracts variables, relationships, and simplified explanations, then turns them into sliders and visual simulations students can play with to understand the concept intuitively.

How I built it

I built the frontend in React + TypeScript with TailwindCSS and a custom simulation editor. A Node/Express backend communicates with Daytona to parse STEM content. Sentry is used for error monitoring, and CodeRabbit for automated code review. The system is designed as a lightweight pipeline: text input → AI parsing → structured concept → interactive visualization.

Challenges

The hardest part was converting unstructured text into reliable, structured STEM concepts without hallucinations. Designing visualizations that stay simple while remaining scientifically meaningful was also challenging. Integrating Daytona, Sentry, and the simulation layer within hackathon time required tight iteration.

Accomplishments

I built a working pipeline end-to-end: text parsing, concept extraction, and real-time interactive simulation. I was able to design a UI that is simple, approachable, and friendly for students who rely on visual reasoning.

What I learned

I learned how to use Daytona runtimes effectively, how to build predictable STEM parsing prompts, and how important visual learning is when language becomes a barrier.

What's next for STEMPlay AI

I plan to add multilingual explanations, teacher mode, more advanced simulations, and a full cloud deployment. The long-term goal is to turn this into an accessible platform that helps students learn STEM concepts visually, regardless of their language limitations.

Built With

• and-javascript**-for-the-core-frontend
• and-text-analysis.-additional-logic-and-lightweight-api-routing-are-handled-in-**node.js**
• api
• backend
• browser-use
• coderabbit
• creating-a-clean-workflow-between-the-frontend
• css
• css3
• daytona
• educational
• express.js
• formula-extraction
• html5
• it-uses-**python**-along-with-**huggingface-models**-for-ocr
• javascript
• llm
• node.js
• react
• rest
• runtime
• sentry
• simulation
• tailwindcss
• typescript
• vite
• with-**react**-and-**vite**-powering-the-interface-and-component-structure.-the-simulation-layer-uses-**javascript**-and-**canvas**-for-real-time-2d-physics-visuals.-on-the-backend-side-and-for-ai-processing