Build a Vision AI Roast App with Claude Code and Momen BaaS

This showcase came out of a mini hackathon we ran with Vibe Coding Collective. Point a camera at anything — a plant, your shoes, a sad desk lunch — and a vision AI agent scores it out of 10, names what it sees, and delivers one roast line. The highest-rated nonsense climbs a live leaderboard.

The backend is configured visually in Momen. Claude Code built the frontend through Momen BaaS and deployed it to Vercel. Of the three showcase projects from the hackathon, this one has the simplest backend — which makes it a good entry point for the BaaS workflow.

Live demo: the-critic.vercel.app

Photo In, Score Out, Ranked

The app follows a single pipeline: image upload → vision agent → persisted score → sorted leaderboard.

That requires more backend than a static page:

• Binary image storage with a proper upload workflow
• A vision-capable AI agent returning structured JSON (score, comment, item name)
• Async processing because model inference exceeds sync timeouts
• A database query sorted by score for the leaderboard
• A one-shot nickname rule so each person submits once

Claude Code handles the upload UI and leaderboard layout quickly. The backend — image pipeline, agent config, persistence — is where Momen BaaS earns its place. Everything configured in the editor becomes GraphQL. Claude Code reads the schema via MCP instead of inventing endpoints. See Why Backend Structure Always Matters (Even If You Don't Write Code) for why that structure matters even when you never touch server code.

What the System Does

App features

• Nickname entry with one-shot guard
• Image upload from camera or file
• Async vision AI processing — returns a score (0–10), a comedic item label, and a one-line roast
• Personal result view after processing completes
• Live leaderboard — all submissions sorted by score descending
• No authentication, payments, or external APIs

Data model

That is the full data model. The leaderboard is a GraphQL query on submission with order_by: { score: desc } — no aggregation Actionflow needed. Table setup follows the same visual approach described in Momen Data Model and Database Complete Guide.

AI

One vision AI agent— "The Critic":

• Input: image (IMAGE)
• Role: stand-up comedian evaluating uploads; roasts lack of intent, not aesthetic quality
• Structured output: { score: number, comment: string, item_name: string }

Non-streaming structured response. The frontend waits for complete JSON, then renders the roast card. For broader context on agent-based apps, Getting Started with Agentic Workflows in AI Applications covers the pattern at a higher level.

Backend logic

Two Actionflows:

check-nickname-status (sync)

1. Receive nickname
2. Query submission by nickname
3. If row exists → return "One shot only 😉"
4. Else → insert stub row (empty image, score, comment, item_name) → return empty status

submission (async)

• Receive image and nickname
• Start AI conversation with the vision agent
• Update submission — fill score, comment, item_name, and image
• End

Image upload on the frontend follows Momen's two-step binary workflow documented in the momen-baas-skill and File Management docs:

1. Compute MD5, call imagePresignedUrl mutation → receive upload URL and image ID
2. HTTP PUT the binary to the presigned URL
3. Pass the image ID into the submission Actionflow

Integration — Momen BaaS to Claude Code frontend

Backend (Momen editor)

1. Create the submission table
2. Configure the vision agent with structured output
3. Build both Actionflows
4. Sync to deploy the GraphQL API

Frontend (Claude Code + BaaS)

1. Install momen-baas-skill
2. Enable Momen MCP — Claude Code introspects agent inputs, Actionflow names, and output schemas
3. Generate:
   • Image upload helper (presigned URL protocol)
   • Sync call to check-nickname-status
   • Async submission invocation + WebSocket subscription
   • Leaderboard query with descending score sort
4. Deploy to the-critic.vercel.app

The BaaS integration guide covers MCP setup for Claude Code (claude mcp add momen -- npx -y momen-mcp) and the recommended loop: visual backend → configure agent → re-read schema after sync.

Claude Code generates frontend code against the introspected schema — filter syntax, mutation names, subscription patterns — without manual API documentation. AI Explained for Beginners: Prompt, Agent, MCP & Function Calling explains why MCP-backed schema reading beats prompt-only integration.

Design

• Backend: headless — no Momen canvas
• Frontend (Claude Code): upload screen, processing spinner, roast result card, scrollable leaderboard
• Permissions: open anonymous access for the demo; production would use role-based permissions

Technical highlights

• Minimal surface area: one table, one agent, two Actionflows
• Native image column: Momen handles storage; no separate S3 setup
• Async by default for AI: task + subscription pattern, not polling
• Leaderboard as a query: no custom ranking logic — Postgres sort on the client query

How Long It Takes and What It Costs

Momen Pro required for vision AI agents. Claude Code on an existing subscription. Vercel free tier for the demo. Each submission consumes AI points for the vision model run.

Try It Live

Demo: the-critic.vercel.app

1. Enter a nickname
2. Upload a photo of anything
3. Read your roast and score
4. Scroll the leaderboard to see how the room ranks

Closing Thoughts

The Critic is the lightest of our three Vibe Coding Collective showcases, and that is the point. One table, one vision agent, Claude Code for the UI — the full stack without writing backend routes or standing up object storage.

If you are exploring Momen as a BaaS for AI vision apps, this is the shortest path from editor config to live deploy. Start with the BaaS docs, configure a vision agent in the editor, and let Claude Code read the schema through MCP.