forAIge

• 

  Screenshot of forAIge

Inspiration I've thrown out way too much food that just needed a little creativity. A half-used can of coconut milk, some wilting spinach, a sweet potato, perfectly good ingredients that never became a meal. I wanted to build something that makes that decision effortless: tell it what you have, get something real you can actually cook tonight.

What it does forAIge lets you type in whatever ingredients you have on hand, optionally toggle dietary preferences like vegetarian or gluten-free, and instantly get three meal suggestions from Claude. Each suggestion comes with a name, an explanation of why it works with your specific ingredients, and a step-by-step recipe. No account required. No backend. Your Anthropic API key lives only in your browser's localStorage and is sent only to api.anthropic.com.

How I built it
The stack is deliberately minimal: React + TypeScript, Vite, and Tailwind CSS v4 for the frontend. Claude (claude-sonnet-4-6) handles all the meal logic via the Anthropic API called directly from the browser. The response is structured as JSON so each meal card renders cleanly without any parsing gymnastics. The project followed a spec-driven process, starting with a scope doc and working from defined requirements rather than building freely and figuring it out later. That constraint actually made the build faster.

Challenges
Browser-direct API calls: calling the Anthropic API from the browser requires the anthropic-dangerous-direct-browser-access header, which isn't obvious from the docs. Figuring that out was the first real blocker. Deploying behind a reverse proxy: serving the app at /forAIge/ instead of / meant Vite's default build assumed assets lived at the root. Setting base: '/forAIge/' in vite.config.ts fixed it, but it took some digging through browser dev tools error messages to get there. DNS, at the worst possible time: mid-build, a routine DNS record migration from individual subdomain records to a wildcard dropped the apex domain entirely. Unrelated to the app, but a good reminder that infrastructure has a way of surfacing problems at the least convenient moment.

What I learned
Spec-driven development actually works. Having a written scope doc made it easy to stay focused and resist the urge to add features. The docs/ folder isn't just busywork, it's what kept the build on track for a one-day deadline.

Built With

• claude
• react
• tailwind
• typescript
• vite