The magic of story is universal, every kid from any part of the world gets easily captivated by an interesting stories. But what if we could make that magic deeply personal? What if we could craft a unique story for a child, based on their fleeting passions - be it dinosaurs one day, or galactic explorers the next?

At IOMechs, a software consultancy specializing in building scalable, AI-powered applications, we're constantly pushing the boundaries of what's possible. That was the spark behind Kidlytics, a project aimed at solving a common challenge our clients face: how to rapidly prototype and build a production-ready generative AI application. This article shares the lessons we learned...

This wasn't just about calling an API with a prompt. It was an exercise in context engineering and building a robust, scalable content engine. We wanted to go beyond the prompt and create a seamless flow from user input to a finished, sharable digital book.

Today, we're taking you on a deep dive into how we built it, our architectural decisions, and why Google Cloud's Vertex AI paired with Genkit on top of Angular's seamless web app became the powerhouse behind our AI storyteller.

The Idea : From Simple QnA to a Personalized Story

The core idea of Kidlytics is simple, a parent answers a few fun questions about the reader, theme and moral of the story. Our system then orchestrates its AI workflow and generates a personalized and meaningful story that can be read out to children. Since the stories are personalized with proper high quality images, they serve the purpose of both education and entertainment. Unlilke, usual stories these are personalized stories so they keep the child engaged

Our Tech Stack for this AI Story Generator

This scalable and functional web app is powered by the following tools and technologies

Angular

At IOMechs, we have been extensively working on building scalable enterprise web apps using Angular ( a popular Javascript Framework to build Single Page Applications). Since we have Muhammad Ahsan Ayaz with us, who is a Google Developers Expert in Angular, there hasn't been ever a time when working in angular wasn't exciting.
And here as well, we have used Angular to harness our AI Story Generator

Firebase

Firebase, one of the highly sought after tool for modern tech startups was used to store our story content and images in Cloud Firestore and Firbase Storage, respectively

Firebase Genkit

An emerging AI integration framework with a comprehensive support for Javascript (unlike many other of its counterparts) was used to orchestrate the AI workflow

Vertex AI

Vertex AI gives us a single control plane for various models. We used Gemini 2.0 Flash for text generation and Imagen 3.0 001 Fast Generate 001 for image creation without juggling different APIs or credentials. This approach ensured seamless usage of AI models with production grade scalability (one of our major focus in everything we build accross the board)

A Look Under the Hood: Architecture of AI Powered Web App

Our architecture is designed for a clean separation of concerns:
The frontend handles user interaction, and the backend orchestrates the AI magic.

1. Frontend (Angular):
   A user navigates to the /story page and answers a series of questions.
2. API Server (Angular's SSR):
   When the user submits their answers, the Angular GenerateStory service makes a POST request to our backend.
3. Genkit Flow Invocation:
   The server doesn't contain the core AI logic. Instead, it simply invokes our storyGenerationFlow defined with Genkit.
4. Vertex AI at Work:
   1. Text Generation: Genkit, authenticated via the gcloud CLI in our environment, calls the Gemini model on Vertex AI. We pass it the user's context and ask for a story broken into parts, with a specific JSON schema.
   2. Image Generation: The flow then iterates through each story part, calling the Imagen model on Vertex AI with the corresponding image prompt to generate illustrations.
5. Storage (Firebase Firestore and Storage):
   Once the complete story (text and image data) is generated, the flow saves it as a single document in our Firestore database, the images are saved in Storage (Object Storage Provided by Firebase) and its downloadable URL is stored in the Firestore Document
6. Display:
   The frontend receives the ID of the newly created story document and redirects the user to a viewStory page, where they can read their personalized tale and share that URL with anyone.

The Challenges we Faced

Making the UI Kids-friendly

Since this application is focused towards kids, our design team thoroughly worked on coming up with the relevant fonts and themes to make the app kids-friendly yet simple at the same time.

Vertex AI Authentication Challenges

Unlike other AI Plugins, vertex does not authenticate with API keys, it requires you to install gcloud CLI and authenticate your account with gcloud, given that you have all relevant configurations in your Google Cloud Console. We have explained the steps in our repository's readme file. Repository link can be found here

Performance Challenges

We faced an issue where our server's bundle size got too big and the page load time was more than 2 minutes, after thorough debugging and optimizations, we were able to bring the load time to few milliseconds only. This was made possible due to extensive expertise of the Angular Dev Team at IOMechs. We reduced the size of the images we were generating, and used Angular's @defer block to lazily load the component instead of rendering it on page load. And we did a few more things here and there.

Building Your Own AI Application?

The architecture we're outlining involves complex choices in Context Engineering and multi-step workflows. If you're planning a similar project and want to leverage our experience with Vertex AI and modern web frameworks, schedule a free consultation with our AI experts.

The Magic in Action: A Code Deep-Dive

Let's look at the heart of our application: The Genkit flow.

src/genkit/storyGenerationFlow.ts

The beauty of this code is its declarative nature. We define our input (userContext) and, crucially, our desired output structure using a zod schema. This forces the Gemini model to return clean, predictable JSON every time, which is a cornerstone of reliable AI engineering.

The flow is then called from our server, abstracting away all the complexity from the API layer.

To get the full and downloadable code, visit next section below

How to get the code and run it in your env

Our codebase is open source and avaialble on Github, you can check it out here.

Just clone the repository and follow the steps mentioned in Readme.md .

The main step is setting up your account on Firebase and Vertex AI, and connecting it with the app through app credentials and gcloud CLI respectively.

Next Chapter

Kidlytics started as an experiment, but it revealed a powerful pattern for building modern, AI-native applications. By combining a robust frontend framework like Angular with an enterprise-grade AI platform like Vertex AI and an orchestration layer like Genkit, we were able to build a delightful, scalable, and maintainable application.

The road ahead is exciting. We're exploring user accounts to save story libraries, collecting feedback to fine-tune our models, and expanding the range of creative content we can generate. It’s a vivid reminder that we are just at the beginning of the story of AI-powered creativity.

Kidlytics revealed a powerful pattern for building modern, AI-native applications. Are you ready to build yours?

Whether you're looking to integrate generative AI into an existing product or build a new application from the ground up, our team has the full-stack expertise to make it a reality.
Let's Discuss Your AI Project at info@iomechs.com

Want to generate stories without cloning the GitHub repo?

If you want to try out Kidlytics without cloning the GitHub repo, or to deploy on your own infrastructure, check out the link below:

Kidlytics public preview

Kidlytics is available as an open-sourced project on GitHub: GitHub - IOMechs/kidlyticsContribute to IOMechs/kidlytics development by creating an account on GitHub.GitHubIOMechs Please subscribe to the newsletter to see the public preview below, which you can use to generate a max of three stories:

IOMechsMuhammad Ahsan Ayaz