AI & Full-Stack Integration

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

A deep dive into developing KerjaMerdeka and LarisManis, showcasing how to design, secure, and integrate Large Language Models (LLMs) into production-ready web apps in Next.js.

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

Executive Summary

In modern technology, integrating artificial intelligence (AI/LLM) engines into digital products is a highly sought-after engineering skill. As a showcase of full-lifecycle AI integration, I developed two web applications during hackathons: LarisManis (an AI-powered assistant for digital marketing) and KerjaMerdeka (an AI career optimizer).

Both projects demonstrate my ability to design high-throughput, secure, and cost-efficient application architectures integrated with the Gemini API.

System Architecture & Integration Flow

To ensure enterprise-grade security and cost efficiency, the AI applications use a modular, serverless token-gated integration flow:

graph TD
    User[User / Client] -->|1. Interactive Input| Web[Next.js Frontend]
    Web -->|2. Secure Serverless Route| API[Vercel Serverless Backend]
    API -->|3. Validate Token| Auth[Supabase Auth]
    Auth -->|Token Authorized| API
    API -->|4. Structured JSON & Few-shot Prompt| Gemini[Gemini API]
    Gemini -->|5. Structured Output| API
    API -->|6. Save History / CVs| DB[(Supabase Database)]
    API -->|7. Return Response| Web
    DB -->|8. Segment Ingestion| MoEngage[MoEngage CRM]

Technical Implementation Details & Features

1. LarisManis — AI-Powered SME Assistant

LarisManis helps Small and Medium Enterprises (SMEs) draft promotional marketing content instantly.

  • Magic Content Generator: Integrates Gemini API to produce tailored social captions, promotional emails, and blog briefs based on product entries.
  • Campaign Planner: Processes SME business profiles and generates structured 30-day marketing calendars utilizing Gemini’s structured JSON schema output.
  • Tech Stack: Next.js for SSR frontend speed, Supabase for session authorization and content records storage, and Tailwind CSS for responsive bento UI layouts.

2. KerjaMerdeka — AI Career Accelerator

KerjaMerdeka helps job seekers build high-quality application profiles.

  • Contextual Resume & Cover Letter Maker: Processes user histories and matches them with job descriptions, using LLMs to write tailored cover letters containing relevant keywords.
  • AI Interview Simulation: Utilizes a conversational chat API setup to simulate mock interviews based on target positions, presenting constructive scoring feedback after completion.

Mitigating LLM Integration Challenges

  • Prompt Engineering & Schema Control: Implemented strict few-shot prompting and set low temperatures with strict top-K/top-P limits to prevent model hallucinations and ensure consistent JSON layouts.
  • API Key Governance: Secured the Gemini API key entirely on the server-side Vercel runtime. All LLM queries are routed through backend API functions authorized by Supabase user tokens, shielding the keys from the client browser.
  • Caching & Cost Optimization: Programmed local database caching for repetitive queries, minimizing token consumption and reducing overall platform operational costs.

Project Outcomes & Lessons Learned

  • Scalable Execution: LarisManis successfully served 500+ active users with zero API failures.
  • Full-Lifecycle Experience: Demonstrated core proficiency across UI design, robust backend database setups, and advanced LLM integrations.