-
-
Titrating an unknown acid to the endpoint
-
Mixing silver nitrate and sodium chloride forms a white silver chloride precipitate
-
Four unlabeled samples dosed with acid to find which one reacts
-
Oversaturating potassium nitrate leaves visible undissolved crystals at the bottom of the beaker
-
Diluting a 1.0 M sodium chloride stock down to exactly 100 mL of 0.10 M
What's LabMCP?
LabMCP is a virtual chemistry lab where a person and an agent can work in the same area. Both humans and agents can do the exact same actions, like dragging glassware, dispensing chemicals, finding the pH of a liquid, or heating a beaker. While the human clicks buttons and drags stuff around, the agent does this via exposed WebMCP tools that we've created!
Our hackathon project comes with seven scenarios, which include titration, precipitation, neutralizing, dilution, watching a solid dissolve and crystallize, and a reaction mystery. It also includes a sandbox to work on other experiments.
You can use it with ChatGPT's desktop app using its WebMCP tools, or with Chrome's.
Inspiration
In high school we often used tools like PhET, interactive simulations designed to teach science concepts through virtual actions. One problem they have is that without a teacher or a packet guiding you through what to do, they often feel confusing and very restraining.
We wanted that guidance to come from AI agents, acting as a partner and a teacher at the same time. While computer use can already make this possible, it's very slow and clunky, and you need some prior knowledge of how it works. WebMCP solves this issue by giving agents the exact tools to emulate humans.
How we built it
We built LabMCP in Next.js on top of a chemistry engine written in TypeScript. The engine tracks what is in each container, has a small set of reactions (acid and base, precipitation, carbonate fizz, indicators, solubility), and finds pH by solving the charge balance. Every action, whether from a mouse or an agent, goes through this engine and returns a new state plus a set of events. LabMCP has 25 tools on document.modelContext, and each result an agent receives has a redacted summary of the lab so it only shows what a person could see.
The frontend is styled with Tailwind and shadcn/ui. The glassware is drawn as SVGs.
Challenges we ran into
Originally our project had a much larger scope: 3x more chemicals, more glassware, and 10+ more experiments. We started this hackathon late, so we had to cut down our scope a lot and focus on the popular chemicals and experiments, most of which we had seen in our high school AP classes.
Other than scope, our biggest challenge was making the system feel intuitive and inviting to use. Essentially it had to have taste and be playful. Our initial design was a 3D chemistry lab where the glassware sat on a bench. This worked somewhat, but it was:
- Laggy inside of ChatGPT's browser.
- Dragging and placing items required a perfect position, so it didn't feel intuitive or easy to use.
- It didn't look playful or modern. It seemed like we were using 3D just for the sake of it "looking cool."
Because of these issues we switched to a 2D bench with snapping and more playful icons and glassware SVGs. This solved all three issues we had with the 3D bench and actually made us want to play with it.
What we learned
Firstly, we learned how cool a service WebMCP is. Before this competition we both thought MCP was for APIs, and that the only way to get work done reliably in a browser was by burning tokens on computer use, so this definitely introduced us to a new technology. In terms of actually building the project, we learned how to decompose our huge scope into tickets for a swarm of agents to implement and test in parallel (using GPT 5.6 Sol as an orchestrator and GPT 5.6 Luna as an implementer).
What's next for LabMCP
Right now LabMCP is quite limited in terms of experiments and elements. We want to expand past first-year chemistry into a more open sandbox engine with a huge number of experiments and tools, so that eventually it can be used by labs that might not have access to equipment, or even for testing potentially dangerous experiments.
Built With
- chatgpt
- css
- nextjs
- openai
- pnpm
- react
- shadcn-ui
- tailwind
- typescript
- webmcp
Log in or sign up for Devpost to join the conversation.