Milo — AI Planner for My Love

Inspiration

It started with a moment we've all had: "Mom's birthday is tomorrow — what do I get her?"

We realized that the problem isn't that people don't care. It's that caring takes work — the kind of invisible mental labor that falls through the cracks of busy lives:

Remembering what people actually like (was it candles? Or was that my aunt?)
Researching across 5 different apps — checking restaurant reviews, comparing gifts on Amazon and other apps, looking up activity availability
Coordinating the timing — booking a table, ordering delivery 3 days early, writing a card
Learning from mistakes — you bought a $200 gift she returned last year, but there's no system that remembers that

The current "workflow" most people use is: panic → Amazon search → generic gift card → guilt. Or worse — they forget entirely.

We asked: What if an AI could hold all of this context — every like, every dislike, every past gift reaction — and plan ahead before you even think to ask?

That's Milo.

What It Does

Milo is an AI-powered relationship planner that:

Remembers your people — Create profiles with likes, dislikes, dietary preferences, budgets, and relationship notes. Every data point makes future plans more personalized.
Syncs with Google Calendar — Connects to your real calendar via OAuth. Automatically detects birthdays, anniversaries, and events. Starts generating plans 2 weeks before the date.
Generates personalized plans using AI — Powered by Google Gemini (free tier). Suggests real restaurants, actual gifts you can buy, activities matched to their interests — all within your budget, all in Singapore with real place names.
Lets you refine with natural language — Don't like a suggestion? Tell Milo: "she hates crowds" or "cheaper options" or "add halal food." The plan updates in real-time.
Brings your people to life — A 3D low-poly village (React Three Fiber) where your contacts become animated characters with toon shading. They walk, do their hobbies, and show speech bubbles reminding you of upcoming events.
Learns from every interaction — Past plans are stored. Milo never repeats the same gift or restaurant. Preferences compound over time.

How We Built It

Stack:

Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS, Framer Motion
3D World: React Three Fiber + drei (Three.js) with custom toon shaders and cel-shading
AI: Google Gemini 2.0 Flash-Lite via REST API (free tier, structured JSON output)
Calendar: Google Calendar API with OAuth2 refresh token flow
State: Zustand (character store) + JSON file-based DB (lib/store.json)
Mascot: Milo — a custom SVG bird character with expression-based animations

Architecture:

Calendar events → matched to contacts by name → auto-triggers plan generation
Gemini generates structured JSON (venues, gifts, food, activities, checklist) based on contact profiles
Plans can be refined via Milo chat (same Gemini endpoint, different prompt)
Finalized plans auto-create tasks in the personal planner with correct due dates

Design Philosophy:

Dark warm canvas (#1A1A1E) — editorial, premium SaaS feel
All icons are custom SVGs (zero emojis in production UI)
Milo mascot adds personality without being childish
Apple-inspired landing page with interactive swipe demo

Challenges

Three.js + Next.js 14 compatibility — Needed specific pinned versions ([email protected], @react-three/[email protected]) and transpilePackages config to avoid SSR hydration errors with dynamic imports.
Gemini structured output — Getting consistent valid JSON from the AI required responseMimeType: "application/json" plus robust parsing with fallback (regex extraction → cleaned JSON → fallback plan).
Google Calendar OAuth in development — The OOB redirect flow was deprecated, local server redirects lost query params on some systems. Solved with a copy-paste code flow using Desktop app credentials.
AI plan quality — Early prompts returned generic suggestions. Had to engineer prompts with: explicit interest matching ("If they like gardening → garden-themed gifts"), deduplication against past plans, and budget constraints.
Landing page iterations — Went through 6+ versions (cream/gold, Apple-style, editorial dark) before landing on the current warm-dark + Milo orange theme that matches the app identity.

What We Learned

AI is only as good as the context you give it. The difference between "suggest a gift" and "suggest a gift for someone who loves gardening, hates crowds, budget $80-150, in Singapore, and already received a garden tool set last year" is night and day.
Free tiers are production-viable. Google Calendar API (unlimited for personal use) + Gemini Flash-Lite (15 RPM free) = a fully functional AI app with zero infrastructure cost.
The 3D world isn't a gimmick. It creates emotional attachment to the app. When you see Mom's character walking around saying "my birthday is next week!" — you feel something a notification can't replicate.

What's Next

Apple Calendar + Outlook integration
One-tap execution (actually book restaurants, order gifts via affiliate links)
Mobile-native version with push notifications

How We Used Kiro

We used Kiro's spec-driven workflow to turn an ambitious full-stack AI app into reality within hackathon time. Starting with structured requirements in .kiro/specs/, Kiro broke our vision into 30 dependency-ordered tasks and executed them autonomously in Autopilot mode — building API routes, Three.js scenes, OAuth flows, and UI components across 50+ files. Steering files kept generations consistent. When we shared screenshots for feedback, Kiro analyzed issues and refactored entire pages in parallel using sub-agents. The result: a polished SaaS app with 3D world, Gemini AI, and Google Calendar integration.