stemxyz

Inspiration Traditional STEM education is often passive—students read textbooks, memorize formulas, or interact with generic simulations with pre-set parameters. But real science starts with curiosity: "Why does the shower curtain blow inward?" or "Why does a yo-yo sleep?". We wanted to build a system that responds to this curiosity instantly, not just by giving an answer, but by building a unique, interactive laboratory for every single "Why."What it does STEMxyz elevates Generative AI from a "chatbot" to a "full-stack science simulator." It doesn’t just explain science; it builds the scientific environment.When a user asks about a phenomenon, the system doesn't dump an encyclopedia definition. Instead, it guides the user to explore the concept. Once identified, it writes code in real-time to generate a custom, interactive HTML5 physics simulation, allowing the user to manipulate variables and see the math and physics come to life.How we built it The core of STEMxyz is a Multi-Agent Orchestration System powered entirely by Google Gemini models, where each agent has a specialized role:Agent A - The Diagnostician (Socratic Tutor):The first point of contact. It is instructed to withhold direct answers and instead use Socratic questioning to gauge the user's understanding and identify the core scientific principle (e.g., "Bernoulli's Principle" or "Angular Momentum").Once confirmed, it triggers the "Red Button" tool call (start_simulation_phase).Agent B - The Theorist:Generates deep theoretical analysis. It outputs not just text, but LaTeX math formulas and Mermaid.js code to visualize causal logic and flowcharts.Agent C - The Builder (Engineer):A specialized coding agent. It writes a single-file HTML5/Canvas simulation from scratch based on the identified topic. It uses Tailwind CSS for styling and writes a raw JavaScript physics engine (handling gravity, collisions, fluid dynamics) optimized for mobile touch interaction.Agent D - The Demonstrator:Takes over the chat once the lab is live. It has context awareness of both the "Theory Doc" and the "Simulation Code." If a user asks, "Why did the ball stop?", it can explain by referencing the specific friction variable in the generated code and the kinetic energy theorem in the theory.Key FeaturesInstant Simulation Generation: AI writes and renders Canvas physics simulations in a safe sandbox on the fly—no pre-baked database.Split-Screen Interface: A responsive UI with an AI Assistant on the left and a Lab Panel (Simulation + Theory views) on the right.Local Data Privacy: Full experiment history is saved locally using IndexedDB, with options to export/import JSON backups.Visual Learning: Integrated rendering for LaTeX (math equations) and Mermaid.js (dynamic diagrams).Tech StackFrontend: React 19, Vite, TypeScript, Tailwind CSSAI Model: Google Gemini 2.5 Flash (for high-speed logic & code generation), Gemini Pro (for complex reasoning)Tools: Google GenAI SDK, Mermaid.js, React-Markdown, IDB (IndexedDB wrapper)