Build an AI Cooking Assistant App - Complete SDK Tutorial

Eiliya · March 9, 2026 · 5 min read · Development

Build an AI Cooking Assistant App - Complete SDK Tutorial

Learn how to build your own AI cooking assistant using the AI Pass SDK. This tutorial covers everything from OAuth2 setup to generating personalized recipes and meal plans.

What You'll Build

An AI-powered cooking assistant that can:

Generate custom recipes based on ingredients
Adapt recipes for dietary restrictions (vegan, keto, gluten-free, etc.)
Create weekly meal plans
Generate shopping lists
Provide cooking instructions and tips

Prerequisites

Basic JavaScript/HTML knowledge
A web server or hosting platform
AI Pass account (free signup)

Step 1: Sign Up for AI Pass

Go to AI Pass and create a free account
Verify your email address
You'll get $1 free credit on signup - enough to test the full functionality

Step 2: Get Your Client ID from Developer Dashboard

Navigate to the Developer Dashboard at /panel/developer.html
Click on OAuth2 Clients in the sidebar
Click "Create New Client" and name it (e.g., "My Cooking Assistant")
Copy your Client ID - it looks like client_ODyf...

Important: The Client ID comes from the OAuth2 Clients page, NOT from your app slug.

Step 3: Initialize the SDK

Add the AI Pass SDK to your HTML:

<script src="https://aipass.one/aipass-sdk.js"></script>

Initialize with your Client ID:

const aipass = new AIPass({
  clientId: 'YOUR_CLIENT_ID',  // Replace with your OAuth2 Client ID
  requireLogin: true  // Shows login screen automatically
});

Why requireLogin: true? This eliminates the need to build your own authentication UI. When users interact with your app, they'll see a secure AI Pass login screen, get their $1 free credit, and start using your app immediately.

Step 4: Generate a Recipe

Here's how to generate a custom recipe based on user ingredients:

async function generateRecipe(ingredients, dietaryRestrictions = '') {
  const prompt = `Generate a recipe using these ingredients: ${ingredients}. ${dietaryRestrictions ? `Dietary restrictions: ${dietaryRestrictions}` : ''} Include ingredients list, step-by-step instructions, cooking time, and serving size.`;

  const response = await aipass.generateCompletion({
    model: 'openai/gpt-4.1-mini',
    messages: [
      { role: 'system', content: 'You are a professional chef and recipe developer. Create clear, detailed recipes that home cooks can follow.' },
      { role: 'user', content: prompt }
    ],
    temperature: 1,  // For creative recipe variations
    max_tokens: 16000  // Allow detailed recipes
  });

  const recipe = response.choices[0].message.content;
  return recipe;
}

// Example usage
generateRecipe('chicken, rice, bell peppers, onions', 'gluten-free, dairy-free')
  .then(recipe => console.log(recipe))
  .catch(err => console.error('Error:', err));

Step 5: Create a Meal Plan

Generate a weekly meal plan with shopping list:

async function generateMealPlan(dietaryPreferences, servings) {
  const prompt = `Create a 7-day meal plan for ${servings} people. ${dietaryPreferences ? `Preferences: ${dietaryPreferences}` : ''} Include breakfast, lunch, and dinner for each day. Then generate a complete shopping list organized by category (produce, dairy, meat, pantry items).`;

  const response = await aipass.generateCompletion({
    model: 'openai/gpt-4.1-mini',
    messages: [
      { role: 'system', content: 'You are a nutritionist and meal planning expert. Create balanced, nutritious meal plans.' },
      { role: 'user', content: prompt }
    ],
    temperature: 1,
    max_tokens: 16000
  });

  return response.choices[0].message.content;
}

Step 6: Build the UI

Here's a simple UI to get started:

<div class="cooking-assistant">
  <h2>AI Cooking Assistant</h2>
  
  <div class="input-section">
    <label>What ingredients do you have?</label>
    <textarea id="ingredients" placeholder="e.g., chicken, rice, tomatoes, garlic"></textarea>
    
    <label>Dietary restrictions (optional)</label>
    <input type="text" id="dietary" placeholder="e.g., vegan, gluten-free, keto">
    
    <button onclick="generateRecipe()">Generate Recipe</button>
  </div>
  
  <div id="recipe-output"></div>
</div>

<script>
async function generateRecipe() {
  const ingredients = document.getElementById('ingredients').value;
  const dietary = document.getElementById('dietary').value;
  const output = document.getElementById('recipe-output');
  
  output.innerHTML = '<p>Generating your recipe...</p>';
  
  try {
    const recipe = await window.aipass.generateCompletion({
      model: 'openai/gpt-4.1-mini',
      messages: [
        { role: 'system', content: 'You are a professional chef. Create clear, detailed recipes.' },
        { role: 'user', content: `Generate a recipe using: ${ingredients}. ${dietary ? `Dietary: ${dietary}` : ''} Include ingredients, instructions, time, and servings.` }
      ],
      temperature: 1,
      max_tokens: 16000
    });
    
    output.innerHTML = `<pre>${recipe.choices[0].message.content}</pre>`;
  } catch (error) {
    output.innerHTML = `<p>Error: ${error.message}</p>`;
  }
}
</script>

Step 7: Embed Your App

Want to embed your cooking assistant on your own website? After testing it on AI Pass, use the </> button at the bottom-right of your app to get the iframe code. Copy and paste it anywhere - your blog, Shopify store, or personal site.

Monetize Your App

Earn 50% commission on every API call made through your app. When users generate recipes and meal plans, you generate passive income. No payment processing required - AI Pass handles everything.

Complete Example

Here's a complete working example:

<!DOCTYPE html>
<html>
<head>
  <title>AI Cooking Assistant</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
    textarea, input { width: 100%; padding: 10px; margin: 10px 0; }
    button { background: #4CAF50; color: white; padding: 12px 24px; border: none; cursor: pointer; font-size: 16px; }
    button:hover { background: #45a049; }
    #recipe-output { margin-top: 20px; padding: 20px; background: #f5f5f5; white-space: pre-wrap; }
  </style>
</head>
<body>
  <h1>🍳 AI Cooking Assistant</h1>
  <p>Enter your ingredients and dietary preferences to get personalized recipes.</p>
  
  <label>Ingredients you have:</label>
  <textarea id="ingredients" rows="3" placeholder="e.g., chicken, rice, bell peppers, onions, garlic"></textarea>
  
  <label>Dietary restrictions (optional):</label>
  <input type="text" id="dietary" placeholder="e.g., vegan, gluten-free, dairy-free">
  
  <button onclick="generateRecipe()">Generate Recipe ✨</button>
  
  <div id="recipe-output"></div>
  
  <script>
    const aipass = new AIPass({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });
    
    async function generateRecipe() {
      const ingredients = document.getElementById('ingredients').value;
      const dietary = document.getElementById('dietary').value;
      const output = document.getElementById('recipe-output');
      
      if (!ingredients) {
        output.innerHTML = '<p>Please enter some ingredients!</p>';
        return;
      }
      
      output.innerHTML = '<p>🍽️ Generating your recipe...</p>';
      
      try {
        const response = await aipass.generateCompletion({
          model: 'openai/gpt-4.1-mini',
          messages: [
            { role: 'system', content: 'You are a professional chef. Create clear, detailed recipes with ingredients, step-by-step instructions, cooking time, and serving size.' },
            { role: 'user', content: `Generate a creative recipe using these ingredients: ${ingredients}. ${dietary ? `Accommodate these dietary restrictions: ${dietary}.` : ''} Make it delicious and easy to follow.` }
          ],
          temperature: 1,
          max_tokens: 16000
        });
        
        output.innerHTML = response.choices[0].message.content;
      } catch (error) {
        output.innerHTML = `<p>Error: ${error.message}</p>`;
      }
    }
  </script>
</body>
</html>

Next Steps

Replace YOUR_CLIENT_ID with your actual Client ID from the Developer Dashboard
Test your app on AI Pass
Add more features (meal planning, shopping lists, recipe history)
Share your app and start earning 50% commission

Need Help?

Developer Dashboard: /panel/developer.html
SDK Documentation: https://aipass.one/aipass-sdk.js
Live Example: Try the Cooking Assistant

Start building your AI cooking assistant today and tap into the growing AI-powered cooking market!

Build an AI Cooking Assistant App - Complete SDK Tutorial

Build an AI Cooking Assistant App - Complete SDK Tutorial

What You'll Build

Prerequisites

Step 1: Sign Up for AI Pass

Step 2: Get Your Client ID from Developer Dashboard

Step 3: Initialize the SDK

Step 4: Generate a Recipe

Step 5: Create a Meal Plan

Step 6: Build the UI

Step 7: Embed Your App

Monetize Your App

Complete Example

Next Steps

Need Help?

Related Apps