OpenCode
68a9071cf1
Local branch had diverged from origin/master (sibling commits on the same base). Rewrote local history linearly on top of origin/master, folding in all local content: exa/hot-platform discovery hunters, leaks ledger, nightly sweep orchestrator, updated .gitignore and skill docs, plus the latest hunt output and vault state. Remote-only files (vault keys, channel scripts) were restored rather than dropped, so the resulting tree is a full union of both sides.
1 line
49 KiB
JSON
1 line
49 KiB
JSON
{"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"}, "05630258ebb8f154b32a64b4374256ae8c5a7402": {"t": 1786067838.5365882, "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"}}}} |