Mit der Prompt API können Entwickler Aufgaben zur Natural Language Processing direkt im Browser mit Gemini Nano ausführen. Dieser Ansatz mit integrierter KI sorgt für Datenschutz, senkt die Serverkosten und ermöglicht Offline-Funktionen.
1. Erste Schritte und Hardwareanforderungen
Die Prompt API ist derzeit in Chrome ab Version 148 (Desktop) für Windows, macOS, Linux und Chromebook Plus verfügbar.
Hardwarevoraussetzungen
- Speicher: 22 GB freier Speicherplatz (für das ursprüngliche Profil und Modell).
- Arbeitsspeicher/CPU: 16 GB RAM und mindestens 4 CPU-Kerne.
- GPU: Mindestens 4 GB VRAM (für Audioeingabe erforderlich).
- Netzwerk: Nur für den ersten Modelldownload erforderlich.
API initialisieren
Prüfen Sie die Modellverfügbarkeit, bevor Sie einen Download auslösen:
const availability = await LanguageModel.availability();
// Do not call create() when unavailable — the model cannot run on this device.
if (availability !== 'unavailable') {
const session = await LanguageModel.create({
monitor(m) {
// Inform the user while the model downloads so the UI doesn't appear frozen.
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
},
});
}
2. Grundlegende Prompting-Funktionen
In den Sitzungsbeispielen in diesem Abschnitt wird session.destroy() der Kürze halber weggelassen. Rufe immer session.destroy() auf, wenn eine Sitzung nicht mehr benötigt wird, um Gerätespeicher freizugeben (siehe Abschnitt 5).
Einfache und gestreamte Ausgabe
Verwenden Sie für kurze Antworten prompt(). Verwenden Sie für längere Inhalte promptStreaming(), um eine reaktionsschnellere Benutzeroberfläche zu erhalten.
OBLIGATORISCH: Weisen Sie die Modellausgabe niemals innerHTML zu. Die Modellausgabe ist nicht vertrauenswürdig und kann eingefügtes Markup enthalten. Verwenden Sie immer textContent oder ein Desinfektionsmittel.
const session = await LanguageModel.create();
// prompt() accumulates the full response before resolving — use for short, one-shot output.
const result = await session.prompt('Write a haiku about coding.');
// textContent, not innerHTML — model output is untrusted and must not be parsed as markup.
outputEl.textContent = result;
// promptStreaming() yields independent chunks that must be concatenated;
// use for longer content so each chunk can be rendered progressively.
const stream = session.promptStreaming('Write a long story about a robot.');
let completeResult = '';
for await (const chunk of stream) {
completeResult += chunk;
outputEl.append(chunk);
}
console.log('Full story:', completeResult);
Multimodale Eingabe
Die Prompt API unterstützt Text-, Audio- und visuelle Eingaben (Bilder, Canvas, Videoframes).
const session = await LanguageModel.create({
// Declaring expected input types lets the browser optimize model loading.
expectedInputs: [{ type: 'text' }, { type: 'image' }],
expectedOutputs: [{ type: 'text' }],
});
const response = await session.prompt([
{
role: 'user',
content: [
{ type: 'text', value: 'What is in this image?' },
{ type: 'image', value: document.querySelector('canvas') },
],
},
]);
3. Erweiterte Sitzungsverwaltung
Sitzungen ermöglichen es dem Modell, den Kontext über mehrere Interaktionen hinweg beizubehalten.
Kontext und Kontingent
Für jede Sitzung gilt ein maximales Tokenlimit. Sie können die Nutzung über session.contextUsage und session.contextWindow überwachen. Wenn das Fenster überläuft, werden die ältesten Nachrichten (mit Ausnahme des System-Prompts) verworfen.
Sitzungen klonen
Das Klonen ist nützlich, um parallele Unterhaltungen zu starten, die denselben anfänglichen Kontext haben (z. B. eine „System“-Persönlichkeit), ohne dass eine erneute Initialisierung erforderlich ist.
const mainSession = await LanguageModel.create({
initialPrompts: [{ role: 'system', content: 'You speak like a pirate.' }],
});
const branchA = await mainSession.clone();
const branchB = await mainSession.clone();
// Destroy the base after cloning — the clones own their own context from here.
mainSession.destroy();
Frühere Sitzungen wiederherstellen
Eine native Funktion zum Wiederherstellen wird derzeit entwickelt. Bis dahin können Sie eine Sitzung wiederherstellen, indem Sie den bisherigen Verlauf in initialPrompts eingeben.
Hinweis: localStorage ist unverschlüsselt und nichtflüchtig. Der gespeicherte Unterhaltungsverlauf kann personenidentifizierbare Informationen enthalten. Berücksichtigen Sie die Auswirkungen auf den Datenschutz, bevor Sie den Chatverlauf speichern.
// || '[]' ensures JSON.parse never receives null when the key doesn't exist yet.
const history = JSON.parse(localStorage.getItem('chat_history') || '[]');
const session = await LanguageModel.create({
initialPrompts: history, // Array of {role, content} objects
});
4. Strukturierte Ausgabe mit JSON-Schema
Wenn Sie verhindern möchten, dass das Modell „Chatter“ hinzufügt (z.B. „Klar, hier ist Ihr JSON:“), verwenden Sie ein JSON-Schema über das Feld responseConstraint. So wird sichergestellt, dass die Ausgabe gültiges JSON ist, das sofort geparst werden kann.
Beispiel: Stimmungsklassifizierung
// Pass the schema as a plain object — do not JSON.stringify() it first.
const schema = {
type: 'object',
properties: {
rating: { type: 'number', minimum: 1, maximum: 5 },
is_positive: { type: 'boolean' },
},
required: ['rating', 'is_positive'],
};
const result = await session.prompt(
"Rate the following feedback: 'The food was great!'",
{ responseConstraint: schema },
);
const data = JSON.parse(result);
console.log(data.rating); // 5
Einschränkungen und Präfixe
Sie können das Modell weiter anleiten, indem Sie die Antwort des Assistenten mit prefix: true vorab ausfüllen.
const character = await session.prompt([
{ role: 'user', content: 'Create a character sheet' },
{ role: 'assistant', content: '```json\n', prefix: true },
]);
5. Best Practices und Sicherheit
- Ressourcenbereinigung: Rufen Sie immer
session.destroy()auf, wenn eine Unterhaltung beendet ist, um Speicherplatz freizugeben. - Ausgabesicherheit: Die Modellausgabe ist nicht vertrauenswürdig. Schreiben Sie Ergebnisse immer in
textContent, nicht ininnerHTML, um XSS-Injektionen durch schädliche Modellausgaben zu verhindern. - Verwenden Sie einen Sanitizer wie die native Sanitizer API oder DOMPurify, wenn Sie eingeschränktes HTML zulassen müssen.
- Aufgaben abbrechen: Verwenden Sie
AbortController, um Nutzern zu ermöglichen, langwierige Generierungen abzubrechen. Übergeben Siesignalanprompt()oderpromptStreaming(), nicht anLanguageModel.create(). - Sicherheit: Mit Berechtigungsrichtlinien können Sie den Zugriff in iFrames steuern:
<iframe src="..." allow="language-model"></iframe>. - Design: Lesen Sie das People + AI Guidebook, um eine verantwortungsbewusste KI-Implementierung zu gewährleisten.
Durch die Kombination von strukturierten Ausgaben mit einer robusten Sitzungsverwaltung können Entwickler komplexe, zustandsorientierte KI-Anwendungen erstellen, die vollständig auf dem Gerät des Nutzers ausgeführt werden.
Dos und Don’ts
Eine vollständige Liste der Dos and Don'ts finden Sie unter https://developer.chrome.com/docs/ai/built-in-ai-dos-donts.md.txt. Hier ist das Wesentliche:
Modell zu einem angemessenen Zeitpunkt vorbereiten
Gilt für: alle APIs, z. B. Summarizer, Translator und Writer.
Empfohlen: Initialisieren Sie die Sitzung, sobald Sie die Absicht des Nutzers, die KI-Funktion zu verwenden, eindeutig festgestellt haben, z. B. wenn ein Nutzer zu einer relevanten Oberfläche für KI-Tools navigiert, den Mauszeiger auf einen KI-Arbeitsbereich bewegt oder mit der Benutzeroberfläche der Funktion interagiert. Durch das Vorwärmen der Sitzung kann das Modell im Hintergrund geladen werden, während der Nutzer seine Aufgabe einrichtet. So wird eine vermeidbare Latenz beim Kaltstart vermieden. Versuchen Sie, einen Schritt voraus zu sein, indem Sie die nächste wahrscheinlichste KI-Aufgabe starten, sobald Sie mit dem Rendern des aktuellen Ergebnisses beginnen, z. B. wenn die Funktion für die iterative Verwendung konzipiert ist.
Nicht empfohlen: Warten Sie nicht, bis der Nutzer auf „Generieren“ klickt, um die Sitzung zu initialisieren, es sei denn, dies ist erforderlich. Dies führt zu einer Kaltstartverzögerung, da das Modell zuerst in den Arbeitsspeicher geladen und die Ausführungspipeline vorbereitet werden muss.
Anfängliche Prompts beim Erstellen festlegen
Gilt für: Prompt API.
Empfehlung: Geben Sie während der Sitzungsinitialisierung Systemanweisungen an, um die Geschwindigkeit des ersten Prompts zu verbessern.
Nicht empfohlen: Mit einer leeren Sitzung beginnen und Systemanweisungen als Teil des ersten prompt()-Aufrufs senden. Dies erhöht die Latenz, da das Modell gezwungen ist, diese Anweisungen im letzten Moment zu verarbeiten.
Sitzungen für wiederkehrende Aufgaben klonen
Gilt für: Prompt API.
Bei der Prompt API wird in jeder Sitzung der Kontext der Unterhaltung erfasst, wobei alle vorherigen Interaktionen berücksichtigt werden. Da ein Klon alles von seiner übergeordneten Sitzung übernimmt, einschließlich der ursprünglichen Prompts und des gesamten Interaktionsverlaufs bis zum Zeitpunkt des Klonens, sollten Sie Ihre Nutzung so strukturieren, dass nur das übernommen wird, was Sie benötigen.
Das sollten Sie tun:
- Basissitzung erstellen: Wenn Sie nicht zusammenhängende Aufgaben effizient bearbeiten möchten, erstellen Sie eine Basissitzung, die nur Ihre Systemanweisungen und keinen vorherigen Unterhaltungskontext enthält.
- Baseline klonen: Verwenden Sie
clone()für diese Basissitzung für neue Aufgaben, um den Aufwand für das erneute Parsen von Systemanweisungen zu sparen. So können Sie parallele Unterhaltungen erstellen oder eine Aufgabe auf den Ausgangszustand zurücksetzen.
Nicht zulässig:
- Verwenden Sie dieselbe Sitzung nicht für nicht zusammenhängende Aufgaben und vermeiden Sie das Klonen von Sitzungen, die bereits unnötigen Interaktionsverlauf enthalten. Beide Muster können dazu führen, dass nicht relevanter vorheriger Kontext die aktuelle Aufgabe beeinträchtigt.
- Rufen Sie
create()nicht wiederholt mit identischen Systemanweisungen auf. Verwenden Sie stattdessen das Klonmuster, um die Leistung zu optimieren.
Nicht verwendete Sitzungen löschen
Gilt für: Alle APIs.
Empfehlung: Rufen Sie destroy() explizit für Sitzungen auf, die Sie nicht mehr benötigen, um Arbeitsspeicher freizugeben, wenn eine Funktion nicht mehr verwendet wird. Wenn Sie ein Klonmuster verwenden, behalten Sie die Basissitzung bei und löschen Sie die Klone, die Sie nicht mehr benötigen.
Nicht empfohlen: Mehrere große Sitzungen aktiv lassen. Jede Sitzung belegt Arbeitsspeicher, was zu einer unnötigen Ressourcennutzung führt und zu einem Problem werden kann. Sitzungen werden automatisch vom Garbage Collector bereinigt. Durch den Aufruf von destroy() wird der Arbeitsspeicher jedoch schneller freigegeben.
Streaming-Antworten sicher und effizient rendern
Gilt für: Alle APIs mit Streaming-Unterstützung (Prompt, Summarizer, Writer, Rewriter und Translator).
Empfehlung: Behandeln Sie alle LLM-Ausgaben als nicht vertrauenswürdige Inhalte. Bereinigen Sie die gesamte kombinierte Ausgabe, nicht nur Teile davon, da bösartiger Code auf mehrere Aktualisierungen aufgeteilt sein könnte. Verwenden Sie vor dem Rendern die Sanitizer API, sofern sie unterstützt wird. Um Leistungseinbußen zu vermeiden, verwenden Sie einen Streaming-Markdown-Parser wie streaming-markdown.
Nicht empfohlen: innerHTML bei jeder Aktualisierung eines Chunks direkt festlegen. Das ist langsam, insbesondere bei komplexen Formatierungen wie Syntaxhervorhebung, und anfällig für Injektionen.
Eingabe für Geschwindigkeit optimieren
Gilt für: Alle APIs.
Empfohlen: Übergeben Sie dem Modell nur das, was unbedingt erforderlich ist. Entfernen Sie alles, was für die jeweilige Aufgabe irrelevant ist. Stellen Sie bei großen Datasets eine kurze Übersicht und eine kleine Auswahl relevanter Elemente bereit.
Nicht empfohlen: Senden Sie keine unverarbeiteten Rohtexte, unnötigen Metadaten, HTML-Tags oder großen ungefilterten Listen an die APIs. Die Latenz steigt mit der Eingabegröße erheblich an, was dazu führen kann, dass die KI-Funktion auf vielen Geräten fehlerhaft wirkt.
Strukturierte Ausgabe für vorhersehbare Ergebnisse verwenden
Gilt für: Prompt API.
Empfohlen: Wenn das Modell Daten in einem bestimmten Format zurückgeben soll, verwenden Sie die strukturierte Ausgabe, indem Sie ein responseConstraint-Feld für ein JSON-Schema angeben. So wird die Ausgabe vorhersehbar und Sie müssen keine komplexe Nachbearbeitung oder manuelle Analyse durchführen.
Nicht empfohlen: Verlassen Sie sich nicht nur auf Anweisungen in natürlicher Sprache (z. B. „Nur JSON ausgeben“). Modelle können Füllwörter enthalten, die den Parser beeinträchtigen.
Generierung von Längenbeschränkungen entkoppeln
Gilt für: Prompt API, da dies die einzige API ist, die strukturierte Ausgabeschemas unterstützt.
Empfohlen: Lassen Sie das Modell die Antwort auf natürliche Weise generieren und kürzen Sie den Text dann mithilfe clientseitiger Logik, damit er in Ihre Benutzeroberfläche passt.
Nicht empfohlen: Strenge Zeichenbeschränkungen wie maxLength: 125 mit strukturierten Ausgabeschemas erzwingen. Wenn die Antwort eines Modells länger als das von Ihnen festgelegte Limit ist, wechselt das Modell möglicherweise zu Tokens mit hoher Dichte wie Fremdsprachen oder Emojis, um die Bedeutung zu komprimieren. Dies führt zu unsinnigen Ausgaben.
Nutzer auf dem Laufenden halten
Gilt für: Alle APIs.
Empfohlen: Je nach Komplexität und erwarteter Dauer der Aufgabe können Sie Animationen, visuelle Hinweise und Fortschrittsanzeigen verwenden, um den Nutzer auf dem Laufenden zu halten. Der optimale Ansatz hängt von Ihrem Anwendungsfall und der erwarteten Länge der API-Ausgabe ab. Vorschläge:
- Streaming für lange Inhalte: Bei Zusammenfassungen oder Chats wird beim Streaming standardmäßig ein Schreibmaschineneffekt pro Token erzeugt. Das kann sich natürlich anfühlen und bietet sofortiges Feedback.
- Nicht-Streaming für kurze Aufgaben (oder lange asynchrone Aufgaben): Bei kurzen Ausgaben, z. B. Alt-Text, kann Nicht-Streaming eine ansprechendere Benutzeroberfläche schaffen. Außerdem bleibt Zeit, die nächste KI-Aufgabe spekulativ vorzubereiten, während die aktuelle gerendert wird. Dieser Ansatz funktioniert auch für längere asynchrone oder Hintergrundaufgaben. Wenn der Nutzer nicht auf die Ausgabe warten muss, um seine Fahrt fortzusetzen, ist es nicht dringend erforderlich, die Ausgabe sofort zu erstellen. In der Benutzeroberfläche wird angezeigt, dass der Prozess läuft.
- Visuelle Übergänge für Aktualisierungen: Verwenden Sie beim Übersetzen oder Umschreiben von Text Animationen, z. B. Wort-Morphing.
Falsch: Die Benutzeroberfläche ohne visuelle Hinweise aktualisieren.
An das mentale Modell des Nutzers von Zeit und Arbeit anpassen
Gilt für: Alle APIs.
Empfohlen: Wenn eine Antwort fast sofort erfolgt, sollten Sie eine künstliche Verzögerung von ein oder zwei Sekunden einbauen. Paradoxerweise finden Nutzer Ergebnisse möglicherweise vertrauenswürdiger, wenn sie einen Generierungsprozess wahrnehmen, der ihrer wahrgenommenen Schwierigkeit der Aufgabe entspricht. Verwenden Sie Animationen, um zu signalisieren, dass eine KI‑Verarbeitung stattgefunden hat.
Nicht empfohlen: Nutzer mit sofortigen UI-Ersetzungen überraschen.
Nutzern erlauben, schnell zu navigieren und KI-Änderungen rückgängig zu machen
Gilt für: Alle APIs.
Empfehlung: Statten Sie Ihre Benutzeroberfläche mit einem Stepper oder einem Navigationsverlauf aus, damit Nutzer verschiedene Ergebnisse unbesorgt ausprobieren und KI-Änderungen schnell rückgängig machen können. So sind verschiedene Versionen weiterhin leicht verfügbar.
Nicht empfohlen: Den vorherigen Entwurf des Nutzers oder ein KI-Ergebnis, das ihm gefallen hat, überschreiben, ohne dass er die Möglichkeit hat, zurückzugehen, die Änderung rückgängig zu machen oder Versionen zu vergleichen.
Nutzereinstellungen und ‑überschreibungen ermöglichen
Gilt für: Alle APIs.
Empfehlung: Machen Sie den Nutzer zum endgültigen Bearbeiter aller generierten Inhalte. Stellen Sie intuitive Überschreibungen bereit, damit die Nutzer die volle Kontrolle über die endgültige Ausgabe behalten. Die APIs können falsche Ergebnisse liefern.
Falsch: Ein KI-generiertes Ergebnis als einzige Option anbieten.
Ergebnisse für wiederkehrende Aufgaben im Cache speichern
Gilt für: Alle APIs.
Empfohlen: Implementieren Sie einen lokalen Ergebniscache (z. B. mit sessionStorage oder IndexedDB) für wiederholte Eingaben oder Abfragen. Normalisieren Sie die Eingabe, indem Sie Leerzeichen entfernen und die Groß-/Kleinschreibung ändern, um die Cache-Treffer zu erhöhen. Generieren Sie für umfangreiche Eingaben, z. B. Bilder, einen Hash, der als Cache-ID verwendet werden kann. Legen Sie eine konservative Gültigkeitsdauer (TTL) für Ihren Cache fest oder stellen Sie im Cache gespeicherte Ergebnisse bereit, während Sie sie im Hintergrund aktualisieren. Lassen Sie den Nutzer eine neue Inferenz auslösen, wenn das Ergebnis unbefriedigend ist.
Nicht empfohlen: Dieselbe Inferenz für eine wiederholte Suchanfrage oder identische Dateneingabe noch einmal ausführen, wenn Variabilität nicht erwünscht ist, z. B. wenn ein Nutzer zwischen Suchergebnissen hin- und herwechselt. Das optimiert die Reaktionsfähigkeit und die effiziente Nutzung der lokalen Rechenleistung.
6. Fallback-Strategien
Prüfen Sie vor der Verwendung, ob das LanguageModel-Objekt im globalen Bereich verfügbar ist:
if ('LanguageModel' in self) {
// The Prompt API is supported.
} else {
// Execute fallback strategy
}
Wenn die Prompt API nicht unterstützt wird oder die Verfügbarkeitsprüfung „Nicht verfügbar“ zurückgibt, müssen Sie einen ordnungsgemäßen Fallback einrichten:
- Remote-API-Fallback: Die Erkennungsanfrage wird an einen Serverendpunkt oder eine Cloud-API (z. B. die Vertex AI Gemini API) weitergeleitet.
- Lokaler API-Fallback: Die Erkennungsanfrage wird an einen lokalen Endpunkt weitergeleitet, z. B. mit Transformers.js.