The project deployed at the address https://story-teller-next.vercel.app/
As two fellow mothers and developers, we both faced the same challenge — our kids love hearing stories where they are the heroes, but after some time, it’s not always easy to come up with new adventures.
Most storytelling apps we found required an internet connection or collected personal data — not ideal for flights, camping trips, or when you simply want to protect your child’s privacy.
That’s how AI-Powered Storytelling was born — an app that lets parents and children generate magical, personalized stories anytime, anywhere, safely and privately.
We wanted to merge our passion for technology and motherhood to create something meaningful — a tool that sparks imagination while staying ethical, safe, and accessible.
The inspiration came from real-life parenting moments: wanting to nurture creativity without screens, subscriptions, or privacy concerns.
Throughout development, we learned how to combine AI innovation with practical, family-focused design. Some highlights include:
- Implementing **Chrome built-in API's ** for privacy and offline functionality.
- Designing child-friendly, intuitive interfaces that work on all devices.
- Using language detection and translation APIs to support multilingual families.
- Building for scalability and reuse, ensuring the app can grow and adapt to new audiences and story formats.
Tech Stack:
- Frontend: Next.js + React for dynamic storytelling experiences.
- AI Integration: Google AI APIs — including Writer AI, Language Detection, and Translation APIs.
- Offline Support: Provided by Chrome built-in API's.
- Text-to-Speech (TTS): Implemented with Open AI API.
Our system architecture is built with flexibility and long-term growth in mind:
- The app is scalable, supporting more users, story themes, and languages.
- The application is adaptable for various audiences — from young readers to parents and educators.
- Works offline, ensuring access anywhere without data collection or privacy risks.
- Text-to-Speech (TTS) implementation: Currently, Google Chrome does not provide built-in TTS support. In our MVP, we experimented with OpenAI's TTS, but this approach could potentially compromise user privacy and does not function offline. We anticipate that future improvements, such as native Google AI TTS support, will enable a secure and fully offline solution.
- Successfully implemented on-device AI models for story generation.
- Integrated Google AI APIs for writing, language detection, and translation.
- Built a ** offline-capable, privacy-first app** for families.
- Created scalable, reusable architecture for future growth and internationalization.
- Running lightweight AI locally is possible without sacrificing story quality.
- Multilingual support can greatly expand accessibility and audience.
- Modular architecture allows future-proofing for growth and new features.
- Add more story themes and character customization.
- Expand multilingual capabilities for more languages.
- Exploring safer TTS options: We are actively investigating alternatives to provide Text-to-Speech functionality that is fully offline and privacy-compliant, ensuring a secure and seamless experience for families without compromising user data.
- Explore educational modules for interactive learning alongside storytelling.
- Test broader scalability for larger audiences and collaborative storytelling features.
The final app empowers families to enjoy creative, private, and offline storytelling experiences.
As developers and mothers, this project reflects our belief that technology can inspire imagination safely and meaningfully.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.