Inspiration
Advancements in AI technology have made it possible to create increasingly complex and beautiful graphics. I realized that I could finally bring to life the kind of pop-up book visuals I had loved since childhood.
Excited by the prospect of creating something even more imaginative and fantastical than the pop-up books I used to craft from calendar cardboard as a child, I decided to give it a try right away.
What it does
Tobidas is a web page builder inspired by pop-up books.
Tobidas means "pop-up" in Japanese.
It allows users to create web pages with a pop-up book aesthetic, combining visual elements with images, audio, and video.
Projects can be exported as a single, self-contained HTML file containing all necessary image, audio, and video assets.
How I built it
I built tobidas as an online, browser-based builder that keeps project data and imported media in the user’s browser instead of uploading them to a server.
I used React, TypeScript, and React Three Fiber to create the interactive 3D pop-up book canvas. Book projects are represented as structured data containing spreads, pages, elements, assets, timelines, and camera settings.
For WebMCP, I register structured tools when the browser exposes document.modelContext or navigator.modelContext. These tools can read project state, inspect spreads and assets, place and edit elements, update timelines and cameras, assign audio, navigate between spreads, and use undo/redo.
I designed the standard builder UI and WebMCP to use the same state-management, validation, and command paths. This allows people and agents to work on the same project with the same behavior, undo history, and autosave system. WebMCP does not directly modify the DOM or bypass the builder.
I included the player used to preview and export finished works in the public build, which I deployed as a static application on Cloudflare Workers.
Challenges I ran into
I was committed to maintaining a "static delivery model" where the user-side agent could build the project directly within the browser. My goal was to enable sophisticated visual expression via a single URL, without requiring users to clone the Tobidas repository.
One of my biggest challenges was figuring out how to provide the fine-grained controls required by the builder while keeping this model intact.
Relying solely on direct DOM manipulation made agent interactions unstable and often resulted in long wait times and unreliable operations.
Furthermore, previous implementations that used a dedicated DOM manipulation interface for AI—in addition to the standard human-facing interface—created a maintenance burden due to the need to manage two separate systems.
Accomplishments that I'm proud of
By integrating WebMCP, I was able to provide agents with highly reproducible and reliable control capabilities without significantly altering the human-facing UI.
The dedicated AI DOM manipulation interface was completely eliminated, allowing the human UI to serve seamlessly for collaboration with agents. In short, this realized a production experience where agents handle complex operations—maintaining a high degree of creative freedom—while humans can intervene as needed via the UI for detailed visual checks and fine-tuning.
Furthermore, the WebMCP tool list doubles as a feature catalog for "Tobidas." This has improved both explainability and maintainability, enabling agents and developers to understand the application's capabilities without relying solely on visual UI information.
What I learned
While AI and other tools can greatly enhance creativity, they aren't a cure-all.
Although WebMCP was incredibly powerful and contributed to the evolution of tobidas, I also encountered areas within the ecosystem ripe for improvement, such as browser compatibility issues and varying levels of support across different agents.
In an era where almost anything can be created, I have come to realize that the most critical decision for a developer is to constantly think for themselves: what to prioritize, what to express, and how to compete using the resources currently at hand.
What's next for tobidas
There is still plenty of room to expand the expressive capabilities of tobidas.
I also found that a single prompt to an agent is often not enough to produce a truly satisfying result.
I will continue exploring new interaction designs and integrations with external tools, with the goal of enabling people and agents to create higher-quality work with fewer instructions.
Built With
- indexeddb
- react
- three.js
- typescript
- vite
- webmcp
- zod
- zustand
Log in or sign up for Devpost to join the conversation.