🧠 AI Recipe Generator

This is a React-based application that allows users to input ingredients and receive a full recipe generated by an AI model. The app leverages the getRecipeFromMistral function to fetch recipes and displays them dynamically.

🚀 Features

• Input ingredients via a simple form
• View the list of added ingredients
• Generate a recipe based on the selected ingredients
• Display recipe formatted in Markdown using the ClaudeRecipe component

🧩 Components

• Main: Manages state and interactions for ingredient input and recipe generation
• IngredientsList: Displays all added ingredients and allows the user to request a recipe
• ClaudeRecipe: Renders the AI-generated recipe
• getRecipeFromMistral: Async function to fetch a recipe from an AI source (e.g., Mistral model)

📁 Project Structure

src/
├── components/
│   ├── IngredientsList.jsx
│   └── ClaudeRecipe.jsx
├── ai.js
└── Main.jsx

🛠️ Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/your-username/ai-recipe-generator.git
cd ai-recipe-generator

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

The app will be available at http://localhost:3000.

🧠 AI Integration

The getRecipeFromMistral function should be implemented in ai.js. It takes an array of ingredients and returns a Markdown-formatted recipe. Example:

export async function getRecipeFromMistral(ingredients) {
  // Call to your AI backend here
  return "# Sample Recipe\n\nIngredients:\n- " + ingredients.join("\n- ") + "\n\nInstructions:\n1. Mix ingredients.\n2. Cook well.\n";
}

✍️ Contributing

Contributions are welcome! Feel free to submit issues or pull requests.