Siri Vibe Coding #3: Setup FreeLLMAPI — Gabungkan 16+ Provider AI Percuma Dalam Satu Endpoint

Ini artikel KETIGA dalam siri Vibe Coding saya. Kalau belum baca Artikel 1 (VSCode + Cline + MCP + MSSQL) dan Artikel 2 (Local AI Ollama), sila baca dulu. Dalam artikel ni, kita tambah SATU lagi "otak" untuk Cline — kali ni bukan local, tapi gabungan pelbagai AI cloud percuma dalam satu tempat.

😄 Nota jenaka: Macam artikel-artikel lepas, saya selit jenaka sikit-sikit. Kalau tak kena selera, skip terus ke arahan teknikal. Yang penting duit awak selamat (percuma je pun), bukan lawak saya kena.

📑 Kandungan (Table of Content)

Kenapa Perlu FreeLLMAPI?

Dalam Artikel 2, kita setup local AI (Ollama) — percuma, tapi terhad oleh spec laptop awak. FreeLLMAPI pula lain cerita: ia tak jalankan AI di laptop awak, sebaliknya ia jadi "penyambung" kepada 16 lebih penyedia AI cloud (Groq, Google Gemini, Cerebras, Mistral, dan lain-lain) yang semuanya bagi free-tier percuma. Awak dapat satu endpoint sahaja, tapi di belakang tabir ia automatik pilih provider mana yang masih ada kuota percuma untuk awak.

😄 Kalau Ollama tu "adik bongsu" (kecil, tapi setia), FreeLLMAPI ni pula macam "ejen pekerjaan" — dia sendiri tak buat kerja, tapi dia kenal 16 orang pakar dan hantar kerja kepada sesiapa yang free waktu tu.

Peringatan penting: Ini untuk eksperimen/pembelajaran peribadi sahaja — bukan untuk kerja komersial/produksi berskala besar. Jangan hantar kod atau data sulit/proprietary melalui sini (rujuk Artikel 1, Bahagian 10 untuk bila patut guna local AI vs cloud).

BAHAGIAN 1: Prasyarat — Install Docker Desktop

FreeLLMAPI paling senang dijalankan guna Docker — bayangkan Docker macam "kotak terkawal" yang bungkus aplikasi supaya senang dipasang tanpa kacau setting laptop awak yang lain.

Pergi ke https://www.docker.com/products/docker-desktop
Download Docker Desktop for Windows
Install macam biasa (Next → Next → Finish) — mungkin perlu restart laptop selepas install
Buka Docker Desktop dari Start Menu, tunggu sampai status tunjuk "Engine running" (biasanya ada ikon hijau)

📸 [AMBIL SCREENSHOT DI SINI] — Docker Desktop dengan status "Engine running"

Test dalam PowerShell:
```
docker --version
```
Hasil sebenar yang patut keluar (contoh):
```
Docker version 27.x.x, build xxxxx
```

💡 Tips & Trick: Kalau Docker Desktop minta awak "enable WSL2" semasa install, benarkan sahaja — ini komponen dalaman Windows yang Docker perlukan, awak tak perlu faham mendalam pasal WSL2 untuk teruskan.

🎮 Cheat Code: 2 command Docker yang cukup untuk survive artikel ni — docker compose up -d (start), docker compose down (stop). Hafal dua ni dulu.

🆘 Jika Tersekat (Bahagian 1)

Saya install Docker Desktop di Windows 11 tapi [nyatakan masalah: 
"Engine tak nak start", "minta WSL2 tapi saya tak faham", dll]. 
Ni yang saya nampak: [terangkan/paste]. Tolong bantu step by step, 
saya baru pertama kali guna Docker.

BAHAGIAN 2: Install FreeLLMAPI (Guna Port 11500)

Kita guna port 11500 (bukan default 3001) supaya tak bertembung dengan Ollama (yang guna port 11434 dari Artikel 2) — walaupun sebenarnya dua port ni berbeza, elok kita tetapkan port yang konsisten dan senang diingat sepanjang siri artikel ni.

2.1 Muat Turun (Clone) Repo FreeLLMAPI

Pastikan Git dah terpasang (kita install dalam Artikel 1) — check: git --version
Dalam PowerShell, pergi ke folder pilihan awak (contoh Desktop) dan taip:
```
git clone https://github.com/tashfeenahmed/freellmapi.gitcd freellmapi
```

2.2 Cipta Fail `.env` (Konfigurasi Rahsia)

FreeLLMAPI perlukan satu "kunci enkripsi" untuk simpan API key awak dengan selamat, dan setting port. Dalam PowerShell (masih dalam folder freellmapi):

$key = -join ((1..32) | ForEach-Object { "{0:x2}" -f (Get-Random -Minimum 0 -Maximum 256) })
"ENCRYPTION_KEY=$key`nPORT=11500" | Out-File -Encoding utf8 .env

Komen penerangan:

Baris pertama: cipta 32-byte kunci rawak (hex), guna PowerShell asli 
    (tak perlu install openssl tambahan)
Baris kedua: tulis dua baris ke fail .env — ENCRYPTION_KEY dan PORT=11500
    (PORT=11500 inilah yang tukar dari default 3001 kepada 11500)

Verify fail .env awak dicipta dengan betul:

Get-Content .env

Hasil sebenar yang patut keluar (contoh, nombor selepas = akan LAIN untuk setiap orang — itu normal, sebab ia rawak):

ENCRYPTION_KEY=a3f8c9e21b4d6f087a3c5e9d1b2f4a6c8e0d2f4b6a8c0e2d4f6a8b0c2e4d6f8
PORT=11500

⚠️ PENTING: ENCRYPTION_KEY ni jangan kongsi dengan sesiapa dan jangan upload ke GitHub/blog awak — ini "kunci induk" untuk semua API key yang awak simpan nanti. Fail .env automatik diabaikan oleh Git (tak akan ter-commit) — tapi tetap berhati-hati.

2.3 Jalankan FreeLLMAPI

docker compose up -d

Hasil sebenar yang patut keluar (contoh):

[+] Running 2/2
 ✔ Network freellmapi_default  Created
 ✔ Container freellmapi        Started

📸 [AMBIL SCREENSHOT DI SINI] — output terminal selepas docker compose up -d berjaya

2.4 Buka Dashboard

Buka browser, pergi ke http://localhost:11500
Awak akan nampak dashboard FreeLLMAPI — masih kosong (belum ada provider key), tak apa, kita isi di Bahagian 3

📸 [AMBIL SCREENSHOT DI SINI] — dashboard FreeLLMAPI kosong di localhost:11500

😄 Kalau dashboard tu muncul, tahniah — awak baru "bina" pusat kawalan AI peribadi. Rasa macam jadi Tony Stark, cuma takde Iron Man suit... buat masa ni.

🆘 Jika Tersekat (Bahagian 2)

Saya cuba jalankan "docker compose up -d" untuk FreeLLMAPI tapi 
[nyatakan masalah: error, container tak start, localhost:11500 
tak boleh diakses]. Ni error sebenar: [paste]. Tolong diagnosa dan 
bagi fix step by step.

BAHAGIAN 3: Urus Akaun Provider — Contoh Lengkap dengan Groq

Sekarang bahagian paling penting — masukkan API key provider sebenar. Saya tunjuk satu contoh lengkap guna Groq (salah satu provider paling senang dan generous free-tier-nya).

3.1 Daftar Akaun Groq

Pergi ke https://console.groq.com
Klik Sign Up (boleh guna akaun Google terus, lebih pantas)
Sahkan email kalau diminta
Lepas login, awak akan nampak Groq Console (dashboard developer)

📸 [AMBIL SCREENSHOT DI SINI] — halaman Groq Console selepas login

3.2 Cipta API Key di Groq

Dalam sidebar Groq Console, cari dan klik API Keys
Klik butang Create API Key
Bagi nama (contoh: freellmapi-key), klik Submit
Copy API key yang keluar SEGERA (biasanya bermula gsk_...) — Groq hanya tunjuk key ni SEKALI SAHAJA, tak boleh lihat balik lepas ni

📸 [AMBIL SCREENSHOT DI SINI] — dialog API key baru dicipta dengan butang copy

⚠️ PENTING: Kalau terlupa copy dan dialog tu tertutup, jangan panik — cukup padam key lama, cipta key baru. Tapi elok terus copy-paste ke tempat selamat (contoh Notepad sementara) sebelum tutup dialog tu.

3.3 Masukkan API Key ke FreeLLMAPI

Balik ke dashboard FreeLLMAPI (http://localhost:11500)
Cari dan klik halaman Keys
Cari bahagian untuk Groq dalam senarai provider
Paste API key yang awak copy tadi (gsk_...) ke ruangan yang berkenaan
Bagi label (contoh: groq-utama)
Klik Save

📸 [AMBIL SCREENSHOT DI SINI] — halaman Keys FreeLLMAPI dengan Groq key dimasukkan, status aktif/hijau

3.4 Dapatkan Unified Key FreeLLMAPI

Di bahagian atas halaman Keys (biasanya di header), FreeLLMAPI akan bagi awak SATU key yang bermula freellmapi-... — ini key yang awak akan guna untuk semua sambungan seterusnya (Open WebUI, Msty, Cline) — bukan key Groq terus.

Copy dan simpan key ni di tempat selamat (contoh dalam fail .env projek test-vibe awak dari Artikel 1).

💡 Tips & Trick: Boleh ulang proses Bahagian 3.1-3.3 ni untuk provider lain (Google AI Studio untuk Gemini, Mistral, OpenRouter, dll) — setiap provider ada laman daftar sendiri, tapi konsep sama: daftar → cipta API key → paste dalam FreeLLMAPI Keys page. Makin banyak provider awak masukkan, makin "kaya" fallback chain awak (kalau satu provider limit, automatik tukar ke provider lain).

🎮 Cheat Code: Formula 3 langkah untuk mana-mana provider baharu — Daftar → Cipta Key → Paste dalam FreeLLMAPI. Hafal 3 langkah ni, awak boleh tambah provider apa sahaja tanpa perlu baca dokumentasi panjang setiap kali.

🆘 Jika Tersekat (Bahagian 3)

Saya dah daftar akaun Groq dan cipta API key, tapi bila paste dalam 
dashboard FreeLLMAPI [nyatakan masalah: "key tak accept", "status 
tak jadi hijau/aktif"]. Tolong bantu diagnosa punca masalah.

BAHAGIAN 4: Guna FreeLLMAPI Secara Standalone

Sebelum sambung ke tool lain, jom test dulu FreeLLMAPI berfungsi dengan sendiri, guna curl (command test API):

curl http://localhost:11500/v1/chat/completions `
  -H "Authorization: Bearer freellmapi-your-unified-key" `
  -H "Content-Type: application/json" `
  -d '{\"model\": \"auto\", \"messages\": [{\"role\": \"user\", \"content\": \"Hello, kenalkan diri awak\"}]}'

Komen penerangan:

Tukar "freellmapi-your-unified-key" dengan unified key SEBENAR dari Bahagian 3.4
"model": "auto" bermaksud biar FreeLLMAPI PILIH provider terbaik/available 
    secara automatik — awak tak perlu tentukan model spesifik

📋 Expected Result: Respons JSON dengan jawapan AI (contoh: "Hello! Saya adalah AI assistant..."), dan field "model" akan tunjuk nama sebenar model yang FreeLLMAPI pilih untuk jawab (contoh "llama-3.3-70b-versatile").

😄 Kalau ni jalan, awak dah rasmi ada "AI router" sendiri — walaupun cuma satu provider (Groq) buat masa ni, prinsipnya dah confirm berfungsi. Lepas ni tambah provider lain je, sistem dah "sedia".

🆘 Jika Tersekat (Bahagian 4)

Saya cuba test FreeLLMAPI guna curl tapi dapat error [paste error]. 
Unified key saya bermula dengan "freellmapi-...". Tolong bantu diagnosa.

BAHAGIAN 5: Sambungkan ke Open WebUI

Ingat Open WebUI yang kita setup dalam Artikel 2 (untuk chat dengan Ollama)? Kita boleh tambah FreeLLMAPI sebagai sambungan tambahan — jadi satu Open WebUI, boleh chat dengan local AI (Ollama) DAN cloud AI (FreeLLMAPI) serentak.

Buka Open WebUI (http://localhost:8080)
Klik ikon profile/avatar di penjuru → Settings
Cari bahagian Connections (atau Admin Settings → Connections, ikut versi Open WebUI awak)
Klik Add Connection (atau +)
Isi:

Field	Nilai
API Base URL	`http://host.docker.internal:11500/v1` (kalau Open WebUI awak jalan dalam Docker) ATAU `http://localhost:11500/v1` (kalau Open WebUI jalan terus via `pip`)
API Key	`freellmapi-your-unified-key` (dari Bahagian 3.4)

Save

📸 [AMBIL SCREENSHOT DI SINI] — halaman Connections Open WebUI dengan FreeLLMAPI ditambah

Dalam dropdown model chat Open WebUI, awak sekarang patut nampak model tambahan dari FreeLLMAPI (selain model Ollama sedia ada)

💡 Tips & Trick: Kalau Open WebUI awak dipasang guna pip install open-webui (cara yang kita guna dalam Artikel 2), guna http://localhost:11500/v1. Kalau guna Docker, guna http://host.docker.internal:11500/v1 — ini sebab container Docker tak faham "localhost" cara sama macam aplikasi biasa.

🆘 Jika Tersekat (Bahagian 5)

Saya cuba tambah FreeLLMAPI sebagai Connection dalam Open WebUI tapi 
[nyatakan masalah]. Open WebUI saya dipasang guna [pip/Docker]. 
Tolong bantu diagnosa.

BAHAGIAN 6: Sambungkan ke Msty

Kalau awak guna Msty (dari perbandingan tool di Artikel 2), cara sambung hampir sama:

Buka Msty
Pergi ke Settings (biasanya ikon gear)
Cari bahagian Model Providers atau Remote Model Providers
Pilih Add New → pilih jenis "OpenAI Compatible" atau serupa
Isi:

Field	Nilai
Endpoint/Base URL	`http://localhost:11500/v1`
API Key	`freellmapi-your-unified-key`

Save, dan model FreeLLMAPI patut muncul dalam senarai model Msty untuk dipilih semasa chat

🆘 Jika Tersekat (Bahagian 6)

Saya cuba tambah FreeLLMAPI dalam Msty sebagai Model Provider tapi 
[nyatakan masalah]. Tolong bantu diagnosa — versi Msty saya: [nyatakan].

BAHAGIAN 7: Sambungkan ke VSCode + Cline

Ini bahagian paling penting untuk siri Vibe Coding kita — sambung FreeLLMAPI terus ke Cline (macam profile Ollama yang kita buat dalam Artikel 1, tapi sekarang profile baharu untuk FreeLLMAPI).

Dalam VSCode, buka panel Cline → Settings ⚙️
Cipta profile baharu (cari butang + berhampiran nama profile)
Isi:

Field	Nilai
API Provider	`OpenAI Compatible`
Base URL	`http://localhost:11500/v1`
API Key	`freellmapi-your-unified-key`
Model ID	`auto` (biar router pilih), atau nama model spesifik contoh `llama-3.3-70b-versatile`

Save

📸 [AMBIL SCREENSHOT DI SINI] — panel API Configuration Cline dengan setting FreeLLMAPI terisi

Sekarang dalam panel Cline, awak boleh tukar antara DUA profile — Ollama (local, dari Artikel 2) dan FreeLLMAPI (cloud, artikel ni) — pilih ikut keperluan setiap kerja.

🎮 Cheat Code: Model ID = "auto" untuk FreeLLMAPI bermaksud "biar sistem pilih terbaik". Kalau nak konsisten guna satu model sahaja (elak surprise), tukar ke nama model spesifik — boleh lihat senarai penuh dalam dashboard FreeLLMAPI (http://localhost:11500, halaman Models).

🆘 Jika Tersekat (Bahagian 7)

Saya cuba sambungkan Cline ke FreeLLMAPI (Base URL http://localhost:11500/v1) 
tapi [nyatakan masalah: tak respond, error authentication, dll]. 
Ni error sebenar: [paste]. Tolong bantu diagnosa.

BAHAGIAN 8: Ujian

Ujian 1: Test Standalone (Ulang Bahagian 4)

Kalau dah buat, ini confirm asas berfungsi.

Ujian 2: Test dalam Cline

Tukar ke profile FreeLLMAPI dalam Cline, taip:

Hello, awak model AI apa sekarang, dan apa provider di belakang awak?

📋 Expected Result: AI balas dan (kalau ditanya secara jujur) mungkin sebut nama model sebenar (contoh Llama, Gemini, dll) — ini bergantung model mana FreeLLMAPI pilih waktu tu.

Ujian 3: "WOW Test" Guna FreeLLMAPI

Ingat Ujian 9 dalam Artikel 1 (Network Admin Dashboard / Payment System)? Cuba ulang ujian tu sekarang dengan profile FreeLLMAPI — bandingkan hasil dengan local Ollama dari Artikel 2.

📋 Expected Result: Hasil patut lebih lengkap/cantik berbanding local AI kecil, sebab FreeLLMAPI boleh akses model yang jauh lebih besar (contoh Llama 3.3 70B) berbanding model 7-14B yang laptop awak mampu jalankan sendiri.

😄 Ini bukti konsep "ejen pekerjaan" tadi — FreeLLMAPI hantar kerja awak kepada "pakar" yang jauh lebih power dari yang laptop awak sendiri mampu simpan.

🆘 Jika Tersekat (Bahagian 8)

Saya jalankan ujian [nombor] tapi hasil [nyatakan masalah]. 
Tolong bantu diagnosa dan bandingkan dengan hasil yang patut saya dapat.

BAHAGIAN 9: Bacaan Lanjut

Repo Rasmi FreeLLMAPI — https://github.com/tashfeenahmed/freellmapi — dokumentasi penuh, senarai lengkap 16+ provider yang disokong
Docker Desktop — Dokumentasi Rasmi — https://docs.docker.com/desktop/ — untuk faham Docker lebih mendalam
Groq Console — https://console.groq.com — provider yang kita guna sebagai contoh
Rujuk juga Artikel 1 dan Artikel 2 siri ni untuk asas VSCode+Cline dan local AI

Penutup

Tahniah — sekarang awak ada TIGA cabang AI untuk Cline: local (Ollama, Artikel 2), cloud percuma gabungan (FreeLLMAPI, artikel ni), dan boleh tambah cloud berbayar bila-bila (rujuk Artikel 1, Bahagian 10). Setiap satu ada tempat dia — pilih ikut kerja, bukan "satu untuk semua".

😄 Macam ada 3 kenderaan — basikal (local AI, percuma tapi perlahan), teksi kongsi (FreeLLMAPI, percuma tapi kongsi dengan orang lain punya kuota), dan Grab premium (AI berbayar, laju tapi berbayar). Pandai-pandai pilih ikut destinasi dan bajet!

Nantikan Artikel 4 — setup Server GPU Berasingan untuk mereka yang nak "naik taraf" local AI ke tahap lebih power!

Artikel ini sebahagian dari siri "Vibe Coding". Semua arahan telah diuji dan disahkan berfungsi mengikut dokumentasi rasmi FreeLLMAPI (repo tashfeenahmed/freellmapi).

Developer Mode