Inspiration

Many schools in Indonesia teach chemistry without a laboratory that is safe or complete enough for students to run experiments themselves. Teachers describe reactions on a whiteboard, and students memorise colour changes they have never actually seen. The missing piece is not information. It is the instructor standing beside you who pours the reagent, points at the bubbles as they form, and stops you before you make an unsafe combination.

We wanted to find out whether an AI agent could take that role, and WebMCP is the first thing that makes it possible. A chatbot can describe a reaction. With WebMCP, it can run one.

What it does

EZI ChemLab is a 3D chemistry and physics lab that an AI agent drives from inside the browser. The student talks to the agent, and the agent operates the bench.

There are three practical modes, mapped to Phases D, E and F of the Indonesian national science curriculum:

  • Acids and bases, with indicator colour change and gas evolution
  • Electrolyte and non-electrolyte solutions, tested with a conductivity lamp
  • Density and buoyancy, the classic egg in fresh water against salt water

The agent can switch topics, mix substances, read the current state of the bench, explain each stage, raise an educational safety warning, reset the experiment, and write up the observation report at the end.

Reagents are not teleported into the beaker. Each one is measured out into its own graduated cylinder first, or lifted on a spatula if it is a powder, and only then poured in one at a time. The amount_ml the agent asked for is something you can read off the glass rather than take on trust.

How we built it

Seven tools are registered client side through the browser model context API: switch_experiment_mode, mix_substances, get_lab_state, explain_reaction_step, trigger_safety_alert, reset_experiment and render_lab_report.

The frontend is Next.js with React Three Fiber. Every object on the page is built from geometric primitives in code, with no third party assets: the glassware is turned on a lathe from a profile the way real glassware is, and the floor tiles and the room the glass reflects are drawn to a canvas at runtime. Bubbles are capped at 110 instances so the simulation runs on the standard school laptops we are aiming at. The backend is Rust with axum, acting as a proxy so that no API key ever reaches the client.

One decision shaped everything else: reaction outcomes come from a static lookup table, never from a language model. The visual result of a reaction is a scientific fact, and a hallucinated colour change would teach a student something false. The model writes prose. The table decides the chemistry.

Challenges we ran into

The WebMCP specification moved the API from navigator.modelContext to document.modelContext in July 2026, and browsers in the field are still split across both locations. Every registration goes through a resolver that checks both, because a page that registers nothing looks exactly like a page that was never built.

Refracting glass nearly cost us the experiment. The renderer builds the buffer that transmissive glass reads from opaque objects only, so anything marked transparent inside a beaker is not merely faint, it is absent: the liquid, the bubbles and the electrodes all disappeared behind the very glass that was meant to show them. Worse, our whole browser test suite stayed green while the beaker was empty on screen, because every check ran at 900 pixels and refraction only switches on from 1024 up. We now have a check that runs wide, hides the interface panels so that a text update cannot stand in for a reaction, and insists the contents are actually visible.

We also had to design for a judging period that runs for weeks. An API quota running out in mid September would leave the lab looking broken, so step explanations are generated once, reviewed for scientific accuracy, and served as static content. Only the lab report, which depends on what the student actually did, calls a model at run time, and the backend accepts several numbered providers and moves to the next one when a call fails. That is not a claim on paper: in production the first provider currently fails on every request and the second answers, and the report still arrives. Every remaining failure path returns vetted static text with a 200 response rather than an error.

Accomplishments that we're proud of

Every execute handler returns a structured result containing the visual state, the temperature change and a plain language observation, so the agent narrates what actually happened instead of guessing. Unknown reagent pairs return a structured error listing the valid pairs, which lets the agent correct itself without the student ever noticing.

We also built the lab so that it stays usable when WebMCP is not available. A status badge reports what the browser supports, a manual panel calls the exact same handlers rather than mock versions, and the topic buttons in the header run switch_experiment_mode the same way an agent does. The tool layer is genuinely separate from the interface.

What we learned

Reading matters as much as writing. get_lab_state returns the same view of the bench that the interface shows, so the agent can check what is actually there before it acts rather than assuming its last call succeeded. Together with the structured errors, it is what keeps a long conversation from drifting away from the simulation.

We also learned that visible tool call indicators are not decoration. Every call is written to an activity console with the tool name, the outcome, and whether it came from an agent or was run by hand. Watching that line appear at the exact moment the liquid changes colour is what makes the whole thing legible, both to a student and to anyone evaluating it.

What's next for EZI ChemLab

Reaction rate is the next topic, and it is the one that rewards an agent most. It has four variables to manipulate and two beakers to compare, so the agent stops triggering effects and starts designing an experiment. Thermochemistry follows closely behind, since temperature data already flows through mix_substances.

Beyond that: teacher accounts with printable worksheets, offline packaging for schools with limited connectivity, and coverage extending into Phase F electrochemistry.

Built With

Share this project:

Updates

Submission history