Chef Gemini: AI Recipe Generator

This project is a React application built with Vite, designed to act as an AI-powered recipe generator named "Chef Gemini". It allows users to input ingredients they have on hand and receive a recommended recipe generated by the Google Generative AI model.

Features

• Ingredient Input: Easily add ingredients you have available.
• AI-Powered Recipe Generation: Utilizes Google Generative AI (Gemini-2.5-flash-lite-preview-06-17) to suggest recipes based on your ingredients.
• Markdown Recipe Display: Recipes are formatted in Markdown for clear and readable presentation.
• Dynamic UI: Responsive user interface built with React, including a loading indicator and automatic scrolling to the recipe.
• Environment Variable Management: Securely manages API keys using dotenv.

Technologies Used

• Frontend: React, Vite
• AI SDK: @google/generative-ai
• Other: dotenv, react-markdown

Installation

To get this project up and running, follow these steps:

1. Clone the repository:

   git clone [repository-url]
   cd webdev/ai

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env file in the webdev/ai directory and add your Google Generative AI API key:

   VITE_GOOGLE_API_KEY=your_google_api_key
   

   Replace your_google_api_key with your actual Google Generative AI API key.

Usage

1. Start the development server:

   npm run dev

   This will start the Vite development server, and you can access the application in your browser, usually at http://localhost:5173.

2. Add Ingredients: In the application, use the input field to add ingredients you have.

3. Get a Recipe: Once you have added at least 4 ingredients, a "Get a recipe" button will appear. Click it to generate a recipe.

4. View Recipe: The AI-generated recipe will be displayed below your ingredient list.

Project Structure

webdev/ai/
├── public/
├── src/
│   ├── components/
│   │   ├── aii.js               # Handles Google Generative AI interaction
│   │   ├── ClaudeRecipe.jsx     # Renders the AI-generated recipe
│   │   ├── Content.jsx          # Main application logic, ingredient management, and recipe fetching
│   │   ├── header.jsx           # Displays the "Chef Gemini" title and logo
│   │   └── IngredientsList.jsx  # Displays user's ingredients and "Get Recipe" button
│   ├── App.css
│   ├── App.jsx                  # Root component, renders Header and Content
│   └── main.jsx                 # Entry point of the React application
├── .env                         # Environment variables (e.g., API keys)
├── .gitignore
├── index.html
├── package.json                 # Project dependencies and scripts
├── README.md                    # Project documentation
└── vite.config.js               # Vite configuration

Contributing

Contributions are welcome! Please feel free to open issues or submit pull requests.

License

[Specify your license here, e.g., MIT License]