Umami Builder — a Vibe Code Experiment Using the Umami Database
- Joseph Chen
- Nov 5
- 3 min read
Updated: Nov 11
live demo: https://umamivers-frontend.onrender.com/
It may take up to a minute for the backend to wake up. Refresh if search doesn’t respond.
Why / What
I’ve always remembered the Fantasia scene where the apprentice’s broom begins hauling water on its own, fascinating at first, but quickly out of control.
That blend of curiosity and unease perfectly captures how I felt when I started this vibe-code experiment: excited to see what AI could build, yet cautious about how to ask the right questions and verify the results.
As a home cook and designer, I’ve known the Umami Information Center’s database for years. It’s comprehensive but reads like a research table, full of precise numbers that are difficult to interpret when thinking about ingredient pairing or flavor balance.
My idea was to transform their open data into a visual calculator that shows intensity and balance, allowing users to explore how amino acids and nucleotides interact in real time.
Planning the Build
Data Sources:
Umami Information Center (Umami compounds), ChatGPT (TCM mapping)
Tech Stack:
Next.js, TypeScript, Tailwind CSS, Django, PostgreSQL
Deploy:
Render
AI Tools:
Warp, Cursor, Codex, ChatGPT
Goal:
Validate how AI coding workflows perform across the full design-to-deployment pipeline.
Convert static umami data into an interactive tool that visualizes umami synergy and basic TCM balance in a clear, usable format.
Data / Method
The umami center dataset lists 20 amino acids and 3 nucleotides. But according to the EUC formula, only 2 amino acids and 3 nucleotides directly influence umami perception which are: AA (amino acids): Glu, Asp; Nuc (nucleotides) : IMP, GMP, AMP.
Each compound is weighted: Glu = 1.0, Asp = 0.077, IMP = 1.0, GMP = 2.3, AMP = 0.18. Weighted sums feed into the EUC formula using the synergy constant 1218 to estimate the Equivalent Umami Concentration (EUC), producing one comparable value for each ingredient or blend.
EUC = Σ(aᵢ·bᵢ) + 1218 × Σ(aᵢ·bᵢ) × Σ(aⱼ·bⱼ)
Where:
aᵢ = Amino acid concentration (Glu, Asp)
aⱼ = Nucleotide concentration (IMP, GMP, AMP)
bᵢ, bⱼ = Relative umami weights above
To make the results more intuitive, I defined a six intensity levels base on the theoretical human taste limit for Amino Acids (AA), Nucleotides (Nuc) and Synergy (EUC).
Level | AA mg/100g | Nuc mg/100g | EUC mg/100g | Description |
|---|---|---|---|---|
0 | 0 | 0 | 0 | No umami |
1 | ≤ 10 | ≤ 5 | ≤ 100 | Very Low |
2 | 10–30 | 5–15 | 100–400 | Low |
3 | 30–80 | 15–40 | 400–1000 | Moderate |
4 | 80–150 | 40–80 | 1000–3000 | High |
5 | 150–300 | 80–150 | 3000–8000 | Very High |
6 | > 300 | > 150 | > 8000 | Exceptional |
The interface also displays AA : Nuc balance, showing that flavor peaks near a 50 : 50 ratio.
Early visualizations use simple bar charts, fully customized data visualizations generated by AI often defaulted to generic layouts, so this baseline kept iteration predictable.
How / Difficulty
Planning and Validation
Discussed feature feasibility with GPT to select formulas and define the MVP.
Learned to ask “What problems could appear?” instead of “Is this possible?” and validated progress through visible front-end results.
Stack Choice
Selected Django + PostgreSQL because I’d learned Django previously and wanted a scalable back end.
Chose popular frameworks with strong community support so AI tools could reference abundant open-source examples.
Data Mapping
The toughest task was aligning ingredient names, origins, and processing methods.
Kept the first release limited to the core Umami Center dataset, leaving cross-database mapping for later.
Typical Issues & Fixes
Unexpected Routing: Warp created a /composition route instead of updating the home page → added sitemap definitions to the PRD.
Prompt Precision: Structured, diagnostic phrasing outperformed polite requests.
Style Consistency: Without a style guide, visual drift appeared → future versions will use Figma variables and design tokens.
Visualization Limits: AI struggled with custom chart logic; started with simple bar charts for clarity.
Key Insight
Most “bugs” came from unclear definitions, not technical errors. Precise framing and explicit validation points consistently improved AI output.
Result and Learning
Working Outcome
Prototype runs smoothly with real-time synergy calculation and AA–Nuc balance visuals.
Converts dense scientific tables into an interactive, readable tool.
Main Lessons
Clear structure (PRD, sitemap, tests) keeps AI aligned and results verifiable.
AI works best as an assistant within defined boundaries.
Prompt clarity is a core skill; direct requests produce consistent data.
Design tokens and constraints are essential for visual coherence.
Tool specialization matters: Warp for deployment, Cursor/Codex for fixes, ChatGPT for planning and documentation.
Reflection
Vibe coding is about creating a system where AI can build with me, not for me. Speed is useful, but structure is what makes it trustworthy. Understanding and verification remain human tasks.
Future Development
Add account authentication so users can save their ingredient combinations and compare results over time.
Integrate USDA nutrient data, allergen information, and the NOVA food-processing levels to expand context and usability.
