Make an AI-Powered Diet Plan Generator Website 🤖🍽️
Build a smart website that creates personalized diet plans using artificial intelligence. Perfect for fitness coaches, nutritionists, or a profitable SaaS tool – complete source code included.
How AI Creates Diet Plans & Get Your API Key
We'll use DeepSeek AI (free tier) to generate personalized meal plans. The user fills in a simple form (age, weight, height, goal, dietary restrictions), and the website sends this data to the AI. It returns a complete daily diet plan with recipes, macros, and a grocery list – all formatted beautifully.
- Go to DeepSeek AI Platform and sign up.
- Create an API key from the dashboard. It looks like
sk-xxxxxxxxxxxxxxxx. - We'll store the key in the code (replace
YOUR_API_KEY). For production, you should move the API call to a backend proxy.
Create the User Interface (HTML/CSS/JS)
The frontend is a clean, responsive form that collects user data. Here's the complete index.html file. It includes the form, a loading spinner, and a results display area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Diet Plan Generator</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #f0fdf4; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; }
.container { background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 30px; max-width: 550px; width: 100%; }
h1 { text-align: center; color: #16A34A; margin-bottom: 5px; }
.form-group { margin-bottom: 15px; }
label { font-weight: 600; display: block; margin-bottom: 5px; }
input, select { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; }
.row { display: flex; gap: 10px; }
.row > div { flex: 1; }
button { width: 100%; padding: 14px; background: #16A34A; color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; margin-top: 10px; }
button:hover { background: #15803D; }
.result { margin-top: 20px; background: #f9fafb; padding: 20px; border-radius: 12px; white-space: pre-wrap; display: none; }
.loading { text-align: center; display: none; }
.loading i { font-size: 2rem; color: #16A34A; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
</style>
</head>
<body>
<div class="container">
<h1>🥗 AI Diet Plan Generator</h1>
<p style="text-align:center;">Fill in your details and get a personalized meal plan</p>
<div class="form-group">
<label>Age</label>
<input type="number" id="age" placeholder="e.g., 25">
</div>
<div class="row">
<div class="form-group">
<label>Weight (kg)</label>
<input type="number" id="weight" placeholder="e.g., 70">
</div>
<div class="form-group">
<label>Height (cm)</label>
<input type="number" id="height" placeholder="e.g., 170">
</div>
</div>
<div class="form-group">
<label>Goal</label>
<select id="goal">
<option value="lose weight">Lose Weight</option>
<option value="gain muscle">Gain Muscle</option>
<option value="maintain">Maintain Health</option>
</select>
</div>
<div class="form-group">
<label>Dietary Preferences</label>
<input type="text" id="diet" placeholder="e.g., vegetarian, keto, no restrictions">
</div>
<button onclick="generateDiet()">✨ Generate My Diet Plan</button>
<div class="loading" id="loading">
<i class="fa-solid fa-spinner"></i><p>AI is crafting your plan...</p>
</div>
<div class="result" id="result"></div>
</div>
<script>
const API_KEY = "YOUR_DEEPSEEK_API_KEY";
async function generateDiet() {
const age = document.getElementById('age').value;
const weight = document.getElementById('weight').value;
const height = document.getElementById('height').value;
const goal = document.getElementById('goal').value;
const diet = document.getElementById('diet').value || "no restrictions";
document.getElementById('loading').style.display = 'block';
document.getElementById('result').style.display = 'none';
const prompt = `Create a detailed, healthy daily diet plan for a ${age}-year-old person, weighing ${weight}kg, height ${height}cm, with the goal to ${goal}. Dietary restrictions: ${diet}. Include breakfast, lunch, dinner, 2 snacks, approximate calories and macros (protein, carbs, fat), and a short grocery list. Format the output in plain HTML using <h3> for meals and <ul> for ingredients.`;
try {
const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: 'deepseek-chat',
messages: [{ role: 'user', content: prompt }],
temperature: 0.7,
max_tokens: 1200
})
});
const data = await response.json();
const plan = data.choices[0].message.content;
document.getElementById('result').innerHTML = plan;
document.getElementById('result').style.display = 'block';
} catch (error) {
document.getElementById('result').innerHTML = '<p style="color:red;">Error generating plan. Check your API key and try again.</p>';
document.getElementById('result').style.display = 'block';
} finally {
document.getElementById('loading').style.display = 'none';
}
}
</script>
</body>
</html>
Replace YOUR_DEEPSEEK_API_KEY with your actual API key. The form sends the user's details to DeepSeek, which returns a beautifully formatted diet plan directly in the browser.
Make It Production-Ready with a Backend Proxy
To protect your API key, create a tiny backend. Here's a Node.js/Express version (or use Python Flask). Deploy it on a free service like Render or Vercel.
const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.use(express.json());
const API_KEY = process.env.DEEPSEEK_API_KEY;
app.post('/generate-diet', async (req, res) => {
const prompt = req.body.prompt;
const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: 'deepseek-chat',
messages: [{ role: 'user', content: prompt }],
temperature: 0.7,
max_tokens: 1200
})
});
const data = await response.json();
res.json({ plan: data.choices[0].message.content });
});
app.listen(3000, () => console.log('Proxy running on port 3000'));
Then change your frontend fetch URL to https://your-proxy.com/generate-diet and remove the API key from the client. Now your key is safe.
One‑Click Deployable Source Code
For a quick start, you can use the single‑file HTML version from Step 2. It works immediately after adding your API key. However, for a more secure and scalable approach, use the proxy method.
All files are also available in a GitHub‑style structure that you can deploy to Render or Vercel in seconds.
Host Your Diet Generator for Free
- Static HTML: Upload the
index.htmlto GitHub Pages (enable Pages in repository settings). - With Backend Proxy: Deploy the Node.js/Express server to Render (free tier) and the frontend to Netlify or Vercel.
- All‑in‑one: Use Glitch or Replit to host both frontend and backend together.
All these platforms offer free SSL and custom domain support. Your diet planner will be live in minutes.
How to Earn Money from Your AI Diet Tool
- Google AdSense: Place ads on the page. Health & fitness topics have high CPM.
- Premium Plans: Offer more detailed plans, grocery lists, or PDF downloads for $4.99/month.
- Affiliate Marketing: Recommend supplements, kitchen gadgets, or meal delivery services.
- SaaS API: Charge other websites to use your diet generation API.
Even a simple, free‑to‑use tool can attract thousands of visitors and generate substantial passive income through ads alone.
Launch Your AI Diet Generator Checklist
- DeepSeek API key obtained
- index.html created and key replaced
- (Optional) Backend proxy set up
- Site deployed to GitHub Pages or Render
- Tested with various user inputs
- AdSense or payment system integrated
- Social media promotion started
Key Takeaways
🥦 Build Your Own AI Diet Planner Now
Copy the code, get a free DeepSeek API key, and launch a personalized nutrition tool today. It's a fantastic project for your portfolio or a new income stream.
Join the tech debate...
We love a good discussion, but please keep it respectful and relevant to the topic. Vulgarity, personal attacks, and spam will be removed. Let’s keep the community smart, helpful, and welcoming to all tech fans!