The latest articles on DEV Community by Sylus Abel (@divin3circle). https://dev.to/divin3circle https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1095402%2Fcc7a744b-d948-42a7-8f52-ad8cf14a11c7.jpeg https://dev.to/divin3circle en Sylus Abel Mon, 16 Mar 2026 12:50:16 +0000 https://dev.to/divin3circle/how-we-built-alicia-storybook-with-gemini-google-cloud-4c3l https://dev.to/divin3circle/how-we-built-alicia-storybook-with-gemini-google-cloud-4c3l <h1> How We Built Alicia Storybook with Gemini + Google Cloud </h1> <p><a href="https://alicia-monorepo-web.vercel.app/" rel="noopener noreferrer">Alicia Storybook</a>is a multimodal AI storytelling app that helps kids and first-time writers turn ideas into complete, illustrated stories.</p> <p><strong>This content was created specifically for the purpose of entering the Gemini Live Agent Challenge hackathon.</strong></p> <h2> Why we built Alicia </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd20hh2riu5bsa3y1ohr6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd20hh2riu5bsa3y1ohr6.png" alt=" " width="800" height="433"></a></p> <p>Kids often have incredible imagination but struggle with the blank page. Most tools either feel too rigid or generate everything for the user, which removes creative ownership.</p> <p>We wanted to build an experience where AI acts like a supportive co-creator:</p> <ul> <li>helping users write page by page,</li> <li>giving contextual feedback,</li> <li>generating matching illustrations,</li> <li>and keeping momentum through a full 12-page story arc.</li> </ul> <h2> What Alicia does </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjq7zsd4f978lgr5lppe.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjq7zsd4f978lgr5lppe.png" alt=" " width="800" height="434"></a></p> <p>Alicia guides users through a complete storytelling workflow:</p> <ol> <li>Story setup (character, setting, idea)</li> <li>AI-assisted page writing</li> <li>Live coaching (text + voice)</li> <li>Illustration generation per page</li> <li>Completion of a 12-page storybook draft</li> </ol> <p>The key product principle: <strong>AI should amplify creativity, not replace it.</strong></p> <h2> How we built it </h2> <h3> Frontend </h3> <ul> <li>Next.js + React + TypeScript</li> <li>Tailwind/shadcn for UI</li> </ul> <h3> AI and Models </h3> <ul> <li>Gemini for story coaching and generation</li> <li>Gemini image generation for page illustrations</li> <li>Gemini Live for real-time conversational interaction</li> </ul> <h3> Google Cloud Services </h3> <ul> <li>Firebase Authentication (sign-in)</li> <li>Firestore (story/project/user state)</li> <li>Firebase Storage (generated images)</li> <li>Firebase-backed infrastructure for secure app workflows</li> </ul> <h2> Product architecture (high level) </h2> <ul> <li>Client app handles onboarding, editor, creator flow, and live UX</li> <li>API routes orchestrate Gemini requests for chat/image/live token flows</li> <li>Firestore persists story state and progression</li> <li>Storage persists generated visual assets</li> <li>Auth protects user-level workflows and project ownership</li> </ul> <h2> Challenges we faced </h2> <h3> 1) Balancing freedom with structure </h3> <p>We wanted users to feel unlimited creativity, but also needed enough guardrails so they could actually finish a story.</p> <h3> 2) Prompt consistency across modes </h3> <p>Text coaching, illustration generation, and live interactions must feel coherent. We iterated heavily on prompt structure to keep tone and outcomes aligned.</p> <h3> 3) Cost and access control </h3> <p>Generative features can be expensive if abused. We added a gated reviewer flow so premium AI-heavy routes are controlled while still enabling judges to test the full experience.</p> <h3> 4) Endings and pacing </h3> <p>A lot of users can start stories but struggle to land them. We tuned coaching to push a satisfying page-12 ending (or a clear continuation hook).</p> <h2> What worked really well </h2> <ul> <li>Immediate visual reward after writing (generate illustration per page)</li> <li>Structured 12-page flow that keeps users moving</li> <li>Multimodal interaction loop (write → coach → generate → reflect)</li> <li>Strong “I made this” feeling because user authorship stays central</li> </ul> <h2> What we learned </h2> <ul> <li>Prompt design is product design.</li> <li>Fast feedback loops are everything in creative tools.</li> <li>Clear narrative boundaries increase completion rates.</li> <li>Multimodal UX needs careful state handling and fallback logic.</li> </ul> <h2> What’s next </h2> <ul> <li>Stronger server-side entitlement checks on all AI routes</li> <li>Better analytics on completion and learning progress</li> <li>Collaboration mode (parent/teacher/co-author workflows)</li> <li>Export and publishing improvements for storybook sharing</li> </ul> <h2> Final note </h2> <p>Building Alicia showed us how powerful Gemini + Google Cloud can be when used to support human creativity instead of replacing it.</p> <p>If you share this build post on social media, use: <strong>#GeminiLiveAgentChallenge</strong></p> ai googlecloud gemini webdev