Recipe Assistant Bot - Project Documentation

📖 Project Overview

Recipe Assistant Bot is a comprehensive AI-powered platform designed to streamline cooking assistance and enhance culinary experiences. It features recipe suggestions, ingredient substitutions, cooking tips, and meal planning assistance. Built with Python and Flask, this project offers a modern, responsive design and robust backend logic. Perfect for food apps and cooking platforms looking to provide AI-driven recipe recommendations and developers interested in building real-world AI applications.

⚡ Quick Facts

🎯 Type: AI Cooking Assistant System

🤖 Key Features: Recipe Suggestions, Ingredient Substitutions, Cooking Tips, Meal Planning

⚡ Setup Time: ~5 minutes

📦 Backend: Python with Flask

🎨 Frontend: HTML5, Vanilla CSS, JS

🧠 AI Model: OpenAI GPT-4o / Claude 3.5

📱 Platform: Web-based Responsive UI

🔧 Technologies: Python, Flask, SQLite

25+

Files

5000+

Lines of Code

20+

Advanced Features

200K

Context Tokens

Developer: Molla Samser | Website: rskworld.in | Email: help@rskworld.in

Difficulty Level: Beginner/Intermediate - Designed for developers learning web development with Flask, recipe management, and AI integration.

✨ Features

Core Features

🍳 Recipe Suggestions

Get personalized recipe recommendations based on ingredients, cuisine preferences, and dietary restrictions with detailed instructions.

🔄 Ingredient Substitutions

Find smart alternatives for missing ingredients with detailed substitution suggestions and cooking tips.

🤖 AI Cooking Assistant

Intelligent chatbot that provides cooking tips, answers cooking questions, and helps with meal planning.

📋 Meal Planning

Plan your meals efficiently with weekly schedules, batch cooking recommendations, and nutrition tracking.

Advanced Features

📦 Inventory Tracking

Track ingredients with expiry dates, quantities, and storage locations for better meal planning.

🔍 Smart Search & Filters

Search recipes by ingredients, cuisine, or dietary tags (Vegetarian, Vegan, Gluten-free, Keto) with real-time filtering.

🎤 Voice Assistant

Control the bot with voice commands for hands-free cooking assistance and recipe instructions.

📸 Image Recognition

Generate recipes from food images and identify ingredients from photos for smart recipe suggestions.

📊 Nutrition Tracking

Track daily nutrition goals, recipe nutrition information, and meal prep progress for healthy eating.

🏆 Cooking Challenges

Participate in cooking challenges, earn achievements, and track your cooking journey with gamification.

🛠️ Technologies

Python

Powerful core language for backend logic and AI processing.

Language

Flask

Lightweight WSGI web application framework for Python.

Framework

Recipe APIs

Optional integration with Spoonacular API for real recipe data and nutrition information.

API

SQLite

Reliable, self-contained database engine for local storage.

Database

OpenAI / Claude

Large Language Models for the intelligent dining assistant.

AI API

Vanilla CSS

Modern glassmorphism UI built without heavy frameworks.

Styling

📦 Installation Guide - Step by Step

⏱️ Installation Time: ~5 minutes

Follow these simple steps to set up the Recipe Assistant Bot on your local environment.

📋 Prerequisites

🐍 Python 3.9+

Python 3.9 or higher is recommended for performance and compatibility.

Download: Python

🌐 SQLite

Pre-installed with Python, no separate database setup required.

🌐 AI API Key

Get your API key from OpenAI or Anthropic (required for AI Chat features).

🌐 Web Browser

A modern browser (Chrome, Firefox, Safari) for the Admin Dashboard.

🚀 Step-by-Step Installation

📌 Step 1: Download or Clone the Project

Option A: Download ZIP

Download the project ZIP file from the repository
Extract it to your desired location (e.g., C:\Projects\recipe-assistant-bot)
Navigate to the extracted folder

Option B: Clone with Git

git clone https://github.com/rskworld/recipe-assistant-bot.git
cd recipe-assistant-bot

✅ Step 2: Install Dependencies

Install the required Python packages using pip.

# Install required packages
pip install flask flask-cors requests python-dotenv

🔑 Step 3: Set Up API Keys

Configure your AI API key in the environment file.

Copy .env.example to .env
Edit .env and add your keys:
- OPENAI_API_KEY=sk-your-openai-key-here
Get your OpenAI API key from OpenAI Platform

🚀 Step 4: Run the Application

Start the Flask application to launch the recipe assistant system.

# Run the application
python app.py

🌐 Step 5: Open Frontend

Open the HTML file in your browser or use a local web server.

Method 1: Direct File Opening

Open index.html in your browser

Method 2: Using Local Web Server (Recommended)

# In a new terminal, start HTTP server
python -m http.server 8000

# Then open: http://localhost:8000

✅ Installation Complete!

Congratulations! You've successfully set up the Recipe Assistant Bot. The system is ready with all features including:

Interactive AI Chat for cooking assistance and recipe recommendations
Recipe Suggestions with detailed instructions and nutrition info
Ingredient Substitutions for missing ingredients
Meal Planning with weekly schedules and batch cooking
Inventory Tracking for ingredient management
Responsive and modern UI

Next Steps:

Access the web interface at http://localhost:5000
Ask for recipe suggestions to test AI functionality
Interact with the AI bot to test cooking tips and ingredient substitutions
Try meal planning features and inventory tracking

🔧 Troubleshooting Installation

❌ database Error

Solution: Ensure models.py is correctly configured and the initial migration has run. SQLite will auto-create the .db file on first run.

❌ Flask Server Not Starting

Solution: Check Python version (3.9+), verify dependencies (Flask, SQLAlchemy) are installed. Ensure port 5000 is not blocked.

❌ API Key Issues

Solution: Verify your .env file has a valid OpenAI/Claude key. The AI Dining Assistant requires this for natural language processing.

❌ Frontend Connection

Solution: Verify the frontend is pointing to http://localhost:5000. Check CORS settings in app.py if accessing from a different domain.

📚 Usage Guide - Step by Step

🎯 Getting Started with Recipe Assistant Bot

Step-by-Step Usage Instructions

📝 Step 1: Start Backend Server

Run the Flask application: python app.py
Check if the server is up at http://localhost:5000
The database (SQLite) will be initialized automatically on the first request.

🌐 Step 2: Open Recipe Assistant Interface

Access the web interface in your browser.
You should see the recipe assistant home page with sections for:
- Hero Section: Recipe assistant introduction
- Recipe Section: Browse recipe categories and suggestions
- Chat Interface: Interactive AI cooking assistant
- Quick Actions: Recipe suggestions, substitutions, tips

🍳 Step 3: Get Recipe Suggestions

Type your cooking query in the chat interface.
Ask for recipes like "Give me a chicken recipe" or "Vegetarian pasta recipes".
The AI will provide detailed recipe suggestions with ingredients and instructions.
You can ask for variations, substitutions, or cooking tips.

🤖 Step 4: Interact with AI Assistant

Click the chat icon to ask questions like:

"What can I substitute for eggs?"
"Give me some baking tips"
"How do I cook rice perfectly?"
"Plan a week of vegetarian meals"

📊 Features Usage

🍳 Recipe Suggestions

Get personalized recipe recommendations based on ingredients, cuisine preferences, and dietary restrictions.

🔄 Ingredient Substitutions

Find smart alternatives for missing ingredients with detailed substitution suggestions.

🤖 AI Assistance

Get personalized cooking tips, recipe recommendations, and quick answers to cooking questions.

📋 Meal Planning

Plan your meals efficiently with weekly schedules, batch cooking, and nutrition tracking.

🤖 Claude API

Start chatting and Claude will respond with advanced reasoning and helpful answers

📎 File Upload

Upload images or documents for Claude to analyze and discuss

🎤 Voice I/O

Use microphone for voice input and text-to-speech for responses

💬 Multiple Sessions

Create separate chat sessions for different topics or projects

🎨 Code Highlighting

Code blocks automatically rendered with syntax highlighting

📝 Markdown

Rich text formatting with full markdown support

⚡ Streaming

Enable streaming for real-time token-by-token responses

📊 Usage Tracking

Monitor token usage, API costs, and conversation statistics

🚀 Advanced Features & Capabilities

The Recipe Assistant Bot includes advanced AI capabilities, recipe management, and cooking assistance tools. Here's what you can do:

🧠 Intelligent Recipe Recommendations

Our AI Assistant uses natural language processing to understand your cooking preferences and recommend the perfect recipes based on available ingredients, dietary needs, and cuisine preferences.

📊 Cooking Analytics

Track your cooking journey, favorite recipes, meal planning patterns, and nutrition goals to optimize your cooking experience and healthy eating habits.

📱 Responsive UI

The system is fully optimized for mobile devices, allowing you to access recipes and cooking tips on-the-go with a premium smooth experience.

💻 Code Examples

Flask Backend - Recipe Chat Route

                    # Python Flask backend - routes.py
from flask import Flask, render_template, request, jsonify
from app.chatbot import RecipeAssistant

app = Flask(__name__)
assistant = RecipeAssistant()

@app.route('/api/chat', methods=['POST'])
def chat():
    data = request.json
    message = data.get('message', '')
    response = assistant.get_response(message)
    return jsonify({
        'status': 'success',
        'response': response
    })

@app.route('/api/recipes', methods=['GET'])
def get_recipes():
    query = request.args.get('query', '')
    recipes = assistant.search_recipes(query)
    return jsonify({'recipes': recipes})

if __name__ == '__main__':
    app.run(debug=True)
                

Recipe Assistant Chatbot

                    # Recipe Assistant - chatbot.py
class RecipeAssistant:
    def __init__(self):
        self.recipes = self._load_recipes()
        self.substitutions = self._load_substitutions()
    
    def get_response(self, message):
        message_lower = message.lower()
        
        if 'recipe' in message_lower:
            return self._suggest_recipe(message)
        elif 'substitute' in message_lower or 'replace' in message_lower:
            return self._suggest_substitution(message)
        elif 'tip' in message_lower:
            return self._get_cooking_tip()
        else:
            return self._general_response(message)
    
    def _suggest_recipe(self, query):
        # Recipe suggestion logic
        return "Here's a great recipe for you..."
    
    def _suggest_substitution(self, query):
        # Ingredient substitution logic
        return "You can substitute with..."
                

AI Assistant Integration

                    # AI Recipe Recommendation Example
import openai

def get_recipe_recommendation(user_prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "You are a helpful cooking assistant."},
            {"role": "user", "content": f"Suggest a recipe for: {user_prompt}"}
        ]
    )
    return response.choices[0].message.content
                

🔗 Recipe Assistant API Integration

Recipe API Logic

The application uses a RESTful API powered by Flask to bridge the frontend and recipe data. It handles recipe suggestions, ingredient substitutions, cooking tips, and AI-driven assistant responses.

Available APIs & Technologies

API/Technology	Type	Description
Flask REST API	Backend	Handles all reservation and menu requests.
Recipe Data	Data	Manages recipe data, substitutions, and cooking tips.
OpenAI/Claude API	AI API	Powering the AI Cooking Assistant.
LocalStorage	Browser API	Store settings and conversation history
Web Speech API	Browser API	Voice input/output (optional feature)

Backend API Endpoints

                    # Flask Backend - app.py
@app.route('/api/chat', methods=['POST'])
def chat():
    data = request.json
    message = client.messages.create(
        model=data.get('model', 'claude-3-5-sonnet-20241022'),
        max_tokens=data.get('max_tokens', 1024),
        temperature=data.get('temperature', 0.7),
        messages=[{"role": "user", "content": data['message']}]
    )
    return jsonify({
        'response': message.content[0].text,
        'usage': message.usage,
        'model': message.model
    })

@app.route('/api/health', methods=['GET'])
def health_check():
    return jsonify({
        'status': 'healthy',
        'anthropic_configured': bool(os.getenv('ANTHROPIC_API_KEY'))
    })
                

                    // Frontend JavaScript - API Integration
async function sendMessage(message) {
    try {
        const response = await fetch('http://localhost:5000/api/chat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                message: message,
                model: 'claude-3-5-sonnet-20241022',
                max_tokens: 1024,
                temperature: 0.7,
                stream: false
            })
        });
        
        if (!response.ok) {
            throw new Error('API request failed');
        }
        
        const data = await response.json();
        return data.response;
    } catch (error) {
        console.error('Error:', error);
        return 'Error: ' + error.message;
    }
}
                

Browser Compatibility

                    // Check Claude API Connection
async function checkHealth() {
    try {
        const response = await fetch('http://localhost:5000/api/health');
        const data = await response.json();
        console.log('Server Status:', data.status);
        console.log('API Configured:', data.anthropic_configured);
        return data.anthropic_configured;
    } catch (error) {
        console.error('Health check failed:', error);
        return false;
    }
}

// Recommended setup:
// - Backend: Python 3.8+ with Flask
// - Frontend: Modern browsers (Chrome, Edge, Safari, Firefox)
// - Voice Features: Chrome/Edge for Web Speech API support
                

⚙️ Configuration

Configuration in this application is handled through environment variables and settings files:

Environment Variables

Create a .env file in the project root (copy from env.example):

                    # .env file
ANTHROPIC_API_KEY=sk-ant-your-api-key-here
FLASK_ENV=development
PORT=5000
                

Note: Get your API key from Anthropic Console. Never commit your .env file to version control.

Python Configuration (config.py)

The config.py file contains configuration settings:

                    # config.py
import os
from anthropic import Anthropic

class Config:
    ANTHROPIC_API_KEY = os.getenv('ANTHROPIC_API_KEY')
    DEFAULT_MODEL = 'claude-3-5-sonnet-20241022'
    DEFAULT_MAX_TOKENS = 1024
    DEFAULT_TEMPERATURE = 0.7
    
    # Initialize Anthropic client
    client = Anthropic(api_key=ANTHROPIC_API_KEY) if ANTHROPIC_API_KEY else None
                

Frontend Configuration

Edit script.js to configure API endpoint:

                    // script.js
const API_BASE_URL = 'http://localhost:5000/api';
const DEFAULT_MODEL = 'claude-3-5-sonnet-20241022';
const DEFAULT_MAX_TOKENS = 1024;
const DEFAULT_TEMPERATURE = 0.7;
                

Browser LocalStorage Settings

User settings are automatically saved to browser's local storage:

                    // Settings are saved automatically
localStorage.setItem('chatbotSettings', JSON.stringify({
    model: 'claude-3-5-sonnet-20241022',
    maxTokens: 1024,
    temperature: 0.7,
    stream: true,
    darkMode: false,
    autoSpeak: false
}));

// Load settings
const settings = JSON.parse(localStorage.getItem('chatbotSettings'));
                

Runtime Configuration

Configure settings through the web interface:

Model: Select Claude model (Sonnet, Opus, Haiku)
Max Tokens: Set maximum response length (1-4096)
Temperature: Control creativity (0-1, higher = more creative)
Stream: Toggle real-time streaming responses
Voice Settings: Configure voice input/output options
Dark Mode: Toggle between light and dark themes
Auto Speak: Toggle automatic text-to-speech

All settings are saved automatically and persist across browser sessions.

📁 Project Structure

recipe-assistant-bot

recipe-assistant-bot/
├── run.py              # Main Flask application entry point
├── config.py           # Configuration settings
├── app/                # Application modules
│   ├── chatbot.py      # Core chatbot logic
│   ├── routes.py       # Flask routes and API endpoints
│   ├── cooking_assistant.py  # Cooking guidance
│   └── ...             # Other modules
├── static/             # Static assets (CSS, images, JS)
│   ├── css/            # Style sheets
│   └── js/             # JavaScript files
├── templates/          # HTML templates for the web interface
│   └── index.html      # Main chat interface
├── requirements.txt    # Python dependencies
├── .env                # Environment variables (API keys, config)
├── LICENSE             # Project license
└── README.md           # Documentation and setup guide

Note: Edit config.py and .env to configure API settings and behavior.

📄 Detailed File Descriptions

🐍 run.py

Purpose: Main Flask application entry point. Handles server startup and application initialization.

Key Features:

Flask server configuration
Application initialization
Development server setup
Error handling

🤖 app/chatbot.py

Purpose: Core chatbot logic. Handles recipe suggestions, ingredient substitutions, and cooking tips.

Key Features:

Recipe search and suggestions
Ingredient substitution logic
Cooking tips database
AI integration

🎨 templates/index.html

Purpose: The user-facing frontend. A dynamic chat interface with recipe assistance features.

Key Features:

Interactive chat interface
Recipe suggestion display
AI Chatbot interface
Responsive design

📖 README.md

Purpose: Project overview and quick start guide. Provides introduction, features, installation instructions, and usage examples.

Contents:

Project description
Features list
Installation guide
Usage instructions
Browser compatibility
Support information

📝 RELEASE_NOTES.md

Purpose: Release notes. Documents features, changes, and updates in the current version.

Contents:

Release information
Feature list
Technical details
Changelog

⚖️ LICENSE

Purpose: License file. Contains the license text and copyright information.

License Type: MIT License

🚫 .gitignore

Purpose: Git ignore rules. Specifies files and directories that should not be tracked by version control.

Excluded Items:

IDE configuration files
OS-specific files
Log files
Build artifacts

📊 File Statistics

25+

Total Files

Core Files

Documentation Files

5000+

Lines of Code

20+

Advanced Features

200K

Context Tokens

📌 File Organization

Backend: app.py, models.py

Frontend: templates/, static/

Documentation: README.md, LICENSE

Configuration: .env, requirements.txt

Full-Stack: Python Flask + SQLAlchemy + AI API Integration

🚀 Advanced Features Details

1. AI-Powered Cooking Assistant

Intelligent chatbot using OpenAI/Claude to provide recipe recommendations, answer cooking questions, and handle ingredient substitution inquiries through natural conversation.

2. Smart Recipe Suggestions

The system suggests recipes based on available ingredients, dietary preferences, and cuisine types, ensuring personalized cooking recommendations.

3. Ingredient Substitution System

Comprehensive database of ingredient substitutions with detailed alternatives for missing ingredients, dietary restrictions, and allergy considerations.

4. Meal Planning

Plan weekly meals with batch cooking recommendations, prep timelines, and storage instructions for efficient meal preparation.

5. Recipe Management

All recipes, substitutions, and cooking tips are stored securely with easy access and search functionality for high performance and reliability.

🔧 Troubleshooting

API Key Issues

Ensure your .env file contains a valid ANTHROPIC_API_KEY starting with sk-ant-
Check that the API key is correctly formatted and not expired
Verify your API key has sufficient credits in Anthropic Console
Make sure the .env file is in the project root directory
Restart the Flask server after updating the API key

Flask Server Issues

Server not starting: Check Python version (3.8+), verify dependencies installed with pip install -r requirements.txt
Port 5000 in use: Change port in .env file or stop other applications using port 5000
Import errors: Ensure virtual environment is activated, reinstall dependencies
CORS errors: Verify Flask-CORS is installed and enabled in app.py
Connection refused: Check firewall settings, ensure server is running on correct port

Frontend Connection Issues

Failed to fetch: Ensure Flask server is running, check API_BASE_URL in script.js
CORS errors: Make sure Flask-CORS is installed and configured in backend
Server offline indicator: Check server status at http://localhost:5000/api/health
Port mismatch: Verify frontend API_BASE_URL matches backend port

Common Issues

API key not found: Create .env file from env.example and add your API key
Module not found: Install dependencies with pip install -r requirements.txt
Response errors: Check API key validity, verify credits, check Anthropic API status
File upload not working: Check file size limits, supported formats, and Flask file handling configuration
Streaming not working: Verify streaming is enabled in settings and backend supports streaming

📋 Requirements

                    Backend Requirements:
- Python 3.8 or higher
- Flask (Web Framework)
- Flask-CORS (Cross-Origin Support)
- requests (HTTP Client)
- python-dotenv (Config)

Frontend Requirements:
- Modern Web Browser (Chrome, Edge, Safari, Firefox)
- Vanilla JavaScript & CSS3
- Responsive design principles

API Requirements:
- AI API Key (OpenAI or Claude)
- Internet connection for AI processing
                

Browser Compatibility: Chrome, Edge, Safari, or Firefox (Chrome/Edge recommended for voice features).

Python Version: Python 3.8 or higher required for backend server.

Internet Connection: Required for Claude API calls and CDN resources.

🎯 Use Cases

🍳 Cooking Apps

Perfect for food apps and cooking platforms looking to provide AI-driven recipe recommendations.

📋 Meal Planning

Streamline meal preparation and reduce food waste with automated meal planning logic.

🤖 AI Cooking Assistant

Automate cooking inquiries about recipes, ingredients, substitutions, and cooking techniques.

📊 Healthy Eating

Track nutrition goals and analyze eating patterns to optimize healthy cooking habits.

📱 Mobile First Cooking

Provide a premium, app-like experience for accessing recipes and cooking tips on smartphones.

🛒 Shopping Lists

Generate shopping lists from recipes with price estimation and ingredient tracking.

💬 Support

For support, questions, or more projects:

Website: https://rskworld.in
Email: help@rskworld.in
Phone: +91 93305 39277

📄 License

This project is provided as-is for educational and development purposes.

MIT License - See LICENSE file for details.

📂 Demo Folder Structure

The demo/ folder contains demonstration and documentation files for this project.

                    demo/
├── index.html    # This comprehensive documentation page
├── demo.html     # Interactive demo interface for testing Claude chatbot
├── style.css     # CSS styling for documentation and demo
└── script.js     # JavaScript for scroll, navigation, and interactions
                

Try Interactive Demo

📄 Demo Files Description

📄 index.html

Purpose: Comprehensive project documentation and information page. This HTML file contains all details about the Anthropic Claude Chatbot project.

Contents:

Complete project overview
All features documentation
Installation instructions
Usage examples
Code examples
Claude API integration reference
Configuration details
Detailed file and folder descriptions
Project structure
Troubleshooting guide
Support information

Features:

Self-contained HTML with external CSS
Responsive design
Modern, beautiful UI
Well-organized sections
Easy navigation with smooth scrolling

🎨 style.css

Purpose: CSS stylesheet file with modern styling for the documentation page.

Features:

Modern gradient backgrounds
Responsive design
Beautiful typography
Smooth animations
Sticky navigation
Scroll progress bar

📜 script.js

Purpose: JavaScript file with interactive features for the documentation page.

Features:

Scroll progress bar
Back to top button
Smooth scrolling navigation
Active navigation highlighting
Copy to clipboard functionality

🎮 demo.html

Purpose: Interactive demo interface showcasing the Recipe Assistant Bot's AI features.

Features:

Interactive chat interface
Sample Recipe Assistant responses
Quick action buttons (Recipe suggestions, Substitutions, Tips)
Beautiful, responsive UI

Usage: Open demo.html in your browser to try the interactive demo!

💡 About the Demo Folder

The demo/ folder contains demonstration and documentation files for the Anthropic Claude Chatbot project:

Documentation: index.html - Comprehensive guide for the Recipe Assistant Bot project
Interactive Demo: demo.html - Live preview of the AI Cooking Assistant
Styling: style.css - Modern cooking-themed stylesheet
Scripts: script.js - Logic for smooth documentation navigation

Note: To view the documentation, open demo/index.html in your browser. To try the interactive demo, open demo.html. Both pages are self-contained and work independently.