dailytutorfor.you
Web Development

Membangun AI Gateway Multi-Provider dengan LiteLLM untuk Aplikasi Web (Panduan Lengkap 2026)

Tutorial lengkap Bahasa Indonesia untuk membangun AI Gateway production-ready menggunakan LiteLLM + FastAPI: mulai dari konsep, arsitektur, implementasi runnable, best practice, hingga kesalahan umum yang wajib dihindari.

8 min read

Membangun AI Gateway Multi-Provider dengan LiteLLM untuk Aplikasi Web (Panduan Lengkap 2026)

Level: Intermediate

Estimasi baca: 15 menit

Stack: Python, FastAPI, LiteLLM Proxy, Redis (opsional), Docker

1) Introduction — What & Why

Kalau kamu sedang bikin fitur AI di aplikasi web, biasanya masalah pertama bukan “model mana paling pintar”, tapi bagaimana mengelola banyak model dengan rapi.

Contoh nyata di lapangan:

  • Hari ini pakai OpenAI karena cepat.
  • Besok butuh Anthropic karena kualitas reasoning lebih bagus.
  • Minggu depan tim finance minta model yang lebih murah untuk endpoint tertentu.
  • Lalu muncul masalah rate limit, observability, dan tagihan membengkak.

Kalau setiap perubahan provider mengharuskan ubah banyak bagian kode aplikasi, itu tanda arsitekturmu belum scalable.

Di sinilah AI Gateway masuk. Dengan gateway, aplikasi kamu bicara ke satu endpoint internal, lalu gateway yang mengatur routing ke provider AI yang tepat. Salah satu tool open-source paling populer untuk ini di 2026 adalah LiteLLM (sedang trending di GitHub).

Di tutorial ini, kita akan bangun arsitektur praktis:

  • FastAPI app (backend web kamu)
  • LiteLLM Proxy (gateway model)
  • fallback, timeout, error handling
  • logging + best practice production

Tujuannya simpel: provider AI bisa diganti tanpa rombak aplikasi.

2) Prerequisites

Sebelum mulai, pastikan kamu punya:

  1. Python 3.11+
  2. Basic FastAPI dan REST API
  3. API key minimal satu provider (mis. OpenAI atau Anthropic)
  4. Docker & Docker Compose (opsional, tapi sangat disarankan)
  5. Pemahaman dasar environment variable

Install dependency lokal:

python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install --upgrade pip
pip install fastapi uvicorn httpx pydantic-settings python-dotenv

Untuk gateway:

pip install "litellm[proxy]"

3) Core Concepts (dengan analogi)

Bayangkan kamu punya restoran delivery.

  • Pelanggan: aplikasi web kamu
  • Dapur A: OpenAI
  • Dapur B: Anthropic
  • Dapur C: model lokal
  • Manajer dapur: LiteLLM Gateway

Pelanggan tidak perlu tahu dapur mana yang memasak. Cukup pesan ke manajer, lalu manajer pilih dapur terbaik berdasarkan aturan: harga, beban, atau kualitas.

Konsep inti yang perlu kamu pegang:

  1. Unified API Format Semua provider dibungkus format mirip OpenAI. Jadi kode klien tetap konsisten.

  2. Routing & Fallback Kalau model utama error/rate limit, request otomatis pindah ke model cadangan.

  3. Policy Layer Aturan seperti timeout, budget, key management, dan logging diletakkan di gateway, bukan menyebar di app.

  4. Observability Kamu bisa pantau usage, latency, dan error dari satu pintu.

Intinya, AI Gateway itu seperti adapter universal + traffic controller.

4) Architecture / Diagram

Arsitektur sederhana yang akan kita implementasikan:

+---------------------+          +--------------------------+
| Frontend (Web/App)  |  HTTPS   | FastAPI Backend          |
| React / Next.js     +--------->+ /api/chat                |
+---------------------+          | - validate input         |
                                 | - auth/rate limit app    |
                                 +------------+-------------+
                                              |
                                              | OpenAI-compatible API
                                              v
                                 +--------------------------+
                                 | LiteLLM Proxy Gateway    |
                                 | - model routing          |
                                 | - fallback               |
                                 | - cost control           |
                                 | - logs/metrics           |
                                 +-----+--------------+-----+
                                       |              |
                                       v              v
                                  OpenAI API     Anthropic API

Kenapa backend tetap dipertahankan (tidak frontend langsung ke gateway)?

  • Menjaga API key tetap aman
  • Bisa tambahkan business rule (quota user, role-based behavior)
  • Mudah audit dan tracing per user internal

5) Step-by-Step Implementation (Complete Runnable)

Step A — Siapkan LiteLLM config

Buat file litellm_config.yaml:

model_list:
  - model_name: primary-chat
    litellm_params:
      model: openai/gpt-4o-mini
      api_key: os.environ/OPENAI_API_KEY

  - model_name: fallback-chat
    litellm_params:
      model: anthropic/claude-sonnet-4-20250514
      api_key: os.environ/ANTHROPIC_API_KEY

router_settings:
  routing_strategy: simple-shuffle
  num_retries: 2
  timeout: 20

general_settings:
  master_key: os.environ/LITELLM_MASTER_KEY

Catatan: nama model primary-chat dan fallback-chat adalah alias internal.

Step B — Jalankan LiteLLM Proxy

export OPENAI_API_KEY="sk-..."
export ANTHROPIC_API_KEY="sk-ant-..."
export LITELLM_MASTER_KEY="super-secret-master-key"

litellm --config litellm_config.yaml --port 4000

Kalau sukses, gateway aktif di http://localhost:4000.

Step C — Buat FastAPI app

Buat file app.py:

from __future__ import annotations

import os
from typing import Any

import httpx
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel, Field

app = FastAPI(title="AI Gateway Demo", version="1.0.0")

LITELLM_BASE_URL = os.getenv("LITELLM_BASE_URL", "http://localhost:4000")
LITELLM_API_KEY = os.getenv("LITELLM_API_KEY", "super-secret-master-key")
REQUEST_TIMEOUT_SECONDS = float(os.getenv("REQUEST_TIMEOUT_SECONDS", "25"))


class ChatRequest(BaseModel):
    message: str = Field(min_length=1, max_length=4000)
    user_id: str = Field(min_length=1, max_length=128)


class ChatResponse(BaseModel):
    reply: str
    model_used: str


@app.get("/health")
async def health() -> dict[str, str]:
    return {"status": "ok"}


@app.post("/api/chat", response_model=ChatResponse)
async def chat(req: ChatRequest) -> ChatResponse:
    payload: dict[str, Any] = {
        "model": "primary-chat",
        "messages": [
            {
                "role": "system",
                "content": "Kamu asisten teknis yang jawab singkat, jelas, dan akurat.",
            },
            {"role": "user", "content": req.message},
        ],
        "temperature": 0.3,
        "metadata": {
            "app_user_id": req.user_id,
            "feature": "web_chat",
        },
    }

    headers = {
        "Authorization": f"Bearer {LITELLM_API_KEY}",
        "Content-Type": "application/json",
    }

    try:
        async with httpx.AsyncClient(timeout=REQUEST_TIMEOUT_SECONDS) as client:
            resp = await client.post(
                f"{LITELLM_BASE_URL}/v1/chat/completions",
                headers=headers,
                json=payload,
            )

        # Tangani error response dari gateway
        if resp.status_code >= 400:
            detail = resp.text[:500]
            raise HTTPException(
                status_code=502,
                detail=f"Gateway error ({resp.status_code}): {detail}",
            )

        data = resp.json()
        choices = data.get("choices", [])
        if not choices:
            raise HTTPException(status_code=502, detail="Empty response from gateway")

        message = choices[0].get("message", {})
        content = message.get("content", "")
        model_used = data.get("model", "unknown")

        return ChatResponse(reply=content, model_used=model_used)

    except httpx.TimeoutException:
        raise HTTPException(status_code=504, detail="AI request timed out")
    except httpx.HTTPError as exc:
        raise HTTPException(status_code=502, detail=f"Network error to gateway: {exc}")
    except ValueError:
        raise HTTPException(status_code=502, detail="Invalid JSON from gateway")

Jalankan backend:

export LITELLM_BASE_URL="http://localhost:4000"
export LITELLM_API_KEY="super-secret-master-key"
uvicorn app:app --reload --port 8000

Test endpoint:

curl -X POST "http://localhost:8000/api/chat"   -H "Content-Type: application/json"   -d '{
    "message": "Jelaskan apa itu AI Gateway dalam 2 kalimat.",
    "user_id": "user-123"
  }'

Step D — Tambah fallback manual di level aplikasi (opsional)

Walau gateway sudah punya retry, kadang kamu mau fallback logika tertentu per fitur. Contoh helper:

async def request_with_fallback(client: httpx.AsyncClient, headers: dict[str, str], user_text: str) -> dict:
    models = ["primary-chat", "fallback-chat"]

    for model_name in models:
        payload = {
            "model": model_name,
            "messages": [{"role": "user", "content": user_text}],
        }
        try:
            resp = await client.post(
                "http://localhost:4000/v1/chat/completions",
                headers=headers,
                json=payload,
                timeout=20,
            )
            if resp.status_code < 400:
                return resp.json()
        except httpx.HTTPError:
            # Lanjut ke model berikutnya
            continue

    raise RuntimeError("All models failed")

Ini berguna untuk skenario kritikal, misalnya chatbot support yang harus tetap merespons.

Step E — Docker Compose (siap jalan)

docker-compose.yml minimal:

version: "3.9"

services:
  litellm:
    image: ghcr.io/berriai/litellm:main-stable
    command: ["--config", "/app/config.yaml", "--port", "4000"]
    ports:
      - "4000:4000"
    environment:
      OPENAI_API_KEY: ${OPENAI_API_KEY}
      ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY}
      LITELLM_MASTER_KEY: ${LITELLM_MASTER_KEY}
    volumes:
      - ./litellm_config.yaml:/app/config.yaml:ro

  backend:
    build: .
    ports:
      - "8000:8000"
    environment:
      LITELLM_BASE_URL: http://litellm:4000
      LITELLM_API_KEY: ${LITELLM_MASTER_KEY}
    depends_on:
      - litellm

Dengan ini, environment dev/staging lebih konsisten.

6) Best Practices (industry tips)

  1. Pisahkan concern app vs gateway

    • App: auth user, business logic
    • Gateway: model routing, policy AI

  2. Set timeout ketat Jangan biarkan request AI menggantung lama. Idealnya 10–30 detik sesuai use case.

  3. Gunakan model-tiering

    • model murah untuk draft/summarization
    • model premium untuk reasoning berat

  4. Tag metadata per request Simpan user_id, feature, team agar monitoring biaya lebih transparan.

  5. Implement graceful degradation Kalau semua model gagal, return respons fallback yang informatif, bukan 500 mentah.

  6. Jangan hardcode API key Selalu pakai secret manager atau environment variable.

  7. Audit prompt & output Untuk produk production, tambah safety filter (PII redaction, prompt injection guardrail).

7) Common Mistakes (yang sering kejadian)

Mistake 1 — Frontend langsung hit provider

Akibat: API key bocor, sulit audit, sulit enforce policy.

Solusi: lewat backend + gateway.

Mistake 2 — Tidak ada fallback

Saat provider outage, fitur AI mati total.

Solusi: siapkan minimal 1 model cadangan lintas vendor.

Mistake 3 — Tidak monitor cost per fitur

Tagihan membesar tapi tim tidak tahu endpoint mana penyebabnya.

Solusi: metadata + dashboard cost tracking.

Mistake 4 — Retry membabi buta

Retry tanpa batas memperparah latency dan biaya.

Solusi: limited retry + exponential backoff + circuit breaker.

Mistake 5 — Parsing response terlalu optimistis

Asumsi choices[0].message.content selalu ada.

Solusi: validasi struktur JSON sebelum dipakai.

8) Advanced Tips (untuk yang ingin lebih dalam)

  1. Canary routing model baru Kirim 5–10% traffic ke model baru, bandingkan quality + cost + latency.

  2. Dynamic model selection Pilih model berdasarkan panjang prompt, SLA, atau paket user (free/pro).

  3. Response caching Untuk pertanyaan berulang (mis. FAQ), caching bisa menekan biaya drastis.

  4. Observability terintegrasi Integrasikan log ke platform observability (mis. Langfuse/MLflow/Helicone) untuk trace end-to-end.

  5. A/B testing prompt template Jangan cuma ganti model; kadang prompt engineering yang benar bisa potong biaya tanpa turunkan kualitas.

  6. Multi-region failover Jika user global, siapkan region-aware routing untuk latency lebih rendah.

9) Summary & Next Steps

Kita sudah membahas cara membangun AI Gateway modern dengan LiteLLM:

  • Kenapa AI Gateway penting untuk aplikasi web production
  • Konsep inti routing, fallback, unified interface
  • Implementasi lengkap dengan FastAPI + LiteLLM
  • Best practice agar aman, hemat, dan scalable
  • Kesalahan umum dan strategi advanced

Langkah selanjutnya yang saya sarankan:

  1. Deploy arsitektur ini di staging.
  2. Tambahkan rate limit per user di endpoint /api/chat.
  3. Buat dashboard internal untuk metrik: latency p95, error rate, biaya/fitur.
  4. Uji outage simulation (matikan provider utama, pastikan fallback jalan).

Kalau tahap ini beres, kamu sudah punya fondasi AI platform yang jauh lebih siap produksi dibanding integrasi provider langsung.

10) References

  1. LiteLLM Docs (Getting Started): https://docs.litellm.ai/docs/
  2. LiteLLM Proxy Quick Start: https://docs.litellm.ai/docs/proxy/quick_start
  3. LiteLLM GitHub Repo: https://github.com/BerriAI/litellm
  4. GitHub Trending: https://github.com/trending
  5. X Explore: https://x.com/explore
  6. Medium Software Engineering Tag: https://medium.com/tag/software-engineering

Kalau kamu mau, versi lanjutan berikutnya bisa kita bahas: “Implementasi budget enforcement per tim + chargeback internal dengan LiteLLM” supaya kontrol biaya AI makin presisi.