copilotkit--copilotkit/community/demos_2025/meal-planner.md

🚀 AI Meal Planner & Recipe Generator

📝 Intelligent Ingredient to Recipe Assistant

This project tackles the everyday problem of deciding what to cook with the ingredients you already have.
It allows users to add ingredients manually or using CopilotKit AI commands, and instantly generates 3–5 structured recipes that match the provided items.
Each recipe is beautifully displayed as a card with title, description, ingredients, steps, time, calories, and tags.

🛠️ Technologies Being Used

List of technologies, tools, and frameworks powering this project:

• Frameworks: Next.js 14, React 18
• Styling: Tailwind CSS, Radix-UI, Glassmorphism effects
• AI Runtime: Copilot Cloud Runtime (Direct LLM Calls)
• Developer Tools: CopilotKit UI (@copilotkit/react-ui, @copilotkit/react-core)
• Language: TypeScript

🌐 App Link

Meal Planner

🎯 Twitter Post

Post

📸 Screenshot

🙋‍♂️ List your repo here

GitHub Repository

🍽️ Core Functionality

1. Add Ingredients

   • Add items manually (like tomato, cheese, pasta)
   • Or use CopilotKit to generate ingredients via natural prompts

2. Generate Recipes

   • AI suggests 3–5 recipes matching your ingredients.

   • Each recipe strictly follows this JSON schema:

     {
       "title": "string",
       "description": "string",
       "ingredientsUsed": [],
       "missingIngredients": [],
       "steps": [],
       "timeMinutes": 0,
       "tags": [],
       "calories": 0
     }
     

3. View Recipe Cards

   • Recipes appear instantly as interactive cards
   • Includes cooking steps, total time, tags, and calorie estimate.

Created by Raj Gupta