Tutorial Membuat Chatbot AI Sendiri dengan Google Gemini API (HTML, CSS, & JavaScript)

FERDI ANANDA

Desember 27, 2025

Di era digital saat ini, kecerdasan buatan (Artificial Intelligence) bukan lagi sekadar tren futuristik, melainkan kebutuhan esensial bagi pengembang web modern. Pernahkah Anda membayangkan memiliki asisten virtual cerdas yang tertanam langsung di website Anda, tanpa biaya langganan yang mahal? Kabar baiknya, Google telah merilis Gemini AI, model bahasa canggih yang kini bisa diakses oleh para developer.

Dalam panduan ini, kita akan menyelami cara membangun antarmuka chatbot yang responsif dan cerdas dari nol. Kita tidak akan menggunakan library yang berat atau dependensi yang rumit. Cukup dengan kekuatan murni HTML, CSS, dan JavaScript, Anda akan belajar bagaimana menghubungkan aplikasi web Anda dengan otak digital Google Gemini.

Table of Contents

Mengapa Memilih Google Gemini API?

Sebelum kita masuk ke baris kode, penting untuk memahami mengapa integrasi ini sangat berharga. Gemini menawarkan kemampuan pemrosesan bahasa alami yang luar biasa, memungkinkannya memahami konteks percakapan, menjawab pertanyaan teknis, hingga membantu penulisan kode. Mengintegrasikannya ke dalam proyek web Anda akan meningkatkan User Experience (UX) secara drastis.

Berikut adalah alur kerja yang akan kita lakukan:

Membuat struktur antarmuka chat dengan HTML.
Mempercantik tampilan dengan CSS modern.
Menangani logika pengiriman pesan dan respon API dengan JavaScript.
Mengintegrasikan API Key dari Google AI Studio.

Langkah 1: Membangun Struktur HTML

Langkah pertama adalah membuat kerangka dasar. Kita membutuhkan wadah untuk menampung riwayat obrolan dan formulir input untuk pengguna mengetik pesan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gemini AI Chatbot</title>
  <link rel="stylesheet" href="style.css">
  <!-- Menambahkan Google Fonts untuk ikon -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
</head>
<body>
  <!-- Tombol Toggler untuk membuka chat -->
  <button class="chatbot-toggler">
    <span class="material-symbols-rounded">mode_comment</span>
    <span class="material-symbols-rounded">close</span>
  </button>

  <div class="chatbot">
    <header>
      <h2>Chatbot</h2>
      <span class="close-btn material-symbols-rounded">close</span>
    </header>
    
    <ul class="chatbox">
      <li class="chat incoming">
        <span class="material-symbols-rounded">smart_toy</span>
        <p>Halo! Ada yang bisa saya bantu hari ini?</p>
      </li>
    </ul>
    
    <div class="chat-input">
      <textarea placeholder="Ketik pesan..." spellcheck="false" required></textarea>
      <span id="send-btn" class="material-symbols-rounded">send</span>
    </div>
  </div>

  <script src="script.js" defer></script>
</body>
</html>

Langkah 2: Styling dengan CSS

Agar chatbot terlihat profesional dan menarik, kita perlu memberikan sentuhan gaya. Kode CSS berikut akan membuat tampilan pop-up yang elegan dengan animasi halus serta desain responsif.

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #E3F2FD;
}

.chatbot-toggler {
  position: fixed;
  bottom: 30px;
  right: 35px;
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #724ae8;
  transition: all 0.2s ease;
}

body.show-chatbot .chatbot-toggler {
  transform: rotate(90deg);
}

.chatbot-toggler span {
  color: #fff;
  position: absolute;
}

.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child  {
  opacity: 0;
}

body.show-chatbot .chatbot-toggler span:last-child {
  opacity: 1;
}

.chatbot {
  position: fixed;
  right: 35px;
  bottom: 90px;
  width: 420px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: bottom right;
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
  transition: all 0.1s ease;
}

body.show-chatbot .chatbot {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.chatbot header {
  padding: 16px 0;
  position: relative;
  text-align: center;
  color: #fff;
  background: #724ae8;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.chatbox {
  overflow-y: auto;
  height: 510px;
  padding: 30px 20px 100px;
}

.chatbox .chat {
  display: flex;
  list-style: none;
}

.chatbox .outgoing {
  margin: 20px 0;
  justify-content: flex-end;
}

.chatbox .incoming span {
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: default;
  text-align: center;
  line-height: 32px;
  align-self: flex-end;
  background: #724ae8;
  border-radius: 4px;
  margin: 0 10px 7px 0;
}

.chatbox .chat p {
  white-space: pre-wrap;
  padding: 12px 16px;
  border-radius: 10px 10px 0 10px;
  max-width: 75%;
  color: #fff;
  font-size: 0.95rem;
  background: #724ae8;
}

.chatbox .incoming p {
  border-radius: 10px 10px 10px 0;
  color: #000;
  background: #f2f2f2;
}

.chatbot .chat-input {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 3px 20px;
  border-top: 1px solid #ddd;
}

.chat-input textarea {
  height: 55px;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  max-height: 180px;
  padding: 15px 15px 15px 0;
  font-size: 0.95rem;
}

.chat-input span {
  align-self: flex-end;
  color: #724ae8;
  cursor: pointer;
  height: 55px;
  display: flex;
  align-items: center;
  visibility: hidden;
  font-size: 1.35rem;
}

.chat-input textarea:valid ~ span {
  visibility: visible;
}

Langkah 3: Integrasi API dengan JavaScript

Inilah bagian terpenting. Kita akan menggunakan JavaScript untuk mengambil input pengguna, mengirimkannya ke endpoint Google Gemini API, dan menampilkan balasannya. Pastikan Anda sudah mendapatkan API Key dari Google AI Studio.

const chatbotToggler = document.querySelector(".chatbot-toggler");
const closeBtn = document.querySelector(".close-btn");
const chatbox = document.querySelector(".chatbox");
const chatInput = document.querySelector(".chat-input textarea");
const sendChatBtn = document.querySelector(".chat-input span");

let userMessage = null; // Menyimpan pesan pengguna
const API_KEY = "PASTE-YOUR-API-KEY-HERE"; // Ganti dengan API Key Anda
const inputInitHeight = chatInput.scrollHeight;

const createChatLi = (message, className) => {
    // Membuat elemen list chat <li>
    const chatLi = document.createElement("li");
    chatLi.classList.add("chat", `${className}`);
    let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-rounded">smart_toy</span><p></p>`;
    chatLi.innerHTML = chatContent;
    chatLi.querySelector("p").textContent = message;
    return chatLi; // Mengembalikan elemen chat <li>
}

const generateResponse = (chatElement) => {
    const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${API_KEY}`;
    const messageElement = chatElement.querySelector("p");

    // Opsi request untuk API
    const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            contents: [{
                parts: [{ text: userMessage }]
            }]
        })
    }

    // Mengirim request POST ke API, menangani respon
    fetch(API_URL, requestOptions)
        .then(res => res.json())
        .then(data => {
            messageElement.textContent = data.candidates[0].content.parts[0].text.trim();
        })
        .catch(() => {
            messageElement.classList.add("error");
            messageElement.textContent = "Oops! Ada kesalahan. Silakan coba lagi.";
        })
        .finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
}

const handleChat = () => {
    userMessage = chatInput.value.trim(); // Mendapatkan pesan dan menghapus spasi ekstra
    if (!userMessage) return;

    // Bersihkan textarea dan atur tingginya kembali normal
    chatInput.value = "";
    chatInput.style.height = `${inputInitHeight}px`;

    // Tambahkan pesan pengguna ke chatbox
    chatbox.appendChild(createChatLi(userMessage, "outgoing"));
    chatbox.scrollTo(0, chatbox.scrollHeight);

    // Tampilkan pesan "Sedang berpikir..." sementara menunggu respon
    setTimeout(() => {
        const incomingChatLi = createChatLi("Sedang berpikir...", "incoming");
        chatbox.appendChild(incomingChatLi);
        chatbox.scrollTo(0, chatbox.scrollHeight);
        generateResponse(incomingChatLi);
    }, 600);
}

// Event listeners
chatInput.addEventListener("input", () => {
    // Menyesuaikan tinggi textarea berdasarkan konten
    chatInput.style.height = `${inputInitHeight}px`;
    chatInput.style.height = `${chatInput.scrollHeight}px`;
});

chatInput.addEventListener("keydown", (e) => {
    // Kirim pesan jika Enter ditekan (tanpa Shift) dan lebar window > 800px
    if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
        e.preventDefault();
        handleChat();
    }
});

sendChatBtn.addEventListener("click", handleChat);
closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));

Tips Mengoptimalkan Chatbot Anda

Setelah kode di atas berhasil dijalankan, Anda memiliki fondasi yang kuat. Namun, jangan berhenti di situ. Berikut adalah beberapa ide untuk mengembangkan proyek ini lebih jauh:

Simpan Riwayat Chat: Gunakan localStorage agar percakapan tidak hilang saat halaman di-refresh.
Personalisasi Prompt: Sesuaikan instruksi sistem pada API agar chatbot bertindak sesuai karakter brand Anda.
Keamanan API Key: Untuk proyek produksi, hindari menaruh API Key langsung di JavaScript sisi klien (frontend). Gunakan backend proxy untuk menyembunyikannya.

Membangun chatbot dengan Gemini API ternyata tidak serumit yang dibayangkan, bukan? Dengan kombinasi HTML, CSS, dan JavaScript yang tepat, Anda telah menciptakan jembatan interaktif yang cerdas bagi pengunjung website Anda. Selamat mencoba dan teruslah bereksperimen!

FerdiChocs