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/
- 🧙♂️ 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
- 🎨 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
- 🔄 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
- 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)
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!
-
Clone the repository
git clone https://github.com/yourusername/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.
- 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.
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
AI PRD Creator is a fully installable Progressive Web App!
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
- ✅ Works offline (cached models)
- ✅ Fast loading with service workers
- ✅ Native app experience
- ✅ No app store needed
- ✅ Auto-updates on launch
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
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
- 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.
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
- 🟢 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
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
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
}
]
}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": "..."
}
}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..."
}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": "..."
}
}All AI prompts automatically include:
Current Date: January 21, 2025
Current Time: 3:45 PM PSTThis ensures:
- Time-relevant recommendations
- Current technology suggestions
- Accurate market context
Product Idea: "A mobile app for finding and booking local fitness classes"
- 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.mdor 💾 save as draft
# Install dependencies
npm install
# Build the application
npm run build
# Start production server
npm start
# Or deploy to Vercel with one click
vercel deploy# Run development server with Turbopack
npm run dev
# Run linting
npm run lint
# Build for production
npm run buildA 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
- 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
- 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
- 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
- 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.
- 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
/* 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 */;/* 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);// 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);User Input → Form State → API Call → Gemini AI → Response → Display
↓ ↓ ↓
localStorage Date/Time Context Markdown Render
Model Selection Copy/Download
The app uses client-side configuration only:
- API keys stored in browser localStorage
- Model preferences saved locally
- No
.envfile needed - No server-side secrets
If you want to provide a default API key (not recommended):
# .env.local (optional, not recommended)
NEXT_PUBLIC_GEMINI_API_KEY=your_key_here- 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
- 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
- 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
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
- Follow existing code style
- Add TypeScript types for all new code
- Test on desktop and mobile
- Ensure PWA functionality works
- Update documentation if needed
This project is licensed under the MIT License - see the LICENSE file for details.
- 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
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