Bangun dengan CometAPIButuh satu API untuk banyak model?Uji alur kerja di Playground, lalu buat API key saat model dan biayanya sesuai dengan use case Anda.
Pelajari bagaimana Lovable membangun aplikasi web, jelajahi fitur intinya, dan hubungkan CometAPI melalui backend yang aman dengan tutorial asisten penulisan yang praktis.
Lovable adalah platform pengembangan bertenaga AI yang mengubah instruksi bahasa alami menjadi kode aplikasi web yang dapat diedit. Platform ini membantu founder, desainer, tim produk, dan developer membangun antarmuka, menghubungkan layanan backend, serta memublikasikan aplikasi melalui percakapan iteratif. Panduan ini menjelaskan kapabilitasnya, arsitektur proyek, dan integrasi CometAPI praktis untuk asisten penulisan. Integrasi tersebut menambahkan inferensi model ke aplikasi yang Anda bangun; integrasi ini tidak menyediakan cara untuk mengganti agent pengkodean Lovable sendiri. Pembaca sebaiknya memahami dasar-dasar permintaan HTTP dan JavaScript, serta memiliki akses ke proyek Lovable dan akun CometAPI sebelum mengikuti langkah implementasi.
Key Takeaways
Pengembangan bertenaga AI: Bangun dan perhalus aplikasi menggunakan prompt bahasa alami.
Kemampuan full-stack: Bangun pengalaman frontend dengan fungsi backend, basis data, autentikasi, dan hosting.
Arsitektur modern: Proyek Lovable baru mengadopsi TanStack Start berbasis React dan SSR pada Mei 2026.
Ditinjau untuk kejelasan, atribusi sumber, dan terminologi API terkini.
Kompatibilitas CometAPI: Tambahkan inferensi model eksternal melalui fungsi backend yang aman.
Kasus penggunaan terbaik: MVP, asisten AI, alat internal, aplikasi konten, dan portal pelanggan.
What Is Lovable and How Does It Work?
Lovable (lovable.dev) adalah platform bertenaga AI untuk membangun aplikasi web full-stack tingkat produksi menggunakan bahasa alami. Situs resmi dan ikhtisar produk merupakan titik awal untuk mengeksplorasi platform ini.
Anda mendeskripsikan apa yang diinginkan melalui antarmuka chat, dan platform ini menghasilkan aplikasi yang berfungsi dengan:
Backend, basis data, autentikasi, dan penyimpanan (melalui Lovable Cloud bawaan, yang dikelola oleh Supabase)
Integrasi, deployment, dan kode yang dapat Anda edit dan miliki
Platform ini mendukung seluruh siklus produk—dari prototyping hingga deployment—dan dapat menyinkronkan kode ke GitHub, GitLab, atau Bitbucket. Ditujukan untuk founder, manajer produk, non-developer, dan tim yang ingin bergerak cepat sambil tetap memiliki kepemilikan kode. Platform ini berasal dari proyek open-source GPT Engineer (didirikan di Stockholm pada 2023 oleh Anton Osika dan Fabian Hedin) dan kemudian diberi merek ulang/diindustrialisasi sebagai Lovable.
How Lovable Turns Prompts Into Applications
Deskripsikan pengguna, halaman, fitur, dan aturan bisnis aplikasi.
Hasilkan aplikasi pertama dan tinjau pratinjau.
Hubungkan basis data, sign-in, pembayaran, atau API eksternal.
Uji perilaku dan perbaiki kode, desain, dan alur kerja.
Publikasikan atau lanjutkan pemeliharaan terhadap kode aplikasi yang diekspor.
Artikel engineering Lovable tanggal 1 Juni 2026 menjelaskan perpindahan ke TanStack Start berbasis React dan server-side rendering untuk proyek baru mulai 13 Mei 2026. Proyek React + Vite yang sudah ada tetap menggunakan arsitektur sebelumnya; periksa proyek aktual sebelum memilih implementasi server-function atau Edge Function.
Lovable Technical Specifications
Specification
Lovable
Category
Pembuat aplikasi web bertenaga AI
Primary interaction
Prompting bahasa alami
Framework for new projects
React dan TanStack Start
Rendering
Server-side rendering untuk proyek baru
Earlier architecture
React + Vite
Backend
Lovable Cloud dan integrasi yang didukung
Authentication and database
Didukung
External APIs
Konektor dan permintaan API kustom
AI integration
Lovable AI dan API model eksternal
Code access
Kode yang dihasilkan dan workflow GitHub
Collaboration
Fitur workspace dan proyek
Deployment
Bawaan dan opsi eksternal yang didukung
Lovable adalah platform pengembangan aplikasi, bukan foundation model. Karena itu, parameter, context window, throughput token, dan skor MMLU tidak mendeskripsikan Lovable itu sendiri. Hal-hal tersebut milik model AI spesifik yang terlibat dalam pengembangan atau inferensi.
Can You Configure CometAPI in Lovable?
Ya—di dalam aplikasi yang dihasilkan dengan Lovable. CometAPI dapat menangani permintaan model dari fungsi backend yang dilindungi. Hal ini berbeda dari mengubah LLM yang menjalankan agent pengkodean Lovable sendiri.
Anda dapat mengintegrasikan CometAPI ke dalam aplikasi yang dibangun dengan Lovable, selama model dan antarmuka yang dipilih didukung.
Ini tidak berarti Anda dapat langsung mengganti model proxy pengembangan yang digunakan oleh Lovable itu sendiri.
Jika tujuan Anda adalah mengontrol model apa yang dipanggil oleh aplikasi Anda, Anda harus mengonfigurasi routing model dalam kode sisi server Anda sendiri.
Integration
Compatibility
Explanation
Fitur AI dalam aplikasi yang dihasilkan
Yes
Permintaan API sisi server yang dilindungi
Chatbot atau asisten penulisan
Yes
Panggil model chat CometAPI yang didukung
Aplikasi multi-model
Yes
Konfigurasikan ID model dalam routing backend
Ganti model internal coding Lovable
Not established as a standard setting
Pemilihan model agent internal terpisah
Backend service melalui CometAPI
Yes
Integrasi HTTP kustom atau fungsi server
Lovable workspace management API
Separate
Mengontrol sumber daya platform, bukan inferensi model
Penjelasan Lovable tentang orkestrasi model internalnya ada di artikel ini yang menguraikan cara kerja routing agent pengembangannya. Integrasi CometAPI di bawah ini menyangkut inferensi aplikasi; artikel ini tidak mengklaim adanya pengaturan CometAPI terdokumentasi untuk agent internal tersebut.
How the Lovable and CometAPI Architecture Works
Lovable mendukung ini dengan dua cara utama untuk aplikasi yang Anda bangun:
Secrets (direkomendasikan untuk penggunaan langsung)
Simpan kunci CometAPI Anda sebagai secret proyek (misalnya, COMETAPI_KEY atau OPENAI_API_KEY). Minta Lovable di chat proyek untuk mengintegrasikan API melalui Edge Function yang aman. Kunci tetap berada di sisi server dan tidak pernah terekspos di browser.
Custom connector
Buat custom connector di katalog Connectors workspace. Konfigurasikan base URL (https://api.cometapi.com/v1), autentikasi (Bearer token atau header kustom), lalu tambahkan koneksi dengan menempelkan kunci CometAPI Anda. Permintaan melewati gateway connector Lovable, menjaga kredensial tetap terenkripsi dan tidak berada dalam kode Anda.
Catatan:
Fitur AI bawaan Lovable untuk aplikasi menggunakan kunci yang dikelola Lovable dan mengonsumsi kredit workspace. Anda tidak dapat menukarnya dengan kunci CometAPI (atau penyedia lain).
Untuk panggilan AI eksternal di dalam aplikasi Anda (chatbot, generasi, dll.), pendekatan secrets atau custom connector berfungsi dan penagihan penggunaan diarahkan ke akun CometAPI Anda, bukan kredit Lovable.
Tidak ada bukti dukungan CometAPI native/pre-built dalam katalog connector Lovable berdasarkan dokumentasi terbaru; Anda menyiapkannya sebagai integrasi generik yang kompatibel dengan OpenAI atau API kustom.
Singkatnya: Lovable adalah pembuat aplikasi “vibe-coding”/prompt-to-full-stack yang kuat, dan ya—Anda dapat mengonfigurasi dan menggunakan kunci CometAPI dengan aman untuk fitur AI di dalam aplikasi yang Anda buat dengannya.
Browser mengirim input ke backend aplikasi. Backend membaca secret, memanggil CometAPI, dan mengembalikan hasilnya. Jangan pernah menempatkan kunci API privat di komponen React atau kode sisi klien lainnya.
How to Build an AI Writing Assistant With Lovable and CometAPI
Contoh berikut membangun SmartWrite, sebuah asisten penulisan AI dengan input teks, pemilih nada, dan permintaan CometAPI sisi server. Pilih pola boundary TanStack untuk proyek yang lebih baru atau titik masuk Supabase Edge Function lengkap untuk proyek yang lebih lama. Pilih satu implementasi backend yang sesuai dengan proyek Anda, konfigurasikan secrets-nya, dan pastikan model chat yang didukung tersedia di akun CometAPI Anda. Sebelum memublikasikan, jalankan contoh dengan secrets proyek Anda sendiri dan model chat yang tersedia di akun Anda.
Build a responsive AI writing assistant named SmartWrite.
Include a dashboard, a large prompt box, a tone selector
(Professional / Friendly / Concise), a Generate button,
and an output panel with Copy and Clear controls.
Use a clean responsive design with loading states and errors.
Implement AI generation only through a secure server function.
Never expose API credentials to the frontend.
Do not ship mock AI responses.
Step 2: Configure the CometAPI Credential
Buat kunci di akun CometAPI Anda dan verifikasi ID model chat yang tersedia untuk akun tersebut. Tutorial ini menggunakan integrasi backend langsung, dengan COMETAPI_API_KEY dan COMETAPI_MODEL sebagai konfigurasi sisi server. Ikuti mekanisme akses secret yang didukung oleh backend di proyek yang dihasilkan Anda.
Configuration example: Where to Store and Use CometAPI Credentials
Untuk menghubungkan CometAPI dengan aman, minta Lovable membuat integrasi sisi server dan meminta kunci API melalui formulir input secret yang aman. Anda juga dapat mengelola secrets proyek di More → Settings → Secrets. Untuk backend Supabase eksternal, konfigurasikan secrets di Supabase. Lihat panduan Secrets resmi Lovable.
Ikuti empat persyaratan ini:
Simpan dan baca kunci API hanya di server. Tambahkan COMETAPI_API_KEY melalui antarmuka Secrets proyek yang aman. Bacalah secara eksklusif dari secrets sisi server atau runtime bindings. Jangan pernah menyertakan kunci di kode frontend, variabel lingkungan yang dapat diakses browser, pesan chat, atau tangkapan layar.
Jauhkan konfigurasi API dari permintaan frontend. Konfigurasikan COMETAPI_MODEL di server menggunakan ID model CometAPI yang terverifikasi. Frontend hanya boleh mengirim prompt dan tone. Validasi permintaan terhadap field yang diizinkan ini dan tolak properti tak terduga, termasuk config, apiKey, dan model. Jangan pernah mengizinkan klien memasok kunci API arbitrer atau menimpa konfigurasi model sisi server.
Gunakan metode akses secret yang benar untuk runtime. Implementasi harus cocok dengan lingkungan backend proyek. Deployment berbasis Worker menggunakan injected bindings, sementara Supabase Edge Functions dapat mengakses secrets melalui Deno.env. Jangan mengasumsikan process.env, Deno.env, dan Worker bindings saling dapat dipertukarkan. Verifikasi bagaimana secrets disuntikkan sebelum mengimplementasikan handler API.
Verifikasi perlindungan secret setelah publikasi. Periksa bundel JavaScript produksi, panel Network di DevTools browser, dan log aplikasi. Pastikan kunci API tidak pernah muncul di aset sisi klien, payload permintaan, respons, URL, atau log. Juga verifikasi bahwa permintaan CometAPI dieksekusi di server dan bahwa upaya override konfigurasi tanpa izin ditolak.
Secret yang disimpan tidak otomatis berarti integrasi aman atau fungsional. Integrasi dianggap siap hanya ketika panggilan API sisi server berfungsi, permintaan klien tidak dapat menimpa pengaturan yang dilindungi, dan pemeriksaan produksi memastikan kredensial tetap privat.
Gunakan diagram arsitektur berikut untuk mengidentifikasi batas frontend-ke-backend dan lokasi kredensial yang dilindungi. Diagram ini bersifat konseptual, bukan tangkapan layar dari antarmuka pengaturan Lovable.
Prompt to give Lovable
Hubungkan SmartWrite langsung ke CometAPI melalui fungsi backend yang diautentikasi. Minta saya untuk COMETAPI_API_KEY dalam formulir secret yang aman dan gunakan COMETAPI_MODEL untuk ID model tepat yang saya berikan. Kirim permintaan POST ke https://api.cometapi.com/v1/chat/completions hanya dari server. Terima prompt dan tone, validasi keduanya, terapkan batas per pengguna, dan kembalikan hanya teks yang dihasilkan ke frontend. Gunakan runtime backend yang sudah ada di proyek ini. Jangan menempatkan kredensial di chat, kode frontend, atau permintaan browser. Jangan menghasilkan hasil sukses palsu. Jelaskan cara menguji integrasi dan tampilkan error tersanitasi ketika gagal.
Lovable juga mendukung managed custom connectors. Instruksi di sini sengaja menggunakan jalur integrasi langsung yang didokumentasikan dalam panduan integrasi API, sehingga sesuai dengan helper sisi server di bawah ini.
Step 3: Test the CometAPI Chat Endpoint
Dari terminal Bash tepercaya, set COMETAPI_API_KEY dan COMETAPI_MODEL secara lokal, lalu uji POST https://api.cometapi.com/v1/chat/completions.Panduan permintaan resmi CometAPI mendokumentasikan base URL, autentikasi Bearer, dan format respons chat. Pilih model yang mendukung endpoint ini; kompatibilitas tidak menjamin setiap fitur atau parameter penyedia.
# Set COMETAPI_API_KEY securely in this terminal before running.
# Replace the model value with a chat model verified in your account.
export COMETAPI_MODEL="YOUR_VERIFIED_CHAT_MODEL_ID"
: "${COMETAPI_API_KEY:?Set COMETAPI_API_KEY first}"
curl --fail-with-body --max-time 45 \
https://api.cometapi.com/v1/chat/completions \
-H "Authorization: Bearer $COMETAPI_API_KEY" \
-H "Content-Type: application/json" \
--data "$(printf '{"model":"%s","messages":[{"role":"user","content":"Write a customer welcome email."}],"stream":false}' "$COMETAPI_MODEL")"
Checkpoint: respons yang berhasil berisi choices[0].message.content. Jika autentikasi gagal atau model tidak tersedia, perbaiki itu sebelum menghubungkan antarmuka pengguna. Jangan tempel kredensial penuh atau prompt privat ke dalam tangkapan layar diagnostik.
Step 4: Connect CometAPI Through a Secure Backend
Lovable mendukung dua arsitektur backend:
Proyek baru (TanStack Start): Gunakan createServerFn untuk menangani permintaan API di server.
Proyek React + Vite yang lebih lama: Gunakan Supabase Edge Functions untuk panggilan API sisi server.
Pilih implementasi yang cocok dengan arsitektur proyek Anda.
Simpan COMETAPI_API_KEY dan COMETAPI_MODEL sebagai Worker bindings sisi server. Jika deployment Anda menggunakan adapter lain, gunakan mekanisme akses secret yang didukungnya.
Option B: React + Vite (Older Projects)
Buat supabase/functions/generate-writing/index.ts:
Tambahkan COMETAPI_API_KEY dan COMETAPI_MODEL ke secrets proyek Supabase, lalu deploy fungsi tersebut.
Pada kedua pendekatan, simpan kredensial API di server. Aplikasi produksi juga harus menerapkan autentikasi, validasi input, dan batas penggunaan per pengguna.
Step 5: Connect the Lovable Interface
TanStack Start client
import { generate } from "./server/writing.functions";
const { text } = await generate({ data: { prompt, tone } });
// Render text as text content, not as trusted HTML.
React + Vite client
// Use the existing, signed-in Supabase client generated for your project.
const { data, error } = await supabase.functions.invoke("generate-writing", {
body: { prompt, tone },
});
if (error) throw new Error("Generation failed. Please try again.");
const text = data.text;
Gunakan klien yang sesuai dengan cabang pilihan Anda. TanStack menggunakan endpoint RPC yang dihasilkannya; Supabase menggunakan fungsi generate-writing yang dideploy. Keduanya tidak memerlukan pembuatan route /api/generate terpisah. Browser dapat mengirim token sesi aplikasi untuk autentikasi, tetapi tidak boleh pernah mengirim kredensial CometAPI privat atau objek konfigurasi. Tampilkan status loading, kegagalan, dan retry di antarmuka.
Step 6: Test and Publish the Application
Setelah publikasi, uji URL live alih-alih hanya mengandalkan pratinjau editor. Gunakan kredensial uji privat dan jaga agar tangkapan layar serta bukti bebas dari nilai secret. Selesaikan pemeriksaan berikut sebelum akses lebih luas:
Periksa JavaScript browser yang dibangun, source map, dan konfigurasi publik untuk kunci CometAPI privat. Lakukan pencarian lokal tanpa mencetak kunci dalam output terminal yang dibagikan atau menyimpannya dalam laporan. Nama variabel saja bukan bukti kebocoran nilai.
Periksa permintaan Network browser, termasuk payload, header, dan respons error. Permintaan harus hanya berisi input penulisan yang diizinkan dan data autentikasi aplikasi; header Authorization CometAPI privat hanya berada pada permintaan server-ke-penyedia.
Tinjau log fungsi, log aplikasi, jejak pemantauan, dan laporan error. Jangan merekam kunci, bearer token, objek konfigurasi, atau body error upstream penuh. Jika kunci terekspos, cabut dan ganti, lalu hilangkan paparan tersebut sebelum pengujian ulang.
Coba permintaan dalam kondisi sign-out dan sesi kedaluwarsa; keduanya harus ditolak sebelum panggilan ke penyedia. Kirim apiKey, config, atau model sebagai field tambahan dan verifikasi penolakannya. Uji prompt kosong dan terlalu besar, tone tidak valid, kegagalan penyedia, serta kuota per pengguna yang dideploy.
Pastikan permintaan valid yang terautentikasi menghasilkan teks dengan model pilihan Anda. Catat versi deployment dan hasil pass/fail yang disanitasi; contoh tidak menetapkan bahwa deployment Anda sendiri telah lulus pemeriksaan ini.
What Can You Build With Lovable and CometAPI?
Project
CometAPI role
Possible features
AI writing assistant
Draf dan menulis ulang konten
Pemilihan nada, templat, editor
Document summarizer
Meringkas teks yang diekstrak
Upload, tanya jawab dokumen, poin kunci
Customer support desk
Klasifikasi dan draf respons
Triage tiket, saran balasan
Business analytics assistant
Menjelaskan data bisnis
Dashboard KPI, insight bahasa alami
Prompt normal menghasilkan respons model yang mudah dibaca.
Prompt kosong dan terlalu besar ditolak dengan aman.
Kredensial API tidak pernah muncul di panel network browser.
Gangguan model mengembalikan pesan error non-sensitif.
Pengguna terautentikasi memiliki batas permintaan dan pemantauan aktivitas.
Tata letak berperilaku benar di desktop dan perangkat seluler.
Ini adalah pola proyek yang disarankan, bukan klaim tentang deployment yang telah selesai atau dibenchmark secara independen.
FAQ
How should a multi-tenant app prevent one customer’s records from appearing in another customer’s AI response?
Turunkan tenant dan identitas pengguna dari sesi server yang terverifikasi, kemudian batasi setiap lookup basis data sebelum menyusun konteks model. Jangan pernah mempercayai tenant ID yang disuplai oleh browser atau mengandalkan instruksi prompt untuk menegakkan akses. Jika didukung, tambahkan kebijakan baris-level pada basis data dan verifikasi dengan dua akun uji. Uji ID record, hasil pencarian, file ekspor, dan riwayat percakapan untuk mencegah akses lintas-tenant.
When is retrieval-augmented generation preferable to putting documents directly into every prompt?
Gunakan retrieval ketika koleksi dokumen terlalu besar untuk dikirim setiap kali, sering berubah, atau perlu jejak sumber. Parse dan indeks dokumen, ambil set kecil yang relevan, dan lampirkan pengenal sumber pada jawaban. Retrieval tetap perlu evaluasi: jawaban yang fasih bisa mengutip bagian yang tidak relevan. Pertahankan filter akses dalam kueri retrieval dan uji pertanyaan yang jawabannya tidak ada. Untuk dokumen kecil dan stabil, konteks langsung bisa menjadi titik awal yang lebih sederhana.
How can streaming be added without displaying broken or misleading responses?
Perlakukan streaming sebagai fitur transport terpisah, bukan pengganti satu baris dari stream: false. Pastikan format streaming model terpilih, relai event dari backend, dan tangani potongan parsial, pembatalan, timeouts, serta kehilangan koneksi di UI. Tandai respons yang terputus sebagai tidak lengkap dan biarkan pengguna mencoba ulang secara sadar. Hindari menampilkan teks streaming sebagai HTML tepercaya. Uji pada jalur hosting yang dipublikasikan karena perantara dapat melakukan buffering terhadap stream yang tampak bekerja secara lokal.
What should a fallback policy check before switching to another model?
Definisikan kegagalan apa yang membenarkan retry atau fallback, lalu periksa apakah alternatif mendukung endpoint, instruksi, skema tool, dan format output yang sama. Batasi retry dan hindari mengubah model secara diam-diam untuk workflow yang membutuhkan perilaku konsisten. Evaluasi fallback pada prompt representatif, termasuk kasus penolakan dan output yang salah format. Jika output model memicu tindakan eksternal, lindungi tindakan tersebut dengan konfirmasi terpisah atau aturan idempotensi sehingga generasi yang diulang tidak mengulang tindakan itu.
What evidence should a team keep before promoting an AI feature from a pilot to regular use?
Simpan set evaluasi versi dengan perilaku yang diharapkan, konfigurasi model dan prompt, metadata permintaan yang disunting, dan catatan kasus gagal. Definisikan kriteria penerimaan untuk akurasi faktual, bentuk respons, latensi, dan batas akses; bandingkan hasil setelah perubahan model atau prompt. Untuk input sensitif, tentukan apa yang dapat dikirim dan disimpan sebelum mengaktifkan fitur. Ini adalah kontrol engineering yang disarankan, bukan klaim bahwa Lovable atau CometAPI menjamin hasil regulasi tertentu.
Conclusion: Is Lovable Worth Using?
Lovable memudahkan menerjemahkan ide menjadi aplikasi yang berfungsi. Tooling full-stack dan integrasi eksternalnya sangat berguna untuk dengan cepat memvalidasi konsep produk. CometAPI menambahkan jalur fleksibel untuk inferensi model dalam chat, penulisan, analitik, dan workflow bertenaga AI lainnya.
Mulailah dengan aplikasi kecil yang aman, uji koneksi CometAPI, tinjau kode yang dihasilkan, dan kembangkan setelah pengalaman inti terbukti andal.
