An interactive web application that generates personalized children's storybooks with AI-powered text and illustrations. Create unique, engaging stories with consistent characters and beautiful watercolor-style illustrations.
🎨 AI-Generated Stories - Create custom children's stories from simple prompts 🖼️ Consistent Character Illustrations - Maintain character appearance across all pages 📖 Interactive Page Flip - Realistic book-reading experience with smooth page transitions ⚙️ Secure API Management - Local storage of API keys for privacy
- Enter a Story Prompt - Describe your story idea (e.g., "A brave little mouse who dreams of becoming a chef")
- Set Page Count - Choose between 1-10 pages for your story
- AI Generation - The app creates:
- Story structure with detailed character descriptions
- Cover image with main characters
- Individual page illustrations with consistent character appearance
- Frontend: Next.js 15, React, TypeScript, SCSS
- Page Flip Animation: page-flip library for realistic book experience
- AI Text Generation: Google Gemini 2.5 Flash
- AI Image Generation: Fal AI (qwen-image, flux-pro fallback)
- Styling: Custom SCSS with watercolor theme
- Schema Validation: Zod for type-safe data handling
You'll need API keys from:
- Google AI Studio - For Gemini API
- Fal AI Dashboard - For image generation
- Clone the repository
git clone <repository-url>
cd storybook- Install dependencies
npm install- Start the development server
npm run dev-
Open your browser Navigate to http://localhost:3000
-
Configure API Keys
- Click "API Settings" in the app
- Enter your Google Gemini API key
- Enter your Fal AI API key
- Keys are stored locally in your browser
- Enter a creative prompt describing your story idea
- Select the number of pages (1-10)
- Click "Generate Story"
- Wait for AI generation (typically 2-3 minutes)
- Enjoy your interactive storybook!
- Use arrow buttons to flip pages
- Track progress with the page counter
- Click "New Story" to create another storybook
- Generates structured story with character descriptions
- Creates detailed character appearance profiles
- Ensures educational and age-appropriate content
- Cover image featuring main characters
- Individual page illustrations with scene-specific content
- Character consistency maintained through detailed appearance descriptions
- Watercolor illustration style with no text overlay
- Detailed character schemas with appearance descriptions
- Exact character descriptions passed to all image prompts
- Consistent clothing, colors, hair, and physical features
- Visual theme enforcement across all illustrations
src/
├── app/
│ ├── api/
│ │ └── generate-story/
│ │ └── route.ts # Main API endpoint for story generation
│ ├── page.tsx # Main application component
│ ├── layout.tsx # App layout
│ ├── story.scss # Storybook styling
│ └── settings.scss # Settings dialog styling
- Story Generation API (
route.ts) - Handles AI generation with character consistency - Interactive UI (
page.tsx) - Manages book state, page flipping, and user interactions - Character Schema - Ensures consistent character appearance across illustrations
- Page Flip Integration - Realistic book reading experience
- API keys stored locally in browser (localStorage)
- No server-side storage of personal data
- Keys only sent to official AI providers (Google, Fal AI)
- No data collection or tracking
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Modify
IMAGE_STYLE_DIRECTIVEinroute.tsto change illustration style - Adjust story generation prompts for different content types
- Customize UI themes in SCSS files
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
For issues and feature requests, please create an issue in the repository.
Created with ❤️ using AI technology to inspire young readers and storytellers