PlaybookAI

• 

  Landing Page

Inspiration

Every parent and teacher knows the magic of bedtime or circle-time story hour, but we've all heard the exact same request: "Can we make up a story about a dragon who hates doing homework?"

Turning a child's random, brilliant spark of imagination into a real, illustrated book used to take an artist, a writer, and days of work. PlaybookAI was born to capture those fleeting moments—allowing parents, guardians, and educators to instantly turn any child’s wild idea into a complete, personalized storybook right before their eyes.

What it does

You type in whatever silly or imaginative sentence a child gives you—like "a dragon who's scared of homework"—and PlaybookAI brings it to life in under a minute:

• Writes the story: Crafts an age-appropriate narrative centered around the child's prompt.
• Brings it to life visually: Generates a custom cover and vibrant illustrations for every page.
• Narrates out loud: Adds expressive read-aloud audio, perfect for bedtime listening or guided classroom reading.
• Interactive 3D Flipbook: Renders a digital book with realistic 3D pages that kids can physically swipe, turn, and flip through on a screen.
• Keep & Print: Exports the finished book as a PDF or ePub to read offline, save to a personal bookshelf, or print out for bedtime.

How we built it

We built PlaybookAI using a modern TypeScript stack with Next.js 16 (App Router), Tailwind CSS, and Render:

• Story Engine: A Groq LLM acts as the creative co-author, structuring raw ideas into a kid-friendly story outline (titles, art styles, page text, and image prompts).
• AI Illustrator: Cloudflare Workers AI (running FLUX.1 Schnell) paints the cover and page artwork.
• Voice Narrator: ElevenLabs converts story text into warm, expressive audio tracks.
• Live Creation Experience: Powered by Server-Sent Events (SSE) inside Next.js API routes, letting kids watch their book assemble live, step-by-step.
• Digital Reader & Exports: react-pageflip powers the interactive 3D book canvas, while pdf-lib and JSZip handle printable PDF and ePub exports.
• Hosting: Deployed live on Render with automated builds directly from GitHub.

Challenges we ran into

• Orchestrating Multiple AI APIs: Coordinating text generation, image rendering, and audio synthesis into a single smooth flow was tricky. If one image model timed out, we didn't want to ruin the experience for the child. We built per-step fallbacks so the app skips a single bad frame cleanly rather than crashing the whole story.
• Building Without Expensive Storage: Free hosting platforms like Render reset temporary files when the server goes to sleep. To keep the app fast and completely free to run, we designed a pipeline that streams generated assets directly to the browser as soon as they're created.

Accomplishments that we're proud of

• Instant Gratification for Kids: Going from a one-sentence text prompt to a finished, illustrated, and narrated storybook in about 60 seconds.
• More Than a Demo: Creating a complete, family-ready product featuring live generation streaming, 3D page turning, PDF exports, and reading history.
• Ready for the Classroom & Home: Delivering a live, fully deployed web app that anyone can try immediately during the hackathon.

What we learned

• Real-time Web Streaming: Implementing Server-Sent Events (SSE) in Next.js App Router to give users immediate visual feedback.
• Consistent Art Styles: Crafting detailed image prompts so characters and visual themes stay consistent from page 1 to the end.

What's next for PlaybookAI

• Interactive Page-by-Page Audio Controls: Giving parents and teachers easy play/pause buttons for every individual page.
• Custom Art Themes: Letting kids pick their favorite art style before generating (e.g., watercolor, 3D animation, claymation, or comic book).
• Shareable Story Links: Letting parents send finished books to grandparents or teachers share them with parents.
• Co-Creation Mode: Letting kids tweak the plot or characters mid-story and watch the illustrations update live.
• Print-on-Demand: Allowing families to order real, hardcopy physical paperbacks delivered to their doorstep.

Built With

• cloudfare
• elevenlabs
• groq
• nextjs
• render