Membuat Chatbot Portofolio SvelteKit dengan Gemini API

Memiliki asisten virtual AI di website portofolio pribadi adalah salah satu cara paling interaktif untuk menceritakan riwayat karir, rincian keahlian, tarif layanan, hingga cara menghubungi Anda kepada pengunjung situs. Alih-alih menyuruh pengunjung membaca tumpukan teks CV yang membosankan, mereka bisa langsung bertanya: "Apakah Rendra bisa membuat website e-commerce dengan Laravel?" atau "Berapa tarif pembuatan landing page?"

Banyak panduan di internet menyarankan pembuatan asisten AI berbasis teknik Retrieval-Augmented Generation (RAG) menggunakan database vektor (seperti Pinecone atau Supabase Vector) untuk menyimpan data portofolio.

Namun, untuk skala portofolio pribadi, pendekatan tersebut sebenarnya terlalu rumit (over-engineered). Dokumen riwayat karir dan informasi jasa kita paling hanya berkisar 2-5 halaman teks saja (kurang dari 10.000 kata). Kita bisa melompati database vektor sepenuhnya dan menyematkan seluruh informasi portofolio kita langsung ke dalam system prompt (context window) model AI.

Artikel ini akan memandu bagaimana saya membangun chatbot AI hemat biaya, cepat, dan pintar pada website portofolio ini menggunakan Vercel AI SDK dan Google Gemini API di SvelteKit.

Mengapa Google Gemini API?

Context Window Besar: Model Gemini terkenal dengan kapasitas memori token yang sangat melimpah. Memasukkan teks knowledge base berukuran 50KB ke dalam prompt tidak menjadi masalah.
Sangat Murah: Untuk model Gemini 1.5 Flash, biaya input per juta token sangat murah, bahkan tersedia paket gratis untuk kuota harian awal yang cukup tinggi bagi traffic website personal.
Instalasi Ringan: SDK resmi @ai-sdk/google berkolaborasi erat dengan @ai-sdk/ui untuk menyediakan hooks UI chatbot yang responsif.

Langkah Implementasi

1. Merancang Knowledge Base Portofolio (Markdown)

Kita mendefinisikan seluruh basis pengetahuan asisten AI dalam bentuk teks terstruktur di database config atau file statis:

# KNOWLEDGE BASE PORTFOLIO RENDRA ZURIANSYAH
- Profil: Rendra adalah seorang Fullstack Developer berbasis di Tangerang Selatan.
- Keahlian Utama: TypeScript, SvelteKit, Laravel, Node.js, Turso SQLite, PostgreSQL.
- Tarif Jasa Pembuatan Website:
  1. Paket Pelajar: Rp 150.000 - Rp 500.000 (Tugas kuliah/situs portofolio simpel).
  2. Paket UMKM & Company Profile: Rp 750.000 - Rp 2.500.000 (Situs bisnis ringan).
  3. Paket Sistem Kustom & AI: Mulai Rp 3.000.000 (E-Commerce, absensi, chatbot AI).
- Hubungi: Kirim pesan lewat form kontak di /contact atau email ke rendrazuriansyah@gmail.com.

2. Membuat API Route Server SvelteKit

Buat API endpoint di /api/chat (src/routes/api/chat/+server.ts) yang menangani request obrolan dari frontend. Di sini kita memuat model Gemini dan menyematkan knowledge base kita sebagai instruksi awal (system prompt):

import { google } from '@ai-sdk/google';
import { streamText } from 'ai';
import type { RequestHandler } from './$types';
import { db } from '$lib/server/db';
import { siteConfig } from '$lib/server/db/schema';

export const POST: RequestHandler = async ({ request }) => {
  const { messages } = await request.json();
  
  // Ambil knowledge base dinamis dari site configuration database
  const config = await db.select().from(siteConfig).limit(1);
  const knowledgeBase = config[0]?.aiChatbotKnowledgeBase || '';
  const basePrompt = config[0]?.aiChatbotSystemPrompt || 'Anda adalah asisten AI Rendra.';

  // Gabungkan sistem instruksi utama dengan basis data pengetahuan
  const systemInstruction = `${basePrompt}\n\nBerikut adalah basis pengetahuan Anda:\n${knowledgeBase}`;

  // Kirim stream teks ke klien secara real-time
  const result = await streamText({
    model: google('gemini-1.5-flash'),
    system: systemInstruction,
    messages
  });

  return result.toDataStreamResponse();
};

3. Membuat Tampilan Chatbot Svelte di Frontend

Kita menggunakan helper hook useChat dari Vercel AI SDK di file komponen Svelte untuk mempermudah manajemen pesan, animasi mengetik, dan pengiriman form secara instan:

<script lang="ts">
  import { useChat } from '@ai-sdk/svelte';
  
  const { messages, input, handleSubmit, isLoading } = useChat({
    api: '/api/chat'
  });
</script>

<div class="chat-container border rounded-lg bg-white dark:bg-gray-800 p-4 shadow-xl">
  <!-- Area List Pesan -->
  <div class="message-list h-[300px] overflow-y-auto space-y-4 mb-4">
    {#each $messages as message}
      <div class="flex {message.role === 'user' ? 'justify-end' : 'justify-start'}">
        <div class="rounded px-3 py-2 text-sm max-w-[80%] {message.role === 'user' ? 'bg-brand-500 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100'}">
          {message.content}
        </div>
      </div>
    {/each}
  </div>

  <!-- Form Kirim Pesan -->
  <form on:submit={handleSubmit} class="flex gap-2">
    <input 
      bind:value={$input} 
      placeholder="Tanyakan sesuatu..." 
      class="flex-1 border rounded px-3 py-2 text-sm focus:outline-none focus:ring focus:ring-brand-200"
    />
    <button type="submit" class="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700">
      Kirim
    </button>
  </form>
</div>

Kesimpulan

Dengan menyematkan data portofolio langsung ke dalam system instruction Gemini 1.5 Flash, kita berhasil memangkas kerumitan implementasi RAG dan menghemat biaya operasional server. Chatbot asisten ini mampu menjawab pertanyaan pengunjung secara tepat, cepat, dan cerdas, menjadikannya fitur penarik perhatian utama yang profesional bagi situs portofolio Anda.

Integrasi AI Chatbot Pintar Tanpa Vector DB pada Portofolio SvelteKit

Table of Contents