the meal planner

• 

  recipes page

• 

  pantry page

• 

  shopping page

• 

  weekly plan page

Inspiration

First and foremost, I have been experimenting with AI. One of my main goals was to see how much work I could realistically get done with AI assistance. I pitched the idea, tested the website, reviewed changes, and repeatedly stripped away unnecessary bloat.

I decided to build a meal planner because eating well and staying consistent can be difficult, whether you are trying to gain weight, lose weight, or simply eat better. Automating parts of meal planning can make that process much easier to maintain.

What it does

Meal Planner allows users to plan breakfast, lunch, and dinner in advance. Meals are linked to recipes, while recipes can also be stored independently for later use.

Users can keep track of pantry inventory, calculate what ingredients they still need, and generate a shopping list based on their planned meals.

All of these core functions are also exposed to an AI agent through WebMCP. An agent can read recipes, inspect pantry inventory, plan multiple meals, update stock, calculate shopping requirements, and help research prices or promotions based on a location the user explicitly provides.

The application also supports importing and exporting meal data between devices.

How we built it

The application was largely vibe-coded. I pitched the meal-planning concept and used ChatGPT to help implement it.

My role was defining the product, testing the implementation, making architectural decisions, reviewing changes, and removing features that made the application more complicated without making it more useful.

The final application is deliberately simple: HTML, CSS, vanilla JavaScript, browser localStorage, and WebMCP. It runs as a static site with no required backend or database.

Challenges we ran into

Our original project idea was significantly more ambitious. Because of time constraints and implementation complexity, we abandoned it and focused on building something smaller that worked well.

Another challenge was designing the application so that the same functionality could be used by both humans and AI agents without building two separate systems.

The final application runs entirely as a static site. User data is stored locally in the browser, and no third-party API is required for the core functionality.

Accomplishments that we're proud of

The entire application was built in one day.

Despite the short development time, it includes recipe storage, meal planning, pantry management, shopping-list generation, import/export, and 20 WebMCP tools that expose the application to AI agents.

What we learned

Vibe-coding works, but only if you understand what you are trying to build.

AI can produce a large amount of implementation very quickly, but a human still needs to define the goal, make architectural decisions, test the result, identify unnecessary complexity, and decide what should actually ship.

For this project, having a human in the loop was indispensable.

What's next for Meal Planner

With more time and resources, I would expand the agent integration, improve local price and promotion discovery, add better cross-device synchronization, and continue improving the meal-planning workflow.

The core idea would remain the same: let the website manage structured meal data while an AI agent handles the repetitive planning and orchestration.

Built With

• chatgpt
• css
• github
• html
• javascript
• localstorage
• render
• webmcp