AI-powered meal planning — no accounts, no complexity.
Get personalized meal recommendations in seconds. Simply describe your goals, preferences, or ask any nutrition question, and let AI create a tailored plan for you.
| Feature | Description |
|---|---|
| AI-Powered | Intelligent meal recommendations using GPT-4o with contextual understanding |
| Demo Mode | Works without API key — shows sample results with clear "Demo Mode" indicators |
| Instant Results | Get complete meal plans in seconds, not hours of research |
| Goal-Focused | Weight loss, muscle gain, maintenance, energy — adapts to your needs |
| Budget Aware | Specify your budget and get meals that fit your wallet |
| Time Conscious | Quick meals for busy days, or leisurely cooking when you have time |
| Context Chips | One-click filters for vegetarian, high-protein, quick meals, and more |
| Query History | Local storage keeps your past queries — no account needed |
| Privacy First | No accounts, no tracking, no database — everything stays on your device |
No API key? No problem!
MealPilot gracefully handles missing or invalid API keys:
- Automatically falls back to realistic mock responses
- Shows a clear "Demo Mode" banner at the top of the chat
- Each response displays a "Sample Result" badge
- Perfect for testing, development, and portfolio demos
No 401 errors, no broken UI — just a smooth experience.
| Layer | Technology |
|---|---|
| Framework | Nuxt 3 (Vue 3 + Nitro) |
| Styling | Tailwind CSS v4 with custom design tokens |
| AI | OpenAI GPT-4o with structured JSON responses |
| Language | TypeScript (strict mode) |
| State | Vue Reactivity + Local Storage |
| Build | Vite |
| Server | Nitro (edge-ready) |
- Node.js 18+
- npm, pnpm, or yarn
# Clone the repository
git clone https://github.com/yourusername/mealpilot.git
cd mealpilot
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# (Optional) Add your OpenAI API key to .env
# Without it, the app runs in demo mode
# Start development server
npm run devOpen http://localhost:3000 in your browser.
| Variable | Description | Required |
|---|---|---|
OPENAI_API_KEY |
Your OpenAI API key for real AI responses | No (demo mode works without it) |
- Go to platform.openai.com/api-keys
- Create a new API key
- Add it to your
.envfile:OPENAI_API_KEY=sk-your-key-here
MealPilot/
├── assets/
│ └── css/
│ └── main.css # Global styles, Tailwind imports, animations
├── composables/
│ ├── useAI.ts # AI chat composable (messages, context, mock mode)
│ └── useHistory.ts # Local storage history management
├── layouts/
│ └── default.vue # Main app layout with header/footer
├── pages/
│ ├── index.vue # Landing page with hero & features
│ ├── chat.vue # AI chat interface with context chips
│ └── history.vue # Query history browser
├── server/
│ └── api/
│ └── ai/
│ └── chat.post.ts # AI endpoint (OpenAI + mock fallback)
├── types/
│ └── ai.ts # TypeScript interfaces for AI responses
├── public/ # Static assets
├── nuxt.config.ts # Nuxt configuration
├── package.json
├── tsconfig.json
└── .env.example # Environment template
Request:
{
"messages": [{ "role": "user", "content": "Plan a high-protein breakfast" }],
"context": {
"goal": "muscle_gain",
"time": "quick",
"dietary": ["high_protein"]
}
}Response:
{
"mock": false,
"response": {
"type": "meal_plan",
"title": "High-Protein Breakfast Ideas",
"summary": "Start your day with 30g+ protein for muscle recovery.",
"meals": [
{
"name": "Greek Yogurt Parfait",
"description": "Layer yogurt, granola, and berries",
"calories": 350,
"prepTime": "5 min",
"tags": ["quick", "protein"]
}
],
"insights": [{ "label": "Protein", "value": "32g", "trend": "up" }],
"followUp": ["Show me lunch ideas", "Add vegan options"]
}
}| Type | Description |
|---|---|
meal_plan |
Full meal suggestions with nutritional info |
insight |
Nutritional analysis and recommendations |
explanation |
Educational content about nutrition |
conversation |
General Q&A responses |
const ai = useAI()
// State
ai.messages // Ref<ChatMessage[]> - conversation history
ai.isLoading // Ref<boolean> - loading state
ai.error // Ref<string | null> - error message
ai.isMockMode // Ref<boolean> - true when using demo data
ai.context // Ref<UserContext> - user preferences
// Methods
ai.sendMessage(content: string) // Send a message
ai.setContext(context: Partial<UserContext>) // Update preferences
ai.clearConversation() // Reset chatconst history = useHistory();
history.entries; // Ref<HistoryEntry[]> - past queries
history.load(); // Load from localStorage
history.remove(id); // Delete an entry
history.clear(); // Clear all history| Token | Value | Usage |
|---|---|---|
--color-primary |
#16a34a (green-600) |
Primary actions, brand |
--color-accent |
#4285f4 (Google blue) |
Links, accents |
--color-muted |
#5f6368 |
Secondary text |
--color-surface |
#f8f9fa |
Card backgrounds |
animate-fade-in— Subtle fade with upward motionanimate-slide-up— More pronounced slide entrancestagger-1throughstagger-4— Delayed animations for sequences
.btn /* Base button */
.btn-primary /* Green primary button */
.btn-outline /* Outlined button */
.btn-ghost /* Text-only button */
.chip /* Filter chip */
.chip-active /* Selected chip state */
.card /* Content card */
.container-page /* Max-width container with padding */npm run dev # Start development server (http://localhost:3000)
npm run build # Build for production
npm run preview # Preview production build locally
npm run generate # Generate static site
npm run postinstall # Regenerate Nuxt typesnpm install -g vercel
vercelAdd OPENAI_API_KEY in Vercel's environment variables settings.
npm run build
node .output/server/index.mjsnpm run generate
# Deploy .output/public/ to any static host- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Meal plan export (PDF, calendar)
- Ingredient shopping lists
- Recipe details with instructions
- Nutritional tracking dashboard
- Meal plan sharing
- Voice input support
MIT
MealPilot — Eat smarter, live better.
Built with Nuxt 3 + Vue 3 + Tailwind CSS + OpenAI