MonstersDNA

Inspiration

MonstersDNA started with a simple idea from my eight-year-old son: “Can we make a game where I can create my own monster?”

He didn’t just want to choose a character. He wanted to decide how many eyes it had, whether it had horns or a tail, what it ate, and how it moved. We wanted each monster to have DNA that described it, so we could change individual traits or combine two monsters to create something new.

So we started vibe coding together with Codex. He came up with creatures and ideas, we tried them, and we had a lot of fun watching what happened. Sometimes the results were cute. Sometimes the legs were stuck together or the horns floated above the head. That became part of the process.

The WebMCP idea came later. When we discovered the challenge, we thought: what if an AI agent could actually become a player in this world? Not just help us write the game, but design its own creature and use its intelligence to survive?

What it does

MonstersDNA is a browser-based 3D ecosystem populated by creatures with configurable DNA.

You can design a monster, explore the island, find food, fight, and reproduce. Babies inherit a mixture of their parents’ DNA with mutations. The world runs on a persistent server, so the ecosystem continues evolving when players leave.

With WebMCP, your agent can join the same experience. It can create a monster, observe its surroundings, move, explore, eat, attack, flee, rest, and breed.

You can watch its actions in the 3D world, give it strategic guidance, or take control yourself. A scorecard tracks survival time, food consumed, fights won, offspring, generations, and population share.

Why WebMCP fits

Controlling a real-time game through screenshots and simulated key presses is awkward. The agent needs to understand what is happening, but it shouldn’t have to reverse-engineer the interface every time it wants to eat a bush.

WebMCP gives it structured observations and meaningful actions. The human sees the world; the agent gets the information it needs to reason about that world. Both interact with the same creature and the same simulation.

That creates a different kind of gameplay: you can be the player, the coach, or switch between the two.

How we built it

We used a TypeScript monorepo with a Next.js frontend, Three.js and React Three Fiber for rendering, and a NestJS backend. PostgreSQL and Prisma handle persistence, while Socket.IO connects players to the shared simulation.

The DNA system drives the creature’s appearance and traits. The same DNA produces the same design, and breeding combines parental traits with mutations.

Our WebMCP integration registers nine tools through document.modelContext. The action tools use the game’s existing movement and animation systems, while the server remains responsible for health, energy, combat, and reproduction. The agent plays within the game’s rules rather than bypassing them.

Challenges we faced

The hardest visual challenge was making many different DNA combinations look like coherent creatures. Our first monsters were assembled from simple shapes. Moving to smooth, animated meshes exposed plenty of problems: disappearing tails, disconnected horns, strange wrinkles, and legs that merged together.

We also had to balance a lively world with browser performance, especially on mobile.

For the agent integration, the challenge was choosing the right level of control. Actions needed to be useful for reasoning, but still happen visibly and leave room for the human to intervene.

What we learned

Building with my son made the project wonderfully unpredictable. He cared about things I might not have prioritized, and seeing him react to each version was immediate feedback.

We learned that generating code is only part of building a game. Testing, watching, adjusting, and trying again mattered just as much.

WebMCP also changed how we thought about agents. They don’t have to sit in a separate chat window or operate invisibly in the background. They can share an interactive world with us—and become something we can play alongside.