Recipe This!

A Next.js application that generates cooking recipes from food images using Groq's vision models. The application uses a secure server-side API to protect your Groq API key.

Features

• Drag and drop image upload
• AI-powered recipe generation using server-side API
• Secure handling of API credentials
• Responsive design for desktop and mobile

Getting Started

Prerequisites

• Node.js 18+ installed
• A Groq API key (get one from Groq Console)

Installation

1. Clone the repository

git clone <repository-url>
cd recipe-this

2. Install dependencies

npm install

3. Set up environment variables

Create or edit the .env.local file in the root directory:

GROQ_API_KEY=your_groq_api_key_here

4. Start the development server

npm run dev

5. Open http://localhost:3000 in your browser

How to Use

1. Drag and drop a food image or click to select a file
2. Click "Generate Recipe" to process the image
3. View the generated recipe with ingredients, instructions and cooking time

How It Works

1. User uploads an image via the browser
2. The image is converted to base64 format
3. The app makes a request to a secure server-side API route
4. The server uses the Groq API key to communicate with Groq's vision model
5. The generated recipe is returned to the client

Technologies Used

• Next.js (with App Router)
• React
• Groq API (with vision model support)
• Next.js API Routes for server-side processing
• TailwindCSS
• React Dropzone

License

MIT

---

This project was bootstrapped with Create Next App.