Inspiration

We've all been there: standing in the grocery store with no idea what's already in the fridge, or halfway through cooking a recipe only to realize you're missing a key ingredient. As cooking and baking enthusiasts, these small frustrations add up fast. We wanted to build something that actually understands your pantry, finds recipes that work with what you have, and takes the mental load out of meal planning. Mise was born from the desire to make cooking feel less like a chore and more like something you can just dive into.

What it does

This web extension simplifies kitchen organization by combining pantry management, receipt scanning, and recipe assistance into one seamless tool. Users can maintain a categorized digital pantry, manually adding/deleting items as needed. By uploading a PNG/JPEG receipt or taking a photo, the extension automatically extracts ingredients to update the pantry. When browsing recipes online, it can scan and summarize the page, highlighting which ingredients are available, missing, or substitutable. Additionally, users can search for and save recipes, building a personalized collection for easy access and smarter meal planning.

How we built it

Built with React and TypeScript and Chakra UI for the frontend. AI features run through Browser Use on an Express backend with a polling architecture to handle long-running tasks. User data is saved with chrome.storage for offline, cross-device persistence.

Challenges we ran into

The biggest challenge was prompt engineering and getting the LLM to consistently return clean, structured JSON without extra commentary took a lot of iteration. We also had to adapt our features to work within Chrome extension constraints like fetch timeouts and CORS. Finally, implementing HTML injection to highlight ingredients directly on recipe pages required navigating Chrome's content script limitations.

Accomplishments that we're proud of

  • Built a fully functioning product that solves a real problem we face in our daily lives
  • Successfully integrated an AI agent that can browse the web, read receipts, and reason about ingredients in real time
  • Engineered prompts that reliably return structured data from an LLM
  • Pulled off a polished, cohesive UI

What we learned

  • Importance of prompt engineering
  • Building a chrome extension from scratch, from manifest setup to content scripts to chrome.storage
  • How to work around Chrome extension constraints like fetch timeouts and CORS
  • Designing a polling architecture to handle long running async tasks without blocking the UI
  • How to collaborate effectively as a duo under hackathon time pressure

What's next for Mise

We want to add full edit functionality to the confirm pantry page and anywhere else lists appear. We also plan to save the current page state so users don't lose their progress if they accidentally click off the extension. On the UX side, we want to add clearer instructions and guidance throughout the app, and get our HTML injection feature completely polished and reliable.

Built With

Share this project:

Updates