PRODUCT PROTOTYPE STORIES – Recipe website parser & organizer
Expectation VS Reality: Using Claude AI, Gemini Canvas & GPT-5 (No-code)
Context
My husband and I love cooking, and like many, we have certain tried-and-tested recipe websites bookmarked. The thing about recipes that gets on my nerves though, is the amount of scrolling a user has to do to get to the actual useful stuff – a concrete list of ingredients and the right steps.
You might be wondering, why don’t you just ask GPT/Claude/Gemini for a recipe? I mean, yes I can, but with certain recipes, there’s an undeniable attachment to one you know is really good.
I’m looking to build an app that lets me save recipes easily. I want to be able to drop a recipe URL into the app, and it would automatically extract the ingredients and cooking steps. This would allow me to save and revisit my favorite recipes anytime.
User Story
I am an avid home cook that wants to be able to save and refer to online recipes that I have successfully tried so that I can refer to it over and over in the future to cook our favourite meals at home. I want to save time and energy re-visiting and scrolling through recipe sites, flooded with ads and bad user experience.
“As an avid home cook I want an easy way to read and save exact recipes from websites to refer to when I cook for my family so that I can ensure I make the tastiest meals in the most efficient amount of time”
Product Basic Features:
- Recipe URL input function
- Recipe ingredient and cooking step information website parser
- Clean UI interface to be able to view the recipe ingredients and cooking steps
- Save button to be able to save recipes I like and store in a dedicated area
- Delete button to be able to delete saved recipes I no longer need to refer to
- Viewing interface to view recipes which I have saved in the past
Vibe Coding steps:
This time round, I really wanted to start with Claude AI. I’ve been getting so many ads of coding influencers raving about how good Claude was in writing code that I knew I just had to try it.
App prompts:
Help me create an app where I can put recipe website urls in and it will help to parse out the important parts of the recipe in an organized and consistent manner like the ingredients and the cooking instructions. It should be able to get rid of all ads and unnecessary information which does not help to cook the recipe. I would also like a function to be able to save the recipes I like in an area which I could refer to over and over again like a bookmark of recipes or in a note form. Make the user interface clean, simple, fun, stylish with some illustration of food or ingredients.
Introducing Claude AI
- Latency issues – Opening up the Claude app at 7pm on a Monday evening EST was brutally slow. I wonder what was happening?
- After hitting refresh, Claude Sonnet 4 starts working its magic and the interactive artifact starts building code on the side
- About 2 minutes pass and a nicely formatted prototype shows up on the right of my screen, with a clean explanation of what key features were included to give me extra confidence in the output and clear steps of how I should start using this app
- At this point I am floored, it was visually appealing, simple and ready to use? I started to put in a recipe website which I refer to regularly, a staple home dish, Kimchi Jjigae from My Korean Kitchen. The excitement I had died down after I saw the following Creamy Chicken Alfredo Pasta – not exactly the recipe I had in mind.
- I review the steps Claude provided, only to find that I missed the following note:
“Note: This demo uses mock data to simulate recipe parsing. In a real implementation, you’d need a backend service to actually scrape recipe websites and extract the structured data using tools like Recipe schema markup or custom parsing logic.”
Ok so it didn’t take me to something fully functional, I needed some extra steps. But here I was with the intention that I wanted to prototype something without the need to commit to further development until the prototype was fully ready.
- I tried asking Claude to adjust this solution to give me an option so I could have a prototype referring to a real website. I submit the prompt and Interactive artifact goes off to work its magic:
- I receive these instructions from a speedy Claude. A reassurance, that it’s going to work – hurrah!
- I enter the URL, only to find the following errors:
After multiple prompts of asking claude to fix and constant repeated errors, I decided to move on.
Enter Gemini Canvas
I put in the same prompt into Gemini and found the following observations:
- The code ran extremely fast maybe in half the time and spit out this app prototype
- It was less visually appealing with less diverse colour palettes used but still fairly clean and had all the basic features I was looking for. But the real question is, does it work?
- I entered the same URL from My Korean Kitchen – Lo and behold it worked!
- This was great. It gave me what I needed and allowed me to save it. The only downside though was that I could not “open” the recipe I just saved..
- Silly as it seemed, nothing like a simple re-prompt to fix this minor miss in requirement. Lightning fast, Gemini 2.5 Flash returns a working code with the issue fixed.
- Interestingly I ran it again once more with the exact same URL and this time, the model spat out a different recipe, hallucinating some ingredients! This seemed to be because there were reviews on the same page by other home cooks mentioning that they tried adding an additional recipe and it tasted good still
Original recipe:
Gemini parsed recipe:
- I could not believe what I was seeing and decided to try it with a different recipe, this time for linguine clam:
Original recipe:
Gemini parsed recipe:
And similarly it spat out totally different portion sizes and skipped certain ingredients like kosher salt and shallots! Bizarre hallucination!
7. I then put in the next prompt:
“I noticed that the parser did not correctly grab all the ingredients, the right measurements per ingredient and it was quite different compared to the actual recipes. Is there any way to improve the parser?”
Gemini’s response:
“That’s excellent feedback! You’ve pointed out one of the key challenges with parsing recipes from the web. The previous approach relied on a large language model to intelligently “read” the webpage and extract the recipe, which isn’t always accurate, especially when a website’s layout is complex or inconsistent.”
8. Gemini expresses the limitations and provides some alternative way to handle it, requiring alternative ways to handle it with additional code and running it outside of the browser. At this point, a good time to call it quits
Last Resort: ChatGPT-5
With the latest release of ChatGPT-5 and a fancy demo I watched on their livestream a week ago, I thought to myself, this app is simpler than a french learning game with mouse and cheese. GPT-5 will definitely handle this right.
- I ran the exact same prompt, on GPT-5 Thinking and found that it was slow. And I mean really slow – in terms of execution speed, way slower than Gemini and Claude
- After the code was spat out, I had to manually run an extra step to “Run Code” in Canvas. Again, rather slow to run, maybe around 5-8 minutes.
- Once done, the output looked nice visually, but upon further inspection, it had several technical areas and arrived with a “failure to fetch” error message. Not a version ready for end users
- Inputting in the URL from My Korean Kitchen didn’t work.. With GPT5 providing the most voluminous instructions to run it with instructions on setting up a backend proxy and react front end.
Overall thoughts
I compared Claude Sonnet 4, Gemini 2.5 Flash and GPT-5 Thinking to create this recipe app and found the following:
| Model | Performance | User Friendly Appearance | Prototype Readiness | Recipe output |
| Claude | – | Best balance of appeal & user-friendly | – | None |
| Gemini | Fastest | Most plain | Most ready to demo with outputs generated | Outputs always provided, but with hallucinations |
| GPT-5 | Slowest | – | – | None |
In all cases, none of the models were able to perfectly build an accurate functional Recipe Parser and Saver app.
That aside, I found Gemini Canvas to be the most helpful in this use-case. Although the output comes with hallucinations, it still fulfilled most of the requirements in providing the right functionality and would be the best to bring to a prototype brainstorming meeting with Designers, Engineers and Sponsors of projects.
TLDR
I compared Claude, Gemini and GPT-5 to build a recipe saver app and found the best balanced performance from Gemini while misses from Claude and GPT-5. The real answer to the original question “Which Gen AI model can crack the Recipe Saver app?” – not any of them, yet.
Leave a comment