Payoff

• 

  Payoff - Joke

• 

  Payoff - Ramen

Inspiration

Short-form storytellers often know exactly what they want an audience to feel: a laugh, a reveal, a gut punch, or a moment of warmth. The hard part is knowing whether that feeling actually landed.

Today, creation, feedback, and revision are usually disconnected. A creator may copy a storyboard into an AI chat, summarize audience reactions, discuss possible changes, then manually recreate those changes elsewhere. Along the way, important context gets lost: what the creator originally wanted, which audience saw which version, and whether a revision actually improved the story.

We built Payoff to keep the creative intent, storyboard, audience evidence, diagnosis, and revision history in one place.

We also wanted AI agents to work inside that same live creative workspace. With WebMCP, an external agent can read the actual story and audience evidence, reason about what is happening, and help make precise changes without forcing the creator to copy everything into a separate chat.

What it does

Payoff helps creators develop and test short narrative videos through one continuous loop:

Create → Refine → Test → Understand → Revise → Test again

A creator starts with a premise, the feeling they want the audience to have, and a format. Payoff turns that intent into a six-beat visual storyboard with dialogue, emotional beats, visual direction, and generated scene artwork.

Creators can test the story with an AI Audience for fast provisional feedback or prepare a target-blind Human Audience study for real viewers. Payoff compares the intended emotional payoff with how the story actually landed and highlights what worked, where it drifted, and the biggest opportunity to improve it.

The creator then chooses what to change. Payoff proposes a revision, the creator reviews and applies it, and the new story becomes an immutable, untested version ready for another audience loop.

WebMCP adds a second structured interface to the same workspace. An external agent can read the live brief, storyboard, AI feedback, and audience evidence, then perform narrow, version-checked story operations after the creator provides direction.

The agent helps diagnose and execute. The creator still makes the creative decision.

How we built it

Payoff is built with React, TypeScript, and Vite. A framework-independent PayoffStore holds the versioned creative workspace and is shared by both the React interface and WebMCP tools.

The production application runs as a Node.js service on Google Cloud Run, serving both the frontend and server-side API routes.

We use the OpenAI Responses API with structured outputs for storyboard generation, audience simulation, human-response synthesis, diagnosis, revision proposals, and semantic scene review. Gemini generates character references, environments, and storyboard imagery.

Each story beat includes a structured visual specification covering the setting, visible characters, focal action, focal object, composition, emotional cue, and continuity requirements. Generated scenes are checked for narrative correctness and can go through one bounded repair step before being accepted.

Payoff exposes eight tools through Chrome's native document.modelContext WebMCP API: four read tools and four narrow write tools. Writes require the active version returned by a previous read, so an agent cannot silently overwrite a newer human edit.

We also built deterministic demo fixtures, content-hash-based visual caching, IndexedDB persistence, and extensive automated testing. The current project passes 109 unit tests and 20 end-to-end Chrome scenarios.

Challenges we ran into

One of the hardest problems was making sure the human interface and an external agent were truly working on the same story.

Maintaining separate state for the UI and WebMCP would have created subtle synchronization problems. We instead made both use the same store and the same production domain commands. A WebMCP edit therefore creates the same immutable version and triggers the same UI update as a human edit.

Visual continuity was another major challenge. An image could look attractive but still be wrong for the story by revealing a clue too early, changing a character, or hiding the object that makes the emotional turn understandable. We addressed this with structured visual contracts, continuity references, semantic review, and bounded repair.

Audience provenance was equally important. AI simulation should never look like real audience research, and human feedback must remain attached to the exact version viewers actually saw. Every revision is therefore marked untested, and evidence from an older version is never silently carried forward.

Finally, live model calls made testing and recording slow, expensive, and nondeterministic. We built a deterministic demo mode that preserves the real UI, schemas, state transitions, revision logic, and evidence rules while replacing only nondeterministic provider outputs.

Accomplishments that we're proud of

We are most proud that Payoff closes the full creative learning loop instead of stopping at generation.

The creator's intent, storyboard, audience evidence, diagnosis, revisions, and WebMCP tools all operate on one coherent versioned workspace.

An external agent can inspect the same state the creator sees. Agent writes are version checked, stale changes are rejected, and successful edits immediately become part of the visible story history.

We also built a clear separation between AI Audience simulation and real Human Audience evidence. Payoff communicates where feedback came from and keeps every result bound to the exact story version that produced it.

The deterministic Looks Great demo reproduces the full creator journey using the real product paths, backed by 109 unit tests and 20 end-to-end browser scenarios.

What we learned

We learned that the most valuable part of an AI creative product is not generation alone. It is preserving context and trust across repeated creative decisions.

WebMCP became most useful when we exposed small, composable operations instead of a broad command like "make this story better." The agent can inspect evidence, reason about the problem, and help execute a change, while the creator still chooses the creative tradeoff.

We also learned that visual storytelling needs more structure than a good image prompt. Explicitly defining the focal action, characters, spatial relationships, important objects, and withheld clues produced much more reliable story scenes.

And we learned that failure behavior matters. A failed image request, stale agent write, or model timeout should never destroy the creator's work or contaminate evidence from another version.

What's next for Payoff

The next major step is hosted Human Audience collection, so creators can share a study link and receive validated responses directly inside Payoff instead of importing them manually.

We also want to add collaborative team workspaces, richer video and animatic playback, better comparison of audience results across revisions, integrations with existing creative-production tools, and support for more WebMCP-capable agents and browsers.

Longer term, we want to study which kinds of audience signals actually help creators improve an emotional payoff, and turn Payoff into a shared creative workspace where humans, audiences, and AI agents can continuously learn from each other.

Built With

• cloudrun
• gemini
• node.js
• openai-api
• playwright
• react
• typescript
• vite
• vitest
• webmcp