Mise AI - Your Personal AI Chef

Mise AI is a private, invite-only family app 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.

It is a Next.js application with Supabase authentication and database management and OpenRouter for AI. There is no public sign-up and there are no payments: people join by invitation from the Supabase dashboard.

---

🚀 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.
• Safety Caps: Postgres-based usage caps (one family plan for every account) keep AI costs bounded.
• 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 OpenRouter. 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 usage caps. Every account uses the family row; the older free, plus and pro rows are kept but unused.

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: model configuration
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: Every account uses the same AI model (OPENROUTER_PRO_TIER_MODEL, default Gemini 3 Flash Preview). OPENROUTER_FALLBACK_MODEL is used if it fails.

Note: Accounts are invite-only. Supabase public sign-ups are turned off, and invites are sent from the Supabase dashboard. See docs/auth-email-confirmation.md.

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.