Bikin Dashboard AI Pintar dengan Vue 3 & Gemini API dalam 15 Menit!
Tahun 2026, aplikasi web tanpa fitur AI rasanya seperti makan sayur tanpa garam—hambar! Klien sekarang maunya web yang "bisa diajak ngobrol", "bisa mikir", atau minimal bisa bantu nulis konten otomatis.
Mungkin kamu mikir, "Wah, integrasi AI pasti ribet, harus belajar Machine Learning dulu."
SALAH BESAR.
Di tutorial kali ini, saya akan buktikan kalau menghubungkan "otak" AI (Google Gemini) ke frontend Vue 3 itu gampang banget. Kita akan membangun sebuah mini-dashboard di mana kamu bisa tanya apa saja, dan AI akan menjawabnya secara real-time.
Dan janji saya: Kita akan selesaikan ini dalam waktu kurang dari 15 menit. Siapkan timer kamu!
.png)
Apa yang Akan Kita Buat?
Sebuah halaman dashboard sederhana dengan tampilan modern (thanks to Tailwind CSS), ada kolom chat input, dan area jawaban di mana AI akan merespons pertanyaan kita.
Tech Stack:
- Vue 3 (Composition API + Script Setup): Karena kita mau kode yang bersih dan modern.
- Tailwind CSS: Biar tampilan langsung terlihat "mahal" tanpa pusing mikirin CSS.
- Google Gemini API: Otak AI-nya, yang (masih) ngasih tier gratisan yang lumayan banget di 2026.
Langkah 1: Persiapan "Bahan Bakar" (API Key) (⏱️ 3 Menit)
Sebelum ngoding, kita butuh kunci akses ke otak si Gemini.
Buka
Google AI Studio Login pakai akun Google kamu.
Klik menu "Get API key" di sebelah kiri.
Klik "Create API key" di project baru.
PENTING: Copy key tersebut dan simpan di tempat aman. Jangan pernah commit key ini ke repository publik (GitHub, dll). Nanti kita simpan di
.env.
Langkah 2: Setup Project & UI "Mahal" (⏱️ 5 Menit)
Saya asumsikan kamu sudah punya project Vue 3 yang terinstall Tailwind CSS. Kalau belum, pakai cara kilat ini di terminal:
npm create vue@latest my-ai-dashboard
cd my-ai-dashboard
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# (Jangan lupa setup tailwind.config.js dan style.css sesuai dokumentasi Tailwind)
Sekarang, buka file src/App.vue (atau buat komponen baru AiDashboard.vue). Kita akan buat kerangka UI-nya dulu biar semangat.
Hapus semua isinya, ganti dengan kode ini:
<template>
<div class="min-h-screen bg-slate-100 p-8 flex flex-col items-center">
<div class="w-full max-w-2xl bg-white rounded-xl shadow-lg p-6 mb-6">
<h1 class="text-2xl font-bold text-indigo-600 flex items-center gap-2">
✨ Tamvan AI Dashboard
</h1>
<p class="text-gray-500">Tanya apa saja, Gemini akan menjawab.</p>
</div>
<div class="w-full max-w-2xl bg-white rounded-xl shadow-md p-6 min-h-[200px] mb-6 overflow-y-auto border border-slate-200">
<p class="text-gray-400 italic">Menunggu pertanyaanmu...</p>
</div>
<div class="w-full max-w-2xl flex gap-2 relative">
<input
type="text"
placeholder="Tulis pertanyaan di sini..."
class="w-full p-4 pr-20 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm"
@keyup.enter="askGemini"
/>
<button
@click="askGemini"
class="absolute right-2 top-2 bottom-2 bg-indigo-600 text-white px-6 rounded-lg font-semibold hover:bg-indigo-700 transition-all flex items-center justify-center"
>
Kirim 🚀
</button>
</div>
</div>
</template>
Cek di browser. Tampilannya sudah oke, kan? Tapi belum bisa ngapa-ngapain.
Baca Juga 10 Tools AI Gratis untuk Kerja Lebih Cepat (2026)
Langkah 3: Menghidupkan "Otak" dengan Vue 3 (⏱️ 7 Menit)
Inilah bagian paling seru. Kita akan pakai fetch bawaan browser untuk nembak API Gemini.
Tambahkan blok <script setup> di paling atas file App.vue kamu.
PENTING: Ganti YOUR_GEMINI_API_KEY dengan key yang kamu dapat di Langkah 1 tadi. (Untuk produksi, wajib pakai .env ya, tapi untuk tutorial cepat ini kita taruh langsung dulu).
<script setup lang="ts">
import { ref } from 'vue';
// 1. State Management Sederhana
const userQuestion = ref('');
const aiResponse = ref('');
const isLoading = ref(false);
const chatContainer = ref<HTMLElement | null>(null);
// Kunci API (Ganti dengan punyamu!)
const API_KEY = 'YOUR_GEMINI_API_KEY';
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${API_KEY}`;
// 2. Fungsi Utama untuk Tanya AI
const askGemini = async () => {
// Validasi: Kalau kosong atau lagi loading, jangan jalan
if (!userQuestion.value.trim() || isLoading.value) return;
isLoading.value = true;
aiResponse.value = ''; // Reset jawaban sebelumnya
try {
// Siapkan data yang mau dikirim sesuai format Gemini
const requestBody = {
contents: [
{
parts: [
{ text: userQuestion.value }
]
}
]
};
// Tembak API!
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestBody)
});
const data = await response.json();
// Ambil teks jawaban dari struktur JSON Gemini
if (data.candidates && data.candidates[0].content.parts[0].text) {
// Efek mengetik sederhana (opsional, biar keren)
typeWriterEffect(data.candidates[0].content.parts[0].text);
} else {
aiResponse.value = "Maaf, AI sedang bingung. Coba tanya yang lain.";
}
} catch (error) {
console.error("Error:", error);
aiResponse.value = "Terjadi kesalahan saat menghubungi server AI.";
} finally {
isLoading.value = false;
userQuestion.value = ''; // Kosongkan input setelah kirim
}
};
// Fungsi tambahan untuk efek mengetik (Biar kayak di film-film)
const typeWriterEffect = (text: string) => {
let i = 0;
const speed = 20; // Kecepatan mengetik (ms)
function type() {
if (i < text.length) {
aiResponse.value += text.charAt(i);
i++;
setTimeout(type, speed);
// Auto scroll ke bawah
if (chatContainer.value) {
chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
}
}
}
type();
}
</script>
Langkah Terakhir: Sambungkan State ke UI
Sekarang kita update bagian <template> agar nyambung dengan variabel ref yang sudah kita buat di script.
Update bagian Area Jawaban AI dan Input Area jadi seperti ini:
<div ref="chatContainer" class="w-full max-w-2xl bg-white rounded-xl shadow-md p-6 min-h-[200px] max-h-[400px] mb-6 overflow-y-auto border border-slate-200">
<div v-if="isLoading" class="flex items-center gap-2 text-indigo-500 animate-pulse">
<span>Sedang berpikir...</span>
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<p v-else-if="aiResponse" class="text-gray-800 whitespace-pre-wrap leading-relaxed">
{{ aiResponse }}
</p>
<p v-else class="text-gray-400 italic">Menunggu pertanyaanmu...</p>
</div>
<div class="w-full max-w-2xl flex gap-2 relative">
<input
v-model="userQuestion"
type="text"
placeholder="Contoh: Buatkan puisi tentang Vue.js..."
class="w-full p-4 pr-24 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm disabled:bg-gray-100"
@keyup.enter="askGemini"
:disabled="isLoading"
/>
<button
@click="askGemini"
:disabled="isLoading"
class="absolute right-2 top-2 bottom-2 bg-indigo-600 text-white px-6 rounded-lg font-semibold hover:bg-indigo-700 transition-all flex items-center justify-center disabled:bg-gray-400"
>
<span v-if="!isLoading">Kirim 🚀</span>
<span v-else>...</span>
</button>
</div>
Selesai! Saatnya Mencoba
Simpan semua file, pastikan server development kamu jalan (npm run dev), dan buka di browser.
Coba ketik: "Buatkan saya roadmap belajar Vue 3 di tahun 2026" lalu tekan Enter.
Tadaaa! 🎉 Dashboard kamu sekarang hidup. AI akan menjawab pertanyaanmu langsung di layar dengan efek mengetik yang keren.
Kesimpulan
Lihat kan? Menambahkan fitur AI ke dalam aplikasi Vue 3 tidak seseram yang dibayangkan. Hanya dengan beberapa baris kode menggunakan fetch dan reaktivitas Vue yang mantap, aplikasi kamu sudah naik level jadi "Aplikasi Pintar".
Tantangan buat kamu:
Coba modifikasi kodenya agar AI-nya punya kepribadian. Misalnya, ubah prompt yang dikirim ke API agar si AI menjawab dengan gaya bahasa bajak laut atau gaya bahasa anak Jaksel!
Selamat mencoba, Developer Tamvan!
.png)
.png)
Post a Comment