Recipe Remix Bot

Got random stuff in your fridge? Let's make magic.

Comment

Inspiration

The inspiration for the Recipe Remix Bot came from the universal, almost daily ritual of staring into the fridge, seeing a random collection of ingredients, and having zero idea what to make. It's a moment of "analysis paralysis" for so many of us. We thought, what if we could turn that moment of confusion into a moment of creativity and fun?

We were inspired by the "chaotic, creative" spirit of the Maximally AI Shipathon. We didn't just want a boring recipe generator. We wanted a kitchen companion with a personality—a sassy chef, a pirate captain, or a chill stoner dude who could look at your sad-looking broccoli and leftover chicken and say, "Don't worry, I got you." The goal was to build a tool that was not only useful but also genuinely delightful to interact with.

What it does

Recipe Remix Bot is a single-page web application that acts as your personal AI sous-chef. Here’s what it does:

  • Generates Recipes from Anything: Users input the ingredients they have on hand, no matter how random.
  • Serves with Personality: Users pick a "Chef Personality," and the AI generates a unique recipe in that specific voice and style, complete with a quirky name and instructions.
  • Visualizes the Dish: It doesn't just tell you what to make; it shows you. With one click, it uses AI to generate a photorealistic image of the final dish.
  • Creates a Shopping List: If the recipe includes an ingredient you might not have, the bot can instantly parse the text and generate a clean, simple shopping list.
  • Suggests Perfect Pairings: To complete the meal, it suggests a wine, beer, and non-alcoholic beverage that would pair perfectly with your new creation.

How we built it

Given the 48-hour timeframe, we built this with speed and simplicity in mind. The entire application is a single, self-contained index.html file.

  • Frontend & Styling: We used vanilla JavaScript for all the logic and Tailwind CSS (loaded via a CDN) for styling. This allowed us to build a clean, responsive UI without any complex setup or build steps.

  • The AI "Brain": The magic comes from direct API calls to Google's models from the browser:

    • Text Generation (gemini-2.5-flash-preview-05-20): This model is the core of our bot. We used carefully crafted system prompts to instruct the AI to adopt a specific personality, generate a recipe, extract a shopping list, and suggest pairings. The power of prompt engineering was key here.
    • Image Generation (imagen-3.0-generate-002): For the "Visualize Dish" feature, we send the recipe title and description to the Imagen model to generate a high-quality, delicious-looking image of the food.

The entire project is "serverless" in the truest sense—it runs entirely in the user's browser, making it incredibly lightweight and easy to deploy.

Challenges we ran into

Our biggest challenge was prompt engineering. Getting the AI to consistently adopt a personality was tricky. Our first "Pirate Captain" sounded more like a friendly sailor until we iterated on the prompt to make him more adventurous and demanding. Ensuring the output was always valid HTML that we could inject directly into the page also required some trial and error.

Another challenge was handling API call latency and potential errors. Since we were making multiple different calls, we implemented a simple exponential backoff retry mechanism to handle potential network hiccups or API rate limits, making the app more resilient.

Accomplishments that we're proud of

We're incredibly proud that we shipped a fully functional, multi-modal AI application in a single file. It's a testament to how powerful modern web APIs and AI models have become. Combining both text and image generation makes the experience so much more engaging.

We're also proud of the "personality" feature. It’s the heart of the app and what makes it more than just a utility. Building something that can make someone laugh while solving a real problem feels like a huge win.

What we learned

  1. System Prompts are Superpowers: The level of control you can get over an LLM's output with a well-written system prompt is incredible. It’s the difference between a generic tool and a delightful experience.
  2. Frontend Can Be the Full Stack: For many AI-powered ideas, you don't need a complex backend. Making secure API calls directly from the client is a viable and incredibly fast way to build and ship a project.
  3. Ship, Then Add Features: Starting with the core recipe generator and then adding the visualization, shopping list, and pairing features one by one was the right approach. It allowed us to have a working product early and build on it.

What's next for Recipe Remix Bot

This started as a 48-hour hackathon project, but we see so much potential for it. Here are a few ideas for the future:

  • More Chef Personalities: Adding more characters like a "Drill Sergeant," a "Bob Ross-style Painter," or a "Grandma who knows best."
  • Save & Share Recipes: Allowing users to save their favorite chaotic creations and share them with friends.
  • Dietary Preferences: Adding options for vegan, gluten-free, or low-carb recipes to make the tool even more useful.
  • "Remix this Remix": An option to take a generated recipe and ask the AI to tweak it (e.g., "make it spicier" or "make it healthier").
Share this project:

Updates