Integrierte KI-APIs: Tipps

Maud Nalpas

Veröffentlicht: 30. April 2026

Dank der integrierten KI kann Ihre Website oder Webanwendung KI‑gestützte Aufgaben ausführen, ohne dass Sie Modelle bereitstellen, verwalten oder selbst hosten müssen. Es kann schwierig sein, von einer Demo zu einer produktionsreifen Funktion zu wechseln. In diesem Dokument werden technische und UX-Aspekte behandelt, die Ihnen helfen, häufige Fehler zu vermeiden.

Modell rechtzeitig vorbereiten

Gilt für: alle APIs, z. B. Summarizer, Translator und Writer

Empfehlung:Initialisieren Sie die Sitzung, sobald Sie die Absicht des Nutzers, die KI-Funktion zu verwenden, eindeutig festgestellt haben. Das kann beispielsweise der Fall sein, wenn ein Nutzer eine relevante Oberfläche für KI-Tools aufruft, den Mauszeiger über einen KI-Arbeitsbereich bewegt oder mit der umgebenden Benutzeroberfläche der Funktion interagiert. Durch das Vorwärmen der Sitzung kann das Modell im Hintergrund in den Arbeitsspeicher geladen werden, während der Nutzer seine Aufgabe einrichtet. So wird eine vermeidbare Kaltstartlatenz vermieden. Versuchen Sie, einen Schritt voraus zu sein, indem Sie die nächste wahrscheinliche 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:Warten Sie nicht, bis der Nutzer auf „Generieren“ klickt, um die Sitzung zu initialisieren, es sei denn, das ist erforderlich. Dies führt zu einer Kaltstartverzögerung, da das Modell zuerst in den Arbeitsspeicher geladen und die Ausführungspipeline vorbereitet werden muss.

Erste Prompts bei der Erstellung festlegen

Gilt für: Prompt API.

Empfehlung:Geben Sie Systemanweisungen bei der Initialisierung der Sitzung an, um die Geschwindigkeit des ersten Prompts zu verbessern.

Nicht:Mit einer leeren Sitzung beginnen und Systemanweisungen als Teil des ersten prompt()-Aufrufs senden. Dadurch erhöht sich die Latenz, da das Modell diese Anweisungen erst im letzten Moment verarbeiten kann.

// ✅ DO: Create the session as early as possible (tip on warming up the model early) and use initialPrompts for system instructions in the create call
const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: 'You are a helpful assistant specialized in code reviews.' }
  ]
});

// A few moments later, when the user triggers the AI feature
const review = await session.prompt(`Review the following code:\n\n${code}`);

// ❌ DON'T: Send instructions using prompt() after creation
// const slowerSession = await LanguageModel.create();
// await slowerSession.prompt(`You are a helpful assistant specialized in code reviews.\n\nReview the following code:\n\n${code}`); // Higher latency

Sitzungen für sich wiederholende Aufgaben klonen

Gilt für: Prompt API.

Bei der Prompt API wird in jeder Sitzung der Kontext der Unterhaltung erfasst und alle vorherigen Interaktionen werden berücksichtigt. Da ein Klon alles von seiner übergeordneten Sitzung erbt, 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: Um nicht zusammenhängende Aufgaben effizient zu bearbeiten, erstellen Sie eine Basissitzung, die nur Ihre Systemanweisungen und keinen vorherigen Unterhaltungskontext enthält.
• Baselines klonen: Verwenden Sie clone() für neue Aufgaben in dieser Basissitzung, 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 nicht dieselbe Sitzung für nicht zusammenhängende Aufgaben und vermeiden Sie das Klonen von Sitzungen, die bereits unnötige Interaktionsverläufe enthalten. Beide Muster können dazu führen, dass nicht relevanter vorheriger Kontext Ihre aktuelle Aufgabe beeinträchtigt.
• Rufen Sie create() nicht wiederholt mit identischen Systemanweisungen auf. Verwenden Sie stattdessen das Klonmuster, um die Leistung zu optimieren.

// ✅ DO: Create a baseline session and clone it for each new task
const baseSession = await LanguageModel.create({
  initialPrompts: [{
    role: 'system',
    content: 'You are a technical editor...',
  }],
});

// Clone the base session once for the first task
const task1 = await baseSession.clone();
const response1 = await task1.prompt("Review this first draft...");
// ... Repeat the cloning pattern for subsequent independent tasks
// Each task starts fresh from the baseline system instructions

// ❌ DON'T:
// Bad performance pattern: repeated create() calls for identical tasks.
// This forces the model to re-parse instructions every time, increasing latency.
// const sessionA = await LanguageModel.create({ initialPrompts: [...] });
// await sessionA.prompt("Task 1...");
// const sessionB = await LanguageModel.create({ initialPrompts: [...] });
// await sessionB.prompt("Task 2...");
// Bad quality pattern: reusing the same session for unrelated tasks.
// const session = await LanguageModel.create();
// await session.prompt("Analyze this financial report...");
// Unrelated task in the same session:
// await session.prompt("Now write a children's story...");

Nicht verwendete Sitzungen beenden

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:Mehrere große Sitzungen gleichzeitig aktiv halten. Jede Sitzung verbraucht Arbeitsspeicher, was zu einer unnötigen Ressourcennutzung führt und zu einem Problem werden kann. Sitzungen werden natürlich vom Garbage Collector bereinigt, aber durch Aufrufen von destroy() wird der Speicher schneller freigegeben.

// ✅ DO: Use the clone and destroy it immediately after
const clone = await baseSession.clone();
const response = await clone.prompt("Quick task...");
// Free memory right away: destry the clone, keep the baseSession
clone.destroy();

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 und nicht nur einzelne Abschnitte, da bösartiger Code auf mehrere Updates verteilt sein kann. Verwenden Sie vor dem Rendern die Sanitizer API, sofern sie unterstützt wird. Um Leistungseinbußen zu vermeiden, sollten Sie einen Streaming-Markdown-Parser wie streaming-markdown verwenden.

Nicht:innerHTML bei jeder Aktualisierung eines Chunks direkt festlegen. Das ist langsam, insbesondere bei komplexer Formatierung wie der Syntaxhervorhebung, und anfällig für Injection.

import * as smd from "streaming-markdown";
// Set up virtual buffer and Sanitizer API
const sanitizer = new Sanitizer({
  allowElements: ['figure', 'figcaption', 'p', 'br', 'strong', 'em', 'img', 'a'],
  allowAttributes: {
    'loading': ['img'], 'decoding': ['img'], 'src': ['img'], 'href': ['a']
  }
});

// Create an off-screen fragment so the parser doesn't cause flicker
// or trigger XSS in the live DOM during the building process.
const buffer = new DocumentFragment();
const parser = smd.parser_new(buffer);

// Use sanitizer as a gatekeeper / cleaner function so we can combine it with the streaming Markdown parser
function syncSanitized(target, sourceFragment) {
  // .sanitize() returns a fresh, clean DocumentFragment
  const cleanFragment = sanitizer.sanitize(sourceFragment);
  // replaceChildren is the modern high-performance way to swap DOM content
  target.replaceChildren(cleanFragment);
}

// Streaming Logic
// `chunks` keeps track of the raw string (useful for logs/debug)
chunks += chunk;
// Let the parser build the DOM incrementally in the buffer.
// This is high-performance because the buffer is not live
smd.parser_write(parser, chunk);
// Use the Sanitizer API to port the content safely to the container.
syncSanitized(container, buffer);

Eingabe für Geschwindigkeit optimieren

Gilt für: Alle APIs.

Empfehlung:Übergeben Sie nur das an das Modell, was unbedingt erforderlich ist. Entferne alles, was für die jeweilige Aufgabe irrelevant ist. Geben Sie bei großen Datasets eine kurze Übersicht und eine kleine Auswahl relevanter Elemente an.

Nicht:Senden Sie keinen rohen, unverarbeiteten Text, unnötige Metadaten, HTML-Tags oder große, ungefilterte Listen an die APIs. Die Latenz nimmt mit der Eingabegröße deutlich zu, was dazu führen kann, dass die KI-Funktion auf vielen Geräten nicht richtig funktioniert.

// ✅ DO: Send only relevant text
const cleanText = document.querySelector('#article').innerText;
const summary = await Summarizer.summarize(cleanText);

// ❌ DON'T: Send the entire DOM structure
// const dirtyText = document.querySelector('#article').innerHTML;

Strukturierte Ausgabe für vorhersehbare Ergebnisse verwenden

Gilt für: Prompt API.

Empfehlung:Wenn das Modell Daten in einem bestimmten Format zurückgeben soll, verwenden Sie die strukturierte Ausgabe, indem Sie ein responseConstraint-Feld mit einem JSON-Schema angeben. So ist die Ausgabe vorhersehbar und Sie müssen keine komplexe Nachbearbeitung oder manuelle Analyse durchführen.

Nicht:Verlassen Sie sich nicht nur auf Anweisungen in natürlicher Sprache (z. B. „gib nur JSON aus“). Modelle können Füllwörter enthalten, die Ihren Parser unterbrechen.

// ✅ DO: Use a JSON Schema for predictable results
const schema = {
  type: "object",
  properties: {
    isTopicCats: { type: "boolean" }
  }
};

const result = await session.prompt(`Is this post about cats?\n\n${post}`, {
  responseConstraint: schema,
});
console.log(JSON.parse(result).isTopicCats);

Generierung von Längenbeschränkungen entkoppeln

Gilt für: Prompt API, da sie die einzige API ist, die Schemas für strukturierte Ausgaben unterstützt.

Empfehlung:Lassen Sie das Modell seine Antwort auf natürliche Weise generieren und verwenden Sie dann clientseitige Logik, um den Text an Ihre Benutzeroberfläche anzupassen.

Nicht:Erzwingen Sie strenge Zeichenlimits wie maxLength: 125 mit Schemas für strukturierte Ausgaben. Wenn die Antwort eines Modells länger ist als das von Ihnen festgelegte Limit, wechselt das Modell möglicherweise zu Tokens mit hoher Dichte wie Fremdsprachen oder Emojis, um die Bedeutung zu komprimieren. Dies kann zu unsinnigen Ausgaben führen.

/*  DO: Handle overflow using CSS */
.result {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* Displays '…' */
}

// ❌ DON'T: Force length in the prompt
const result = await session.prompt("Write a bio in exactly 50 characters.");

Nutzer auf dem Laufenden halten

Gilt für: Alle APIs.

Empfehlung:Verwenden Sie je nach Komplexität und erwarteter Dauer der Aufgabe Animationen, visuelle Hinweise und Fortschrittsanzeigen, 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: Beim Streaming von Zusammenfassungen oder Chat-Antworten wird standardmäßig ein Schreibmaschineneffekt pro Token erzeugt. Das kann sich natürlich anfühlen und sofortiges Feedback liefern.
• Kein Streaming für kurze Aufgaben (oder lange asynchrone Aufgaben): Bei kurzen Ausgaben, z. B. Alt-Text, kann durch den Verzicht auf Streaming eine ansprechendere Benutzeroberfläche erstellt werden. Außerdem bleibt Zeit, die nächste KI-Aufgabe vorzubereiten, während die aktuelle gerendert wird. Dieser Ansatz funktioniert auch für längere asynchrone oder Hintergrundaufgaben. Wenn der Nutzer nicht blockiert wird, um fortzufahren, besteht keine dringende Notwendigkeit, die Ausgabe sofort zu generieren. In der Benutzeroberfläche wird angezeigt, dass der Vorgang 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.

Empfehlung:Erwägen Sie eine künstliche Verzögerung von ein oder zwei Sekunden, wenn eine Antwort fast sofort erfolgt. Paradoxerweise empfinden Nutzer Ergebnisse möglicherweise als vertrauenswürdiger, wenn sie einen Generierungsprozess wahrnehmen, der ihrer Einschätzung der Schwierigkeit der Aufgabe entspricht. Verwenden Sie Animationen, um zu signalisieren, dass ein KI-Prozess stattgefunden hat.

Nicht:Nutzer mit sofortigen Änderungen der Benutzeroberfläche überraschen.

Nutzern ermöglichen, schnell zu navigieren und KI-Bearbeitungen rückgängig zu machen

Gilt für: Alle APIs.

Empfehlung:Stellen Sie in der Benutzeroberfläche einen Stepper oder Navigationsverlauf bereit, damit Nutzer verschiedene Ergebnisse problemlos ansehen und KI-Bearbeitungen schnell rückgängig machen können. So sind verschiedene Versionen weiterhin leicht verfügbar.

Nicht:Überschreiben Sie den vorherigen Entwurf des Nutzers oder ein KI-Ergebnis, das ihm gefallen hat, ohne dass er die Möglichkeit hat, die Versionen zu vergleichen oder zurückzugehen.

Nutzerkontrolle und Überschreibungen ermöglichen

Gilt für: Alle APIs.

Empfehlung:Machen Sie den Nutzer zum endgültigen Bearbeiter aller generierten Inhalte. Bieten Sie intuitive Überschreibungsfunktionen, damit der Nutzer die volle Kontrolle über das Endergebnis behält. Die APIs können falsche Ergebnisse liefern.

Falsch:Ein KI-generiertes Ergebnis als einzige Option erzwingen.

Ergebnisse für wiederholte Aufgaben im Cache speichern

Gilt für: Alle APIs.

Empfehlung:Implementieren Sie einen lokalen Ergebnis-Cache (z. B. mit sessionStorage oder IndexedDB) für wiederholte Eingaben oder Anfragen. Normalisieren Sie die Eingabe, indem Sie Leerzeichen entfernen und die Groß-/Kleinschreibung anpassen, um die Cache-Treffer zu erhöhen. Generieren Sie für umfangreiche Eingaben, z. B. Bilder, einen Hash, der als Cache-Schlüssel verwendet werden kann. Legen Sie eine konservative Gültigkeitsdauer (Time to Live, TTL) für Ihren Cache fest oder stellen Sie im Cache gespeicherte Ergebnisse bereit, während Sie sie im Hintergrund aktualisieren. Nutzer können eine neue Inferenz auslösen, wenn das Ergebnis nicht zufriedenstellend ist.

Nicht:Führen Sie dieselbe Inferenz nicht für eine wiederholte Suchanfrage oder identische Dateneingabe aus, wenn keine Variabilität gewünscht ist, z. B. wenn ein Nutzer zwischen Suchergebnissen hin- und herwechselt. Dadurch wird die Reaktionsfähigkeit optimiert und die lokale Rechenleistung effizient genutzt.

// ✅ DO: Check a local cache before running inference
async function getAiResponse(userInput, forceRefresh = false) {
  // Normalize the query to increase cache hits
  const query = userInput.trim().toLowerCase();
  const cacheKey = `ai_results_${query}`;
  const TTL_MS = 3600000; // 1 hour conservative TTL

  if (!forceRefresh) {
    const itemStr = localStorage.getItem(cacheKey);
    if (itemStr) {
      const item = JSON.parse(itemStr);
      const now = Date.now();

      // Check if the item has expired
      if (now < item.expiry) {
        // Lightweight safety check before rendering
        if (isValid(item.value)) return item.value;
      } else {
        // Delete the stale entry if the TTL has passed
        localStorage.removeItem(cacheKey);
      }
    }
  }

  // Fallback: Run inference if no valid cache exists
  const session = await LanguageModel.create();
  const response = await session.prompt(userInput);

  // Store the result for future use (with an expiration)
  const cacheData = {
    value: response,
    expiry: Date.now() + TTL_MS
  };
  localStorage.setItem(cacheKey, JSON.stringify(cacheData));

  return response;
}