Tutorial Lengkap Membuat Live Chat Ai di Website Menggunakan Gemini API (GRATIS)

Saat ini banyak website pribadi maupun perusahaan sudah memakai LiveChat Ai untuk mencari informasi secara otomatis. Salah satu pilihan yang bisa digunakan adalah Gemini API (Google AI). Dengan Gemini, kita bisa membuat LiveChat AI yang bisa diakses langsung di website seperti contoh di website inpidi.com.

Di artikel ini, kita akan membahas langkah-langkah lengkap pembuatan Live Chat AI, mulai dari persiapan, setup API, hingga cara menampilkan chat di website.

1. Persiapan Awal

Sebelum membuat LiveChat Ai, pastikan sudah menyiapkan:

• Akun Google Cloud (gratis trial tersedia).

• API Key Gemini → didapatkan di Google AI Studio.

• Web hosting / localhost (XAMPP, Laragon, dsb).

• Pengetahuan dasar HTML, CSS, JavaScript, dan PHP (untuk backend).

2. Buat Project & Dapatkan API Key Gemini

1. Masuk ke Google AI Studio → https://aistudio.google.com/.

2. Pilih menu Get API Key.

3. Simpan API Key tersebut (misalnya: AIzaSyxxxx...) ke file .env.

4. API Key ini yang akan dipakai untuk memanggil Gemini API.

3. Struktur Folder Project

*Untuk filenya silahkan Download dibawah ini, tinggal pasang dan sesuaikan saja dengan kebutuhan Anda serta ikuti panduanya.

4. Uji Coba

1. Simpan semua file dalam satu folder (chatai) pastikan berada dalam public_html.

2. Jalankan di hostingan web Anda.

3. Buka https://NamaDomain_Anda/.

4. Pastikan LiveChat Ai Anda sudah muncul di kanan bawah.

5. Ketik pesan perintah → (Ai Gemini) akan membalasnya.

Berikut File LiveChat Ai Siap Pakai: 

01. LiveChat Ai (Gratis) 

02. LiveChat Ai (PRO 01) 

03. LiveChat Ai (PRO 02) 

04. LiveChat Ai (PRO + Api)

Untuk Mendapatkan Info Terbaru, Silahkan Bergabung Di Saluran Kami: