Mise Intelligent Chef

Recipe websites are built for traffic, not cooking. You get five paragraphs of backstory, an ingredients list that doesn't match the steps, and instructions that assume you've done this before.

The gap between "found a recipe" and "actually cooked it" is mostly friction—cognitive load from switching context, tracking where you are, and figuring out what to do before the heat goes on. And if a recipe calls for heavy cream you don't have, or dairy you can't eat, you're back to Google.

Mise treats those as solvable design problems—and uses Claude to solve the ones that need more than layout.

The core architecture decision was a UX decision first: browsing a recipe and actively cooking it are completely different jobs, in completely different physical contexts, with completely different tolerance for cognitive load. They needed different surfaces.

The session model means switching mid-recipe is safe— cook_sessions tracks your current step and timer state in Supabase, so a refresh or a phone lock doesn't lose your place.

• AI ingredient swaps (Claude) — A slide-up sheet powered by Claude Haiku generates 2–3 substitutions per ingredient, focused on real dietary shifts: dairy-free, lower calorie, lower carb, higher protein. The prompt is scope-controlled: vegetables, aromatics, herbs, and spices correctly return nothing—swaps are only offered when they actually matter (fats, dairy, proteins, grains, sweeteners). Combinations are encouraged where they work best (e.g. cream cheese + whole milk as a one-for-one heavy cream swap). Quality is enforced at the prompt level: cheap neutral oils are hard-banned from suggestions. Claude receives the full ingredient list as context so its reasoning is grounded in the actual dish, not just the ingredient name in isolation. Saved swaps write to recipe_modifications and carry over between sessions.
• Batch dietary goal shifts (Claude) — A second, distinct Claude integration separate from per-ingredient swaps. The user selects one or more dietary goals (higher protein, lower carb, dairy-free, etc.) and Claude reads the full ingredient list at once, applies the most practical combination of swaps for the actual dish, and writes all results in a single pass. The prompt instructs Claude to resolve goal conflicts in a single pass—if two goals disagree on the same ingredient, it picks the swap that serves the most goals simultaneously rather than surfacing a mechanical priority-order dialog. Batch-shifted lines are tagged in recipe_modifications so they can be cleared independently of manual swaps. A static swap catalog serves as a zero-latency fallback if the API is unavailable.
• Three-tier recipe import pipeline — Spoonacular handles enriched imports when a key is configured. When it fails or isn't available, a custom JSON-LD adapter fetches the URL directly, parses <script type="application/ld+json"> blocks, and extracts the @type: "Recipe" node— handling nested @graph, HowToSection with itemListElement, and plain string instruction arrays. A demo mock adapter provides a working end-to-end fallback with no external dependencies. Most major recipe sites import cleanly at one of the three tiers.
• Server-side image proxy — Recipe images are routed through /api/image-proxy, which fetches with a browser User-Agent and sets Referer to the source hostname—bypassing hotlink protection silently. Private IP ranges are blocked. Images are validated by content-type, capped at 8 MB, and served with Cache-Control: private to prevent CDN-level caching.
• Prep editor — A checklist of tasks that need to happen before the heat goes on: sourcing, mise en place, equipment. Editable and persisted per-recipe so it reflects your actual habits, not a generic list.
• Cook mode — Step navigator with per-step ingredient narrowing: getIngredientsForStep() matches ingredient names against step text so you see only what's relevant now. Multi-sentence steps are split into a numbered list. Timer persists to cook_sessions.timer_state as a fixed endsAt timestamp—a background tab or refresh doesn't drift the clock.
• My Kitchen — Import recipes, toggle favorites, and search your collection without leaving the page. A "continue cooking" banner surfaces when an active session exists—no badge, just context when you need it. The list paginates client-side from a larger server-fetched set so the initial render stays fast.
• Auth & security — Supabase SSR with cookie-aware server and client boundaries. Middleware enforces session requirements on Editorial and Cook routes; RLS on all tables means no row is accessible outside its owner. The Claude-powered swap endpoint requires a valid session and applies a sliding-window rate limit per user to prevent API cost abuse.

The step view has one job: put the right information in front of you, at the right time, with as little noise as possible.

• Large type for the instruction—readable at arm's length from a phone propped up in the kitchen.
• Ingredient list narrows to just what's relevant to the current step, with a fallback to everything when matching confidence is low.
• Swap button on each ingredient opens the Claude-powered sheet without losing your step position. The sheet knows what recipe you're in and surfaces dietary-shift suggestions—not generic alternatives.
• Back / Next at thumb reach; the final step marks the session complete and prompts for a rating.

Prep is a separate route from the recipe detail—a deliberate checkpoint before committing to a cook session. The checklist is editable and persists so it reflects each person's actual mise en place habits.

My Kitchen deliberately avoids dashboard energy. A short list with titles, ratings, and a delete button. Favorites are separated so they're easy to find again. The continue-cooking banner appears at the top when there's an active session—no notification badge, just context when you need it.

• Claude Haiku (Anthropic) — Used in two distinct integrations via @anthropic-ai/sdk: per-ingredient swap suggestions (Route Handler, authenticated + rate-limited) and batch dietary goal shifts (Server Action, reads the full ingredient list in a single pass). Each integration has its own prompt-engineering constraints: scope guards, quality rules, and structured JSON output requirements.
• Next.js 15 (App Router) — Server Components for data fetching, Server Actions for mutations, Route Handlers for the AI swap and image proxy endpoints. Write paths go through typed actions in lib/actions/.
• Supabase SSR — Per-request server clients for auth-aware queries; browser client for cook mode's step and timer writes. RLS on all tables—no row accessible outside its owner.
• Recipe import pipeline — Spoonacular for enriched parsing when configured; a custom JSON-LD structured-data adapter as a free fallback that handles virtually any major recipe site; a demo mock adapter for zero-dependency demos.
• shadcn/ui — Dialog, Sheet, Checkbox, and scroll areas; component-level overrides kept minimal.

• Prompt scope matters more than prompt cleverness. The Claude swap prompt went through several iterations. The breakthrough wasn't better positive instructions—it was tighter exclusions. Explicitly telling Claude what not to suggest (cheap neutral oils, aromatic vegetables, spices) produced dramatically more useful output than rewording what it should suggest. Cheap oils were hard-banned by name. The scope rule—return [] for anything that isn't a meaningful dietary swap candidate—kept the UI honest: a swap button that appears means something.
• Context makes AI suggestions credible. Sending only the ingredient name produced generic results. Sending the full ingredient list alongside it gave Claude enough recipe context to reason about what a substitution actually does to the dish—not just whether it's chemically similar.
• CDN cache collisions are silent and maddening. The image proxy shipped with Cache-Control: public. In production on Netlify, every imported recipe started displaying the same image—the first one ever fetched. The CDN was caching the proxy response by path alone, ignoring the ?url= query parameter entirely. The fix was Cache-Control: private—browser-only caching, no edge layer. Unsplash URLs were also moved to bypass the proxy entirely since their CDN is already public. The symptom (all images identical) was obvious; the root cause (edge cache keying behavior) took careful reading of Netlify's caching docs to confirm.
• A timestamp beats a counter. The timer stores a fixed endsAt timestamp rather than a countdown. A counter drifts across tab switches and phone locks. A timestamp doesn't—remaining seconds are always calculated fresh on each tick.
• Honest beats clever in ingredient matching. Step-ingredient matching surfaced an inherent tension: strict matching misses paraphrased ingredients; loose matching shows too much. The solution was to show everything when confidence is low and label it clearly—not hide the fallback.
• The import pipeline was designed for failure. Spoonacular occasionally extracts garbage from paywalled or redirect pages. JSON-LD structured data is surprisingly reliable as a free fallback—most major recipe sites include it for SEO. Designing each adapter against the same interface kept the fallback logic clean and testable.
• Server Actions kept mutations clean. No route handlers, no client-side fetches for writes, cache invalidation via revalidatePath() co-located with the action. The write pattern stayed consistent across every mutation in the app.

• Mise is where architecture, AI integration, and UX deliberateness all had to work together. Claude isn't a single bolt-on feature—it runs in two separate places, each with a different job: swapping individual ingredients on demand, and shifting an entire recipe toward a dietary goal in one pass. Each integration is scoped, prompt-engineered, and quality-controlled at the model level rather than post-processed in code.
• The import pipeline handles real-world failure gracefully at every tier. The session model means you can set down your phone mid-recipe and come back without losing your place. The image proxy was simple until it wasn't—and debugging the CDN cache collision required understanding how Netlify's edge layer keys its cache, not just reading error logs.
• The separation between Editorial and Cook turned out to be the right call: each surface has one job, which kept both clean in ways that a unified view would have compromised.
• Code lives here: github.com/meganleclair/mise-intelligent-chef.