LiveLab

LiveLab turns plain English questions into interactive algorithm simulations AI proposes, deterministic validators approve, every version immutable so learning stays safe to explore.

Comment

Inspiration

Learning technical concepts often breaks down at the same point an explanation can tell you what an algorithm does, but it does not let you see why each decision happens. I wanted to make learning feel less like reading a static answer and more like running an experiment.

LiveLab was inspired by a simple question: I wanted to create an experience where if a learner could ask, “Explain Dijkstra,” and immediately receive a simulation they can step through, question, and modify? Instead of building a broad collection of fixed visualizers, I focused on making the path from a natural language question to a safe, interactive lab feel real.

What it does

LiveLab turns a learner prompt into an interactive, versioned learning simulation.

Today it supports:

  • Dijkstra’s shortest-path algorithm, including learner-provided graph problems
  • Binary Search with generated arrays and targets
  • TCP three-way handshake with packet loss and network delay experiments

A learner can create a lab, step through each algorithm state, read contextual explanations, ask the AI Tutor about the current step, and modify the lab conversationally. Every accepted modification creates a new immutable version, so learners can compare experiments and revisit earlier versions.

For example:

Explain Dijkstra using a delivery network
→ interactive graph simulation

Add two more cities
→ Version 2 with a new validated graph

Ask: Why was this node selected?
→ state-grounded tutor explanation

How we built it

I built LiveLab with:

  • Next.js, React, TypeScript, Tailwind CSS
  • FastAPI and Pydantic
  • Gemini for constrained structured output tasks
  • A lightweight in-memory Store with JSON backup for hackathon persistence

The key technical decision was separating AI flexibility from runtime safety.

Gemini can identify a concept, propose a Dijkstra graph, extract a Binary Search configuration, classify a TCP modification, or explain a current simulation state. It never writes directly to storage and never generates executable frontend code.

Every generated configuration passes through deterministic validation before it can become a simulation version:

Gemini proposal
→ Pydantic schema validation
→ deterministic concept validator
→ retry with feedback when needed
→ safe fallback or rejection
→ immutable version creation

The frontend fetches the exact backend version and renders its runtime_config through component and engine registries. The simulation engines remain deterministic and local to the browser, so stepping, previous-state navigation, reset, explanations, and animations are responsive.

Challenges I ran into

The hardest challenge was making AI-generated content reliable enough for an educational simulation.

A valid-looking graph can still be unsuitable for Dijkstra if it has disconnected nodes, duplicate edges, unsupported weights, or an invalid start node. I solved this with deterministic graph validation, one retry with explicit feedback, and a known-valid fallback graph.

I also had to avoid a misleading versioning experience. It was not enough to create a new backend version after a modification the frontend had to fetch and render that exact version rather than reconstructing state from the submitted text. This led to version aware routing and backend driven runtime configuration.

Another challenge was visual readability. Generated graphs can vary in size, density, labels, and edge direction. I improved the Dijkstra renderer with deterministic layout, routed SVG edges, arrowhead aware labels, collision handling, and graph navigation controls.

Accomplishments that I'm proud of

  • Built a real end-to-end AI-to-simulation flow, not just a mock generation screen.
  • Created immutable simulation versions with parent relationships, history, and comparison summaries.
  • Made Dijkstra support both generated examples and learner-supplied graph problems.
  • Added conversational modification for Dijkstra, Binary Search, and TCP.
  • Added a transparent “How LiveLab Built This Simulation” panel so learners and judges can understand why a version exists.
  • Built a read-only AI Tutor grounded in curated concept facts and the current simulation state.
  • Kept the runtime deterministic: AI proposes; validators approve; trusted engines execute.

What I learned

I learned that the most useful role for AI in an interactive product is often not unrestricted generation. It is structured proposal inside clear constraints.

I also learned that versioning is valuable for learning, not just software development. When a learner changes a graph or network condition, preserving the earlier experiment makes the learning process inspectable and repeatable.

Finally, I learned that visual polish is part of correctness for educational tools. If labels, edge directions, state changes, or explanations are hard to follow, a technically correct simulation can still fail as a learning experience.

What's next for LiveLab

Next, I want to:

  • Move from the in-memory Store to durable database persistence.
  • Add authentication and learner-owned libraries of saved labs.
  • Add end-to-end browser tests for generation, versioning, and modification flows.
  • Expand the validated simulation catalog with BFS, DFS, sorting, A*, Prim, and Kruskal.
  • Improve the Tutor with richer guided questions and explanation deep links.
  • Add teacher and classroom workflows after the core learner experience is fully hardened.

My long-term goal is to make interactive experimentation as easy to request as asking a question.

Built With

Share this project:

Updates