Recipe Record
How this was built
Paste a recipe link and get a clean, ad-free version with the ingredients and steps you actually need.
The problem
I kept landing on the same recipe blogs, scrolling past someone’s life story and four ad blocks just to find the ingredient list. The longer you stay on the page, the more ads show up, even with an ad blocker running. I wanted my own clean copy of the recipes I actually cook, saved somewhere organized instead of buried in bookmarks.
What it does
Paste in a link and Recipe Record scrapes the page, then uses AI to turn it into a clean, saved version. You get the cookware, the ingredient list, step-by-step instructions, and any extra notes, formatted the same way every time. It saves to your account, so it’s there whenever you want to cook it again.
A quick example
You find a great recipe online, but it lives on a page full of ads and a backstory you didn’t ask for. Recipe Record pulls out just the recipe and saves it somewhere you can actually find it later.
Features
- Paste any recipe link and get back just the recipe, with no ads and no preamble.
- AI reads the page and returns cookware, ingredients, and steps in the same structure every time, whatever the source site looked like.
- Edit the source URL and re-extract if a page changes or the first read misses something.
- Everything saves to your own account, so your collection is searchable later.
What it's built with
| What I used | What it does here |
|---|---|
| Next.js | The whole app, App Router, rendered and deployed on Vercel. |
| Deno edge function | Fetches the recipe page and calls the model, so the scrape and the API key both stay off the browser. |
| Claude (Anthropic) | Turns messy page HTML into a consistent set of cookware, ingredients and steps. |
| Supabase Postgres | Saves each recipe to your own account. |
| Plain CSS | No framework. Design tokens are CSS custom properties. |