Googles Gemini-Familie ist eine kostengünstige Modellreihe für Workloads mit hohem Volumen. Trotzdem können sich die Kosten bei öffentlichen Apps, Nebenprojekten oder Hackathon-Prototypen schnell summieren, sobald viele Benutzer denselben Endpunkt verwenden. Puter.js dreht dieses Modell um: Sie integrieren Gemini und Gemma direkt im Browser, ohne Google API-Schlüssel, ohne Google Cloud-Projekt und ohne eigenes Backend. Die Nutzung wird dem Endnutzer über dessen Puter-Konto zugeordnet; für Sie als Entwickler bleibt die Integration kostenlos.
Probieren Sie Apidog noch heute aus
Kurz gesagt
- Puter.js bietet Zugriff auf Gemini- und Gemma-Modelle ohne Google API-Schlüssel, Google Cloud-Projekt oder Server.
- Unterstützte Gemini-Modelle: 2.5 Pro, 2.5 Flash, 2.5 Flash Lite, 2.0 Flash, 2.0 Flash Lite, 3 Flash Preview sowie ältere Previews.
- Unterstützte Gemma-Modelle: Gemma 2, 3, 4 in verschiedenen Größen, z. B. 4B, 12B, 27B, 31B und 26B-A4B.
- Die Basisintegration besteht aus einem
<script>-Tag und einem Funktionsaufruf. - Streaming, Bildeingaben und Temperatursteuerung funktionieren direkt im Browser.
- Die Nutzung läuft über das Puter-Konto des Endnutzers.
- Mit Apidog können Sie Puter-Prototypen mit der offiziellen Gemini API vergleichen und Migrationen planen.
Wie „kostenlos und unbegrenzt“ funktioniert
Bei der klassischen Gemini-Integration besitzen Sie den Google AI Studio- oder Google Cloud-Schlüssel und tragen alle Token-Kosten selbst. Puter.js verschiebt diese Verantwortung auf den Benutzer: Der Endnutzer meldet sich bei Puter an, und die Nutzung wird seinem Puter-Konto zugeordnet.
Für Entwickler bedeutet das:
- Kein Google Cloud-Projekt: Sie müssen kein Projekt anlegen, keine Abrechnung konfigurieren und keine API-Schlüssel verwalten.
- Kein eigener Gemini-Proxy: Der Aufruf läuft direkt aus der Browser-App über Puter.
- Kein eigenes Token-Budget: Ihre Kosten skalieren nicht mit der Anzahl der Nutzer.
Der wichtigste Kompromiss: Puter ist browserzentriert. Ein Backend-Cronjob, ein Worker oder ein Discord-Bot kann Puter nicht einfach ohne aktive Benutzersitzung verwenden.
Schritt 1: Puter.js installieren
Für eine statische HTML-Seite reicht ein CDN-Script:
<script src="https://js.puter.com/v2/"></script>
Für eine gebündelte App können Sie das Paket installieren:
npm install @heyputer/puter.js
Und anschließend importieren:
import { puter } from '@heyputer/puter.js';
Schritt 2: Passendes Gemini- oder Gemma-Modell auswählen
Wählen Sie das Modell nach Latenz, Qualität und Prompt-Komplexität aus.
| Modell-ID | Wann verwenden |
|---|---|
google/gemini-2.5-pro |
Komplexe Analysen, schwierige Schlussfolgerungen, Aufgaben mit langem Kontext |
google/gemini-2.5-flash |
Standardmodell für Chat, Q&A, Content-Generierung und allgemeine Prompts |
google/gemini-2.5-flash-lite |
Hohe Volumen, Klassifizierung, Tagging, einfache strukturierte Aufgaben |
google/gemini-2.0-flash |
Stabile Basislinie mit gut bekanntem Verhalten |
google/gemini-3-flash-preview |
Aktuelle Preview für schnelle Tests neuer Gemini-Funktionen |
google/gemma-3-27b-it |
Offenes Gemma-Modell, instruktionsoptimiert, geeignet für Open-Weight-Vergleiche |
google/gemma-4-31b-it |
Größeres offenes Gemma-Modell für höhere Qualität innerhalb der Gemma-Familie |
Praktische Standardeinstellung:
const DEFAULT_MODEL = 'google/gemini-2.5-flash';
Nutzen Sie gemini-2.5-pro nur für Prompts, bei denen Flash sichtbar nicht ausreicht. Verwenden Sie Lite-Varianten für einfache Aufgaben mit hohem Durchsatz.
Schritt 3: Ersten Gemini-Aufruf im Browser ausführen
Minimalbeispiel:
<!DOCTYPE html>
<html lang="de">
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
'Erklären Sie maschinelles Lernen in drei Sätzen.',
{ model: 'google/gemini-2.5-flash' }
).then(response => {
puter.print(response);
});
</script>
</body>
</html>
Ablauf:
- Datei als
index.htmlspeichern. - Im Browser öffnen.
- Puter startet bei Bedarf den Login-Flow.
- Die Gemini-Antwort wird direkt auf der Seite ausgegeben.
Sie benötigen keine .env-Datei, keinen API-Key und keinen Server-Endpunkt.
Schritt 4: Antwort in einer Chat-UI streamen
Für Chat-Oberflächen sollten Sie Antworten streamen, damit Nutzer nicht auf die komplette Ausgabe warten müssen.
const outputDiv = document.querySelector('#output');
const response = await puter.ai.chat(
'Erklären Sie Photosynthese im Detail.',
{
model: 'google/gemini-2.5-flash',
stream: true,
}
);
for await (const part of response) {
if (part?.text) {
outputDiv.innerHTML += part.text;
}
}
Ein einfaches HTML-Gerüst dazu:
<div id="output"></div>
Jeder part.text enthält ein Stück der Antwort. Hängen Sie diese Teile direkt an Ihre UI an.
Schritt 5: Bilder an Gemini übergeben
Gemini unterstützt multimodale Prompts. Übergeben Sie eine Bild-URL als zweites Argument:
puter.ai.chat(
'Was sehen Sie auf diesem Bild? Beschreiben Sie Farben, Objekte und Stimmung.',
'https://assets.puter.site/doge.jpeg',
{ model: 'google/gemini-2.5-flash' }
).then(response => {
puter.print(response);
});
Typische Anwendungsfälle:
- Alt-Text-Generierung
- visuelle Q&A
- Screenshot-Analyse
- OCR-nahe Aufgaben
- Barrierefreiheitstools
- Produktbild-Tagging
Gemini ist besonders stark bei natürlichen Bildern und Diagrammen. Bei Screenshots mit sehr dichtem Text kann je nach Aufgabe ein anderes Modell besser geeignet sein.
Schritt 6: Temperatur konfigurieren
Die Temperatur steuert, wie deterministisch oder kreativ die Ausgabe wird.
const response = await puter.ai.chat(
'Schreiben Sie eine kreative Kurzgeschichte über einen Roboterkoch.',
{
model: 'google/gemini-2.5-flash',
temperature: 0.2,
}
);
console.log(response);
Faustregeln:
-
0.0bis0.3: faktenorientierte, strukturierte oder reproduzierbare Ausgaben -
0.4bis0.7: allgemeine Chat- und Content-Aufgaben -
0.8bis1.0: kreatives Schreiben, Brainstorming, Varianten
Für viele Chat-Anwendungsfälle ist 0.7 ein brauchbarer Startwert.
Schritt 7: Mehrstufige Gespräche verwalten
Für Konversationen übergeben Sie ein Nachrichtenarray:
const messages = [
{ role: 'user', content: 'Ich entwickle eine Next.js-App mit Postgres.' },
{ role: 'assistant', content: 'Verstanden. Wobei benötigen Sie Hilfe?' },
{ role: 'user', content: 'Wie sollte ich Migrationen strukturieren?' },
];
const response = await puter.ai.chat(messages, {
model: 'google/gemini-2.5-pro',
});
console.log(response);
In einer echten App speichern Sie den Verlauf clientseitig:
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;
}
So bleibt Gemini über mehrere Runden hinweg im Kontext.
Gemini mit anderen Modellen vergleichen
Puter stellt mehrere LLMs über eine einheitliche Schnittstelle bereit. Dadurch können Sie denselben Prompt gegen verschiedene Modelle testen.
const models = [
'google/gemini-2.5-flash',
'claude-sonnet-4-6',
'gpt-5.5',
'x-ai/grok-4.3',
];
const prompt = 'Refaktorieren Sie diese React-Komponente, um Hooks zu verwenden: ...';
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('---');
}
Bewerten Sie pro Modell mindestens:
- Antwortqualität
- Latenz
- Konsistenz bei wiederholten Prompts
- Eignung für Ihren konkreten Use Case
- Benutzerakzeptanz des Puter-Flows
Was Sie bekommen und was nicht
Das bekommen Sie
- Gemini 2.5/2.0/3-Flash-Modelle plus 2.5 Pro
- Gemma-Familie 2/3/4 für Open-Weight-Workflows
- mehrstufige Gespräche
- Streaming-Antworten
- Bildeingaben über Bild-URL
- Optionen wie Temperatur,
max_tokensund System-Prompts - browserbasierte Integration ohne eigenes Backend
Das bekommen Sie möglicherweise nicht
Je nach aktueller Puter-Version können Einschränkungen bestehen bei:
- nativen Funktionsaufrufen auf Gemini
- Code-Ausführungstools
- Google Search Grounding
- vollem 2M-Token-Kontextfenster
- serverseitiger Nutzung ohne Browserkontext
- direkter Sichtbarkeit der Google-Ratenlimits
Für agentenbasierte Workflows mit Tool-Aufrufen, Code-Ausführung oder Search Grounding ist die offizielle Google AI Studio API oft besser geeignet. Für Chat, Q&A, Content-Generierung und einfache Vision-Aufgaben reicht Puter in vielen Browser-Apps aus.
Wann Sie Puter statt der offiziellen Gemini API verwenden sollten
Verwenden Sie Puter, wenn:
- Sie eine kostenlose öffentliche App ohne eigenes Abrechnungsrisiko veröffentlichen möchten.
- Sie schnell prototypisieren und kein Google Cloud-Projekt einrichten wollen.
- Sie Gemini in einer statischen Website, Browser-Erweiterung oder Hackathon-App brauchen.
- Ihre Nutzer einen Puter-Login akzeptieren.
- Ihre App primär im Browser läuft.
Verwenden Sie die offizielle Gemini API, wenn:
- Sie serverseitige Aufrufe benötigen, z. B. Cronjobs, Batch-Prozesse oder Webhooks.
- Sie Code-Ausführung, Search Grounding oder den vollen langen Kontext benötigen.
- Sie Compliance-Anforderungen direkt mit Google abdecken müssen.
- Sie Fine-Tuning oder eigene Datenpipelines benötigen.
- Ihre Nutzer keinen zusätzlichen Puter-Anmeldeschritt akzeptieren.
Eine detaillierte Anleitung für Gemini 3 Flash finden Sie hier: So verwenden Sie die Gemini 3 Flash Preview API.
Integration mit Apidog testen
Puter-Aufrufe laufen im Browser. Deshalb testen Sie diese nicht wie einen klassischen Backend-Endpunkt. Ein praktikables Setup sieht so aus:
- Erstellen Sie eine kleine statische Testseite mit Puter.js.
- Lesen Sie Prompt und Modell aus Query-Parametern.
- Testen Sie die offizielle Gemini API separat in Apidog.
- Halten Sie Puter-Prototyp und Gemini-API-Variante als getrennte Umgebungen in derselben Sammlung.
Beispiel für eine lokale Puter-Testseite:
const params = new URLSearchParams(window.location.search);
const prompt = params.get('prompt') ?? 'Erklären Sie Gemini in einem Satz.';
const model = params.get('model') ?? 'google/gemini-2.5-flash';
const response = await puter.ai.chat(prompt, { model });
document.querySelector('#output').textContent = response;
Richten Sie in Apidog zwei Umgebungen ein:
-
puter-prototype: lokale URL Ihrer Puter-Testseite -
gemini-prod:https://generativelanguage.googleapis.com/v1
So können Sie später sauber von einem Browser-Prototyp auf eine direkte Gemini-API-Integration migrieren. Weitere Testmuster finden Sie unter API-Test-Tool für QA-Ingenieure.
Weitere kostenlose LLM-Pfade über Puter
Das Nutzer-zahlt-Modell funktioniert nicht nur für Gemini. Über Puter können Sie auch andere Modellfamilien über denselben Aufrufstil testen:
- Holen Sie sich eine kostenlose unbegrenzte Claude API
- Holen Sie sich eine kostenlose unbegrenzte GPT-5.5 API
- So verwenden Sie Grok 4.3 kostenlos
- Holen Sie sich eine kostenlose unbegrenzte DeepSeek API
Der Wechsel besteht meist nur aus einem anderen model-String:
const response = await puter.ai.chat(prompt, {
model: 'google/gemini-2.5-flash',
});
Häufig gestellte Fragen
Ist das wirklich unbegrenzt?
Aus Entwicklersicht ja: Sie verwalten kein eigenes Token-Budget. Die tatsächliche Nutzung hängt vom Guthaben des jeweiligen Puter-Kontos ab. Neue Konten erhalten ein Startguthaben; Nutzer können bei Bedarf Guthaben aufladen.
Benötige ich ein Google-Konto oder ein Google Cloud-Projekt?
Nein. Puter übernimmt den Zugriff auf Gemini. Sie verwalten keinen Google API-Schlüssel.
Kann ich das in Produktion verwenden?
Ja, für browserbasierte Apps. Entscheidend ist, ob Ihre Nutzer den Puter-Anmeldeschritt akzeptieren.
Funktioniert Gemini über Puter identisch mit der offiziellen API?
Puter ruft Gemini im Namen des Benutzers auf. Das Modellverhalten sollte daher vergleichbar sein. Durch den zusätzlichen Hop kann die Latenz geringfügig höher sein.
Was ist mit Geminis 2M-Token-Kontextfenster?
Puter stellt nicht zwingend für jede Modellvariante das volle 2M-Token-Limit bereit. Für extrem lange Kontexte ist die offizielle Google AI Studio API der passendere Weg.
Kann ich Gemini über Puter in einem Discord-Bot oder Backend-Dienst verwenden?
Nicht ohne Weiteres. Puter ist browserbasiert und setzt eine Benutzersitzung voraus. Für Backend-Dienste sollten Sie die offizielle Gemini API direkt verwenden.
Welches Modell sollte ich standardmäßig verwenden?
Starten Sie mit:
'google/gemini-2.5-flash'
Wechseln Sie zu google/gemini-2.5-pro für komplexe Denkaufgaben und zu google/gemini-2.5-flash-lite für einfache Aufgaben mit hohem Volumen.
Wird Bildgenerierung unterstützt?
Puter bietet Bildgenerierung über OpenAI-Modelle wie gpt-image-2 und DALL-E-Varianten an, nicht über Imagen. Weitere Informationen finden Sie unter Holen Sie sich eine kostenlose unbegrenzte GPT-5.5 API.
Zusammenfassung
Puter.js ist ein schneller Weg, Gemini in browserbasierte Apps einzubauen, ohne Google Cloud-Projekt, API-Key oder eigenes Backend. Für die meisten Prototypen starten Sie mit google/gemini-2.5-flash, aktivieren bei Bedarf Streaming und verwalten den Chatverlauf im Browser.
Für serverseitige Workloads, Fine-Tuning, Tool-Aufrufe, Code-Ausführung oder sehr lange Kontexte bleibt die offizielle Google Gemini API die bessere Wahl.
Erstellen Sie Ihre API-Variante in Apidog, vergleichen Sie Puter mit der offiziellen Gemini API und wählen Sie den Integrationspfad, der zu Ihrer App passt.
Top comments (0)