Build a Vision AI Roast App with Claude Code and Momen BaaS
This showcase project emerged from a hackathon collaboration with Vibe Coding Collective. The application enables users to photograph any object — plants, footwear, or meals — and receive an AI-generated score (0–10), comedic item identification, and a humorous critique. Top-rated submissions appear on a live leaderboard.
The system leverages Momen BaaS — a visual, Postgres-native backend that AI coding tools and no-code builders plug into — paired with Claude Code for frontend development, deployed via Vercel. You configure your data model, AI agents, and logic visually; it exposes a standard GraphQL API your frontend consumes. One backend, many frontends. AI builds your UI; Momen is the backend that survives production.
Live Demo: the-critic.vercel.app
Core Architecture
Data Pipeline
Image upload → vision agent processing → score persistence → ranked leaderboard
Key Features
One-time submission per user via nickname
Camera or file-based image upload
Asynchronous vision AI processing returning structured data
Personal result visualization
Live leaderboard sorted by score (descending)
No authentication, payments, or external API dependencies
Data Model
Single submission table containing:
nickname(TEXT, unique)image(IMAGE)score(DECIMAL)comment(TEXT)item_name(TEXT)
Technical Components
Backend (Momen Editor)
Two Actionflows handle the workflow:
check-nickname-status: Validates if a nickname exists; prevents duplicate submissions
submission: Processes images through vision agent and updates database records
The vision agent "The Critic" evaluates uploads as a stand-up comedian, returning structured JSON with score, comment, and item identification.
Frontend Integration
The Momen plugin gives Claude Code direct access to your backend schema — tables, Actionflow inputs/outputs, and AI agent definitions — so the generated frontend code is always correct:
# Claude Code
claude plugin marketplace add momen-tech-org/momen-nocode-plugin
claude plugin install momen-nocode@momenWith the plugin installed, Claude Code generates:
Presigned URL image upload handlers
Synchronous nickname validation calls
Asynchronous submission processing with WebSocket subscriptions
Leaderboard queries with score-based sorting
Development Timeline & Cost
Phase | Duration |
|---|---|
Backend configuration | ~1 hour |
Frontend + deployment | ~1 hour |
Total | ~2 hours |
Momen Pro required for vision capabilities; Claude Code uses existing subscription; Vercel free tier supports the demo.
Technical Highlights
"One table, one agent, two Actionflows" — minimal complexity for a complete vision AI app
Native image column management via Momen — no external S3 configuration required
Asynchronous task processing with subscription patterns, not polling
Database-level leaderboard sorting — no custom ranking logic needed
Getting Started
The recommended workflow:
Configure backend visually in Momen (data model, agent, Actionflows)
Install the Momen plugin in Claude Code
Re-introspect schema after backend sync
Generate frontend code against the updated API specifications
Deploy to Vercel
