Tools App

The Tools App provides free AI-powered tools to attract users and demonstrate platform capabilities. It serves as a lead generation funnel, converting tool users to the main MyStoryFlow platform.

Overview

The tools app (/apps/tools-app) is a standalone Next.js 15 application featuring multiple AI-powered writing and learning tools. Built with TypeScript, React, and Tailwind CSS, it provides a seamless user experience with anonymous and authenticated access patterns.

Live URL: https://tools.mystoryflow.com 

Available Tools

1. AI Flashcard Generator

Route: /ai-flashcard-generator

Features:

• Generate flashcards from text, PDFs, or images
• Multiple export formats: Anki, Quizlet, PDF, CSV, JSON
• Interactive game mode for studying
• Public sharing with short codes
• Browse 10,000+ community flashcard decks
• QR code generation for easy sharing

API Endpoints:

• POST /api/flashcards/generate - Generate flashcards
• GET /api/flashcards/[shareCode] - Retrieve flashcard deck
• PATCH /api/flashcards/[shareCode] - Update deck metadata
• DELETE /api/flashcards/[shareCode] - Delete deck
• POST /api/flashcards/[shareCode]/export - Export in various formats

Components:

• FlashcardGenerator - Main generation interface
• FlashcardViewer - Display and study interface
• GenerationOptions - Customization controls

2. Story Writing Prompts Generator

Route: /story-prompts

Features:

• AI-generated story prompts for all grade levels (K-12+)
• Browse by genre, theme, and difficulty
• Interactive story writing interface
• Collections and curated prompt libraries
• Save and share generated prompts

API Endpoints:

• POST /api/story-prompts/generate - Generate prompts
• GET /api/story-prompts/[id] - Retrieve specific prompt
• POST /api/story-prompts/save - Save prompt to user account
• GET /api/story-prompts/collections - Browse curated collections
• POST /api/story-prompts/analyze-response - AI analysis of student responses

Components:

• AIStoryGenerator - Main generation interface
• Browse pages organized by grade level and genre

3. Book Blurb Generator

Route: /book-blurb-generator

Features:

• Generate professional book blurbs with AI
• Creates 3 versions: Hook-focused, Character-driven, Situation-based
• Performance analysis and competitive benchmarking
• Goodreads data integration for genre-specific insights
• Export and share capabilities

API Endpoints:

• POST /api/book-blurb/generate - Generate blurbs
• GET /api/book-blurb/[shareCode] - Retrieve generated blurb
• POST /api/book-blurb/[shareCode]/export - Export blurb
• GET /api/book-blurb/browse - Browse sample blurbs

Components:

• BookBlurbGenerator - Multi-step form interface
• BookBlurbGeneratorLanding - Landing page with examples
• BookBlurbPublicView - Shared blurb display

4. Romance Writing Prompts Generator

Route: /romance-writing-prompts

Features:

• AI-generated romance prompts for all subgenres
• Organized by tropes (enemies-to-lovers, fake relationship, etc.)
• Browse by heat level (clean, sweet, spicy)
• 1,000+ pre-generated prompts
• Category-specific pages for popular tropes

API Endpoints:

• POST /api/romance-writing-prompts/generate - Generate prompts
• GET /api/romance-writing-prompts/[shareCode] - Retrieve prompt
• GET /api/romance-writing-prompts/browse - Browse by category

Components:

• RomanceWritingPromptsGenerator - Generation interface
• RomancePromptViewer - Display interface
• Category-specific pages for each trope

5. PDF Flipbook Creator

Route: /flipbook

Features:

• Convert PDFs to interactive flipbooks
• Realistic page-turning effects
• Mobile-optimized viewing
• Public sharing and embedding
• Browse community flipbooks

API Endpoints:

• POST /api/flipbook/create - Create flipbook from PDF
• GET /api/flipbook/[shareCode] - Retrieve flipbook
• Admin endpoints for bulk operations

Components:

• FlipbookCreator - PDF upload and processing
• FlipbookViewer - Interactive reading interface
• FlipbookLibrary - Browse and discover

Technical Architecture

Technology Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shared UI package (@mystoryflow/ui)
• Database: Supabase (separate instance for tools)
• AI Provider: OpenAI GPT-4 and GPT-4o-mini
• Authentication: Shared with main app via @mystoryflow/auth

Database Architecture

Dual Database Setup:

1. Shared Auth Database - User authentication and profiles (same as main app)
2. Tools Database - All tool-specific data (flashcards, prompts, blurbs, etc.)

Key Tables:

• tools_flashcard_decks - Flashcard collections
• tools_flashcards - Individual flashcards
• tools_story_prompts - Generated story prompts
• tools_book_blurbs - Generated book blurbs
• tools_romance_prompts - Romance writing prompts
• tools_flipbooks - PDF flipbook data
• tools_sessions - Anonymous and authenticated sessions
• tools_rate_limits - Rate limiting tracking
• tools_analytics - Usage analytics
• tools_ai_usage - AI usage tracking for admin monitoring

AI Integration Standards

All AI tools follow consistent patterns:

AI Usage Tracking:

• All AI interactions tracked via trackAIUsage function
• Monitors prompts, token usage, costs, and performance
• Admin dashboard integration for usage analysis
• Follows established patterns from grammar and conversation features

Multi-Variant Generation:

• Book Blurb Generator creates 3 versions with different approaches
• Each variant includes confidence scoring and analysis
• Performance analysis with competitive benchmarking

Rate Limiting:

• Anonymous users: 10-15 generations per 24 hours
• Authenticated users: 100-150 generations per 24 hours
• Tool-specific limits configured in @/lib/rate-limiter

Session Management

Anonymous Sessions:

• 24-hour expiration
• Session ID stored in cookies
• Limited features and rate limits

Authenticated Sessions:

• Persistent storage
• Higher rate limits
• Save and organize generated content
• Cross-app authentication with main platform

Export System

Supported Formats:

• PDF - Print-optimized with proper layouts
• Anki - Tab-separated format for flashcards
• CSV - Spreadsheet-compatible
• Quizlet - Compatible with Quizlet import
• JSON - Complete structured data
• DOCX - Word documents for book blurbs

Export Endpoints:

• Each tool has dedicated export routes
• Format validation and conversion
• Analytics tracking for export events

Key Features

Lead Generation & Conversion

• Free Access - No signup required for basic usage
• MyStoryFlow CTAs - Strategic placement throughout tools
• Upgrade Nudges - Encourage authentication for better limits
• Community Integration - Share content to build user base
• Email Capture - Optional for enhanced features

SEO & Discovery

• Public Browse Pages - Discover community-created content
• SEO Optimized - Metadata for all shared content
• Sitemap Generation - Dynamic sitemaps for all tools
• Structured Data - Schema.org markup for rich results
• Category Pages - Landing pages for popular topics

Analytics & Tracking

Event Tracking:

• Tool usage and generation events
• Export and share actions
• View counts and engagement metrics
• AI usage and cost tracking
• Rate limit monitoring

Admin Dashboard:

• Usage statistics and trends
• AI cost analysis
• User behavior insights
• Content moderation tools

Sharing System

Universal Share Codes:

• Short, memorable codes (e.g., FLASH-ABC123)
• Tool-specific prefixes for clarity
• QR code generation
• Public/private visibility controls
• Share count tracking

Social Features:

• Public browse pages for discovery
• Featured content curation
• Community galleries
• Cross-tool promotion

Development Standards

All tools follow consistent development patterns documented in /apps/tools-app/CLAUDE.md:

Required Components

• Multi-step form interfaces with validation
• Real-time form validation and error handling
• Progress indicators for multi-step flows
• Results display with variant selection
• Export and share functionality
• Analytics integration

Testing Requirements

• Unit tests (80%+ coverage)
• Integration tests for all API endpoints
• End-to-end tests for complete workflows
• Performance tests for AI generation

Form Standards

• Consistent input sizing (size=“sm” for 40px height)
• Real-time validation with clear error messages
• Step-by-step progression with validation gates
• Mobile-responsive design

API Routes Summary

Flashcards

• POST /api/flashcards/generate
• GET /api/flashcards/[shareCode]
• POST /api/flashcards/[shareCode]/export

Story Prompts

• POST /api/story-prompts/generate
• GET /api/story-prompts/[id]
• GET /api/story-prompts/collections
• POST /api/story-prompts/analyze-response

Book Blurbs

• POST /api/book-blurb/generate
• GET /api/book-blurb/[shareCode]
• POST /api/book-blurb/[shareCode]/export
• GET /api/book-blurb/browse

Romance Prompts

• POST /api/romance-writing-prompts/generate
• GET /api/romance-writing-prompts/[shareCode]
• GET /api/romance-writing-prompts/browse

Flipbooks

• POST /api/flipbook/create
• GET /api/flipbook/[shareCode]

Admin Routes

• /api/admin/story-prompts/* - Bulk operations and management
• /api/admin/flipbooks/* - Flipbook administration
• /api/admin/tools/samples/* - Sample data generation

Rate Limits

Performance

Target Metrics:

• API response time: less than 500ms for simple operations
• AI generation time: less than 10 seconds
• Page load time: less than 2 seconds
• Export generation: less than 5 seconds

Deployment

• Platform: Vercel
• URL: https://tools.mystoryflow.com 
• Database: Supabase (separate instance)
• CDN: Vercel Edge Network
• Environment: Production, Preview, Development

Future Enhancements

Planned tools and features:

• Character development worksheet generator
• Plot outline generator
• World-building questionnaire
• Poetry prompt generator
• Creative writing exercises
• Reading comprehension quiz generator

Related Documentation

• Development Standards
• Story Prompts Implementation
• SEO Strategy
• Admin Setup