StoryMaker

A WebMCP story workshop where people direct and AI agents build illustrated branching stories together.

Comment

Inspiration

Interactive storytelling tools usually make the creator manage pages, choices, text, and illustrations through many separate controls. I wanted something simpler for my son: a way to make an illustrated bedtime story together in minutes, by talking rather than clicking. That led me to a bigger question: what changes when an AI agent can work with a story application through explicit, reliable tools instead of guessing its way around a user interface?

What it does

StoryMaker lets a creator direct an AI agent to write and illustrate a branching children's story in the browser.

The creator gives creative direction; the agent does all the structured writing and illustration work through WebMCP tools. There is no editing UI at all. The finished story can be reviewed as a story map, read in the page, or handed to a phone as a read-only preview through a QR code or link.

How I built it

StoryMaker is built with TypeScript and Vite. The page exposes seven WebMCP tools through document.modelContext: story inspection, readiness checks, structure updates, page text, and illustrations.

Draft stories live in the browser's IndexedDB. For the phone preview, a Cloudflare Worker with a Durable Object relays a reading session temporarily, without ever persisting story data.

I am a product manager without a deep technical background. I wrote the requirements and made the design decisions, and directed AI coding agents to implement them, then tested the result end to end in ChatGPT's in-app browser and on a phone.

Challenges I ran into

The main challenge was making agent actions reliable rather than fragile UI automation. I settled on a closed story format, clear tool schemas, readiness checks, and revision-based writes, so a stale action is rejected instead of silently overwriting newer work.

I also had to share a browser-local story with a phone without turning StoryMaker into a cloud storage product.

Accomplishments that I'm proud of

A complete agent-native loop: the agent creates a branching, illustrated story through WebMCP, and I can immediately inspect it as a story map and read it as my son would.

The mobile reader is truly read-only and reuses the same reading experience, while the draft never leaves the creator's own browser storage except for the live, unstored relay.

What I learned

WebMCP works best when tools describe meaningful product actions rather than exposing raw data. Explicit tools, structured validation, and readiness checks made the collaboration between me and the agent predictable and easy to reason about. I also learned that a PM can ship a working product by directing AI agents, as long as the product decisions are clear.

What's next for StoryMaker

Richer creative direction, stronger illustration continuity across pages, and more ways for a creator to review and refine the agent's work, while keeping creation local-first and reading simple across devices.

Built With

Share this project:

Updates

Submission history