Ubah ide mentah menjadi PRD terstruktur, dekomposisi task atomik, dan prompt context siap pakai untuk Cursor, Claude Code, Antigravity, dan Cline via 9Router Gateway.
Mengembangkan aplikasi menggunakan AI Coding Agent (Cursor, Claude Code, Antigravity, Windsurf) sangat revolusioner, namun seringkali berujung pada:
- ❌ AI Hallucination & Code Rot: Agent membuat asumsi sendiri, merusak kode yang sudah jalan, atau salah memahami konteks proyek.
- ❌ Boros Token: Membaca seluruh codebase dalam satu prompt raksasa menghabiskan context window dan biaya token.
- ❌ Tanpa Panduan yang Jelas: Memulai coding tanpa dokumen spesifikasi (PRD) membuat arsitektur aplikasi berantakan.
RancangAI menghadirkan alur kerja Spec-Driven Development yang terstruktur:
- Merancang PRD komprehensif berstandar industri dengan bantuan AI.
- Mengurai PRD menjadi hierarki modul fitur dan tugas-tugas atomik (single tasking).
- Menyediakan mode "Next Task Focus" yang menyajikan 1 task spesifik dengan prompt terisolasi agar AI coding agent di IDE tidak tersesat atau memboroskan token.
Rancang PRD lengkap dalam hitungan detik dengan opsi Quick Prompt atau Guided Wizard. Dilengkapi streaming respons real-time.
Papan Kanban 3 kolom (
To Do,In Progress,Done) dengan pemisahan fase (Phase 1: MVP, Phase 2: Core, Phase 3: Polish) dan progress tracking otomatis.
Pratinjau tipografi Markdown kaya berstandar industri, mode edit instan, tombol copy, dan download file
.md.
Konsultasi arsitektur sistem, pemilihan database, atau perancangan skema sebelum menulis kode dengan streaming langsung dari 9Router.
Koleksi starter template yang telah disesuaikan agar hemat token AI dan aman untuk production (Next.js SaaS, Laravel 11 API, FastAPI Agent, Expo Mobile).
flowchart TD
subgraph Input["1. Input Ide"]
A["Ide Kasar Pengguna"] --> B["Guided Wizard / Quick Prompt"]
end
subgraph AI_Engine["2. Engine AI via 9Router"]
B --> C["9Router API Gateway (Claude 3.5 Sonnet / DeepSeek V3 / GPT-4o)"]
C --> D["Dokumen PRD & Blueprint Arsitektur"]
end
subgraph Breakdown["3. Dekomposisi Task"]
D --> E["Task Decomposition Engine"]
E --> F["Kanban Board: Phase 1 (MVP) | Phase 2 (Core) | Phase 3 (Polish)"]
end
subgraph Execution["4. Eksekusi AI Coding Agent"]
F --> G["Next Task Focus Mode (1 Task Per Prompt)"]
F --> H["Multi-Agent Exporter (.cursorrules, CLAUDE.md, Antigravity, AGENTS.md)"]
G --> I["AI Coding Agent di IDE (Cursor / Claude Code / Antigravity)"]
end
| Fitur | Deskripsi |
|---|---|
| Interactive PRD Engine | Membimbing dari ide abstrak menjadi PRD lengkap (Executive Summary, Persona, User Flows, Functional Specs, Data Modeling, Folder Structure, Phased Roadmap). |
| 9Router Gateway Support | Terhubung ke 9Router OpenAI-compatible API (http://localhost:20128/v1 atau custom endpoint) dengan auto-discovery model dan smart fallback. |
| Atomic Task Kanban | Papan kerja visual untuk memantau status pengerjaan fitur secara bertahap. |
| Single-Task Focus Mode | Menyajikan tepat 1 task prioritas beserta acceptance criteria agar AI agent di IDE bekerja terisolasi tanpa merusak file lain. |
| Universal Agent Exporter | 1-klik generator file aturan: .cursorrules (Cursor), CLAUDE.md (Claude Code), .agent/skills/ (Google Antigravity), dan AGENTS.md. |
| RancangChat | Chatbot multi-model untuk konsultasi arsitektur dan diskusi skema database. |
| Local-First Privacy | Dokumen rencana dan konfigurasi tersimpan aman di browser (LocalStorage). Tidak ada source code mentah yang diunggah ke cloud. |
- Node.js >= 18.17 (Disarankan Node.js v20 atau v24)
- npm atau pnpm
- 9Router Gateway (opsional tapi disarankan untuk routing AI multi-model)
-
Clone Repositori:
git clone https://github.com/dapaaa07/RancangAI.git cd RancangAI -
Install Dependensi:
npm install
-
Jalankan Development Server:
npm run dev
-
Buka Aplikasi: Akses browser Anda di http://localhost:3000.
-
Build Production (Opsional):
npm run build npm run start
- Pastikan gateway 9Router Anda aktif di mesin lokal (default:
http://localhost:20128/v1). - Buka RancangAI di browser dan klik ikon Pengaturan (Gear) di pojok kanan atas navbar.
- Masukkan Endpoint URL dan API Key (jika ada).
- Klik "Tes Koneksi" & "Refresh Model" untuk mendeteksi model yang aktif (seperti
claude-3-5-sonnet,deepseek-chat,gpt-4o). - Pilih model yang diinginkan lalu klik "Simpan Pengaturan".
RancangAI/
├── app/
│ ├── api/
│ │ ├── ai/
│ │ │ ├── chat/route.ts # Streaming chat via 9Router
│ │ │ └── models/route.ts # Fetch active models dari 9Router
│ │ ├── plan/
│ │ │ ├── generate/route.ts # Streaming PRD Generator
│ │ │ └── tasks/route.ts # JSON Task Decomposition Engine
│ │ └── stats/route.ts # Live user & PRD telemetri
│ ├── globals.css # Tema dark mode & styling Markdown
│ ├── layout.tsx # Root HTML shell & suppressHydrationWarning
│ └── page.tsx # Main controller & navigation coordinator
├── components/
│ ├── Navbar.tsx # Header dengan live stats & indicator gateway
│ ├── SettingsModal.tsx # Modal konfigurasi 9Router & tes koneksi
│ ├── PrdWizard.tsx # Quick prompt & guided wizard generator
│ ├── PrdViewer.tsx # Pratinjau Markdown & editor teks PRD
│ ├── KanbanBoard.tsx # Board pengerjaan task & Focus Mode
│ ├── AgentExporter.tsx # Generator aturan .cursorrules, CLAUDE.md, dsb.
│ ├── RancangChat.tsx # Playground konsultasi arsitektur
│ └── TemplateCatalog.tsx # Showcase boilerplate proyek siap pakai
├── docs/
│ └── screenshots/ # Aset tangkapan layar & thumbnail
├── lib/
│ ├── 9router.ts # Client OpenAI-compatible & streaming parser
│ ├── prompt-templates.ts # System prompt PRD, task, dan agent rules
│ ├── storage.ts # LocalStorage persistence & template data
│ ├── types.ts # Definisi tipe TypeScript
│ └── utils.ts # Helper utilities (cn, id generator)
├── PRD.md # Dokumen spesifikasi resmi proyek RancangAI
├── README.md # Dokumentasi repositori
└── package.json # Manifest paket & scripts
Didistribusikan di bawah Lisensi MIT. Lihat file LICENSE untuk informasi lebih lanjut.
Dibuat dengan ❤️ untuk komunitas AI coding & developer Indonesia. Terinspirasi oleh ekosistem ngodingpakeai.