Inspiration
Most learning software is fixed before the learner opens it. Teachers, parents, and trainers must search through existing courses and accept content that may not fit the learner, skill, context, or preferred way of learning.
AI can generate explanations and quizzes, but learning should involve more than reading generated text or selecting answers. We wanted learners to explore, experiment, make mistakes, revise their thinking, and demonstrate understanding through play.
That idea became Lantern: a WebMCP-powered canvas where browser agents turn natural-language learning goals into playable games.
What it does
A user describes the learner, skill, and desired world in ordinary language. For example:
Create an ecosystem game for a six-year-old where the learner restores a pond, meadow, and woodland by experimenting with sunlight, water, food, and shelter.
The user gives this brief to a WebMCP-compatible browser agent. The agent then:
- Inspects Lantern’s capabilities and safety limits.
- Creates or resumes a game draft.
- Writes the complete HTML, CSS, and JavaScript.
- Opens the game in a safe playtest.
- Checks validation errors, runtime diagnostics, and learning evidence.
- Improves the game and requests human review.
The result is a functioning browser game rather than a description, code snippet, or dressed-up quiz.
While the learner plays, Lantern records evidence such as predictions, attempts, observations, corrections, hint usage, and demonstrated mastery. Agent-created games receive dedicated pages and remain saved in the browser.
How we built it
Lantern was built through close human–agent collaboration.
I provided the product direction, learning use cases, design feedback, safety requirements, and decisions about the final experience. OpenAI Codex handled most of the implementation—building the interface, defining the WebMCP tools, creating the isolated game runtime, implementing browser persistence and evidence reporting, debugging interactions, testing the application, removing legacy code, and preparing the project for submission.
The resulting application uses Vinext, React, TypeScript, WebMCP, sandboxed srcDoc iframes, Canvas 2D/WebGL, and browser local storage.
Lantern registers eight tools through document.modelContext.registerTool():
get_game_canvas_capabilitieslist_saved_game_draftsresume_game_draftcreate_game_draftset_game_sourcepreview_gameget_game_runtime_diagnosticsrequest_game_review
These tools allow an agent to inspect the canvas, create or resume drafts, write game source, open playtests, diagnose problems, and request human review.
Generated games communicate with Lantern through two small host APIs:
lantern.evidence()reports predictions, experiments, attempts, observations, corrections, and other learning signals.lantern.complete()reports mastery and triggers host-controlled completion feedback.
This development process reflected Lantern’s central idea: a human supplies the intent and judgment, while an agent handles the technical work required to turn that intent into a functioning product.
Challenges we ran into
The biggest challenge was giving agents enough creative freedom to build ambitious games without giving generated code unrestricted access to the browser.
Games run inside isolated iframes with a strict Content Security Policy. External scripts, network requests, storage APIs, nested frames, and hidden navigation are blocked. Lantern also validates generated source and rejects unsafe APIs, oversized payloads, dynamic evaluation, and obvious unbounded loops.
Another challenge was designing tools that agents could use reliably. A single “generate game” action would hide too much state and make failures difficult to diagnose. We created a structured workflow with explicit capabilities, drafts, revisions, previews, diagnostics, persistence, and review.
We also had to make gameplay educationally meaningful. A score alone reveals very little about understanding, so Lantern captures how a learner predicts, experiments, uses hints, corrects mistakes, and revises their thinking.
Accomplishments that we're proud of
We are proud that Lantern produces real interactive games rather than descriptions or generated quizzes.
A browser agent can discover Lantern’s tools, create a structured project, program the complete game, inspect errors, revise its work, and open the playable result through WebMCP.
We also built:
- Persistent browser-local game drafts
- Dedicated pages for agent-created games
- Safe, isolated game execution
- Source and runtime validation
- Revision and idempotency protection
- Human review boundaries
- Learning-evidence reporting
- Host-controlled mastery celebrations
- Five example games covering mathematics, literacy, spatial reasoning, ecosystems, and computational thinking
Most importantly, Lantern demonstrates a complete human–agent workflow: the human describes the desired outcome, the agent builds it, and the resulting experience can be played and evaluated immediately.
What we learned
WebMCP is most powerful when a website exposes meaningful product capabilities instead of adding a chatbot beside fixed content.
Agents perform better when they can inspect constraints before acting, observe the consequences of their changes, diagnose failures, and resume from structured state.
We also learned that browser-local persistence can support surprisingly capable agent workflows without requiring a backend service.
Most importantly, generative education becomes much more compelling when the output is something learners can manipulate—not simply something they consume.
What's next for Lantern
We plan to add reusable 3D components, richer physics and shader tools, teacher-defined assessment rubrics, accessibility presets, collaborative learning worlds, and portable game packages.
We also want agents to adapt existing games from teacher feedback and learner evidence while keeping educators in control of review and publishing.
Our long-term goal is to let anyone describe what someone needs to learn and collaborate with an agent to build a safe, memorable world for learning it.
Built With
- ai-agents
- browser-apis
- canvas-api
- chatgpt
- chrome
- content-security-policy
- css3
- edtech
- game-based-learning
- generative-ai
- github
- glsl
- html5
- interactive-learning
- javascript
- local-storage
- openai-codex
- react
- sandboxed-iframes
- typescript
- vinext
- web-games
- webgl
- webmcp
Log in or sign up for Devpost to join the conversation.