Build a Spirit Pizza Topping Quiz with Codex and Momen BaaS

I put together this showcase for a mini hackathon in collaboration with Vibe Coding Collective. It is a five-question personality quiz: answer a few cheeky prompts, and an AI agent crowns you a spirit pizza topping. The backend lives entirely in Momen; the frontend was built and deployed with Codex through Momen BaaS.

Live demo: what-are-you-really-pizza-topping.vercel.app

The pattern is straightforward. Configure tables, seed data, an AI agent, and Actionflows in the Momen editor. Point Codex at the project schema via MCP and the momen-baas-skill. Let it wire up GraphQL calls and ship a custom UI to Vercel. No custom server code required.

A Party Quiz That Needs a Real Backend

This is a fixed multiple-choice quiz, not a free-form chatbot. Five preset questions. One result per nickname. The AI reads the selected option IDs and returns a structured spirit topping — name and summary — from a seeded catalog.

That sounds simple, but it still needs:

• Relational data for questions, options, and results
• An AI agent with typed JSON output, not raw text parsing
• A one-shot rule so the same nickname cannot play twice
• Async processing because agent runs exceed sync Actionflow timeouts

AI coding tools handle the UI quickly. The backend is where projects often stall — wrong field names, missing async patterns, guessed API shapes. Momen BaaS solves that by exposing everything the editor configures as a typed GraphQL API, with MCP schema introspection so Codex reads the real structure instead of inventing one. That aligns with the broader point in Why Backend Structure Always Matters (Even If You Don't Write Code): even vibe-coded apps need a legible data layer.

What the System Does

App features

• Nickname entry with a one-shot guard — try the same name twice and the app returns "One shot only 😉"
• Five quiz questions loaded from the database, each with multiple preset options
• Async AI run that maps five selected option IDs to one spirit topping
• Result screen showing the topping name and a short summary
• No user accounts, payments, or external APIs

Data model

The data layer follows a standard quiz pattern, modeled visually in Momen. See the database configuration guide for the general approach; How to Create Data Models for Your App in Momen walks through similar relational setup.

Relations run question → option → quiz_result → spirit_result. Seed data — questions, options with psychological copy, and spirit results — was imported through the Momen Data dashboard. See data import and export for the CSV workflow.

AI

One AI agent handles the judgment step:

• Inputs: q1_option_id through q5_option_id (BIGINT — the IDs of selected options)
• Context: option rows and their psychological analysis text, configured in the editor
• Structured output: { spirit_result_id, result_name, result_summary }

Structured output means the frontend receives typed JSON. No regex on free text. The agent picks from the seeded spirit_result catalog based on the five answers. For background on how agents fit into app architecture, AI Explained for Beginners: Prompt, Agent, MCP & Function Calling covers the concepts this project puts into practice.

Backend logic

Two Actionflows orchestrate the server side:

check-username-status (sync)

1. Receive nickname
2. Query quiz_result by nickname
3. If a row exists → return "One shot only 😉"
4. Else → insert a stub quiz_result row and return an empty status

CrownUser (async)

1. Receive nickname and five option IDs
2. Start AI conversation with the agent
3. Update the existing quiz_result row — set spirit_result_id from agent output
4. End

The async flow uses fz_create_action_flow_task plus a WebSocket subscription (fz_listen_action_flow_result) on the frontend. The stub-insert-then-update pattern keeps nickname reservation and agent processing in separate steps — the same structure used across all three Vibe Coding Collective showcase backends.

Integration — Momen BaaS to Codex frontend

The backend never renders UI. Momen runs headless; Codex owns the frontend.

Backend setup (Momen editor)

1. Create tables and relations
2. Import seed data
3. Configure the AI agent with structured output
4. Build the two Actionflows
5. Sync changes to deploy the GraphQL API

Frontend setup (Codex + BaaS)

1. Install momen-baas-skill — Codex follows Momen's GraphQL filter syntax, Actionflow invocation, and agent subscription protocols
2. Enable Momen MCP (npx -y momen-mcp) — Codex calls get_project_schema to read tables, agent configs, and Actionflow input/output shapes

3. Generate frontend GraphQL operations:

   • Query question with nested option for the quiz UI
   • Invoke check-username-status synchronously via fz_invoke_action_flow
   • Invoke CrownUser asynchronously and subscribe for completion
   • Query quiz_result with nested spirit_result for the result screen

4. Deploy to Vercel

The Connect to Momen Backend guide documents MCP install paths for Codex, Cursor, and Claude Code, plus the recommended workflow: build backend visually → configure the coding agent → re-read schema after changes.

This is the core BaaS value proposition: the editor is the source of truth. Change a field or agent output in Momen, sync, tell Codex to re-read the schema — the frontend updates against real API shapes. Stop Prompting, Start Architecting: Why Your AI-Generated App Breaks at 80% describes exactly the failure mode BaaS avoids.

Design

• Backend: no Momen canvas UI — headless mode only
• Frontend: custom quiz flow built by Codex — nickname screen, stepped questions, loading state during async agent run, result reveal
• Permissions: anonymous role with open access for the demo. Production apps would use proper permission configuration; the showcase keeps permissions permissive for simplicity.

Technical highlights

• Schema introspection: MCP reads the live backend — no guessed field names
• Structured AI output: agent returns typed JSON mapped directly to DB columns
• One-shot enforcement: unique constraint on nickname plus sync pre-check Actionflow
• Modularity: swap spirit pizza for houseplants or Hogwarts houses by changing seed data and agent prompts — the architecture stays the same

How Long It Takes and What It Costs

Momen Pro is required for AI Agent features. Codex runs on an existing subscription. Vercel free tier covers the demo deploy. AI point consumption applies per agent run — scale depends on traffic, not fixed per-user cost.

Try It Live

Demo: what-are-you-really-pizza-topping.vercel.app

• Enter a nickname
• Answer five questions
• Wait for the agent to crown your spirit pizza topping
• Enter the same nickname again to see the one-shot guard

Closing Thoughts

This showcase is my take on a question many vibe coders hit: the frontend is done, but where does the backend go? For a quiz with an AI judgment step, Momen BaaS handled the entire server side visually — data, agent, flows — and Codex connected to it through schema introspection instead of guesswork.

If you want to try the same pattern, start with the BaaS getting-started doc, install the skill and MCP in your coding agent, and build a backend in the Momen editor first. The frontend becomes a GraphQL client — not a second product to maintain.