CocktailSteps

Inspiration

Most home bars contain more possibilities than their owners realize. The hard part is not finding another recipe list; it is recognizing what is already on the shelf, deciding what is trustworthy, and following measurements while your hands are busy. CocktailSteps turns that uncertain moment into a calm path from shelf to glass.

What it does

CocktailSteps lets someone photograph a bar shelf, review and correct the detected ingredients, and see which of twelve authored cocktails they can make. GPT-5.6 handles structured ingredient recognition, but it is never treated as ground truth: the user confirms every label, and deterministic application code ranks the recipes.

After choosing a drink, the Prepare board lays out measured ingredients, required tools, and extra supplies. The guided Make flow then presents every authored action with its exact measure and a short original demonstration. Video plays once, Replay is explicit, sound is opt-in, and reduced-motion users receive the same instruction with a static poster. An authenticated GPT-5.6 Terra coach can add recipe-scoped substitution notes without changing the verified base recipe. Explore also supports search, flavor filters, and a zero-proof option.

How we built it

The app uses the OpenAI Responses API with Structured Outputs at two controlled boundaries. Scan asks GPT-5.6 for canonical ingredient IDs and confidence, then requires human confirmation. Coach asks GPT-5.6 Terra for annotations constrained to known ingredient and step IDs. Zod validates both model responses and the authored recipe data. Recipe matching, quantities, serving math, base steps, and safety rules remain deterministic TypeScript.

Codex accelerated the product architecture, typed schemas, protected APIs, Supabase authentication and per-user quotas, the 52-video asset pipeline, accessible native-video states, automated tests, documentation, and production handoff. GPT Image 2 supplied the original visual system. The production stack is Next.js 16, React 19, TypeScript, Supabase Auth and Postgres with row-level security, and Vercel.

Challenges

The central challenge was deciding where AI should stop. Visual recognition is useful precisely because a shelf is messy, but cocktail measures and safety guidance cannot drift. We designed an explicit handoff from probabilistic recognition to user confirmation and deterministic matching.

Media behavior created a second challenge. Each of the 52 steps needed to feel immediate without hiding its instruction inside generated pixels. We kept measures and guidance as accessible HTML, made sound opt-in, reset demonstrations predictably between steps, and provided equivalent reduced-motion posters.

Accomplishments that we're proud of

• A complete path from shelf photo to confirmed inventory, deterministic match, preparation, and guided pour.
• Twelve validated authored recipes and 52 purpose-built step demonstrations.
• AI responses constrained to known IDs instead of being allowed to rewrite recipe truth.
• Accessibility behavior designed into video playback, not added as a final patch.
• Supabase-backed accounts, personal AI allowances, row-level security, and protected server APIs.
• A production-ready build covered by 109 unit/integration tests, 44 end-to-end tests, and automated asset verification.

What we learned

The best role for AI was not to generate the cocktail—it was to reduce uncertainty at the edges. Requiring confirmation made vision useful without making it authoritative. Constraining coach output to authored IDs kept advice flexible while preserving a dependable core. We also learned that instructional media works best when the generated visual demonstrates motion and ordinary HTML carries the exact measurement.

What's next

Next, we would expand the authored recipe library and ingredient vocabulary, add more zero-proof paths, improve recognition evaluation with consented real-world shelf photos, and let users save favorite drinks and private tasting notes. We would keep the same product boundary: AI can interpret and assist, while verified recipes and measurements remain deterministic.

Built With

• cloudflare-turnstile
• codex
• gpt-5.6
• gpt-5.6-terra
• gpt-image-2
• happyhorse-1.1-r2v
• html5-video
• motion
• next.js-16
• openai-node-sdk
• openai-responses-api
• playwright
• postgresql
• react-19
• supabase-auth
• typescript
• vercel
• vitest
• wan-2.7
• zod