{"repo": "aan-arfian28/prd-maker", "files": {"README.md": {"0bd331ece54f42e71f2bb89a8f3390eeb7396140": {"t": 1785746598.6185477, "n": 6772, "h": "508a116b984eb7b0", "c": "# AI PRD Maker\n\n> A modular, multi-AI pipeline that turns your app idea into a production-grade Product Requirements Document -- complete with UML diagrams, database schemas, and technical specifications.\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_overview.gif\" alt=\"AI PRD Maker overview\" width=\"800\" />\n  <br/><em>Main interface: entering a prompt, watching the pipeline progress, and viewing the generated PRD</em>\n</p>\n\n## What It Does\n\nDescribe the application you want to build, and AI PRD Maker generates a comprehensive PRD through a **7-stage modular pipeline**. Each stage is handled by a dedicated AI call with its own system prompt, accumulating context across stages to produce deeply consistent, detailed output.\n\nThe result is a 600-2000+ line Markdown document with embedded Mermaid diagrams (sequence diagrams, ERDs), user flows, core features, and full technical requirements -- ready to share with your team, investors, or developers.\n\n## Highlights\n\n- **7-Stage Modular Pipeline** -- Analysis, Features, User Flows, Architecture, Database Schema, Technical Requirements, and Final Assembly. Each stage builds on the previous, ensuring every section is grounded in the product analysis.\n- **5 AI Providers** -- OpenAI, DeepSeek, Google Gemini, xAI Grok, and Anthropic Claude. Switch between them in Settings with per-provider API key storage.\n- **Real-Time Progress** -- Watch each pipeline phase complete live in the loading screen. See exactly what's happening under the hood.\n- **Interactive Chat Revision** -- After generating a PRD, open the chat panel to request changes. The AI revises the full document while preserving Mermaid diagrams and untouched sections.\n- **Mermaid Diagram Rendering** -- Architecture sequence diagrams and database ERDs are rendered inline, with fullscreen zoom support.\n- **Bilingual UI** -- Toggle between English and Indonesian. System prompts, example prompts, and the generated PRD language follow your choice.\n- **Local-First Storage** -- PRDs, chat history, and settings are saved to your browser (IndexedDB + localStorage). No server-side storage. Export to `.md` for backup.\n- **Customizable Prompts** -- Edit the system prompt for any pipeline stage. Customizations are saved per-language so your English and Indonesian prompt tweaks stay independent.\n- **Hardware-Ready Prompts** -- Built-in detailed example prompts for SaaS restaurant POS, clinic management systems, and more.\n\n## Architecture\n\n```\nUser Prompt\n    |\n    v\nStage 1: Product Analysis (JSON)          -- deep-dive into product idea\n    |\n    v\nStage 2: Sequential Section Generation    -- each section sees all previous output\n    |-- 2a: Core Features\n    |-- 2b: User Flows\n    |-- 2c: System Architecture (Mermaid)\n    |-- 2d: Database Schema (Mermaid ERD)\n    |-- 2e: Technical Requirements\n    |\n    v\nStage 3: Final Assembly                   -- AI generates Overview + Design Constraints\n    |                                       programmatic concatenation of all sections\n    v\nComplete PRD (Markdown with embedded diagrams)\n```\n\n## Screenshots\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_diagram_demo.gif\" alt=\"Mermaid diagram rendering\" width=\"800\" />\n  <br/><em>Mermaid diagrams rendered inline with fullscreen zoom</em>\n</p>\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_setting.gif\" alt=\"Settings and multi-provider support\" width=\"800\" />\n  <br/><em>Settings panel: 5 AI providers, per-provider API keys, model selection, and customizable prompts</em>\n</p>\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|------------|\n| Framework | Next.js 15 (App Router) |\n| Language | TypeScript |\n| Styling | Tailwind CSS 3 |\n| AI Providers | OpenAI, DeepSeek, Google Gemini, xAI Grok, Anthropic Claude |\n| Markdown | react-markdown + remark-gfm + rehype-raw |\n| Diagrams | Mermaid 11 |\n| Storage | IndexedDB + localStorage (client-side only) |\n| i18n | Custom lightweight translation system |\n| Runtime | Node.js |\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- An API key from at least one supported provider (DeepSeek is the default)\n\n### Installation\n\n```bash\ngit clone https://github.com/Arfith/ai-prd-maker.git\ncd ai-prd-maker/source_code\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n### Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## Configuration\n\nAPI keys can be set in two ways:\n\n**Browser Settings** (recommended) -- Click the gear icon in the header, select your provider, and enter the API key. Each provider's key is stored separately in `localStorage`.\n\n**Environment Variables** -- Set provider-specific variables in `.env.local`:\n\n```bash\nOPENAI_API_KEY=sk-...\nDEEPSEEK_API_KEY=sk-...\nGEMINI_API_KEY=...\nGROK_API_KEY=...\nANTHROPIC_API_KEY=sk-ant-...\nDEFAULT_AI_PROVIDER=deepseek\n```\n\nBrowser-provided keys take precedence over environment variables.\n\n## Project Structure\n\n```\nsource_code/src/\n├── app/\n│   ├── api/\n│   │   ├── generate-prd/route.ts      # SSE-streaming PRD generation\n│   │   ├── chat-revision/route.ts     # Chat-based PRD revision\n│   │   └── list-models/route.ts       # Fetch available AI models\n│   ├── layout.tsx\n│   └── page.tsx                       # Main application page\n├── components/\n│   ├── PromptInput.tsx                # Prompt input with example prompts\n│   ├── PrdViewer.tsx                  # Markdown viewer with toolbar\n│   ├── ChatPanel.tsx                  # Interactive chat revision\n│   ├── PrdHistory.tsx                 # Saved PRDs drawer (IndexedDB)\n│   ├── SettingsModal.tsx              # Provider, API key, model settings\n│   ├── PromptEditor.tsx               # Customize system prompts per stage\n│   ├── MarkdownRenderer.tsx           # Markdown + Mermaid rendering\n│   └── MermaidRenderer.tsx            # Mermaid diagram with zoom\n└── lib/\n    ├── prd-generator.ts               # 7-stage modular pipeline\n    ├── prompts.ts                     # System prompts (ID + EN)\n    ├── prompt-customization.ts        # Per-language prompt overrides\n    ├── prd-db.ts                      # IndexedDB wrapper\n    ├── i18n.ts                        # Translation system\n    ├── modelList.ts                   # Dynamic model fetching\n    ├── types.ts                       # Shared TypeScript types\n    └── providers/\n        ├── types.ts                   # Provider interface + metadata\n        ├── registry.ts                # Provider resolution\n        ├── openai-compatible.ts       # OpenAI, DeepSeek, Grok\n        ├── gemini.ts                  # Google Gemini\n        └── anthropic.ts               # Anthropic Claude\n```\n\n## License\n\nMIT\n\n---\n\nBuilt with Next.js and a modular pipeline architecture. No server-side storage -- your data stays in your browser.\n"}, "3e13558c7f2d92fcc1264862ce3ae400b8854b21": {"t": 1785766182.403123, "n": 6772, "h": "508a116b984eb7b0", "c": "# AI PRD Maker\n\n> A modular, multi-AI pipeline that turns your app idea into a production-grade Product Requirements Document -- complete with UML diagrams, database schemas, and technical specifications.\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_overview.gif\" alt=\"AI PRD Maker overview\" width=\"800\" />\n  <br/><em>Main interface: entering a prompt, watching the pipeline progress, and viewing the generated PRD</em>\n</p>\n\n## What It Does\n\nDescribe the application you want to build, and AI PRD Maker generates a comprehensive PRD through a **7-stage modular pipeline**. Each stage is handled by a dedicated AI call with its own system prompt, accumulating context across stages to produce deeply consistent, detailed output.\n\nThe result is a 600-2000+ line Markdown document with embedded Mermaid diagrams (sequence diagrams, ERDs), user flows, core features, and full technical requirements -- ready to share with your team, investors, or developers.\n\n## Highlights\n\n- **7-Stage Modular Pipeline** -- Analysis, Features, User Flows, Architecture, Database Schema, Technical Requirements, and Final Assembly. Each stage builds on the previous, ensuring every section is grounded in the product analysis.\n- **5 AI Providers** -- OpenAI, DeepSeek, Google Gemini, xAI Grok, and Anthropic Claude. Switch between them in Settings with per-provider API key storage.\n- **Real-Time Progress** -- Watch each pipeline phase complete live in the loading screen. See exactly what's happening under the hood.\n- **Interactive Chat Revision** -- After generating a PRD, open the chat panel to request changes. The AI revises the full document while preserving Mermaid diagrams and untouched sections.\n- **Mermaid Diagram Rendering** -- Architecture sequence diagrams and database ERDs are rendered inline, with fullscreen zoom support.\n- **Bilingual UI** -- Toggle between English and Indonesian. System prompts, example prompts, and the generated PRD language follow your choice.\n- **Local-First Storage** -- PRDs, chat history, and settings are saved to your browser (IndexedDB + localStorage). No server-side storage. Export to `.md` for backup.\n- **Customizable Prompts** -- Edit the system prompt for any pipeline stage. Customizations are saved per-language so your English and Indonesian prompt tweaks stay independent.\n- **Hardware-Ready Prompts** -- Built-in detailed example prompts for SaaS restaurant POS, clinic management systems, and more.\n\n## Architecture\n\n```\nUser Prompt\n    |\n    v\nStage 1: Product Analysis (JSON)          -- deep-dive into product idea\n    |\n    v\nStage 2: Sequential Section Generation    -- each section sees all previous output\n    |-- 2a: Core Features\n    |-- 2b: User Flows\n    |-- 2c: System Architecture (Mermaid)\n    |-- 2d: Database Schema (Mermaid ERD)\n    |-- 2e: Technical Requirements\n    |\n    v\nStage 3: Final Assembly                   -- AI generates Overview + Design Constraints\n    |                                       programmatic concatenation of all sections\n    v\nComplete PRD (Markdown with embedded diagrams)\n```\n\n## Screenshots\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_diagram_demo.gif\" alt=\"Mermaid diagram rendering\" width=\"800\" />\n  <br/><em>Mermaid diagrams rendered inline with fullscreen zoom</em>\n</p>\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_setting.gif\" alt=\"Settings and multi-provider support\" width=\"800\" />\n  <br/><em>Settings panel: 5 AI providers, per-provider API keys, model selection, and customizable prompts</em>\n</p>\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|------------|\n| Framework | Next.js 15 (App Router) |\n| Language | TypeScript |\n| Styling | Tailwind CSS 3 |\n| AI Providers | OpenAI, DeepSeek, Google Gemini, xAI Grok, Anthropic Claude |\n| Markdown | react-markdown + remark-gfm + rehype-raw |\n| Diagrams | Mermaid 11 |\n| Storage | IndexedDB + localStorage (client-side only) |\n| i18n | Custom lightweight translation system |\n| Runtime | Node.js |\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- An API key from at least one supported provider (DeepSeek is the default)\n\n### Installation\n\n```bash\ngit clone https://github.com/Arfith/ai-prd-maker.git\ncd ai-prd-maker/source_code\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n### Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## Configuration\n\nAPI keys can be set in two ways:\n\n**Browser Settings** (recommended) -- Click the gear icon in the header, select your provider, and enter the API key. Each provider's key is stored separately in `localStorage`.\n\n**Environment Variables** -- Set provider-specific variables in `.env.local`:\n\n```bash\nOPENAI_API_KEY=sk-...\nDEEPSEEK_API_KEY=sk-...\nGEMINI_API_KEY=...\nGROK_API_KEY=...\nANTHROPIC_API_KEY=sk-ant-...\nDEFAULT_AI_PROVIDER=deepseek\n```\n\nBrowser-provided keys take precedence over environment variables.\n\n## Project Structure\n\n```\nsource_code/src/\n├── app/\n│   ├── api/\n│   │   ├── generate-prd/route.ts      # SSE-streaming PRD generation\n│   │   ├── chat-revision/route.ts     # Chat-based PRD revision\n│   │   └── list-models/route.ts       # Fetch available AI models\n│   ├── layout.tsx\n│   └── page.tsx                       # Main application page\n├── components/\n│   ├── PromptInput.tsx                # Prompt input with example prompts\n│   ├── PrdViewer.tsx                  # Markdown viewer with toolbar\n│   ├── ChatPanel.tsx                  # Interactive chat revision\n│   ├── PrdHistory.tsx                 # Saved PRDs drawer (IndexedDB)\n│   ├── SettingsModal.tsx              # Provider, API key, model settings\n│   ├── PromptEditor.tsx               # Customize system prompts per stage\n│   ├── MarkdownRenderer.tsx           # Markdown + Mermaid rendering\n│   └── MermaidRenderer.tsx            # Mermaid diagram with zoom\n└── lib/\n    ├── prd-generator.ts               # 7-stage modular pipeline\n    ├── prompts.ts                     # System prompts (ID + EN)\n    ├── prompt-customization.ts        # Per-language prompt overrides\n    ├── prd-db.ts                      # IndexedDB wrapper\n    ├── i18n.ts                        # Translation system\n    ├── modelList.ts                   # Dynamic model fetching\n    ├── types.ts                       # Shared TypeScript types\n    └── providers/\n        ├── types.ts                   # Provider interface + metadata\n        ├── registry.ts                # Provider resolution\n        ├── openai-compatible.ts       # OpenAI, DeepSeek, Grok\n        ├── gemini.ts                  # Google Gemini\n        └── anthropic.ts               # Anthropic Claude\n```\n\n## License\n\nMIT\n\n---\n\nBuilt with Next.js and a modular pipeline architecture. No server-side storage -- your data stays in your browser.\n"}, "72cc819cc67cc52c2f91f68b052e354ad84b4da8": {"t": 1785766183.7377532, "n": 6768, "h": "d8d8916aff16f810", "c": "# AI PRD Maker\n\n> A modular, multi-AI pipeline that turns your app idea into a production-grade Product Requirements Document -- complete with UML diagrams, database schemas, and technical specifications.\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_overview.gif\" alt=\"AI PRD Maker overview\" width=\"800\" />\n  <br/><em>Main interface: entering a prompt, watching the pipeline progress, and viewing the generated PRD</em>\n</p>\n\n## What It Does\n\nDescribe the application you want to build, and AI PRD Maker generates a comprehensive PRD through a **7-stage modular pipeline**. Each stage is handled by a dedicated AI call with its own system prompt, accumulating context across stages to produce deeply consistent, detailed output.\n\nThe result is a 600-2000+ line Markdown document with embedded Mermaid diagrams (sequence diagrams, ERDs), user flows, core features, and full technical requirements -- ready to share with your team, investors, or developers.\n\n## Highlights\n\n- **7-Stage Modular Pipeline** -- Analysis, Features, User Flows, Architecture, Database Schema, Technical Requirements, and Final Assembly. Each stage builds on the previous, ensuring every section is grounded in the product analysis.\n- **5 AI Providers** -- OpenAI, DeepSeek, Google Gemini, xAI Grok, and Anthropic Claude. Switch between them in Settings with per-provider API key storage.\n- **Real-Time Progress** -- Watch each pipeline phase complete live in the loading screen. See exactly what's happening under the hood.\n- **Interactive Chat Revision** -- After generating a PRD, open the chat panel to request changes. The AI revises the full document while preserving Mermaid diagrams and untouched sections.\n- **Mermaid Diagram Rendering** -- Architecture sequence diagrams and database ERDs are rendered inline, with fullscreen zoom support.\n- **Bilingual UI** -- Toggle between English and Indonesian. System prompts, example prompts, and the generated PRD language follow your choice.\n- **Local-First Storage** -- PRDs, chat history, and settings are saved to your browser (IndexedDB + localStorage). No server-side storage. Export to `.md` for backup.\n- **Customizable Prompts** -- Edit the system prompt for any pipeline stage. Customizations are saved per-language so your English and Indonesian prompt tweaks stay independent.\n- **Hardware-Ready Prompts** -- Built-in detailed example prompts for SaaS restaurant POS, clinic management systems, and more.\n\n## Architecture\n\n```\nUser Prompt\n    |\n    v\nStage 1: Product Analysis (JSON)          -- deep-dive into product idea\n    |\n    v\nStage 2: Sequential Section Generation    -- each section sees all previous output\n    |-- 2a: Core Features\n    |-- 2b: User Flows\n    |-- 2c: System Architecture (Mermaid)\n    |-- 2d: Database Schema (Mermaid ERD)\n    |-- 2e: Technical Requirements\n    |\n    v\nStage 3: Final Assembly                   -- AI generates Overview + Design Constraints\n    |                                       programmatic concatenation of all sections\n    v\nComplete PRD (Markdown with embedded diagrams)\n```\n\n## Screenshots\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/diagram_demo.gif\" alt=\"Mermaid diagram rendering\" width=\"800\" />\n  <br/><em>Mermaid diagrams rendered inline with fullscreen zoom</em>\n</p>\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_setting.gif\" alt=\"Settings and multi-provider support\" width=\"800\" />\n  <br/><em>Settings panel: 5 AI providers, per-provider API keys, model selection, and customizable prompts</em>\n</p>\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|------------|\n| Framework | Next.js 15 (App Router) |\n| Language | TypeScript |\n| Styling | Tailwind CSS 3 |\n| AI Providers | OpenAI, DeepSeek, Google Gemini, xAI Grok, Anthropic Claude |\n| Markdown | react-markdown + remark-gfm + rehype-raw |\n| Diagrams | Mermaid 11 |\n| Storage | IndexedDB + localStorage (client-side only) |\n| i18n | Custom lightweight translation system |\n| Runtime | Node.js |\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- An API key from at least one supported provider (DeepSeek is the default)\n\n### Installation\n\n```bash\ngit clone https://github.com/Arfith/ai-prd-maker.git\ncd ai-prd-maker/source_code\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n### Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## Configuration\n\nAPI keys can be set in two ways:\n\n**Browser Settings** (recommended) -- Click the gear icon in the header, select your provider, and enter the API key. Each provider's key is stored separately in `localStorage`.\n\n**Environment Variables** -- Set provider-specific variables in `.env.local`:\n\n```bash\nOPENAI_API_KEY=sk-...\nDEEPSEEK_API_KEY=sk-...\nGEMINI_API_KEY=...\nGROK_API_KEY=...\nANTHROPIC_API_KEY=sk-ant-...\nDEFAULT_AI_PROVIDER=deepseek\n```\n\nBrowser-provided keys take precedence over environment variables.\n\n## Project Structure\n\n```\nsource_code/src/\n├── app/\n│   ├── api/\n│   │   ├── generate-prd/route.ts      # SSE-streaming PRD generation\n│   │   ├── chat-revision/route.ts     # Chat-based PRD revision\n│   │   └── list-models/route.ts       # Fetch available AI models\n│   ├── layout.tsx\n│   └── page.tsx                       # Main application page\n├── components/\n│   ├── PromptInput.tsx                # Prompt input with example prompts\n│   ├── PrdViewer.tsx                  # Markdown viewer with toolbar\n│   ├── ChatPanel.tsx                  # Interactive chat revision\n│   ├── PrdHistory.tsx                 # Saved PRDs drawer (IndexedDB)\n│   ├── SettingsModal.tsx              # Provider, API key, model settings\n│   ├── PromptEditor.tsx               # Customize system prompts per stage\n│   ├── MarkdownRenderer.tsx           # Markdown + Mermaid rendering\n│   └── MermaidRenderer.tsx            # Mermaid diagram with zoom\n└── lib/\n    ├── prd-generator.ts               # 7-stage modular pipeline\n    ├── prompts.ts                     # System prompts (ID + EN)\n    ├── prompt-customization.ts        # Per-language prompt overrides\n    ├── prd-db.ts                      # IndexedDB wrapper\n    ├── i18n.ts                        # Translation system\n    ├── modelList.ts                   # Dynamic model fetching\n    ├── types.ts                       # Shared TypeScript types\n    └── providers/\n        ├── types.ts                   # Provider interface + metadata\n        ├── registry.ts                # Provider resolution\n        ├── openai-compatible.ts       # OpenAI, DeepSeek, Grok\n        ├── gemini.ts                  # Google Gemini\n        └── anthropic.ts               # Anthropic Claude\n```\n\n## License\n\nMIT\n\n---\n\nBuilt with Next.js and a modular pipeline architecture. No server-side storage -- your data stays in your browser.\n"}, "fa79c2f3c5aede543ec199cbfdfaa3401a12436b": {"t": 1785766185.2659159, "n": 6790, "h": "a8a01c79718f0657", "c": "# AI PRD Maker\n\n> A modular, multi-AI pipeline that turns your app idea into a production-grade Product Requirements Document -- complete with UML diagrams, database schemas, and technical specifications.\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_overview.gif\" alt=\"AI PRD Maker overview\" width=\"800\" />\n  <br/><em>Main interface: entering a prompt, watching the pipeline progress, and viewing the generated PRD</em>\n</p>\n\n## What It Does\n\nDescribe the application you want to build, and AI PRD Maker generates a comprehensive PRD through a **7-stage modular pipeline**. Each stage is handled by a dedicated AI call with its own system prompt, accumulating context across stages to produce deeply consistent, detailed output.\n\nThe result is a 600-2000+ line Markdown document with embedded Mermaid diagrams (sequence diagrams, ERDs), user flows, core features, and full technical requirements -- ready to share with your team, investors, or developers.\n\n## Highlights\n\n- **7-Stage Modular Pipeline** -- Analysis, Features, User Flows, Architecture, Database Schema, Technical Requirements, and Final Assembly. Each stage builds on the previous, ensuring every section is grounded in the product analysis.\n- **5 AI Providers** -- OpenAI, DeepSeek, Google Gemini, xAI Grok, and Anthropic Claude. Switch between them in Settings with per-provider API key storage.\n- **Real-Time Progress** -- Watch each pipeline phase complete live in the loading screen. See exactly what's happening under the hood.\n- **Interactive Chat Revision** -- After generating a PRD, open the chat panel to request changes. The AI revises the full document while preserving Mermaid diagrams and untouched sections.\n- **Mermaid Diagram Rendering** -- Architecture sequence diagrams and database ERDs are rendered inline, with fullscreen zoom support.\n- **Bilingual UI** -- Toggle between English and Indonesian. System prompts, example prompts, and the generated PRD language follow your choice.\n- **Local-First Storage** -- PRDs, chat history, and settings are saved to your browser (IndexedDB + localStorage). No server-side storage. Export to `.md` for backup.\n- **Customizable Prompts** -- Edit the system prompt for any pipeline stage. Customizations are saved per-language so your English and Indonesian prompt tweaks stay independent.\n- **Hardware-Ready Prompts** -- Built-in detailed example prompts for SaaS restaurant POS, clinic management systems, and more.\n\n## Architecture\n\n```\nUser Prompt\n    |\n    v\nStage 1: Product Analysis (JSON)          -- deep-dive into product idea\n    |\n    v\nStage 2: Sequential Section Generation    -- each section sees all previous output\n    |-- 2a: Core Features\n    |-- 2b: User Flows\n    |-- 2c: System Architecture (Mermaid)\n    |-- 2d: Database Schema (Mermaid ERD)\n    |-- 2e: Technical Requirements\n    |\n    v\nStage 3: Final Assembly                   -- AI generates Overview + Design Constraints\n    |                                       programmatic concatenation of all sections\n    v\nComplete PRD (Markdown with embedded diagrams)\n```\n\n## Screenshots\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/diagram_demo.gif\" alt=\"Mermaid diagram rendering\" width=\"800\" />\n  <br/><em>Mermaid diagrams rendered inline with fullscreen zoom and dark mode support</em>\n</p>\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_setting.gif\" alt=\"Settings and multi-provider support\" width=\"800\" />\n  <br/><em>Settings panel: 5 AI providers, per-provider API keys, model selection, and customizable prompts</em>\n</p>\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|------------|\n| Framework | Next.js 15 (App Router) |\n| Language | TypeScript |\n| Styling | Tailwind CSS 3 |\n| AI Providers | OpenAI, DeepSeek, Google Gemini, xAI Grok, Anthropic Claude |\n| Markdown | react-markdown + remark-gfm + rehype-raw |\n| Diagrams | Mermaid 11 |\n| Storage | IndexedDB + localStorage (client-side only) |\n| i18n | Custom lightweight translation system |\n| Runtime | Node.js |\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- An API key from at least one supported provider (DeepSeek is the default)\n\n### Installation\n\n```bash\ngit clone https://github.com/Arfith/ai-prd-maker.git\ncd ai-prd-maker/source_code\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n### Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## Configuration\n\nAPI keys can be set in two ways:\n\n**Browser Settings** (recommended) -- Click the gear icon in the header, select your provider, and enter the API key. Each provider's key is stored separately in `localStorage`.\n\n**Environment Variables** -- Set provider-specific variables in `.env.local`:\n\n```bash\nOPENAI_API_KEY=sk-...\nDEEPSEEK_API_KEY=sk-...\nGEMINI_API_KEY=...\nGROK_API_KEY=...\nANTHROPIC_API_KEY=sk-ant-...\nDEFAULT_AI_PROVIDER=deepseek\n```\n\nBrowser-provided keys take precedence over environment variables.\n\n## Project Structure\n\n```\nsource_code/src/\n├── app/\n│   ├── api/\n│   │   ├── generate-prd/route.ts      # SSE-streaming PRD generation\n│   │   ├── chat-revision/route.ts     # Chat-based PRD revision\n│   │   └── list-models/route.ts       # Fetch available AI models\n│   ├── layout.tsx\n│   └── page.tsx                       # Main application page\n├── components/\n│   ├── PromptInput.tsx                # Prompt input with example prompts\n│   ├── PrdViewer.tsx                  # Markdown viewer with toolbar\n│   ├── ChatPanel.tsx                  # Interactive chat revision\n│   ├── PrdHistory.tsx                 # Saved PRDs drawer (IndexedDB)\n│   ├── SettingsModal.tsx              # Provider, API key, model settings\n│   ├── PromptEditor.tsx               # Customize system prompts per stage\n│   ├── MarkdownRenderer.tsx           # Markdown + Mermaid rendering\n│   └── MermaidRenderer.tsx            # Mermaid diagram with zoom\n└── lib/\n    ├── prd-generator.ts               # 7-stage modular pipeline\n    ├── prompts.ts                     # System prompts (ID + EN)\n    ├── prompt-customization.ts        # Per-language prompt overrides\n    ├── prd-db.ts                      # IndexedDB wrapper\n    ├── i18n.ts                        # Translation system\n    ├── modelList.ts                   # Dynamic model fetching\n    ├── types.ts                       # Shared TypeScript types\n    └── providers/\n        ├── types.ts                   # Provider interface + metadata\n        ├── registry.ts                # Provider resolution\n        ├── openai-compatible.ts       # OpenAI, DeepSeek, Grok\n        ├── gemini.ts                  # Google Gemini\n        └── anthropic.ts               # Anthropic Claude\n```\n\n## License\n\nMIT\n\n---\n\nBuilt with Next.js and a modular pipeline architecture. No server-side storage -- your data stays in your browser.\n"}, "66c1be13503c72185f071a2e65a1b7182e701cff": {"t": 1785766186.6674178, "n": 6916, "h": "02d34c36a93cdba5", "c": "# AI PRD Maker\n\n> A modular, multi-AI pipeline that turns your app idea into a production-grade Product Requirements Document -- complete with UML diagrams, database schemas, and technical specifications.\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_overview.gif\" alt=\"AI PRD Maker overview\" width=\"800\" />\n</p>\n\n## What It Does\n\nDescribe the application you want to build, and AI PRD Maker generates a comprehensive PRD through a **7-stage modular pipeline**. Each stage is handled by a dedicated AI call with its own system prompt, accumulating context across stages to produce deeply consistent, detailed output.\n\nThe result is a 500-2000+ line Markdown document with embedded Mermaid diagrams (sequence diagrams, ERDs), user flows, core features, and full technical requirements -- ready to share with your team, investors, or developers.\n\n## Highlights\n\n- **7-Stage Modular Pipeline** -- Analysis, Features, User Flows, Architecture, Database Schema, Technical Requirements, and Final Assembly. Each stage builds on the previous, ensuring every section is grounded in the product analysis.\n- **5 AI Providers** -- OpenAI, DeepSeek, Google Gemini, xAI Grok, and Anthropic Claude. Switch between them in Settings with per-provider API key storage.\n- **Real-Time Progress** -- Watch each pipeline phase complete live in the loading screen. See exactly what's happening under the hood.\n- **Interactive Chat Revision** -- After generating a PRD, open the chat panel to request changes. The AI revises the full document while preserving Mermaid diagrams and untouched sections.\n- **Mermaid Diagram Rendering** -- Architecture sequence diagrams and database ERDs are rendered inline, with fullscreen zoom support.\n- **Bilingual UI** -- Toggle between English and Indonesian. System prompts, example prompts, and the generated PRD language follow your choice.\n- **Local-First Storage** -- PRDs, chat history, and settings are saved to your browser (IndexedDB + localStorage). No server-side storage. Export to `.md` for backup.\n- **Customizable Prompts** -- Edit the system prompt for any pipeline stage. Customizations are saved per-language so your English and Indonesian prompt tweaks stay independent.\n- **Hardware-Ready Prompts** -- Built-in detailed example prompts for SaaS restaurant POS, clinic management systems, and more.\n\n## Architecture\n\n```\nUser Prompt\n    |\n    v\nStage 1: Product Analysis (JSON)          -- deep-dive into product idea\n    |\n    v\nStage 2: Sequential Section Generation    -- each section sees all previous output\n    |-- 2a: Core Features\n    |-- 2b: User Flows\n    |-- 2c: System Architecture (Mermaid)\n    |-- 2d: Database Schema (Mermaid ERD)\n    |-- 2e: Technical Requirements\n    |\n    v\nStage 3: Final Assembly                   -- AI generates Overview + Design Constraints\n    |                                       programmatic concatenation of all sections\n    v\nComplete PRD (Markdown with embedded diagrams)\n```\n\n## Screenshots\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_overview.gif\" alt=\"Main interface and PRD generation\" width=\"800\" />\n  <br/><em>Main interface: entering a prompt, watching the pipeline progress, and viewing the generated PRD</em>\n</p>\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/diagram_demo.gif\" alt=\"Mermaid diagram rendering\" width=\"800\" />\n  <br/><em>Mermaid diagrams rendered inline with fullscreen zoom and dark mode support</em>\n</p>\n\n<p align=\"center\">\n  <img src=\"docs/screenshot/app_setting.gif\" alt=\"Settings and multi-provider support\" width=\"800\" />\n  <br/><em>Settings panel: 5 AI providers, per-provider API keys, model selection, and customizable prompts</em>\n</p>\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|------------|\n| Framework | Next.js 15 (App Router) |\n| Language | TypeScript |\n| Styling | Tailwind CSS 3 |\n| AI Providers | OpenAI, DeepSeek, Google Gemini, xAI Grok, Anthropic Claude |\n| Markdown | react-markdown + remark-gfm + rehype-raw |\n| Diagrams | Mermaid 11 |\n| Storage | IndexedDB + localStorage (client-side only) |\n| i18n | Custom lightweight translation system |\n| Runtime | Node.js |\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- An API key from at least one supported provider (DeepSeek is the default)\n\n### Installation\n\n```bash\ngit clone https://github.com/Arfith/ai-prd-maker.git\ncd ai-prd-maker/source_code\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n### Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## Configuration\n\nAPI keys can be set in two ways:\n\n**Browser Settings** (recommended) -- Click the gear icon in the header, select your provider, and enter the API key. Each provider's key is stored separately in `localStorage`.\n\n**Environment Variables** -- Set provider-specific variables in `.env.local`:\n\n```bash\nOPENAI_API_KEY=sk-...\nDEEPSEEK_API_KEY=sk-...\nGEMINI_API_KEY=...\nGROK_API_KEY=...\nANTHROPIC_API_KEY=sk-ant-...\nDEFAULT_AI_PROVIDER=deepseek\n```\n\nBrowser-provided keys take precedence over environment variables.\n\n## Project Structure\n\n```\nsource_code/src/\n├── app/\n│   ├── api/\n│   │   ├── generate-prd/route.ts      # SSE-streaming PRD generation\n│   │   ├── chat-revision/route.ts     # Chat-based PRD revision\n│   │   └── list-models/route.ts       # Fetch available AI models\n│   ├── layout.tsx\n│   └── page.tsx                       # Main application page\n├── components/\n│   ├── PromptInput.tsx                # Prompt input with example prompts\n│   ├── PrdViewer.tsx                  # Markdown viewer with toolbar\n│   ├── ChatPanel.tsx                  # Interactive chat revision\n│   ├── PrdHistory.tsx                 # Saved PRDs drawer (IndexedDB)\n│   ├── SettingsModal.tsx              # Provider, API key, model settings\n│   ├── PromptEditor.tsx               # Customize system prompts per stage\n│   ├── MarkdownRenderer.tsx           # Markdown + Mermaid rendering\n│   └── MermaidRenderer.tsx            # Mermaid diagram with zoom\n└── lib/\n    ├── prd-generator.ts               # 7-stage modular pipeline\n    ├── prompts.ts                     # System prompts (ID + EN)\n    ├── prompt-customization.ts        # Per-language prompt overrides\n    ├── prd-db.ts                      # IndexedDB wrapper\n    ├── i18n.ts                        # Translation system\n    ├── modelList.ts                   # Dynamic model fetching\n    ├── types.ts                       # Shared TypeScript types\n    └── providers/\n        ├── types.ts                   # Provider interface + metadata\n        ├── registry.ts                # Provider resolution\n        ├── openai-compatible.ts       # OpenAI, DeepSeek, Grok\n        ├── gemini.ts                  # Google Gemini\n        └── anthropic.ts               # Anthropic Claude\n```\n\n## License\n\nMIT\n\n---\n\nBuilt with Next.js and a modular pipeline architecture. No server-side storage -- your data stays in your browser.\n"}, "7301e6931de0d939931b57c676075576dccd07d8": {"t": 1785766188.519389, "n": 5394, "h": "e182976890b3cb71", "c": "# AI PRD Maker\n\n> AI-powered Product Requirements Document generator with Mermaid diagrams, chat revision, and DeepSeek AI.\n\nGenerate professional, detailed PRDs (500+ lines) simply by describing your app idea. Built with **Next.js 15**, **React 19**, and **DeepSeek AI**.\n\n## Features\n\n- **AI-Generated PRDs** — Describe your app in natural language and get a comprehensive, professionally structured Product Requirements Document in seconds.\n- **Mermaid Diagrams** — Every PRD includes at least two diagrams: a sequence diagram for system architecture and an ER diagram for the database schema (both rendered inline).\n- **Chat Revision** — Refine your PRD through an interactive chat interface — discuss changes with the AI and see the document update in real time.\n- **Markdown Rendering** — PRDs are rendered as rich, formatted documents with tables, headings, code blocks, and diagrams.\n- **PRD History** — Save generated PRDs locally for later reference, reload, or delete them.\n- **Model Selection** — Choose between `deepseek-chat` and `deepseek-reasoner` models.\n- **Configurable API Key** — Bring your own DeepSeek API key (stored in browser localStorage) or set it server-side via environment variable.\n- **Example Prompts** — Quick-start with built-in example prompts for common app types.\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|------------|\n| Framework | [Next.js 15](https://nextjs.org/) (App Router) |\n| Language | TypeScript |\n| Styling | Tailwind CSS 3 |\n| AI Provider | DeepSeek API (via OpenAI-compatible client) |\n| Markdown | react-markdown + remark-gfm + rehype-raw |\n| Diagrams | Mermaid 11 |\n| Runtime | Node.js |\n\n## Project Structure\n\n```\nai-prd-maker/\n├── source_code/\n│   └── src/\n│       ├── app/\n│       │   ├── api/\n│       │   │   ├── generate-prd/route.ts    # PRD generation endpoint\n│       │   │   ├── chat-revision/route.ts   # Chat-based PRD revision\n│       │   │   ├── save-prd/route.ts        # Save PRD to disk\n│       │   │   ├── load-prd/route.ts        # Load saved PRD\n│       │   │   ├── delete-prd/route.ts      # Delete saved PRD\n│       │   │   └── list-models/route.ts     # List available models\n│       │   ├── layout.tsx\n│       │   └── page.tsx                     # Main page\n│       ├── components/\n│       │   ├── PromptInput.tsx              # PRD prompt input with examples\n│       │   ├── PrdViewer.tsx                # Markdown + diagram viewer\n│       │   ├── ChatPanel.tsx                # Chat revision panel\n│       │   ├── PrdHistory.tsx               # Saved PRDs list\n│       │   └── SettingsModal.tsx            # API key & model settings\n│       └── lib/\n│           ├── deepseek.ts                  # DeepSeek API client & prompts\n│           ├── modelList.ts                 # Model fetching & fallback list\n│           ├── types.ts                     # Shared TypeScript types\n│           └── textFlowchartParser.ts       # Text-to-Mermaid flowchart parser\n└── contoh_prd.md                            # Example generated PRD output\n```\n\n## Getting Started\n\n### Prerequisites\n\n- **Node.js** 18+\n- **DeepSeek API key** — Get one at [platform.deepseek.com](https://platform.deepseek.com/)\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/Arfith/ai-prd-maker.git\ncd ai-prd-maker/source_code\n\n# Install dependencies\nnpm install\n\n# Set up environment (optional — can also set API key in the browser UI)\ncp .env.example .env.local\n# Edit .env.local and add your DEEPSEEK_API_KEY\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n### Production Build\n\n```bash\nnpm run build\nnpm start\n```\n\n## Configuration\n\nThe app supports two ways to configure the DeepSeek API key:\n\n1. **Browser UI** — Click the gear icon (⚙️) in the header to open Settings and enter your API key. Stored in `localStorage`.\n2. **Environment Variable** — Set `DEEPSEEK_API_KEY` in `.env.local`:\n\n```bash\nDEEPSEEK_API_KEY=sk-your-deepseek-api-key\n```\n\n> Browser-provided keys take precedence over environment variables.\n\nOptionally, set a default model:\n\n```bash\nDEEPSEEK_MODEL=deepseek-chat\n```\n\n## How It Works\n\n1. **Enter a prompt** — Describe the app you want to build (in Indonesian). Example prompts are provided.\n2. **AI generates PRD** — The DeepSeek API generates a comprehensive PRD with:\n   - Overview & problem statement\n   - High-level requirements\n   - Core features with detailed descriptions\n   - User flow steps\n   - System architecture (Mermaid sequence diagram)\n   - Database schema (Mermaid ER diagram)\n   - Design & technical constraints\n3. **View & interact** — The PRD is rendered as rich Markdown with inline Mermaid diagrams.\n4. **Chat to revise** — Open the chat panel to discuss changes with the AI. It updates the PRD while preserving existing content and diagrams.\n\n## API Routes\n\n| Endpoint | Method | Description |\n|----------|--------|-------------|\n| `/api/generate-prd` | POST | Generate a new PRD from a prompt |\n| `/api/chat-revision` | POST | Revise PRD via chat conversation |\n| `/api/save-prd` | POST | Save a PRD to disk |\n| `/api/list-prds` | GET | List all saved PRDs |\n| `/api/load-prd` | GET | Load a specific saved PRD |\n| `/api/delete-prd` | DELETE | Delete a saved PRD |\n| `/api/list-models` | POST | Fetch available DeepSeek models |\n\n## License\n\nMIT\n\n---\n\nBuilt with ❤️ using Next.js and DeepSeek AI.\n"}}}}