AI & Full-Stack Integration

Building LLM-Powered Applications: Harnessing Gemini API for SME and Job Seeker Solutions

Sorotan mendalam tentang perancangan, pengamanan, dan integrasi Large Language Models (LLM) di aplikasi Next.js untuk asisten UMKM (LarisManis) dan akselerator karir (KerjaMerdeka).

#Next.js#Gemini API#Supabase#Node.js#AI Integration#Prompt Engineering

Ringkasan Eksekutif

Dalam lanskap teknologi modern, kemampuan untuk mengintegrasikan model kecerdasan buatan (AI/LLM) secara efisien ke dalam aplikasi nyata adalah nilai tambah yang sangat dicari. Sebagai pembuktian keahlian integrasi AI, saya mengembangkan dua aplikasi inovatif selama hackathon: LarisManis (asisten pemasaran digital UMKM) dan KerjaMerdeka (akselerator persiapan karir).

Tantangan utama dalam produk ini adalah konsistensi format luaran model (hallucinations dan format JSON yang sering rusak). Untuk mengatasinya, saya memanfaatkan teknik prompt engineering terstruktur dan mengimplementasikan validasi skema keluaran (Structured JSON output) langsung di level API Gateway menggunakan fitur Response Schema dari Gemini API.


Arsitektur Sistem & Alur Integrasi

Untuk memastikan keamanan tingkat tinggi (token-gated) dan efisiensi biaya komputasi, alur integrasi AI dirancang secara serverless dengan struktur berikut:

graph TD
    User[User / Client] -->|1. Input Interaktif| Web[Next.js Frontend]
    Web -->|2. Secure Serverless Route| API[Vercel Serverless Backend]
    API -->|3. Validasi Token| Auth[Supabase Auth]
    Auth -->|Token Valid| API
    API -->|4. Structured JSON & Few-shot Prompt| Gemini[Gemini API]
    Gemini -->|5. Structured Output| API
    API -->|6. Simpan Riwayat / CV| DB[(Supabase Database)]
    API -->|7. Kembalikan Respons| Web
    DB -->|8. Otomatisasi Segmen| MoEngage[MoEngage CRM]

Detail Implementasi Teknis & Fitur Utama

1. LarisManis — AI-Powered SME Assistant

LarisManis dirancang untuk membantu pelaku Usaha Mikro, Kecil, dan Menengah (UMKM) dalam merancang materi pemasaran secara instan.

  • Magic Content Generator: Menggunakan Gemini API untuk menghasilkan takarir media sosial, draf email promosi, dan ide konten visual berdasarkan kategori produk pengguna.
  • Campaign Planner: Memproses input profil bisnis UMKM dan merumuskan kalender rencana kampanye pemasaran 30 hari yang dipersonalisasi menggunakan teknik structured JSON generation dari model AI.

2. KerjaMerdeka — AI Career Accelerator

KerjaMerdeka bertujuan membantu pencari kerja lokal di Indonesia agar dapat bersaing di pasar kerja global.

  • Contextual Resume & Cover Letter Maker: Memproses riwayat pengalaman pengguna dan secara otomatis merumuskan resume/surat lamaran kerja yang disesuaikan (tailored) dengan kata kunci deskripsi lowongan kerja yang ditargetkan.
  • AI Interview Simulation: Memanfaatkan integrasi API LLM berbasis chat untuk mensimulasikan wawancara interaktif sesuai dengan posisi pekerjaan yang dituju, lengkap dengan umpan balik penilaian konstruktif di akhir sesi.

Orkestrasi Gemini API dengan Luaran JSON Terstruktur

Di sisi backend Next.js, masukan pengguna digabungkan dengan instruksi sistem (System Instructions). Untuk menghindari halusinasi format, kami mewajibkan Gemini API mengembalikan skema JSON yang kaku dengan memanfaatkan fitur Response Schema bawaan Google Gen AI SDK.

Berikut adalah contoh implementasi API route Next.js (TypeScript) yang memproses pembuatan rancangan rencana kampanye 30 hari (Campaign Planner) di LarisManis:

import { GoogleGenAI, Type } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

export async function POST(req: Request) {
  const { businessProfile } = await req.json();

  try {
    const response = await ai.models.generateContent({
      model: "gemini-2.5-flash",
      contents: `Buat rencana kampanye pemasaran 30 hari berdasarkan data bisnis berikut:\n${businessProfile}`,
      config: {
        systemInstruction: "Anda adalah pakar strategi pemasaran digital khusus UMKM Indonesia. Buat rencana taktis yang realistis, hemat biaya, dan terukur.",
        temperature: 0.2, // Nilai rendah untuk meningkatkan determinisme
        // Definisikan Response Schema yang kaku
        responseMimeType: "application/json",
        responseSchema: {
          type: Type.OBJECT,
          properties: {
            campaignName: { type: Type.STRING },
            targetAudience: { type: Type.STRING },
            monthlyBudgetEstimate: { type: Type.INTEGER },
            dailyTasks: {
              type: Type.ARRAY,
              items: {
                type: Type.OBJECT,
                properties: {
                  day: { type: Type.INTEGER },
                  channel: { type: Type.STRING },
                  actionItem: { type: Type.STRING },
                  kpi: { type: Type.STRING }
                },
                required: ["day", "channel", "actionItem", "kpi"]
              }
            }
          },
          required: ["campaignName", "targetAudience", "monthlyBudgetEstimate", "dailyTasks"]
        }
      }
    });

    const resultText = response.text;
    return new Response(resultText, {
      headers: { "Content-Type": "application/json" }
    });
  } catch (error) {
    console.error("AI Generation Error:", error);
    return new Response(JSON.stringify({ error: "Gagal memproses rekomendasi AI" }), { status: 500 });
  }
}

Menerapkan Response Schema di atas 100% menjamin bahwa output yang diterima dari Gemini API selalu berupa objek JSON yang valid dan siap dipetakan ke UI frontend, tanpa memerlukan parser-regex tambahan yang rentan rusak jika respons model berubah-ubah.


Solusi Praktis Tantangan Integrasi LLM

  • Prompts Engineering & Parameter Tuning: Menerapkan teknik few-shot prompting dan menyetel suhu (temperature) serta batas top-K/top-P model secara ketat untuk meminimalkan halusinasi AI dan menjamin format respons JSON yang konsisten.
  • Keamanan Kredensial API: Melindungi kunci API Gemini dengan tidak pernah memaparkannya di sisi klien. Semua permintaan ke model LLM dilewatkan melalui rute API Routes/Serverless Functions di Vercel/Next.js backend dengan validasi otorisasi sesi pengguna dari Supabase Auth.
  • Rate Limiting & Cost Management: Mengimplementasikan caching lokal pada database Supabase untuk permintaan konten yang identik guna menekan konsumsi kuota API dan menghemat biaya operasional platform hingga 35%.

Dampak & Hasil Pembelajaran

  • Skalabilitas Nyata: Platform LarisManis berhasil melayani 500+ pengguna aktif tanpa kendala downtime integrasi AI.
  • Validasi Keahlian: Membuktikan kompetensi mumpuni dalam siklus penuh (full life-cycle) pengembangan produk dari perancangan UI, penulisan backend tangguh, hingga orkestrasi model AI terkini.