Rekam demo aplikasi web secara otomatis dengan AI

Anda sekarang dapat merekam demo aplikasi web secara otomatis dengan menuliskan apa yang ingin ditampilkan dan memberikannya kepada agen AI yang akan mengeklik produk Anda di browser cloud saat merekam. Apakah hasil rekamannya dapat digunakan atau tidak bergantung pada apa yang Anda siapkan sebelum dimulai: akun yang digunakan untuk masuk, data di layar, dan instruksi yang Anda tulis. Panduan ini membahas setiap poin tersebut, apa yang harus dilakukan saat agen mengalami kendala, dan kapan skrip Playwright atau Puppeteer menjadi alat yang lebih baik.

Ini juga merupakan cara paling langsung untuk mendapatkan demo produk tanpa harus melakukan perekaman layar sendiri. Jika produk Anda bukan aplikasi web publik, atau Anda hanya memiliki dek presentasi atau URL, metode tanpa perekaman lainnya di bagian akhir akan membahas hal tersebut.

Cara kerja perekaman situs web otomatis#

Di Clevera, perekam AI menerima 2 input: halaman awal dan instruksi tertulis yang menjelaskan apa yang harus ditampilkan. Agen AI membuka halaman awal di browser cloud, melakukan langkah-langkahnya, dan merekam sesi tersebut. Anda dapat memantau prosesnya, mengambil alih browser kapan saja, dan mengembalikan kendali saat Anda selesai.

Secara default, agen bersifat hanya-baca (read-only). Agen dapat bernavigasi, membuka menu, dan membaca layar, tetapi tidak akan membuat atau mengedit apa pun kecuali Anda mengizinkannya. Rekaman yang sudah jadi akan tersimpan di pustaka Anda seperti rekaman lainnya, dan Anda dapat mengubahnya menjadi video panduan, demo produk, atau artikel.

Langkah 1: Siapkan akun demo dan data demo#

Segala sesuatu yang dilihat agen akan masuk ke dalam video. Siapkan akun sebelum Anda menulis satu instruksi pun.

• Gunakan akun demo khusus. Jangan pernah mengarahkan agen ke akun admin di lingkungan produksi. Ruang kerja demo dengan login tersendiri menjaga data pelanggan asli agar tidak muncul di layar dan membatasi dampak jika terjadi kesalahan.
• Isi dengan data yang realistis. Dasbor yang kosong membuat demo terlihat buruk. Tambahkan 10 hingga 20 data dengan nama, jumlah, dan tanggal yang masuk akal, sehingga tabel, grafik, dan hasil pencarian terlihat seperti produk yang benar-benar digunakan oleh tim. Hindari penggunaan "Test 1", "asdf", dan nama pelanggan asli.
• Atur kondisi awal alur. Jika demo menampilkan "buat proyek pertama Anda", pastikan belum ada proyek yang dibuat. Jika demo menampilkan pengeditan faktur, pastikan faktur tersebut sudah ada dan memiliki nama yang jelas agar instruksi dapat mengarah ke sana.
• Bersihkan gangguan sekali pakai. Tutup tur onboarding, modal "apa yang baru", dan banner uji coba di akun tersebut terlebih dahulu. Apa pun yang muncul sekali per pengguna akan muncul dalam rekaman Anda.
• Pastikan aplikasi dapat diakses dari internet. Agen berjalan di browser cloud, sehingga tidak dapat membuka localhost, server staging di balik VPN Anda, atau apa pun yang IP-nya dibatasi hanya untuk kantor Anda. Gunakan demo publik atau lingkungan sandbox.

Langkah 2: Tulis instruksi yang dapat diikuti agen#

Sebagian besar rekaman AI yang buruk berasal dari instruksi yang tidak jelas. Agen melakukan apa yang Anda tulis, sesuai urutan yang Anda tulis, dan mengisi kekosongan dengan tebakan. Instruksi yang baik dibaca seperti skrip pengujian singkat yang ditulis untuk seseorang yang belum pernah melihat produk Anda.

Ikuti 4 aturan ini:

1. Beri nama layar. Gunakan label yang muncul di UI: "Buka Penagihan dari sidebar kiri", bukan "pergi ke bagian uang".
2. Berikan urutan. Beri nomor pada setiap langkah. Jika urutan penting bagi alur cerita (siapkan, lalu gunakan, lalu lihat hasilnya), sebutkan hal tersebut.
3. Tunjuk elemen yang tepat. Sebutkan tombol, tab, kolom, atau data: "Klik faktur INV-1042", "Buka dropdown Filter dan pilih Terlambat".
4. Katakan di mana harus berhenti. Akhiri pada layar hasil yang harus diingat oleh penonton, dan minta agen untuk tetap di sana selama beberapa saat.

Berikut adalah perbedaannya dalam praktik.

Instruksi buruk:

Tunjukkan cara kerja faktur kami.

Agen harus memutuskan layar mana yang penting, data mana yang harus dibuka, dan kapan harus selesai. Anda akan mendapatkan tur dari apa pun yang ditemukan agen terlebih dahulu.

Lebih baik, tapi masih longgar:

Tunjukkan cara membuat faktur dan mengirimkannya ke pelanggan.

Tujuannya jelas, tetapi tidak ada titik awal, tidak ada pelanggan, dan tidak ada item baris. Dengan agen hanya-baca, ini juga tidak akan berhasil, karena membuat faktur adalah tindakan tulis.

Instruksi yang baik:

Mulai di Dasbor. 1) Klik Faktur di sidebar kiri. 2) Klik tombol Faktur baru di kanan atas. 3) Di Pelanggan, pilih "Northwind Studio". 4) Tambahkan satu item baris: "Design retainer", kuantitas 1, harga 2.400. 5) Klik Simpan draf. 6) Buka draf dan klik Pratinjau, lalu berhenti di layar pratinjau selama 3 detik. Jangan klik Kirim.

Instruksi ini menyebutkan setiap layar dan elemen, menggunakan pelanggan yang tepat dari data demo Anda, dan memberikan batasan yang jelas pada satu tindakan yang tidak ingin Anda lakukan. Instruksi ini juga memberi tahu Anda, sebelum memulai, bahwa proses ini memerlukan izin buat (lihat Langkah 4).

Beberapa kebiasaan lain yang membantu:

• Satu alur per rekaman. "Buat faktur, lalu atur jadwal berulang, lalu ekspor laporan" adalah 3 video. Alur yang lebih pendek lebih mudah diperbaiki dan lebih mudah digunakan kembali.
• Tuliskan nilai yang harus diketik. Jika agen harus mengarang teks, ia mungkin akan mengarang sesuatu yang aneh di kamera.
• Sebutkan keunikan yang diketahui. "Tombol Simpan dinonaktifkan sampai kolom harga kehilangan fokus" akan menyelamatkan agen dari beberapa klik yang membingungkan.

Langkah 3: Pilih opsi masuk#

Sebagian besar demo aplikasi web berada di balik login. Anda memiliki 3 opsi:

Akun demo dari Langkah 1 sangat berguna di sini. Kata sandi khusus demo dengan akses ke data khusus demo adalah pilihan berisiko rendah saat Anda memberikan login. Jika perusahaan Anda masuk melalui SSO dengan 2FA, mengetiknya sendiri biasanya lebih cepat daripada mencoba membuat agen melakukannya.

Langkah 4: Putuskan antara hanya-baca atau buat/edit#

Hanya-baca adalah default, dan ini mencakup lebih banyak demo daripada yang Anda kira (risiko membiarkan agen menulis ada di keamanan agen perekaman layar AI): bernavigasi, memfilter, mencari, membuka data, berpindah tab, dan menampilkan laporan.

Izinkan buat atau edit hanya jika alur benar-benar memerlukannya (membuat data, mengubah pengaturan, mengirim formulir) dan hanya pada akun demo. Kemudian lakukan 2 hal:

• Tulis titik berhenti ke dalam instruksi, seperti "Jangan klik Kirim" di atas. Tindakan yang mengirim email ke orang, menagih kartu, atau memposting ke integrasi harus dihindari dari proses, atau diputus di ruang kerja demo.
• Atur ulang data demo setelahnya, agar proses berikutnya dimulai dari kondisi yang sama.

Langkah 5: Ambil alih saat agen mengalami kendala#

Beberapa layar dapat menghambat browser otomatis apa pun. Rencanakan untuk mengatasinya alih-alih menjalankan ulang seluruh alur:

• Banner cookie dan pop-up persetujuan. Ambil alih, terima atau tutup, lalu kembalikan kendali.
• Pemilih tanggal kustom dan drag-and-drop. Widget yang tidak biasa adalah tempat agen membuang waktu paling banyak. Pilih tanggal sendiri dan kembalikan kendali.
• Captcha. Ini ada untuk menghentikan otomatisasi. Selesaikan sendiri.
• Kode 2FA. Ketik kode dari ponsel Anda, lalu kembalikan kendali.

Saat Anda mengembalikan kendali, agen akan melanjutkan dari layar tempat Anda meninggalkannya. Jika proses pengambilalihan terlihat dalam rekaman, potong bagian tersebut di editor.

Langkah 6: Jaga agar durasi pendek untuk menghemat kredit#

Perekam AI menggunakan kredit berdasarkan berapa lama AI bekerja, di setiap paket. Itu membuat instruksi menjadi penentu biaya. Instruksi yang tepat pada akun yang disiapkan akan selesai dengan cepat. Instruksi yang tidak jelas pada akun yang penuh dengan pop-up akan membuang waktu untuk menjelajah, mencoba ulang, dan menunggu. Jumlah kredit paket ada di halaman harga.

Menjadi apa rekaman tersebut#

Rekaman mentah adalah input, bukan hasil akhir. Dari rekaman AI yang sama, Anda dapat menghasilkan:

• Video panduan. Clevera mencakup setiap tindakan yang diperlukan secara berurutan, menulis naskah, dan menambahkan sulih suara AI, sehingga tidak perlu narasi langsung. Ini adalah format untuk pusat bantuan dan orientasi. Lihat cara kerjanya di pembuat tutorial AI.
• Demo produk. AI bersifat selektif di sini: AI dapat melewati rekaman bernilai rendah, menyusun ulang klip, dan menarasikan hasil alih-alih setiap klik. Ini adalah format untuk halaman penjualan dan peluncuran. Generator demo produk kami mencakup format demo tersebut.
• Artikel. Panduan tertulis dengan tangkapan layar yang dipilih otomatis dan diberi keterangan, untuk dokumentasi dan SEO.

Masing-masing adalah item konten terpisah, dan video serta artikel dapat diterjemahkan ke dalam 74 bahasa. Saat UI berubah, pengeditan pada narasi dan teks akan diperbarui pada tautan yang dihosting dan disematkan, tetapi rekamannya sendiri tidak berubah. Jalankan kembali instruksi yang sama untuk mendapatkan rekaman baru; cara memperbarui video tutorial setelah perubahan UI membahas kapan harus merekam ulang dan kapan pengeditan sudah cukup.

Jika Anda tidak yakin format mana yang dibutuhkan audiens Anda, perbandingan kami mengenai demo interaktif vs video produk dan panduan tentang cara membuat video tutorial membahas kelebihan dan kekurangannya.

Uji coba pertama kami: 1 instruksi, 78 detik, 9 kredit#

Pada Oktober 2026, kami menjalankan perekam AI pada TodoMVC, aplikasi demo publik, dengan instruksi ini:

Tambahkan tiga todo: 'Tulis postingan peluncuran', 'Rekam demo', 'Kirim buletin'. Tandai 'Rekam demo' sebagai selesai. Kemudian klik filter Aktif untuk hanya menampilkan todo yang terbuka.

Masuk (Sign-in) adalah Tidak Ada. Kami mengaktifkan Izinkan perubahan, karena menambahkan dan menyelesaikan todo adalah tindakan tulis, dan kami melakukannya hanya karena ini adalah aplikasi demo publik tanpa data nyata di baliknya. Pada produk Anda sendiri, ikuti Langkah 4 sebagai gantinya.

Agen melakukan persis seperti yang kami tulis, secara berurutan, tanpa percobaan ulang atau klik yang salah yang kami lihat, dan kami tidak perlu mengambil alih. Uji coba memakan waktu sekitar 78 detik waktu nyata dan menyisakan 58 detik rekaman untuk tugas yang dilakukan seseorang dalam waktu sekitar 20 detik, karena agen berhenti sejenak di antara langkah-langkah. Clevera memotongnya menjadi video panduan berdurasi 0:40 dengan 2 bab, 6 langkah, dan zoom otomatis pada 1,5x dan 1,8x, dalam waktu sekitar 50 detik. Kredit: 5 untuk analisis rekaman dan 4 untuk panduan, total 9.

Video panduan berdurasi 0:40 yang dibuat Clevera dari rekaman AI tersebut, tanpa diedit.

Yang perlu diperhatikan: rekaman muncul pudar dan kontras rendah, jadi periksa sebelum Anda memublikasikannya. Dan instruksi kami tidak diberi nomor. Itu berhasil pada alur 3 langkah karena kami mengeja setiap nilai yang akan diketik dan filter yang tepat untuk diklik. Untuk alur yang lebih panjang, beri nomor pada langkah-langkahnya.

Alternatif berbasis naskah: Playwright dan Puppeteer#

Tim teknik telah merekam browser dengan skrip otomatisasi selama bertahun-tahun, dan untuk beberapa pekerjaan, skrip adalah alat yang lebih baik.

Playwright merekam video secara native. Di Playwright Test, Anda mengatur opsi video ke 'on', 'retain-on-failure', atau 'on-first-retry'; dengan pustaka, Anda meneruskan recordVideo ke browser.newContext() dengan dir dan size opsional. 2 detail sering kali mengecoh orang. Video hanya disimpan saat konteks browser ditutup, jadi Anda harus await context.close(). Dan video secara default menggunakan viewport yang diperkecil agar pas dengan 800x800, jadi atur viewport dan size sendiri jika Anda menginginkan rekaman 1080p yang tajam. Anda juga tidak perlu menulis pemilih (selector) secara manual: npx playwright codegen menghasilkan skrip saat Anda mengeklik aplikasi.

Puppeteer memiliki page.screencast(), yang merekam WebM pada 30 FPS secara default dan memerlukan ffmpeg di mesin. Per Puppeteer 25.13, dokumentasi menandainya sebagai usang demi page.record(), yang menghasilkan MP4.

Skrip adalah pilihan yang lebih baik jika:

• Anda ingin alur yang sama direkam pada setiap rilis, dipicu dari CI tanpa ada yang menonton.
• Rekaman tersebut berfungsi ganda sebagai pengujian, dan Anda peduli dengan kegagalan sama seperti rekamannya.
• Aplikasi Anda berada di tempat yang tidak dapat dijangkau oleh browser cloud, seperti jaringan staging pribadi yang dapat dilihat oleh runner CI Anda.
• Anda memiliki insinyur yang sudah memelihara pengujian end-to-end dan pemilihnya stabil.

Agen adalah pilihan yang lebih baik jika:

• Orang yang membutuhkan video tersebut berada di pemasaran produk, penjualan, atau dukungan dan tidak menulis kode.
• Alurnya bersifat sekali pakai atau sering berubah: demo khusus prospek, fitur baru, artikel bantuan.
• Anda memerlukan video yang sudah jadi dan bernarasi, bukan rekaman mentah. Skrip hanya memberi Anda tangkapan layar senyap; narasi, zoom, dan pengeditan tetap menjadi tanggung jawab Anda.

Kedua pendekatan tersebut dapat digabungkan dengan baik. Clevera menerima video yang diunggah, termasuk rekaman senyap, sehingga tim dapat merekam alur dengan Playwright di CI dan mengunggah file tersebut untuk menghasilkan panduan atau demo yang bernarasi.

Cara lain untuk membuat demo produk tanpa perekaman layar#

Rekaman yang bersih biasanya memerlukan akun yang rapi, naskah yang Anda ikuti saat mengeklik, tanpa kesalahan, dan setiap perubahan UI membuat seseorang harus mengulanginya. Perekam AI menghilangkan hal itu untuk aplikasi web. Jika tidak cocok, Anda masih memiliki opsi yang tidak memerlukan perekaman:

Dari dek, PDF, atau tangkapan layar#

Gunakan ini jika fitur belum dirilis, aplikasi tidak publik, atau bukan aplikasi web sama sekali. Unggah dek PDF atau tangkapan layar, pilih jenis demo seperti Fitur baru, dan tambahkan baris arahan ("Audiens adalah admin yang ada, di bawah 90 detik"). Teks slide memandu narasi yang ditulis Clevera dan disulihsuarakan di atas slide Anda, jadi salinan spesifik ("Ekspor laporan apa pun ke CSV dalam 1 klik") lebih baik daripada slogan. Untuk aplikasi desktop, 8 hingga 10 tangkapan layar yang dipilih dengan baik dapat menjadi penelusuran bernarasi yang jelas. Batasannya: tidak ada klik langsung atau kursor, jadi ini lebih cocok untuk pratinjau peluncuran daripada video pelatihan "klik tepat di sini".

Dari URL atau beberapa kalimat#

Untuk klip pendek di media sosial, iklan, atau bagian atas halaman landas, jenis sosial & promo Clevera (Starter ke atas, dalam Beta) tidak memerlukan rekaman. Tempel tautan dan Clevera akan menarik fakta, tangkapan layar, dan logo produk dari halaman tersebut, atau deskripsikan produk dalam beberapa kalimat; AI menulis klip tersebut sebagai grafik gerak dengan musik dan, jika jenisnya memilikinya, sulih suara. Tur produk, sorotan fitur, dan pengumuman fitur adalah jenis yang paling mendekati demo, dan jenis avatar AI (juga Starter ke atas, Beta) menambahkan presenter. Ini adalah promo, bukan pelatihan: ini menunjukkan apa produk tersebut, bukan alur kerja yang nyata.

Alat avatar dan demo interaktif#

Alat avatar seperti HeyGen mengubah naskah atau tautan produk menjadi video yang dipimpin presenter; untuk perangkat lunak, rekaman layar tetap harus berasal dari suatu tempat. Alat interaktif seperti Arcade dan Supademo menghasilkan demo klik-tayang alih-alih video, tetapi seseorang tetap harus mengeklik produk untuk menangkapnya. Perbandingan kami mengenai demo interaktif vs video produk membahas kapan masing-masing lebih baik dalam hal konversi.

Metode mana yang cocok untuk pekerjaan mana#

Dalam pengujian kami pada Oktober 2026, kesenjangannya jelas. Uji coba perekam AI di atas ditambah ikhtisar produk 0:55 menelan biaya 11 kredit dan menunjukkan klik nyata. Sorotan fitur 35 detik yang dihasilkan dari clevera.ai dengan Riset situs web menelan biaya 96 kredit, memakan waktu sekitar 7 menit, dan terbuka pada adegan yang tidak relevan yang harus kami perbaiki sebelum mempostingnya. Rekaman nyata lebih murah dan lebih dekat dengan demo; klip promo ditujukan untuk jangkauan, bukan penelusuran.

Batasan yang perlu diketahui sebelum Anda memulai#

• Khusus web. Perekam AI merekam situs web dan aplikasi web di browser cloud. Perekam ini tidak merekam perangkat lunak desktop atau aplikasi seluler native. Untuk alur desktop, atau alur web yang lebih Anda sukai untuk diklik sendiri, gunakan aplikasi desktop Clevera (macOS atau Windows).
• Hanya aplikasi yang dapat diakses. Tidak ada localhost, staging khusus VPN, atau alat dengan daftar izin IP.

Mulailah dengan satu alur yang dijelaskan tim dukungan Anda setiap minggu, pada akun demo, dengan instruksi bernomor yang menyebutkan setiap tombol. Tonton hasil pertama, catat bagian di mana Anda harus mengambil alih, dan masukkan catatan tersebut ke dalam instruksi untuk yang berikutnya.

FAQ#

Bisakah saya membuat demo produk tanpa merekam layar sama sekali? Bisa. Perekam AI merekam aplikasi web publik untuk Anda di browser cloud, dek PDF atau tangkapan layar tidak memerlukan perekaman, dan URL atau perintah akan menjadi klip bergaya promo.

Bagaimana cara menjaga data pelanggan asli agar tidak masuk ke dalam demo? Arahkan agen ke akun demo khusus yang diisi dengan data palsu yang realistis (Langkah 1), jangan pernah menggunakan akun admin di produksi.

Apakah perekam AI berfungsi dengan perangkat lunak desktop? Tidak. Perekam ini hanya merekam situs web dan aplikasi web. Untuk perangkat lunak desktop, rekam dengan aplikasi desktop Clevera atau buat demo dari tangkapan layar.

Bisakah saya membuat demo secara gratis? Paket Gratis mencakup video panduan, demo produk, dan artikel hingga 3 menit, yang dibagikan melalui tautan atau sematan (unduhan MP4 dimulai pada paket Starter). Perekaman AI menggunakan kredit di setiap paket; klip sosial & promo serta avatar AI memerlukan paket Starter atau lebih tinggi.