DEV Community

Cover image for Meal.io | AI-Weekly Meal Planner
Youssef Ahmed
Youssef Ahmed

Posted on

Meal.io | AI-Weekly Meal Planner

#devchallenge #gemmachallenge #gemma

Gemma 4 Challenge: Build With Gemma 4 Submission

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

Mealio is a comprehensive, AI-driven meal planning platform and culinary assistant that eliminates the daily friction of deciding what to eat, tracking nutrition, and grocery shopping.

Managing dietary restrictions, calculating macros, and manually drafting grocery lists is time-consuming and often overwhelming. Mealio solves this by taking a user’s specific health goals, allergies, and taste preferences (via the MealPreferencesForm), and instantly generating highly personalized, multi-day meal plans. Beyond static plans, Mealio features an interactive culinary assistant (AgentChat) that users can converse with to swap out ingredients, ask for recipe step-by-step guidance, or request snacks based on what's currently in their fridge. The platform seamlessly connects this AI generation to a user-friendly dashboard, recipe viewer, and automated shopping list generator.

Demo

Deployed Version: Meal.io | Your AI Meal Planner

Code

Github Repository:

How I Used Gemma 4

Mealio’s core intelligence is entirely powered by Gemma 4. Specifically, I chose the Gemma 4 31B Dense model to drive the backend logic (handled in mealPlanController.js and agentController.js).

Why the 31B Dense model was the perfect fit:

  1. Complex Reasoning & JSON Structuring: Generating a cohesive, 7-day meal plan that strictly adheres to complex user constraints (e.g., high-protein, gluten-free, under 2000 calories) requires advanced reasoning. The 31B Dense model excels at instruction following and dependably outputs the deeply nested, structured JSON (raw_plan_debug.json) that the React frontend requires to render the AnalysisPage, RecipesPage, and ShoppingPage without breaking the UI.
  2. Culinary Creativity & Accuracy: When users chat with the AgentChat component to modify a recipe on the fly, the model needs a deep understanding of ingredient substitutions and flavor profiles. The 31B Dense model provides frontier-level knowledge, ensuring substitutions actually taste good and remain nutritionally balanced.
  3. Large Context Window: The 256K context window of the 31B model allows the backend to pass the user's complete dietary history, current meal plan, and past feedback into a single prompt, ensuring the AI agent acts as a truly personalized, context-aware nutritionist.

Top comments (0)