👨‍🍳 Chef Claude — AI Recipe Generator

Chef Claude is a simple web application that generates a cooking recipe based on the ingredients the user has. You type your ingredients → the app sends them to the Gemini AI API → the AI generates a full recipe → the app displays it beautifully in Markdown.

This project was built using React + Vite, Google Studio API, and clean TypeScript + Tailwind.

📌 Overview

This project helped me practice React fundamentals, working with API calls, environment variables, form handling, and AI prompt engineering.

---

📦 Project Structure (Vite + React)

TypeScript/
├─ index.html
├─ public/
├─ README.md
└─ src/
   ├─ App-Header.tsx
   ├─ App-Main.tsx
   ├─ App.tsx
   ├─ index.css
   ├─ index.tsx
   ├─ images/
   └─ components/
      ├─ Ai.ts
      ├─ Form.tsx
      ├─ IngredientsList.tsx
      └─ Response.tsx

---

Features

Add ingredients dynamically

Generate recipe using Google Gemini API

Markdown rendering for clean and readable recipes

Clean UI with React components

Completely client-side (no backend)

🍽️ Example Ingredients

You can test the app with:

tomatoes, potatoes, salt, garlic, milk

---

📄 License

Free to use for learning and personal projects.

---