Mise AI - Your Personal AI Chef

Mise AI is a modern SaaS application that solves the eternal "What's for dinner?" problem. By leveraging Artificial Intelligence, it generates custom recipes based on user cravings, organizes them into a weekly meal plan, and automatically generates consolidated grocery lists.

This project is built as a highly scalable, production-ready Next.js application, featuring robust authentication, database management, and AI integration.

---

🚀 Key Features

• AI Recipe Generation: Generate unique, detailed recipes by selecting cuisine, meal type, and main ingredients. Powered by OpenRouter.
• Interactive Weekly Planner: specialized drag-and-drop interface to schedule meals for the week.
• Smart Grocery Lists: Automatically aggregates ingredients from your weekly plan into a sorted shopping list.
• User Collections: Save and organize favorite generated recipes.
• Rate Limiting System: Custom Postgres-based rate limiting to manage AI costs for free users.
• Responsive UI: Beautiful, mobile-first interface built with Tailwind CSS and Motion.

---

🛠 Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Database & Auth: Supabase (PostgreSQL)
• AI Integration: OpenRouter
• State Management: Zustand (for client-side shopping cart/recipe state)
• Animations: Motion (formerly Framer Motion)
• Icons: Lucide React

---

🏗 Architecture & Development

Frontend Architecture

The application uses the Next.js 16 App Router.

• Server Components: Used for initial data fetching (e.g., retrieving saved collections) and layout shell to ensure optimal SEO and performance.
• Client Components: Used for highly interactive elements like the RecipeGenerator (form state, animations), WeeklyMeals (drag-and-drop), and GroceryList.
• State Management: Zustand is used for global client state that needs to persist across navigation but doesn't necessarily need an immediate database write (like the current generated recipe being viewed or transient UI states).

Backend Layer

The "backend" is implemented using Next.js API Routes (src/app/api/) which act as a secure proxy between the client and external services.

• /api/generate-recipe: Handles the prompt engineering and communication with OpenAI. This keeps API keys secure on the server.
• /api/refine-recipe: Refines an existing recipe based on user instructions.
• /api/rate-limit: Checks and updates user rate limits before allowing expensive AI operations.

Database & Security (Supabase)

The project uses Supabase for PostgreSQL and Authentication.

Schema Overview:

• recipes: Stores generated recipe JSON data.
• collections: Links users to saved recipes.
• weekly_plan: Maps recipes to specific days/slots for a user.
• user_usage_counters: Tracks usage for AI generation and refinement.
• plan_entitlements: Defines limits per subscription plan.

Security (RLS): Row Level Security (RLS) policies are strictly enforced. Users can only SELECT, INSERT, UPDATE, or DELETE rows where user_id matches their authenticated UUID.

Usage Tracking Implementation: To prevent abuse and manage costs, PostgreSQL RPC functions are used:

• check_and_increment_usage: Atomically checks weekly, per-minute, and per-hour limits before incrementing.
• get_usage_status: Returns current usage counts and remaining limits.
• record_usage_tokens: Records token consumption after AI requests.
• Reset: Weekly counters reset based on user timezone (Monday 00:00).

---

💻 Local Development Setup

1. Prerequisites

• Node.js 18+ and npm/yarn/pnpm/bun.
• A Supabase project.
• An OpenRouter API Key.

2. Clone & Install

git clone <repository-url>
cd recipe-gen-app
npm install

3. Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_for_admin_tasks
OPEN_ROUTER_API_KEY=your_openrouter_api_key

# Optional: Tier-based model configuration
OPENROUTER_FREE_TIER_MODEL=google/gemini-2.5-flash-lite
OPENROUTER_PLUS_TIER_MODEL=google/gemini-2.5-flash
OPENROUTER_PRO_TIER_MODEL=google/gemini-3-flash-preview
OPENROUTER_FALLBACK_MODEL=google/gemini-2.5-flash-lite

Note: SUPABASE_SERVICE_ROLE_KEY is required for the rate-limit check API route which needs to bypass RLS to reliably increment counters via RPC.

Note: The app also supports OPENROUTER_API_KEY (without the underscore) for compatibility with the OpenRouter SDK docs.

Note: Different subscription tiers use different AI models. Free users get a lighter model, while Plus and Pro users get faster, higher-quality models.

4. Database Setup

The schema is managed with the Supabase CLI. Migrations live in supabase/migrations/, and supabase/seed.sql adds fake test data for local use. See docs/supabase-migrations.md for setup (npx supabase start, then npx supabase db reset).

The SQL files in src/lib/supabase/ are historical and may be out of date. Do not run them. The baseline migration replaces them.

5. Run Development Server

npm run dev

Open http://localhost:3000 with your browser.

---

📝 License

This project is proprietary software. All rights reserved.