Keluarga Gemini Google adalah lini model hemat biaya untuk beban kerja bervolume tinggi, tetapi biaya token tetap bisa naik cepat saat aplikasi publik gratis, proyek sampingan, atau demo hackathon mulai dipakai banyak pengguna. Puter.js menawarkan pola berbeda: Anda dapat memanggil model Gemini dan Gemma dari peramban tanpa kunci API Google, tanpa proyek Google Cloud, dan tanpa backend. Penggunaan dibebankan ke pengguna akhir melalui akun Puter mereka, bukan ke akun developer Anda.
TL;DR
- Puter.js memberi developer akses ke katalog Gemini dan Gemma tanpa kunci API Google, proyek Google Cloud, atau server.
- Model Gemini yang didukung mencakup 2.5 Pro, 2.5 Flash, 2.5 Flash Lite, 2.0 Flash, 2.0 Flash Lite, 3 Flash Preview, plus pratinjau lama.
- Model Gemma yang didukung mencakup Gemma 2, 3, 4 dalam berbagai ukuran.
- Integrasi minimum: satu tag
<script>dan satu pemanggilanputer.ai.chat(). - Streaming, input gambar, percakapan multi-giliran, dan parameter seperti
temperaturedapat dipakai langsung di peramban. - Pengguna akhir menanggung pemakaian melalui akun Puter; Anda tidak perlu menyimpan kunci API.
- Gunakan Apidog untuk membandingkan alur Puter dengan API Gemini resmi saat merencanakan migrasi.
Cara kerja “gratis tanpa batas” di Puter.js
Puter.js membalik model penagihan LLM. Biasanya, Anda membuat project Google Cloud atau Google AI Studio, menyimpan API key, lalu menanggung setiap biaya token. Dengan Puter, pengguna akhir masuk ke akun Puter mereka, dan panggilan model dikenakan ke saldo akun pengguna tersebut.
Dampaknya untuk developer:
- Tidak perlu Google Cloud project.
- Tidak perlu menyimpan API key di frontend atau backend.
- Tidak perlu menangani rotasi key, kuota, atau billing Google.
- Skala penggunaan mengikuti jumlah pengguna yang masuk ke Puter.
Batasan utamanya: Puter.js berorientasi peramban. Untuk cron job, batch processing, webhook, atau proses backend tanpa sesi pengguna, gunakan API Gemini resmi.
Langkah 1: Pasang Puter.js
Untuk aplikasi statis atau prototipe cepat, cukup tambahkan CDN berikut:
<script src="https://js.puter.com/v2/"></script>
Contoh file HTML minimum:
<!DOCTYPE html>
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.print("Puter.js siap digunakan");
</script>
</body>
</html>
Jika aplikasi Anda memakai bundler:
npm install @heyputer/puter.js
Lalu impor di JavaScript:
import { puter } from '@heyputer/puter.js';
Langkah 2: Pilih model Gemini atau Gemma
Gunakan model sesuai kebutuhan aplikasi, bukan selalu model terbesar.
| ID Model | Kapan digunakan |
|---|---|
google/gemini-2.5-pro |
Penalaran lebih dalam, analisis kompleks, dan prompt sulit |
google/gemini-2.5-flash |
Default untuk sebagian besar aplikasi chat, QA, dan konten |
google/gemini-2.5-flash-lite |
Klasifikasi, tagging, dan tugas volume tinggi yang sederhana |
google/gemini-2.0-flash |
Baseline stabil dengan perilaku yang lebih mudah diprediksi |
google/gemini-3-flash-preview |
Eksperimen dengan varian preview terbaru |
google/gemma-3-27b-it |
Model Gemma instruction-tuned untuk baseline open-weight |
google/gemma-4-31b-it |
Varian Gemma besar untuk kualitas output yang lebih tinggi |
Rekomendasi praktis:
- Mulai dari
google/gemini-2.5-flash. - Naik ke
google/gemini-2.5-prohanya untuk tugas penalaran sulit. - Gunakan
google/gemini-2.5-flash-liteuntuk klasifikasi atau tagging skala besar.
Langkah 3: Buat panggilan Gemini pertama
Contoh paling sederhana:
<!DOCTYPE html>
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
"Explain machine learning in three sentences",
{ model: "google/gemini-2.5-flash" }
).then(response => {
puter.print(response);
});
</script>
</body>
</html>
Jalankan file tersebut di peramban. Puter akan menangani proses autentikasi pengguna dan pemanggilan model. Anda tidak perlu menaruh API key di kode.
Langkah 4: Tampilkan respons ke elemen UI
Untuk aplikasi nyata, jangan hanya memakai puter.print(). Render respons ke elemen HTML.
<div id="output"></div>
<script src="https://js.puter.com/v2/"></script>
<script>
const output = document.getElementById("output");
async function askGemini() {
const response = await puter.ai.chat(
"Buat ringkasan singkat tentang REST API.",
{ model: "google/gemini-2.5-flash" }
);
output.textContent = response;
}
askGemini();
</script>
Pola ini cocok untuk:
- chatbot sederhana,
- generator konten,
- fitur ringkasan,
- alat QA dokumen pendek,
- demo statis tanpa backend.
Langkah 5: Streaming respons
Untuk UI chat atau jawaban panjang, gunakan streaming agar pengguna melihat output muncul bertahap.
const outputDiv = document.getElementById("output");
const response = await puter.ai.chat(
"Explain photosynthesis in detail",
{
model: "google/gemini-2.5-flash",
stream: true,
}
);
for await (const part of response) {
if (part?.text) {
outputDiv.innerHTML += part.text;
}
}
Implementasi UI sederhana:
<button id="ask">Tanya Gemini</button>
<div id="output"></div>
<script src="https://js.puter.com/v2/"></script>
<script>
const button = document.getElementById("ask");
const output = document.getElementById("output");
button.addEventListener("click", async () => {
output.textContent = "";
const stream = await puter.ai.chat(
"Jelaskan konsep event loop JavaScript dengan contoh.",
{
model: "google/gemini-2.5-flash",
stream: true,
}
);
for await (const part of stream) {
if (part?.text) {
output.textContent += part.text;
}
}
});
</script>
Langkah 6: Gunakan input gambar
Gemini mendukung input multimodal. Di Puter.js, Anda dapat mengirim prompt dan URL gambar.
puter.ai.chat(
"What do you see in this image? Describe colors, objects, and mood.",
"https://assets.puter.site/doge.jpeg",
{ model: "google/gemini-2.5-flash" }
).then(response => {
puter.print(response);
});
Kasus penggunaan yang cocok:
- membuat alt text,
- QA visual,
- analisis screenshot,
- OCR ringan,
- alat aksesibilitas,
- tagging gambar produk.
Untuk screenshot yang sangat padat teks, tetap lakukan pengujian terhadap model lain sebelum memilih model produksi.
Langkah 7: Atur temperature
Gunakan temperature untuk mengontrol variasi output.
const response = await puter.ai.chat(
"Write a creative short story about a robot chef",
{
model: "google/gemini-2.5-flash",
temperature: 0.2,
}
);
console.log(response);
Panduan cepat:
-
0.0–0.3: output lebih stabil, cocok untuk data faktual, ekstraksi, dan format terstruktur. -
0.4–0.7: default aman untuk chat umum. -
0.7–1.0: lebih kreatif, cocok untuk ide, cerita, dan variasi copywriting.
Contoh untuk output terstruktur:
const response = await puter.ai.chat(
`
Klasifikasikan teks berikut sebagai bug, feature_request, atau question.
Jawab hanya dalam JSON.
Teks: "Tombol submit tidak bekerja setelah update terakhir."
`,
{
model: "google/gemini-2.5-flash-lite",
temperature: 0.1,
}
);
console.log(response);
Langkah 8: Buat percakapan multi-giliran
Untuk chatbot, simpan riwayat pesan dan kirim ulang pada setiap giliran.
const messages = [
{ role: "user", content: "I am building a Next.js app with Postgres." },
{ role: "assistant", content: "Got it. What do you need help with?" },
{ role: "user", content: "How should I structure migrations?" },
];
const response = await puter.ai.chat(messages, {
model: "google/gemini-2.5-pro",
});
console.log(response);
Pola implementasi:
const messages = [];
async function sendMessage(userInput) {
messages.push({
role: "user",
content: userInput,
});
const response = await puter.ai.chat(messages, {
model: "google/gemini-2.5-flash",
});
messages.push({
role: "assistant",
content: response,
});
return response;
}
Dengan pola ini, Gemini membaca konteks percakapan sebelumnya dan dapat menjawab secara konsisten di giliran berikutnya.
Membandingkan Gemini dengan model lain
Puter menyediakan beberapa model melalui antarmuka yang sama. Untuk memilih model, jalankan prompt yang sama ke beberapa model dan bandingkan output serta latensi.
const models = [
"google/gemini-2.5-flash",
"claude-sonnet-4-6",
"gpt-5.5",
"x-ai/grok-4.3",
];
const prompt = "Refactor this React component to use hooks: ...";
for (const model of models) {
const start = performance.now();
const response = await puter.ai.chat(prompt, { model });
const elapsed = performance.now() - start;
console.log(`${model}: ${elapsed.toFixed(0)}ms`);
console.log(response);
console.log("---");
}
Gunakan hasilnya untuk membuat keputusan berbasis kasus nyata:
- kualitas jawaban,
- latensi,
- konsistensi format,
- kemampuan mengikuti instruksi,
- kebutuhan pengguna Anda.
Apa yang Anda dapatkan
Dengan Puter.js, Anda dapat membangun fitur LLM berbasis peramban dengan:
- katalog Gemini 2.5/2.0/3 Flash dan 2.5 Pro,
- keluarga Gemma 2/3/4,
- percakapan multi-giliran,
- streaming respons,
- input gambar via URL,
- parameter seperti
temperature,max_tokens, dan system prompt, - integrasi frontend tanpa backend.
Apa yang mungkin belum cocok
Tergantung versi Puter dan kebutuhan aplikasi, beberapa skenario lebih cocok memakai API Gemini resmi:
- function calling native pada Gemini,
- tool execution,
- grounding dengan Google Search,
- konteks sangat panjang hingga batas penuh Gemini,
- pemrosesan sisi server tanpa sesi peramban,
- observabilitas langsung terhadap rate limit Google.
Untuk workflow agentik yang membutuhkan tool execution atau integrasi backend kompleks, API Google AI Studio resmi biasanya lebih tepat. Untuk chat, QA, pembuatan konten, dan tugas visual berbasis peramban, Puter.js sudah cukup untuk banyak kasus.
Kapan memakai Puter.js vs API Gemini resmi
Gunakan Puter.js ketika:
- Anda membuat aplikasi publik gratis dan tidak ingin menanggung biaya token.
- Anda membuat prototipe tanpa setup Google Cloud.
- Anda membangun situs statis, demo hackathon, atau ekstensi peramban.
- Pengguna Anda dapat menerima proses login Puter.
- Anda ingin validasi ide sebelum membuat backend produksi.
Gunakan API Gemini resmi ketika:
- Anda membutuhkan cron, batch job, webhook, atau worker backend.
- Anda membutuhkan eksekusi kode, grounding Search, atau konteks Gemini penuh.
- Anda membutuhkan kontrak langsung dengan Google untuk kebutuhan compliance.
- Anda membutuhkan fine-tuning pada dataset sendiri.
- Pengguna Anda tidak dapat menerima login pihak ketiga.
Untuk panduan Gemini 3 Flash, baca Cara menggunakan API Pratinjau Gemini 3 Flash.
Menguji integrasi dengan Apidog
Karena Puter berjalan di peramban, Anda tidak bisa mengujinya persis seperti endpoint backend biasa. Pola yang lebih praktis:
- Buat halaman statis kecil yang menerima prompt dari query parameter.
- Jalankan Puter.js di halaman tersebut.
- Simpan halaman itu sebagai target prototipe.
- Gunakan Apidog untuk menguji API Gemini resmi jika nanti Anda migrasi ke backend.
- Simpan konfigurasi Puter dan Gemini resmi sebagai environment terpisah.
Contoh struktur environment:
-
puter-prototype: URL lokal, misalnyahttp://localhost:5173 -
gemini-prod:https://generativelanguage.googleapis.com/v1
Anda bisa mengunduh Apidog, lalu membuat koleksi yang memisahkan eksperimen frontend Puter dan pengujian API resmi. Untuk pola pengujian API yang lebih luas, lihat Alat pengujian API untuk insinyur QA.
Jalur LLM gratis lain melalui Puter
Model bayar-pengguna yang sama juga dapat dipakai untuk LLM lain melalui Puter:
- Dapatkan API Claude gratis tanpa batas
- Dapatkan API GPT-5.5 gratis tanpa batas
- Cara menggunakan Grok 4.3 secara gratis
- Dapatkan API DeepSeek gratis tanpa batas
Pola implementasinya sama: ubah nilai model, lalu jalankan prompt yang sama.
const response = await puter.ai.chat("Jelaskan OAuth 2.0 secara singkat.", {
model: "google/gemini-2.5-flash",
});
FAQ
Apakah ini benar-benar tidak terbatas?
Dari sisi developer, Anda tidak menanggung billing API. Pengguna akhir memakai saldo akun Puter mereka. Akun baru mendapatkan kredit awal, dan pengguna dapat mengisi ulang jika membutuhkan lebih banyak penggunaan.
Apakah saya perlu akun Google atau Google Cloud project?
Tidak. Puter menangani hubungan dengan provider model. Anda tidak melihat atau menyimpan kunci API Google.
Apakah bisa dipakai di produksi?
Bisa untuk aplikasi berbasis peramban. Pertanyaan utamanya adalah apakah alur login Puter cocok untuk pengguna Anda.
Apakah output Gemini via Puter sama dengan API resmi?
Model yang dipanggil tetap Gemini. Namun, latensi dan batas kemampuan tertentu dapat bergantung pada lapisan Puter dan model yang tersedia.
Bagaimana dengan konteks Gemini yang sangat besar?
Jika Anda membutuhkan konteks sangat panjang hingga batas penuh Gemini, gunakan API Google AI Studio resmi. Untuk sebagian besar chat, QA, dan tugas konten, kebutuhan konteks biasanya jauh lebih kecil.
Bisakah dipakai untuk bot Discord atau backend service?
Tidak ideal. Puter.js berorientasi peramban dan mengasumsikan sesi pengguna. Untuk bot, worker, cron, dan service backend, gunakan API Gemini resmi.
Model apa yang sebaiknya jadi default?
Gunakan google/gemini-2.5-flash sebagai default. Naik ke google/gemini-2.5-pro untuk reasoning yang lebih sulit, atau turun ke google/gemini-2.5-flash-lite untuk klasifikasi volume tinggi.
Apakah pembuatan gambar Imagen didukung?
Puter mengekspos pembuatan gambar melalui model seperti gpt-image-2 dan varian DALL-E, bukan Imagen. Lihat Dapatkan API GPT-5.5 gratis tanpa batas untuk jalur pembuatan gambar.
Kesimpulan
Puter.js adalah cara cepat untuk menambahkan Gemini ke aplikasi berbasis peramban tanpa API key, tanpa backend, dan tanpa setup Google Cloud. Tambahkan script, pilih google/gemini-2.5-flash, lalu panggil puter.ai.chat() dari frontend.
Untuk server-side processing, fine-tuning, tool execution, atau konteks Gemini penuh, gunakan API Gemini resmi. Untuk prototipe, hackathon, situs statis, aplikasi publik gratis, dan fitur AI frontend, Puter.js adalah jalur implementasi yang sederhana.
Buat permintaan di Apidog, bandingkan alur Puter dengan API resmi, lalu pilih arsitektur yang paling sesuai dengan kebutuhan aplikasi Anda.
Top comments (0)