📝 AI PRD Creator

An intelligent Product Requirements Document (PRD) generator powered by Google's Gemini AI. Transform your product ideas into comprehensive, professional PRDs in minutes with a beautiful Compact Neo-Brutalism design that features refined borders, optimized shadows, and efficient layouts.

🌐 Live Demo: https://ai-prd-creator.vercel.app/

✨ Features

🎯 Core Functionality

🧙‍♂️ 3-Step Wizard Flow: Guided wizard interface (Input → Generate → Review) for streamlined PRD creation
🚀 Quick Start with AI: Describe your product idea in plain text and let AI auto-fill the entire form
📋 Structured Form Input: Organized sections for all essential PRD components (9 sections including tech stack and constraints)
🤖 AI-Powered Generation: Generate complete, professional PRDs using Gemini AI (40+ models available)
🔍 Full-Page PRD Viewer: Dedicated full-screen viewer with enhanced readability and navigation
📥 Multiple Export Options: Download as Markdown or copy to clipboard with smart naming (productname_prd_date.md)
💾 Advanced Draft Management: Save and manage up to 12 PRD drafts with IndexedDB, localStorage fallback, and migration support
🔄 Draft Loading: Load saved drafts with automatic state restoration and context preservation
📱 Enhanced PWA: Full Progressive Web App support with install prompts and offline capabilities

🎨 Design & UX

🎨 Compact Neo-Brutalism Design: Updated 2025 design system with refined borders (2px standard, 3px emphasis) and optimized spacing
🌞 High-Contrast Interface: Clean, accessible design with vibrant accent colors (yellow #FFEB3B, blue #2196F3, pink #E91E63)
📱 Fully Responsive: Optimized for desktop, tablet, and mobile with improved content density
📲 Enhanced PWA Support: Install as a native app with smart install prompts and dismissal tracking
⚡ Smooth Animations: Fluid transitions (150-250ms) and interactive hover states with reduced motion support
🎯 Advanced Model Indicator: Always know which AI model you're using with display names and descriptions

🤖 AI Capabilities

🔄 Dynamic Model Selection: Choose from 40+ Gemini models
📡 Live Model Fetching: Auto-updates with latest models from Google
🎛️ Flexible Configuration: Customize API key and model preferences
⏰ Contextual Prompts: All prompts include current date/time
🎯 Smart Defaults: Pre-configured with Gemini 2.5 Flash
💾 Fallback Models: Works offline with 13 cached models

🛠️ Tech Stack

Framework: Next.js 15.5.4 with App Router
Language: TypeScript 5.9.2
Styling: Tailwind CSS 4.1.14 with Compact Neo-Brutalism design system
AI: Google Gemini API (@google/genai v1.21.0)
UI Components: Radix UI primitives for accessibility (Dialog, Scroll Area, Tabs, Tooltip)
Storage: IndexedDB with idb library v8.0.3 for saved drafts (12-draft limit with auto-migration)
Icons: Lucide React v0.544.0 + Radix Icons v1.3.1
Markdown: react-markdown v10.1.0 with remark-gfm v4.0.0 for GFM support
PWA: next-pwa v5.6.0 for Progressive Web App support with service worker caching
Document Export: jsPDF v3.0.3 and docx v9.2.2 (integrated)

🚀 Quick Start

Option 1: Use the Live Demo (Recommended)

No installation needed! Just visit https://ai-prd-creator.vercel.app/ and:

Click the ⚙️ settings icon
Enter your Gemini API key (Get one here)
Choose your preferred model (default: Gemini 2.5 Flash)
Start creating PRDs!

Option 2: Local Development

Clone the repository

git clone https://github.com/AungMyoKyaw/prd-creator.git
cd prd-creator

Install dependencies
```
npm install
```
Run the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:3000

Note: The app stores your API key locally in your browser. It's never sent to any server except Google's Gemini API.

🔑 Getting Your Gemini API Key

Visit Google AI Studio
Sign in with your Google account
Click "Get API Key" or "Create API Key"
Copy the key and paste it in the settings modal
Your key is stored locally in your browser's localStorage

Privacy: Your API key never leaves your browser except to call Google's Gemini API directly.

🎯 How It Works

flowchart TD
    A[⚙️ Initial Setup] --> B[Enter API Key and Select Model]
    B --> C[📝 Step 1: Input]
    C --> D{Quick Start or Manual?}
    D -->|Quick Start| E[Enter Product Idea]
    D -->|Manual| F[Fill Form Manually]
    E --> G[Click Auto-fill with AI]
    G --> H[AI Populates All Form Fields]
    H --> I[Review & Edit Form]
    F --> I
    I --> J[Navigate to Step 2]
    J --> K[🤖 Step 2: Generate]
    K --> L[Click Generate PRD Button]
    L --> M[AI Generates Complete PRD]
    M --> N[👁️ Step 3: Review]
    N --> O{Export, Save, or View?}
    O -->|Export| P[📥 Download as Markdown or 📋 Copy]
    O -->|Save| Q[💾 Save Draft to IndexedDB]
    O -->|View| R[🔍 Open Full-Page Viewer]
    Q --> S[📚 Access from Saved Drafts]
    S --> C
    style A fill:#4A90E2
    style C fill:#50C878
    style G fill:#9068BE
    style M fill:#D6A14D
    style P fill:#FF6B6B
    style Q fill:#FF9800
    style R fill:#4ECDC4

📱 Progressive Web App (PWA)

AI PRD Creator is a fully installable Progressive Web App!

Installation

Desktop (Chrome, Edge, Brave):

Click the install icon (⊕) in the address bar
Or click "Install" button in settings
App opens in its own window

Mobile (iOS Safari):

Tap the Share button
Select "Add to Home Screen"
App appears like a native app

Mobile (Android Chrome):

Tap the three-dot menu
Select "Install App" or "Add to Home Screen"
Launch from your home screen

PWA Features

✅ Works offline (cached models)
✅ Fast loading with service workers
✅ Native app experience
✅ No app store needed
✅ Auto-updates on launch

🎨 Compact Neo-Brutalism Design System (2025 Update)

Inspired by Brutalist design principles, optimized for modern interfaces:

Refined Borders: Compact 2px black borders (3px for emphasis) for efficient visual hierarchy
Optimized Shadows: Refined offset shadows (2px 2px 0px standard, 4px 4px 0px emphasis) for depth
High-Contrast Colors: Vibrant palette with primary yellow (#FFEB3B), secondary blue (#2196F3), accent pink (#E91E63)
Interactive Elements: Pressable buttons with smooth transform animations (150-250ms)
Typography: Big Shoulders Display for headings, Inter for body text with optimized sizing
Responsive Design: Improved content density and mobile experience with compact layout
Accessibility: WCAG 2.1 Level AA compliant with 4.5:1 contrast ratios

🤖 AI Model Selection

Dynamic Model Fetching

The app automatically fetches the latest available models from Google's Gemini API:

40+ models available
Real-time updates
Model descriptions and specs
Input/output token limits

Model Categories (Auto-sorted)

Gemini 2.5 Flash - Lightning fast, 1M context (default)
Gemini 2.5 Pro - Most capable, advanced reasoning
Gemini 2.0 Flash - Previous generation, stable
Gemini 2.0 Pro - Previous gen, high quality
Specialized Models - Embedding, thinking, etc.

Fallback Models

If API fetch fails, the app uses 13 cached models:

Gemini 2.5 Flash (stable)
Gemini 2.5 Pro (stable)
Gemini 2.0 Flash variants
All essential models for PRD generation

Model Display

🟢 Visual Indicator: Always shows current model in header
Display Names: Official model names from Google
Descriptions: Detailed info for each model
Smart Defaults: Pre-configured with best model

🏗️ Architecture

Project Structure

prd-creator/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── _lib/
│   │   │   │   ├── datetime.ts          # Date/time context helper
│   │   │   │   └── gemini-client.ts     # Gemini API client
│   │   │   ├── generate/route.ts        # PRD generation endpoint
│   │   │   ├── models/route.ts          # Model fetching endpoint
│   │   │   ├── prefill/route.ts         # Form auto-fill endpoint
│   │   │   └── refine/route.ts          # Section refinement endpoint
│   │   ├── layout.tsx                   # Root layout with PWA config
│   │   ├── page.tsx                     # Main application page
│   │   └── globals.css                  # Global styles
│   ├── components/
│   │   ├── button.tsx                   # Reusable button component
│   │   ├── footer.tsx                   # App footer with copyright
│   │   ├── full-page-prd-viewer.tsx     # Full-screen PRD viewer
│   │   ├── header.tsx                   # Header with settings/drafts
│   │   ├── input-field.tsx              # Text input component
│   │   ├── loader.tsx                   # Loading spinner
│   │   ├── markdown-renderer.tsx        # Markdown display
│   │   ├── prd-display.tsx              # PRD viewer with export
│   │   ├── prd-form.tsx                 # Main form component
│   │   ├── prd-wizard.tsx               # 3-step wizard wrapper
│   │   ├── pwa-install-prompt.tsx       # PWA install button
│   │   ├── refine-modal.tsx             # Section refinement dialog
│   │   ├── saved-drafts-modal.tsx       # Draft management interface
│   │   ├── section.tsx                  # Form section wrapper
│   │   ├── settings-modal.tsx           # API key & model settings
│   │   └── textarea-field.tsx           # Multi-line input
│   ├── lib/
│   │   ├── drafts.ts                    # IndexedDB draft management
│   │   ├── download.ts                  # File download utilities
│   │   ├── ingest.ts                    # Data ingestion helpers
│   │   ├── models.ts                    # Gemini model definitions
│   │   ├── prd.ts                       # PRD type definitions
│   │   └── prompt.ts                    # AI prompt templates
│   └── types/
│       └── next-pwa.d.ts                # PWA type definitions
├── public/
│   ├── icon-*.png                       # PWA icons (192, 384, 512)
│   ├── apple-touch-icon*.png            # Apple device icons
│   ├── favicon*.{ico,png}               # Favicons
│   ├── manifest.json                    # PWA manifest
│   └── *.svg                           # Static SVG assets
├── specs/                               # Project documentation
│   ├── PBI.md                          # Product Backlog Items
│   ├── PRD.md                          # Project PRD
│   ├── README.md                       # Specs documentation
│   ├── SDD.md                          # Software Design Document
│   ├── SRS.md                          # Software Requirements
│   └── UI-UX-DESIGN-GUIDELINES.md      # Design guidelines
├── .editorconfig                        # Editor configuration
├── .prettierignore                      # Prettier ignore rules
├── .prettierrc                          # Prettier config
├── eslint.config.mjs                    # ESLint configuration
├── next.config.mjs                      # Next.js + PWA config
├── package.json                         # Dependencies
├── postcss.config.mjs                   # PostCSS config
└── tsconfig.json                        # TypeScript config

API Routes

POST `/api/models`

Fetches available Gemini models from Google API.

Request:

{
  apiKey: string;
}

Response:

{
  "models": [
    {
      "value": "gemini-2.5-flash",
      "label": "Gemini 2.5 Flash",
      "displayName": "Gemini 2.5 Flash",
      "description": "Fast and efficient...",
      "inputTokenLimit": 1048576,
      "outputTokenLimit": 65536
    }
  ]
}

POST `/api/prefill`

Auto-fills form from a product idea description.

Request:

{
  apiKey: string,
  model: string,
  productIdea: string
}

Response:

{
  "data": {
    "productName": "FitFinder",
    "targetAudience": "Health-conscious millennials...",
    "problemStatement": "...",
    "proposedSolution": "...",
    "coreFeatures": "...",
    "businessGoals": "...",
    "futureFeatures": "...",
    "techStack": "...",
    "constraints": "..."
  }
}

POST `/api/generate`

Generates a complete PRD from structured inputs.

Request:

{
  apiKey: string,
  model: string,
  inputs: {
    productName: string,
    targetAudience: string,
    problemStatement: string,
    proposedSolution: string,
    coreFeatures: string,
    businessGoals: string,
    successMetrics: string,
    futureFeatures: string,
    techStack: string,
    constraints: string,
    dependencies: string
  }
}

Response:

{
  "data": "# FitFinder\n\n## 1. Introduction & Vision\n\n..."
}

POST `/api/refine`

Refines a specific section based on user feedback.

Request:

{
  apiKey: string,
  model: string,
  currentInputs: { /* current form state */ },
  sectionTitle: string,
  userFeedback: string
}

Response:

{
  "data": {
    "productName": "...",
    "problemStatement": "...",
    "proposedSolution": "..."
  }
}

Date/Time Context

All AI prompts automatically include:

Current Date: January 21, 2025
Current Time: 3:45 PM PST

This ensures:

Time-relevant recommendations
Current technology suggestions
Accurate market context

💡 Example Use Case

Product Idea: "A mobile app for finding and booking local fitness classes"

Quick Start Flow:

Click ⚙️ settings, enter your Gemini API key
Step 1: Input - Enter the idea: "A mobile app for finding local fitness classes"
Click "Auto-fill Form with AI ✨"

AI generates:

Product Name: FitFinder
Target Audience: Health-conscious millennials aged 25-40...
Problem Statement: People struggle to discover local fitness classes...
Proposed Solution: A mobile app that aggregates...
Core Features:
- Interactive map view of nearby classes
- Real-time availability
- In-app booking
- User reviews and ratings
...

Review and adjust as needed
Step 2: Generate - Click "Generate PRD" → Get a comprehensive PRD!
Step 3: Review - View PRD in full-page viewer or export
📥 Download as fitfinder_prd_2025-01-21.md or 💾 save as draft

🚀 Building for Production

# Install dependencies
npm install

# Build the application
npm run build

# Start production server
npm start

# Or deploy to Vercel with one click
vercel deploy

🧪 Development

# Run development server with Turbopack
npm run dev

# Run linting
npm run lint

# Build for production
npm run build

🌟 Key Features Explained

1. 🧙‍♂️ Wizard-Based Interface

A streamlined 3-step workflow that guides users through PRD creation:

Step 1: Input - Form with quick-start AI prefill or manual entry
Step 2: Generate - One-click PRD generation with Gemini AI
Step 3: Review - Full-screen viewer with export and save options
Progress indicators for clear navigation
Persistent state across steps with draft auto-save

2. 💾 Advanced Draft Management

IndexedDB storage with idb library for persistent draft saving
Auto-migration from localStorage to IndexedDB with error handling
12-draft limit with automatic cleanup and storage management
One-click loading of previous work with full state restoration
Delete functionality with confirmation dialogs
Metadata storage including creation date, model used, and content preview

3. 🤖 Smart AI Integration

Dynamic model selection from 40+ Gemini models
Contextual prompts with date/time information
Structured JSON responses for consistency
Auto-fill feature for rapid form completion
Fallback models for offline reliability

4. 📱 PWA Capabilities

Installable on any device (desktop, iOS, Android)
Offline support with service workers
Fast loading with Workbox caching
Native app feel in standalone mode
Auto-updates on app launch
Smart install prompts with dismissal tracking

5. 📥 Export Options

Markdown download with smart file naming (productname_prd_YYYY-MM-DD.md)
One-click copy to clipboard with plain text formatting
Timestamped filenames for version control
Clean markdown format compatible with GitHub, GitLab, Notion, etc.

6. 🔒 Privacy First

Client-side API key storage (localStorage only)
No server-side key storage or logging
Direct API calls to Google Gemini only
No tracking or analytics or user data collection
Open source for full transparency
Browser-only storage with user control over data deletion

🎨 Neo-Brutalism Design System

Color Palette

/* Primary Colors */
--primary-blue: #2196f3 /* Material Blue */ --success-green: #4caf50
  /* Material Green */ --warning-yellow: #ffeb3b /* Material Yellow */
  --error-red: #f44336 /* Material Red */ --neutral-white: #ffffff
  /* Pure White */ --neutral-gray: #f5f5f5 /* Light Gray */
  /* Design Elements */ --border-black: #000000 /* Black borders */
  --shadow-black: rgba(0, 0, 0, 1) /* Black shadows */;

Design Patterns

/* Neo-Brutalist Button */
border: 3px solid var(--border-black);
box-shadow: 4px 4px 0px var(--shadow-black);
transition: all 150ms ease;

/* Hover State */
box-shadow: 6px 6px 0px var(--shadow-black);
transform: translate(-2px, -2px);

/* Active State */
box-shadow: 2px 2px 0px var(--shadow-black);
transform: translate(2px, 2px);

📊 Component Architecture

State Management

// Main application state
const [apiKey, setApiKey] = useState<string>('');
const [selectedModel, setSelectedModel] = useState<string>('gemini-2.5-flash');
const [modelDisplayName, setModelDisplayName] =
  useState<string>('Gemini 2.5 Flash');
const [productIdea, setProductIdea] = useState<string>('');
const [formInputs, setFormInputs] = useState<FormInputs>({});
const [generatedPRD, setGeneratedPRD] = useState<string>('');
const [isGenerating, setIsGenerating] = useState<boolean>(false);

Data Flow

User Input → Form State → API Call → Gemini AI → Response → Display
     ↓                         ↓                      ↓
localStorage            Date/Time Context      Markdown Render
                        Model Selection         Copy/Download

🔧 Configuration

No Environment Variables Required!

The app uses client-side configuration only:

API keys stored in browser localStorage
Model preferences saved locally
No .env file needed
No server-side secrets

Optional Server Deployment Variables

If you want to provide a default API key (not recommended):

# .env.local (optional, not recommended)
NEXT_PUBLIC_GEMINI_API_KEY=your_key_here

📱 PWA Installation Guide

Desktop

Visit https://ai-prd-creator.vercel.app/
Look for install icon in address bar (⊕)
Click "Install" or use settings button
App opens in standalone window

iOS (Safari)

Open in Safari browser
Tap Share button (square with arrow)
Scroll down, tap "Add to Home Screen"
Tap "Add" in top right
App icon appears on home screen

Android (Chrome)

Open in Chrome browser
Tap three-dot menu
Tap "Install app" or "Add to Home Screen"
Confirm installation
Launch from home screen or app drawer

🤝 Contributing

Contributions are welcome! Here's how:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Make your changes
Test thoroughly (npm run dev)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow existing code style
Add TypeScript types for all new code
Test on desktop and mobile
Ensure PWA functionality works
Update documentation if needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

AI: Powered by Google Gemini AI
Framework: Built with Next.js 15.5.4 and React 19
UI Components: Radix UI primitives
Styling: Tailwind CSS v4 with Compact Neo-Brutalism
Icons: Lucide React + Radix Icons
Markdown: react-markdown with GFM support
PWA: next-pwa for Progressive Web App
Storage: idb for IndexedDB management

🌐 Live Demo

Visit: https://ai-prd-creator.vercel.app/

Features to Try:

⚙️ Configure your API key (free from Google AI Studio)
🧙‍♂️ Follow the 3-step wizard (Input → Generate → Review)
🚀 Use Quick Start to auto-fill a form
🤖 Generate comprehensive PRD with AI
🔍 View PRD in full-page viewer
💾 Save drafts to browser storage with IndexedDB
📚 Manage and load saved drafts
📥 Download PRD as Markdown or copy to clipboard
📱 Install as PWA on your device

Made with ❤️ using Gemini AI

Name		Name	Last commit message	Last commit date
public		public
specs		specs
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.mjs		next.config.mjs
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

📝 AI PRD Creator

✨ Features

🎯 Core Functionality

🎨 Design & UX

🤖 AI Capabilities

🛠️ Tech Stack

🚀 Quick Start

Option 1: Use the Live Demo (Recommended)

Option 2: Local Development

🔑 Getting Your Gemini API Key

🎯 How It Works

📱 Progressive Web App (PWA)

Installation

PWA Features

🎨 Compact Neo-Brutalism Design System (2025 Update)

🤖 AI Model Selection

Dynamic Model Fetching

Model Categories (Auto-sorted)

Fallback Models

Model Display

🏗️ Architecture

Project Structure

API Routes

POST /api/models

POST /api/prefill

POST /api/generate

POST /api/refine

Date/Time Context

💡 Example Use Case

Quick Start Flow:

🚀 Building for Production

🧪 Development

🌟 Key Features Explained

1. 🧙‍♂️ Wizard-Based Interface

2. 💾 Advanced Draft Management

3. 🤖 Smart AI Integration

4. 📱 PWA Capabilities

5. 📥 Export Options

6. 🔒 Privacy First

🎨 Neo-Brutalism Design System

Color Palette

Design Patterns

📊 Component Architecture

State Management

Data Flow

🔧 Configuration

No Environment Variables Required!

Optional Server Deployment Variables

📱 PWA Installation Guide

Desktop

iOS (Safari)

Android (Chrome)

🤝 Contributing

Development Guidelines

📄 License

🙏 Acknowledgments

🌐 Live Demo

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

POST `/api/models`

POST `/api/prefill`

POST `/api/generate`

POST `/api/refine`