Magic Drawing Box

“Where toddler doodles become magical worlds.”

Comment

An AI-powered creative playground that transforms toddler scribbles into magical photorealistic illustrations — no coding barriers, just pure imagination.

💡 Inspiration

Every parent has a fridge covered in their child's drawings. But what if those messy scribbles could come to life? We wanted to build something that doesn't just entertain kids, but rewards their creativity in a way they can understand and be proud of.

The idea was simple: a child draws a circle → AI sees a planet → the child sees their drawing transformed into a beautiful space scene. That moment of "Wow, I made that!" is pure magic — and we built an entire app around it using MeDo's AI-assisted development.

🚀 What It Does

Magic Drawing Box is a toddler-friendly web app with 5 creative modes:

1. Free Draw

Kids draw anything they want. The AI analyzes their drawing and transforms it into a photorealistic children's book illustration in their chosen theme (Space 🚀, Ocean 🌊, Jungle 🌿, or Castle 🏰).

2. Guided Mode

The app gives gentle drawing instructions ("Let's draw a star!"). A dotted outline guides little hands, making it perfect for early shape recognition.

3. Shape Detective

A riddle-based game! "I have 5 points and twinkle in the night sky. What am I?" Kids guess, draw, and see their detective skills rewarded with a magical transformation.

4. Story Mode

A 3-panel comic creator! Kids draw a beginning, middle, and end. Our AI weaves the three images into a coherent bedtime story — complete with narration.

5. Color Lab

An interactive color-mixing playground. Kids combine Red, Blue, Yellow, White, and Black to discover 25+ color combinations — from Purple to Olive to Pink!

✨ The Magic Pipeline

  1. Child draws on a touch-friendly canvas
  2. Gemini 2.5 Flash (via MeDo's LLM skill) analyzes the drawing and describes what it sees
  3. Kling AI Image Generation (via MeDo's image-generation skill) transforms both the description AND the original drawing into a photorealistic illustration (Image-to-Image!)
  4. Text-to-Speech (via MeDo's TTS skill) reads out encouraging messages
  5. The result is saved to a Supabase-powered Gallery for parents to cherish

👨‍👩‍👧 Parental Dashboard

  • PIN-protected area (2024)
  • Weekly activity reports
  • Growth timeline tracking creativity over time
  • Sound & narration toggles
  • Gallery management

🛠️ How We Built It (with MeDo!)

This entire project was built conversationally with MeDo — we didn't write boilerplate, we described what we wanted, and MeDo made it real.

The MeDo Workflow

  1. "Make a children's drawing app" → MeDo scaffolded the React + Vite + Tailwind project structure
  2. "Add a canvas with touch support" → MeDo built the drawing engine with mouse + touch events, brush sizes, colors, and an eraser
  3. "Transform drawings with AI" → MeDo integrated the large-language-model skill for analysis and the image-generation skill for creation
  4. "Add voice narration" → MeDo wired up the text-to-speech skill
  5. "Save drawings to a gallery" → MeDo set up Supabase Storage + Database tables
  6. "I want themed worlds" → MeDo added Space, Ocean, Jungle, and Castle themes with unique color palettes
  7. "Make it educational" → MeDo built the Color Lab, Guided Mode, and Shape Detective
  8. "Add a story mode" → MeDo created the 3-panel story creator with AI-generated narratives
  9. "Parents need insights" → MeDo built the PIN-protected dashboard with weekly reports and growth timelines

The Tech Stack (Generated & Integrated by MeDo)

  • Frontend: React 18 + TypeScript + Vite + Tailwind CSS + Framer Motion
  • State Management: Zustand
  • Backend: Supabase (Auth, PostgreSQL, Storage, Edge Functions)
  • AI Models:
    • Gemini 2.5 Flash (multimodal image understanding + story generation)
    • Kling AI Omni (image-to-image transformation)
    • LemonFox TTS (voice narration)
  • Icons: Lucide React
  • Utilities: clsx, canvas API

Skills Used from MeDo Platform

Skill Purpose
large-language-model Analyzes drawings & generates bedtime stories
image-generation Transforms drawings into photorealistic illustrations
text-to-speech Reads encouragement & stories aloud
supabase Database, storage, and edge functions

🚧 Challenges We Ran Into

1. AI Analysis Speed

The multimodal LLM analysis took 5-10 seconds per drawing. Solution: For Guided & Detective modes where we already know the target shape, we bypassed the LLM entirely and sent the drawing directly to Image-to-Image generation — cutting transformation time by 50%.

2. Polling Rate Limits

The image generation API uses async polling. Initially polling every 3 seconds triggered 429 (Too Many Requests) errors. Solution: MeDo helped us add intelligent retry logic and set the interval to 6 seconds with graceful error handling.

3. Mobile Touch Events

Mouse events didn't work on tablets/phones. Solution: MeDo quickly added touch event handlers (touchstart, touchmove, touchend) alongside mouse events for seamless cross-device drawing.

4. Canvas Resolution

The canvas was blurry on high-DPI screens. Solution: MeDo implemented dynamic canvas sizing that matches the display resolution exactly.

🏆 Accomplishments We're Proud Of

  • Image-to-Image Generation: We don't just describe the drawing — we send the actual drawing to the AI, so the transformed image preserves the child's original shapes and composition!
  • Smart Mode Switching: The app intelligently chooses between LLM analysis (for Free Draw) and direct prompt generation (for Guided/Detective) to optimize speed.
  • Toddler-First UX: Every button is huge. Every action has a spring animation. The color palette is limited to 7 friendly colors. There's no text a 3-year-old needs to read.
  • Full Audio Experience: Voice instructions, celebration sounds, and AI-generated bedtime stories with TTS narration.
  • Parental Insights: A real dashboard with weekly drawing counts, growth timelines, and gallery management — not just an afterthought.
  • Color Lab: 25+ color combinations teaching real color theory through play.

📚 What We Learned

  1. AI can preserve creativity, not replace it — By using Image-to-Image instead of pure Text-to-Image, the child's original drawing structure is maintained. The AI enhances, it doesn't overwrite.

  2. Kids need immediate feedback — Every brush stroke generates particles. Every button press has a spring animation. The transformation happens in under 30 seconds. Speed is a feature.

  3. MeDo makes complex integrations trivial — What would have taken days of API docs reading (Kling AI's async workflow, Gemini's SSE streaming, Supabase Storage uploads) was handled by MeDo's pre-built skills. We focused on UX, not plumbing.

  4. Accessibility matters — We learned to design for tiny fingers, short attention spans, and non-readers. The UI communicates through icons, colors, and animations.

🔮 What's Next for Magic Drawing Box

  • Print-on-Demand: Turn transformed drawings into physical storybooks, t-shirts, or fridge magnets
  • More Themes: Dinosaurs, Underwater, Candy Land, and seasonal themes (Halloween, Christmas)
  • Multiplayer: A "Draw Together" mode where siblings can collaborate on a canvas in real-time
  • Smarter AI: Fine-tuned model specifically trained on children's drawings for even better transformations
  • Advanced Analytics: Track drawing complexity progression, color usage patterns, and motor skill development
  • Localization: Support for multiple languages in narration and UI

"Every scribble is a story waiting to be told."

Built With

  • framer-motion
  • gemini-2.5-flash
  • kling-ai
  • lemonfox-tts
  • lucide-react
  • medo
  • react
  • supabase
  • tailwind-css
  • typescript
  • vite
  • zustand
Share this project:

Updates