Neue Funktionen mit integrierter KI in Chrome entwickeln

Thomas Steiner

Veröffentlicht am 26. Mai 2026

Dieser Beitrag fasst den Vortrag von Thomas Steiner auf der Google I/O 2026 zusammen.

Stellen Sie sich vor, Sie erstellen einen Reiseblog, in dem der Editor für Blogbeiträge nicht nur den Text speichert, sondern Sie auch aktiv beim Schreiben unterstützt. Das sind Maya und Ashok, die Entwickler von trAIlblazers. Sie verwenden die in Chrome integrierte KI. Durch das Ausführen von Modellen direkt auf dem Gerät des Nutzers können Entwickler teure Cloud-Kosten und Latenzzeiten vermeiden und gleichzeitig sensible Daten lokal speichern.

Wir haben mit Build Awesome (ehemals Eleventy) zusammengearbeitet, um eine Blogvorlage mit allen im Vortrag genannten KI-Funktionen zu veröffentlichen.

Warum integrierte KI?

  • Kosteneffizient:Es fallen keine Kosten für die Cloud-Inferenz an, da alle Berechnungen auf den unterstützten Geräten der Nutzer erfolgen.
  • Datenschutz geht vor:Sensible Daten verlassen den Browser nie.
  • Offline-Funktionalität:Sobald das Modell heruntergeladen wurde, funktionieren die KI-Funktionen auch ohne Internetverbindung.
  • Leistung:Durch die Hardwarebeschleunigung können On-Device-Modelle mit Cloud-Geschwindigkeiten mithalten (und sie manchmal sogar übertreffen).
  • Hybride Inferenz: Mit Polyfills und Tools wie Firebase AI Logic, können Sie auf nicht unterstützten Geräten (z. B. Mobilgeräten) auf die Cloud zurückgreifen, während Sie auf dem Desktop nativ bleiben.

KI-Funktionen für moderne Webanwendungen

Die Summarizer API

Der Editor von trAIlblazers verwendet die Summarizer API, um automatisch Überschriften und SEO-freundliche Meta-Beschreibungen zu generieren.

Beispiel: Überschrift generieren

const blogPost = document.querySelector('.article-body').innerText;
const summarizer = await Summarizer.create({
  type: 'headline',
  sharedContext: 'Write headlines that make people want to read the blog post',
});

for await (const chunk of summarizer.summarizeStreaming(blogPost)) {
  headline.append(chunk);
}

Die Prompt API (mit strukturierter Ausgabe)

Benötigen Sie bestimmte Daten? Wenn Sie JSON-Schema mit der Prompt API verwenden, können Sie festlegen, dass die KI vorhersehbare Formate zurückgibt. Das trAIlblazers-Team verwendet diese Funktion für Folgendes:

  • Tag-Generierung:Vorschläge für Kategorien wie „Abenteuer“ oder „Strand“ aus einer vordefinierten Liste.
  • Kommentarmoderation:Kommentare vor der Veröffentlichung als „Sicher“ oder „Schädlich“ klassifizieren.

Barrierefreiheit von Medien

Der Editor automatisiert die „schwierigen Teile“ von Markdown. Wenn Sie ein Bild einfügen, analysiert die Prompt API (mit multimodaler Eingabe) die Pixel, um barrierefreien Alternativtext und informative Bildunterschriften zu generieren.

Texte verfassen und umschreiben

Mit den Writer und Rewriter APIs können Nutzer Aufzählungszeichen mit einem einzigen Klick in vollständige Absätze umwandeln und den Ton eines Absatzes in „lockerer“ oder „kürzer“ ändern.

Nahtlose Übersetzung

Mit der Translator API können Entwickler Inhalte auf Englisch verfassen und sie sofort für spanische oder japanische Leser übersetzen lassen. Muttersprachler können die Übersetzung dann noch optimieren.

Beispiel für die Funktionsweise der Translator API.
Mit der Translator API können Sie Inhalte auf Englisch verfassen und sie sofort ins Spanische und Japanische übersetzen lassen.

Erfolgsberichte aus der Praxis

Viele Partner verwenden diese APIs bereits in der Produktion. Einige Beispiele:

  • Drupal:Verwendet die Summarizer API zur Generierung von SEO-Tags in CKEditor.
  • Yahoo! Japan:Verwendet die Prompt API zur Kommentarmoderation.
  • Trip.com::Hilft Nutzern mit KI-Übersichten, sich in den komplexen Optionen für die Flugbuchung zurechtzufinden.

Ressourcen aus dem Vortrag

Möchten Sie Ihre eigene „trAIlblazers“-Anwendung erstellen? Dann sehen Sie sich gleich diese Infomaterialien an: