Vibe Coding dengan ChatGPT: Canvas, Codex, dan Membangun Aplikasi dari ChatGPT

Kamu bisa vibe coding dengan ChatGPT dalam tiga cara. Minta aplikasi kecil di chat dan pratinjau di canvas; serahkan tugas pada codebase nyata ke Codex, agen coding OpenAI; atau hubungkan pembuat aplikasi AI seperti Mythex agar ChatGPT bisa membangun, meng-host, dan mempublikasikan aplikasi lengkap dengan database. Yang pertama tercepat untuk alat satu halaman, yang kedua cocok untuk developer, dan yang ketiga memberimu aplikasi live dengan login dan data tanpa keluar dari ChatGPT.

Berikut cara kerja masing-masing, satu prompt untuk tiap cara, dan di mana masing-masing berhenti. Jika kamu ingin latar belakang istilahnya, baca apa itu vibe coding.

Opsi 1: Chat dan canvas ChatGPT

Untuk alat cepat, cukup minta. ChatGPT menulis kodenya, dan di canvas ia bisa menampilkan halaman HTML dan React sederhana sehingga kamu bisa mengklik-klik dan meminta perubahan.

Tulis kalkulator tip satu halaman dengan input jumlah tagihan, persentase tip (tombol 10, 15, 20, dan kolom kustom), dan jumlah orang. Tampilkan tip dan jumlah per orang, diperbarui saat aku mengetik. Buat tampil bersih di ponsel.

Bagus untuk: kalkulator, game sederhana, draf landing page, dan belajar. Minta "jelaskan file ini seperti aku baru belajar coding" dan kamu akan cepat paham.

Di mana berhenti: tidak ada backend. Apa pun yang kamu masukkan tidak tersimpan untuk pengguna lain, tidak ada login, dan untuk membagikannya kamu harus menyalin kode ke tempat lain dan meng-host sendiri. Begitu kamu bilang "dan simpan agar timku bisa melihat," kamu sudah melampaui chat.

Vibe coding salin-tempel

Banyak orang mulai dengan meminta kode ke ChatGPT lalu menempelkannya ke file di komputer atau layanan hosting. Untuk situs statis kecil ini berhasil, tetapi cepat kewalahan. Setiap perubahan berarti mencari file yang tepat, menempel bagian yang tepat, dan berharap tidak ada hal lain yang bergantung pada yang kamu ganti. Jika kamu mendapati dirimu melakukan ini lebih dari beberapa kali, pindahlah ke salah satu dari dua opsi berikutnya.

Opsi 2: Codex untuk codebase nyata

Codex adalah agen OpenAI untuk pekerjaan perangkat lunak. Kamu memberinya tugas dengan bahasa sehari-hari, dan ia bekerja pada repositori: membaca kode, membuat perubahan di banyak file, menjalankan perintah dan tes, lalu memberimu hasilnya untuk ditinjau. OpenAI menawarkannya di ChatGPT, sebagai alat command-line, dan sebagai ekstensi editor; cek situs OpenAI untuk paket yang menyertakannya dan batasan terkini.

Prompt bergaya tugas paling cocok untuknya:

Di repo ini, tambahkan tombol ekspor CSV ke halaman Orders. Ia harus mengekspor pesanan yang sedang difilter dengan kolom tanggal, pelanggan, total, dan status. Tambahkan tes untuk fungsi ekspor dan jalankan test suite.

Bagus untuk: developer dan founder teknis dengan proyek yang sudah ada yang ingin agen mengambil tugas utuh dari daftar mereka. Ia bekerja dengan stack dan konvensimu.

Yang masih kamu tangani: tempat aplikasi berjalan, database, secret, deployment, dan domain. Codex mengubah kode; ia bukan host.

Codex dan Mythex bersama

Codex juga bisa terhubung ke server MCP, termasuk milik Mythex. Tambahkan https://mcp.mythex.ai/mcp sebagai server MCP kustom di Codex, setujui akses di Mythex, dan Codex bisa mengerjakan proyek Mythex di sandbox cloud-nya, dengan pratinjau, database, dan publikasi ditangani Mythex. Postingan kami tentang membangun aplikasi Mythex dari Claude, Cursor, atau Codex membahasnya langkah demi langkah.

Opsi 3: Bangun aplikasi lengkap dari ChatGPT dengan Mythex

Jika kamu ingin tetap di percakapan ChatGPT dan berakhir dengan aplikasi sungguhan yang ter-host, hubungkan Mythex. Mythex bekerja di dalam ChatGPT sebagai app: ChatGPT berbicara dengan alat Mythex lewat MCP, protokol terbuka yang memungkinkan asisten memakai alat yang di-host di tempat lain (apa itu MCP).

Setelah terhubung, ChatGPT bisa membuat proyek Mythex, menulis kode di sandbox cloud privat, memulai pratinjau langsung, menambah database dan penyimpanan file, serta mempublikasikan aplikasi ke URL publik. Hasilnya datang dengan tautan sehingga kamu bisa membuka proyek di Mythex dan menonton pratinjaunya.

Cara menghubungkan

1. Di Mythex, buka Pengaturan akun dan salin alamat MCP.
2. Di ChatGPT, tambahkan Mythex dari pengaturan apps atau konektor dengan alamat itu. Menu ChatGPT berubah dari waktu ke waktu, jadi ikuti halaman bantuan OpenAI untuk menambahkan app jika namanya berbeda.
3. Halaman Mythex terbuka: masuk dan pilih Allow access. Tidak ada kunci yang perlu ditempel.
4. Mulai percakapan dan sebut Mythex dalam permintaanmu.

Menghubungkan bisa di paket Mythex apa pun. Alat sandbox — membangun, pratinjau, publikasi — memerlukan Mythex Pro ($25 per bulan), dan waktu sandbox serta hosting berasal dari kredit Mythex-mu. Penggunaan ChatGPT tetap di paket OpenAI-mu.

Prompt pertama untuk dicoba

Pakai Mythex untuk membuat pelacak lamaran kerja untukku. Aku menambah lamaran dengan perusahaan, posisi, tautan, tanggal melamar, status (melamar, wawancara, penawaran, ditolak), dan catatan. Tampilkan papan menurut status tempat aku bisa menyeret kartu, dan diagram sederhana lamaran per minggu. Simpan semuanya di database dan lindungi dengan login. Mulai pratinjau dan beri aku tautannya.

Lalu, satu perubahan per pesan:

Di proyek Mythex, tambahkan tanggal pengingat pada setiap lamaran dan sorot kartu yang pengingatnya hari ini atau sudah lewat.

Publikasikan dan kirim URL live-nya kepadaku.

Bagus untuk: orang yang sudah merencanakan dan berpikir di ChatGPT dan ingin hasilnya live, dengan data yang bertahan, tanpa belajar hosting. Karena ini proyek Mythex biasa, kamu bisa melanjutkan di chat Mythex kapan saja.

Opsi mana yang cocok untuk yang kamu bangun

Kebiasaan prompting yang berhasil di ChatGPT

• Sebut alatnya saat kamu ingin memakainya. "Pakai Mythex untuk…" memperjelas bahwa permintaan ini untuk proyekmu, bukan jawaban umum.
• Satu perubahan per pesan. Daftar panjang edit menghasilkan daftar panjang efek samping.
• Minta rencana sebelum langkah besar. "Sebelum mengubah apa pun, sebutkan apa yang akan kamu ubah dan tunggu persetujuanku."
• Tempel error persis. Teks error lengkap lebih berharga daripada deskripsi apa pun.
• Tanyakan apa yang berubah. "Ringkas tiga perubahan terakhirmu dengan kata-kata biasa" menjaga kamu tetap paham saat tidak membaca kodenya.

Lebih banyak ada di contekan prompt vibe coding kami.

Jaga tetap aman

• Jangan pernah menempelkan kata sandi atau kunci API asli ke percakapan ChatGPT. Jika aplikasimu butuh kunci, simpan di secret proyek. Alat Mythex hanya melaporkan nama secret, tidak pernah nilainya.
• Sebelum publikasi, pastikan pengguna tidak bisa melihat data satu sama lain, dan tidak ada kunci yang berakhir di kode yang berjalan di browser. Panduan kami apakah vibe coding aman? mencantumkan pemeriksaan dengan prompt yang bisa kamu tempel.

Memakai Claude juga? Panduan pendampingnya membahas vibe coding dengan Claude dan Claude Code. Untuk tampilan model demi model, lihat ChatGPT vs Claude vs Gemini untuk membangun aplikasi.

Pertanyaan