AI
Pass

Build an AI Recipe from Fridge App - Complete SDK Tutorial

Eiliya · March 11, 2026 · 2 min read · Development

Build an AI Recipe from Fridge App - Complete SDK Tutorial

Learn how to build an AI-powered recipe generator with the AI Pass SDK. Create delicious recipes from ingredients users have on hand.

What You'll Build

A recipe generator app that:

  • Creates recipes from ingredient lists
  • Handles dietary preferences and restrictions
  • Provides complete cooking instructions
  • Generates multiple recipe options

Prerequisites

  • Basic HTML/JavaScript
  • AI Pass account
  • 5 minutes

Step 1: Get API Credentials

  1. Sign up at AI Pass — $1 free credit
  2. Go to Developer Dashboard → OAuth2 Clients
  3. Create client and copy Client ID

Step 2: Initialize SDK

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

const aipass = new AIPass({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true
});

Step 3: Generate Recipes

async function generateRecipes(ingredients, dietary = '', mealType = '') {
  const r = await aipass.apikey.v1.chat.completions({
    model: 'openai/gpt-4.1-mini',
    messages: [
      {
        role: 'system',
        content: `You are a creative chef. Generate 3-5 unique recipes using only these ingredients: ${ingredients.join(', ')}. ${dietary ? `Dietary restriction: ${dietary}.` : ''} ${mealType ? `Meal type: ${mealType}.` : ''} 
        
For each recipe provide:
1. Recipe name
2. Prep time
3. Cook time  
4. Ingredients with quantities
5. Step-by-step instructions
6. Serving size

Format as clean markdown. Be creative and practical.`
      },
      {
        role: 'user',
        content: `What can I make with these ingredients?`
      }
    ],
    temperature: 1,
    max_tokens: 16000
  });

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

Step 4: Build UI

<!DOCTYPE html>
<html>
<head>
  <title>AI Recipe from Fridge</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: system-ui; max-width: 800px; margin: 40px auto; padding: 20px; }
    input { width: 100%; padding: 12px; margin: 10px 0; }
    select { width: 100%; padding: 12px; margin: 10px 0; }
    button { padding: 12px 24px; background: #FF6B35; color: white; border: none; cursor: pointer; }
    #results { margin-top: 20px; padding: 20px; background: #FFF8F0; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>AI Recipe from Fridge</h1>
  <p>Enter your ingredients and get instant recipes</p>
  
  <input type="text" id="ingredients" placeholder="e.g., eggs, cheese, tomatoes, pasta">
  <select id="dietary">
    <option value="">No dietary restriction</option>
    <option value="vegan">Vegan</option>
    <option value="vegetarian">Vegetarian</option>
    <option value="gluten-free">Gluten-free</option>
    <option value="keto">Keto</option>
  </select>
  <select id="mealType">
    <option value="">Any meal</option>
    <option value="breakfast">Breakfast</option>
    <option value="lunch">Lunch</option>
    <option value="dinner">Dinner</option>
    <option value="snack">Snack</option>
  </select>
  
  <button onclick="generate()">Get Recipes</button>
  
  <div id="results"></div>

  <script>
    const aipass = new AIPass({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });

    async function generate() {
      const ingredientsInput = document.getElementById('ingredients').value;
      const ingredients = ingredientsInput.split(',').map(i => i.trim()).filter(i => i);
      const dietary = document.getElementById('dietary').value;
      const mealType = document.getElementById('mealType').value;

      if (ingredients.length === 0) {
        alert('Please enter at least one ingredient');
        return;
      }

      const result = await generateRecipes(ingredients, dietary, mealType);
      document.getElementById('results').innerHTML = result.replace(/\n/g, '<br>');
    }

    async function generateRecipes(ingredients, dietary = '', mealType = '') {
      const r = await aipass.apikey.v1.chat.completions({
        model: 'openai/gpt-4.1-mini',
        messages: [
          {
            role: 'system',
            content: `Generate 3-5 creative recipes using: ${ingredients.join(', ')}. ${dietary ? `Dietary: ${dietary}.` : ''} ${mealType ? `Meal type: ${mealType}.` : ''} Provide name, times, ingredients, instructions, servings. Markdown format.`
          },
          {
            role: 'user',
            content: 'What can I make?'
          }
        ],
        temperature: 1,
        max_tokens: 16000
      });

      return r.choices[0].message.content;
    }
  </script>
</body>
</html>

Revenue: 50% Commission

Earn 50% commission on every API call.

Cost

~$0.002 per recipe batch

Live Demo

AI Recipe from Fridge

Related Apps

recipe-from-fridge