DEV Community

Cover image for AI Recipe Generator: Turn Food Photos into Instant Recipes with AI 🍳✨
Nithin Pradeep
Nithin Pradeep

Posted on

AI Recipe Generator: Turn Food Photos into Instant Recipes with AI 🍳✨

#ai #webdev #nextjs #openai

Have you ever looked at a dish and wondered, "What's in it — and how can I make it myself?" Introducing the AI Recipe Generator: a project that uses computer vision and AI to analyze any food photo and instantly generate a step-by-step personalized recipe. Upload a picture of your ingredients or a finished dish—get a complete recipe (with cooking steps) in seconds!

Why I Built This

Food recognition and AI have always fascinated me. As a developer, I noticed a gap: plenty of sites offer recipe browsing, but almost none use AI to bridge the gap between your fridge and cooking. What if we could snap a photo and get actionable, tailored recipes—making home cooking easier, smarter, and more fun?

Core Features

  • Image-Based Recipe Generation: Simply upload a food photo; the AI will suggest what you can cook.
  • Smart Ingredient Detection: The backend identifies ingredients and even guesses cooking methods.
  • Personalized Output: Adjust recipes based on diet, cuisine, or available ingredients.
  • Step-by-Step Instructions: Recipes come with cooking steps, timings, and planned nutritional details.
  • Recipe Collection: Save and manage your favorite recipes in-app.

Tech Stack

This project is full-stack, leveraging cutting-edge tools for both frontend and backend:

Frontend: Next.js 15 (React), TypeScript, Tailwind CSS, React Query, React Hook Form
Backend: FastAPI (Python), SQLAlchemy, Pydantic, OpenAI/Anthropic AI, Uvicorn
Utilities: Docker, pytest, Alembic (for DB migrations), Vercel & Netlify (deploy)

How It Works

  1. Upload: User uploads a photo (ingredients or finished dish).
  2. Vision-to-Recipe AI: FastAPI backend uses advanced image recognition to detect ingredients and dish types.
  3. Recipe Generation: The backend crafts personalized recipes using AI language models (OpenAI/Anthropic APIs), creating ingredient lists, steps, timing, and difficulty.
  4. Web Interface: The frontend (Next.js) displays the result, lets you customize preferences, and save your recipe library.

Implementation Walkthrough

  1. Project Structure
  • /frontend: Next.js React app (UI, API clients)
  • /backend: FastAPI service (AI endpoints, database models)
  1. Getting Started
  • Clone the repo: 
git clone https://github.com/nithiin7/ai-recipe-generator
cd ai-recipe-generator
Enter fullscreen mode Exit fullscreen mode
  • Run both servers with a single command: 
./run-dev.sh
Enter fullscreen mode Exit fullscreen mode
  1. Environment Setup
  2. API and AI keys stored in .env files for backend and frontend.

  3. Docker build scripts for seamless deployment.

  4. Key Endpoints

  • POST /api/v1/recipes/generate — generate a recipe from an uploaded image.
  • GET /api/v1/recipes — browse all recipes.
  • Auth and user-specific features planned for future versions.

Try It Yourself! 🚀

  • Repo: nithiin7/ai-recipe-generator
  • Clone, configure your API keys, and run locally or deploy to Vercel/Netlify.
  • Tinker with the code to add more AI models or expand cuisine coverage!

Takeaways

Building this project taught me:

  • How to bridge computer vision and language models in real-world web apps
  • The value of clean API design using FastAPI and TypeScript
  • The power of Docker for rapid prototyping and deployment

Would love feedback, ideas for improvement, or contributions—let’s cook up some AI magic together!

Top comments (0)