Satu tempat untuk generate, refine, edit, dan deploy website dengan AI.
Ringkasan
Apa saja yang bisa dilakukan di Weba?
Project ini tidak hanya generate halaman dari prompt. Weba dirancang sebagai workflow lengkap mulai dari ide, produksi file, iterasi AI, editing manual, billing audit, sampai deployment dan observabilitas admin.
Generate dan iterasi
Multi-Agent Planner
Pipeline tiga agen AI — Loki, Thor, Hera — untuk menyusun product brief, desain, dan rencana teknis sebelum generation.
Prompt Assistant
Rapikan brief sebelum generate agar hasil awal lebih tepat dan lengkap.
Generation website
Generate website dalam format Multi-File HTML, Single HTML, React, atau Vue.js dengan provider dan model yang dapat dipilih.
Website Refinement
Lanjutkan iterasi lewat chat kontekstual setelah website selesai dibuat.
Editor Copilot
Minta penjelasan, rewrite, atau patch terstruktur langsung dari editor file.
Preview Website
Lihat tampilan website hasil generate langsung di browser sebelum deploy — periksa layout, konten, dan responsivitas tanpa perlu publish.
Alur kerja produksi
Editor kode di browser
Lihat dan edit file tanpa pindah alat, termasuk preview patch sebelum diterapkan.
Deploy sekali klik
Deploy website yang sudah selesai ke lingkungan live dan pantau status deployment.
Custom domain
Hubungkan domain sendiri ketika plan dan deployment sudah memenuhi syarat.
Struktur file dan pengelolaan aset
Jelajahi struktur file, buka file, upload, replace, dan download ZIP hasil website.
Operasional platform
Referensi TeknisBilling dan riwayat token
Pantau top up, konsumsi generation, dan AI chat dalam satu histori.
Dashboard admin
Kelola pengguna, provider, plan, pembayaran, dan deployment dari panel admin.
Pengelolaan provider
Atur model AI, rate token, dan API key provider secara terpusat.
Worker asynchronous
Generation dan deployment berjalan lewat antrean agar proses panjang tetap stabil.
Quick Start
Alur penggunaan Weba dari nol sampai live
Jika Anda baru pertama kali memakai Weba, ikuti alur di bawah ini. Struktur ini juga merepresentasikan journey produk yang paling umum di dashboard.
Output Type
Perbandingan empat format output
Gunakan tabel ini untuk memilih format output yang paling cocok antara HTML cepat, single-file delivery, atau aplikasi interaktif berbasis build pipeline.
| Aspek | Multi-File HTML | Single HTML | React | Vue.js |
|---|---|---|---|---|
| Format file | index.html, style.css, script.js, assets | Satu file index.html | Project Vite React dengan src/ dan package.json | Project Vite Vue dengan App.vue dan package.json |
| Build step | Tidak ada | Tidak ada | npm install + npm run build | npm install + npm run build |
| Interactivity | JS ringan / Alpine.js | CDN-based Alpine.js / Chart.js | Shared state dan component patterns | Composition API dan composables |
| Deploy artifact | Source root langsung | Root file langsung | dist/ | dist/ |
| Use case utama | Marketing site dan company profile | Prototype cepat dan single-file handoff | Dashboard dan SPA interaktif | Dashboard dan SPA interaktif |
| Scale minimal | 3-4 section inti | 3-4 section ringkas | 1-2 view | 1-2 view |
| Scale comprehensive | 7+ section dan visual lebih kaya | Single file besar dengan section lebih banyak | 5+ view, chart, table, search/filter | 5+ view, chart, table, search/filter |
Multi-Agent Planner
Tiga agen AI yang bekerja bersama sebelum generation
Multi-Agent Planner menjalankan pipeline tiga agen secara berurutan: Loki menyusun product brief, Thor merancang desain, dan Hera merencanakan arsitektur teknis. Hasilnya disatukan menjadi handoff prompt yang kaya konteks untuk generator.
Alur pipeline
Input
Brief Anda
Deskripsi project & brand context
Agen 1
Loki
Product Brief
· Problem statement
· Target persona
· JTBD
· Scope boundary
· Success metrics
· PRD
Agen 2
Thor
Design Blueprint
· Wireframe outline
· Style tokens
· Component blueprint
· A11y checklist
· Layout rationale
· Responsive notes
Agen 3
Hera
Technical Plan
· Architecture decision
· Tradeoff matrix
· Implementation phases
· Security checks
· Scaling path
· Build vs buy
Output
Handoff Prompt
Siap diteruskan ke generator
Agen 1
Loki
Product Brief Agent
Loki adalah agen pertama dalam pipeline. Tugasnya mengubah brief mentah Anda menjadi dokumen Product Requirement (PRD) yang terstruktur. Loki mengidentifikasi masalah inti yang ingin diselesaikan, mendeskripsikan target persona beserta pain points-nya, mendefinisikan job-to-be-done, menentukan scope in/out, menetapkan success metrics, dan merangkum goals serta non-goals dari keseluruhan project.
Output utama
- · Problem statement — akar masalah yang diselesaikan
- · Target persona — nama, role, dan pain points
- · JTBD — job-to-be-done yang mendorong keputusan user
- · Scope boundary — apa yang masuk dan tidak
- · Success metrics — indikator keberhasilan terukur
- · PRD — overview, goals, dan non-goals
Agen 2
Thor
Design Blueprint Agent
Thor menerima PRD yang dihasilkan Loki dan mentransformasikannya menjadi blueprint desain yang dapat langsung dieksekusi. Thor mendefinisikan struktur wireframe per section, memilih style tokens (warna primer, tipografi, spacing), merancang komponen UI beserta props-nya, memberikan catatan responsivitas, menyusun panduan konten, dan memastikan checklist aksesibilitas dasar sudah terpenuhi.
Output utama
- · Wireframe outline — sections dan layout type
- · Style tokens — warna, font, dan spacing unit
- · Component blueprint — nama, deskripsi, dan props
- · Starter template spec — recommended output type
- · A11y checklist — item aksesibilitas dasar
- · Responsive notes — petunjuk mobile/desktop
Agen 3
Hera
Technical Plan Agent
Hera menerima blueprint dari Thor dan menyelesaikan perencanaan dari sisi teknis. Hera memutuskan pola arsitektur yang tepat beserta rasionalisasinya, menyusun tradeoff matrix antara opsi implementasi, memecah pekerjaan menjadi fase-fase yang terurut, mendefinisikan security checks, menentukan scaling path, dan memberikan catatan build-vs-buy untuk setiap komponen kritis.
Output utama
- · Architecture decision — pola dan rasionalisasi
- · Tradeoff matrix — opsi, pros, dan cons
- · Implementation phases — fase dan task terurut
- · Security checks — item keamanan wajib
- · Scaling path — jalur pertumbuhan sistem
- · Build vs buy notes — rekomendasi per komponen
Handoff ke Generator
Setelah ketiga agen selesai bekerja, sistem menyatukan seluruh output — PRD dari Loki, blueprint dari Thor, dan rencana teknis dari Hera — menjadi satu handoff prompt yang kaya konteks. Anda dapat me-review ringkasan artifacts dari setiap agen, lalu memilih action berikutnya: apply PRD ke prompt generator, apply design blueprint, atau generate langsung. Tidak ada yang diterapkan tanpa persetujuan Anda.
Arsitektur
Referensi TeknisBagaimana sistem Weba disusun?
Di balik dashboard yang sederhana, Weba menggunakan arsitektur async yang memisahkan layer UI, API, queue worker, data store, file storage, dan deployment provider. Diagram berikut merangkum blok utamanya.
Client layer
Next.js App Router untuk dashboard user, admin, auth, docs, editor, billing, dan surface AI.
API layer
Gin API menangani auth, website, billing, riwayat token, aksi admin, dan endpoint AI chat.
Async layer
Asynq worker mengerjakan generation dan deployment agar proses lama tidak memblok request user.
Data & storage
Postgres menyimpan user, website, payment, token transaction, chat session, dan metadata operasional.
Artifact layer
MinIO menyimpan file website, output build, dan artefak yang dipakai editor maupun deployment.
Delivery layer
Provider deployment mempublikasikan website ke subdomain live dan custom domain ketika tersedia.
Diagram ringkas
Flow System
Referensi TeknisFlow backend yang paling penting untuk dipahami
Flow di bawah ini menjelaskan bagaimana Weba memproses generation, refinement chat, preview, dan deployment secara asynchronous. Ini penting untuk memahami kenapa status website, file storage, dan billing saling terkait.
Flow Multi-Agent Planner
User menulis brief project dan konteks brand di panel Multi-Agent Planner
Loki menganalisis brief dan menghasilkan Product Requirement Document lengkap dengan persona, JTBD, scope, dan success metrics
Thor menerima PRD dari Loki, lalu merancang wireframe, style tokens, component blueprint, dan accessibility checklist
Hera menerima desain dari Thor, lalu menyusun keputusan arsitektur, tradeoff matrix, fase implementasi, dan security checks
Sistem menyatukan seluruh output menjadi handoff prompt yang siap diteruskan langsung ke generator website
Flow generation website
User submit brief dari dashboard
API membuat record website dan enqueue job generation
Worker memanggil provider AI lalu menyusun file project
File disimpan ke storage dan metadata di-update di Postgres
Frontend mengikuti progress lewat SSE dan membuka detail page setelah selesai
Flow refinement dan editor copilot
User membuka session chat dari website detail atau editor
Frontend membuat sesi dan stream response AI lewat SSE
Backend menyimpan riwayat pesan, usage, dan metadata token
Saldo token dan riwayat token di-refresh setelah stream selesai
User bisa melanjutkan session lama atau membuat session baru di mobile maupun desktop
Flow preview website
User membuka halaman Preview dari detail website yang sudah selesai di-generate
Sistem mengambil file website dari storage dan merendernya di browser
User dapat memeriksa layout, konten, dan responsivitas tanpa perlu deploy ke lingkungan live
Bila ada yang perlu diperbaiki, user kembali ke Refinement Chat atau Editor untuk iterasi
Setelah puas dengan tampilan preview, user melanjutkan ke Deploy Sekali Klik
Flow deployment
User menekan tombol deploy pada website yang sudah selesai
API membuat record deployment lalu enqueue job deploy
Worker mengambil file atau output build dan mengirim ke adapter deployment
Status deployment di-update berkala hingga running, failed, atau stopped
User dapat memonitor deployment dari dashboard maupun panel admin
FAQ
Pertanyaan yang paling sering muncul
FAQ ini ditulis untuk user yang ingin memahami produk dari sisi pemakaian, token, deployment, dan batasan workflow.
Multi-Agent Planner adalah fitur opsional yang menjalankan pipeline tiga agen AI secara berurutan — Loki untuk product brief, Thor untuk desain, dan Hera untuk rencana teknis — sebelum generation dimulai. Gunakan planner ketika Anda ingin website yang dihasilkan lebih terstruktur dan berbasis perencanaan mendalam, bukan hanya dari brief singkat.
Loki berperan sebagai Product Manager yang mengubah brief menjadi PRD lengkap — problem statement, persona, JTBD, scope, dan success metrics. Thor menerima PRD dari Loki dan merancang wireframe, style tokens, component blueprint, serta checklist aksesibilitas. Hera menerima desain dari Thor dan merencanakan arsitektur teknis, tradeoff matrix, fase implementasi, security checks, dan scaling path.
Tidak, planner bersifat opsional. Anda tetap bisa langsung generate dengan brief dan Prompt Assistant. Planner direkomendasikan ketika brief Anda masih umum dan ingin mendapatkan rencana yang lebih matang sebelum generator bekerja.
Ya. Setelah ketiga agen selesai, sistem menyatukan seluruh hasil menjadi satu handoff prompt yang siap dipakai generator. Anda bisa review handoff tersebut dan memilih untuk langsung apply atau memodifikasinya terlebih dahulu.
Preview Website adalah tampilan langsung di browser dari website hasil generate, tanpa perlu deploy ke lingkungan live terlebih dahulu. Gunakan Preview setelah selesai refinement untuk memverifikasi layout, konten, dan responsivitas sebelum memutuskan untuk publish.
Prompt Assistant dipakai sebelum generate untuk merapikan brief. Website Refinement dipakai setelah website selesai untuk diskusi level produk atau UI. Editor Copilot dipakai di level file untuk penjelasan kode, rewrite, dan patch terstruktur. Preview dipakai untuk melihat tampilan visual akhir website sebelum deploy — tanpa menulis kode atau chat dengan AI.
Ya. Satu saldo token dipakai untuk generation, prompt assistant, website refinement, dan editor copilot. Riwayat billing memisahkan scope konsumsi agar Anda tetap bisa audit pemakaian.
Pilih Multi-File HTML atau Single HTML jika Anda ingin hasil yang bisa langsung dipakai tanpa proses build — cocok untuk landing page, company profile, dan prototype cepat. Pilih React atau Vue jika Anda butuh interaktivitas kompleks seperti shared state, composables, atau SPA dengan banyak view. React dan Vue memerlukan langkah npm install + npm run build sebelum deploy.
Editor Copilot menggunakan pola preview-before-apply. AI dapat mengusulkan patch terstruktur, lalu Anda yang memutuskan apakah patch itu diterapkan ke selection atau file aktif.
Ya. Website yang sudah siap bisa di-deploy ke subdomain live. Untuk custom domain, ketersediaannya mengikuti aturan plan dan status deployment.
Tidak semestinya. Sistem billing dan service layer dirancang agar stream yang gagal tidak menghasilkan charge, sementara stream yang selesai mencatat usage dan metadata transaksi dengan benar.
Ya. Panel admin dapat melihat transaksi token user lengkap dengan usage scope, provider, description, reference, dan balance after.
Tidak. Weba saat ini mendukung empat output type: Multi-File HTML, Single HTML, React, dan Vue.js. Pilihan format ditentukan saat generation dimulai.
Penutup
Ringkasan project Weba
Weba adalah monorepo yang menggabungkan dashboard Next.js, API Gin, queue worker, storage artifact, dan adapter deployment dalam satu workflow produk. Fokus utamanya adalah mempercepat pembuatan website berbasis AI tanpa kehilangan kontrol atas file, histori token, dan proses deployment.