E-Commerce-Bezahlvorgang mit KI-Funktionen des Browsers optimieren

1. Einführung

Die moderne Webentwicklung bietet eine Alternative zu cloudbasierten Roundtrips für die KI-Nutzung. Chrome hat mit der Auslieferung von integrierten KI-APIs begonnen, mit denen Sie alles von kleinen Expertenmodellen für die Übersetzung bis hin zu leistungsstarken destillierten vollständigen Sprachmodellen nutzen können. Die Ausführung erfolgt privat auf dem Gerät des Nutzers und es fallen keine Token-Kosten für Sie oder Ihre Nutzer an.

Gleichzeitig bieten KI-Agents Nutzern eine neue Möglichkeit, mit Webanwendungen zu interagieren. Wenn Sie Ihre Weboberfläche mit WebMCP für Agents optimieren, können Sie die Tokennutzung reduzieren und gleichzeitig genauere Ergebnisse erzielen als bei der herkömmlichen Ausführung, für die Screenshots und DOM-Scraping erforderlich sind.

In diesem Codelab arbeiten Sie an Mont-Royal Plein Air, einer E-Commerce-Website für Outdoor-Ausrüstung. Sie erfahren, wie Sie integrierte KI‑APIs und WebMCP erstellen und einbinden, um:

  1. Die Kundenabsicht aus dem Browserverlauf ableiten und dynamisch Empfehlungen für sie mit On-Device-Modellen erstellen.
  2. Stellen Sie Tools bereit, mit denen Agents und Browser-Assistenten auf der Website navigieren, Produkte und Empfehlungen prüfen und den Einkaufswagen eines Nutzers verwalten können.
  3. (Optional) Ihre Website mit kleinen, geräteinternen Expertenmodellen spontan übersetzen lassen
  4. Optional: Wandeln Sie die einfache Website-Suche in einen Onsite-Agent um, der dieselben Tools wie externe Agents verwendet.

Lerninhalte

  • Wie Sie die Prompt API verwenden und strukturierte JSON-Ausgaben erzwingen.
  • Hier erfahren Sie, wie Sie WebMCP-Tools registrieren und wie Sie über die Zusammensetzung und Granularität von Tools nachdenken können.
  • (Optional) So verwenden Sie die Translator API, um Inhalte schnell mit einem On-Device-Expertenmodell zu übersetzen.
  • (Optional) So rufen Sie WebMCP-Tools selbst auf.

Vorbereitung

  • Ein privates Google-Konto und Google Cloud
  • Google Chrome-Version 150 oder höher oder Canary-, Entwickler- oder Beta-Versionen mit den aktivierten Flags #enable-webmcp-testing und #devtools-webmcp-support.
  • Kenntnisse in HTML, CSS, JavaScript und TypeScript
  • Vertrautheit mit dem JSON-Schema.

2. Projekt einrichten

Google-Konto

Wenn Sie noch kein privates Google-Konto haben, müssen Sie ein Google-Konto erstellen.

Melden Sie sich in der Google Cloud Console an.

Melden Sie sich mit einem privaten Google-Konto in der Google Cloud Console an.

Abrechnung aktivieren

Wenn Sie ein privates Rechnungskonto einrichten möchten, aktivieren Sie die Abrechnung in der Cloud Console.

Projekt erstellen (optional)

Wenn Sie kein aktuelles Projekt haben, das Sie für dieses Lab verwenden möchten, erstellen Sie hier ein neues Projekt.

Cloud Shell-Editor öffnen

  1. Klicken Sie auf diesen Link, um direkt zum Cloud Shell-Editor zu gelangen.
  2. Wenn Sie heute an irgendeinem Punkt aufgefordert werden, die Autorisierung zu bestätigen, klicken Sie auf Autorisieren, um fortzufahren. Klicken Sie, um Cloud Shell zu autorisieren.
  3. Wenn das Terminal nicht unten auf dem Bildschirm angezeigt wird, öffnen Sie es:
    • Klicken Sie auf Ansehen.
    • Klicken Sie auf Terminal.Neues Terminal im Cloud Shell-Editor öffnen

Projekt festlegen

  1. Legen Sie im Terminal Ihr Projekt mit diesem Befehl fest: 
    gcloud config set project [PROJECT_ID]
    Beispiel: gcloud config set project lab-project-id-example Projekt-ID im Cloud Shell Editor-Terminal festlegen
  2. Die folgende Meldung wird angezeigt: Updated property [core/project].

Lokale Einrichtung und Einrichtung des Arbeitsbereichs

  1. Klonen Sie das Projekt-Repository in Ihrem Terminal (oder Cloud Shell-Terminal) und wechseln Sie in das Projektverzeichnis: 
    git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
cd mont-royal
  2. Wechseln Sie zum Ordner ecommerce-ai-enhancements/starter: 
    cd ecommerce-ai-enhancements/starter
  3. Installieren Sie die Abhängigkeiten mit pnpm: 
    pnpm install
  4. Starten Sie den lokalen Entwicklungsserver: 
    pnpm dev
    Öffnen Sie Ihren Browser und rufen Sie http://localhost:5173 auf, um den Store Mont-Royal Plein Air aufzurufen.

(Optional) WebMCP-Inspector-Erweiterung installieren

Um die Arbeit mit WebMCP zu erleichtern, können Sie den WebMCP Model Context Tool Inspector installieren. Nach der Installation benötigen Sie einen Gemini API-Schlüssel, um das Tool zu verwenden:

  • Rufen Sie AI Studio auf.
  • Klicken Sie auf die Schaltfläche API-Schlüssel erstellen, um einen neuen Gemini API-Schlüssel zu generieren, der mit dem Projekt verknüpft ist, das Sie in diesem Schritt eingerichtet haben.
  • Öffnen Sie den WebMCP Model Context Tool Inspector (er wird in der Seitenleiste geöffnet) und klicken Sie auf die Schaltfläche Update Gemini API Key (Gemini-API-Schlüssel aktualisieren).
  • Fügen Sie Ihren API-Schlüssel in das Pop-up ein und speichern Sie ihn.

Diese Erweiterung enthält einen einfachen Agenten, der WebMCP verwenden kann. So können Sie Ihre Website über den Agenten testen, anstatt WebMCP-Tools direkt über die Entwicklertools aufzurufen.

3. Integrierte KI-Modelle im Web

Was ist die Prompt API?

Über die Prompt API können Webanwendungen direkt auf ein kleines, multimodales Sprachmodell zugreifen, das vollständig auf dem Gerät des Nutzers ausgeführt wird. Da die Inferenz lokal ausgeführt wird:

  • Keine Cloud-Latenz: Keine Netzwerk-Roundtrips oder Warteschlangen auf dem Backend-Server.
  • Standardmäßig privat: Prompts und der zugehörige Kontext verlassen das Gerät nie.
  • Keine Kosten: Die Inferenz wird auf der Clienthardware ausgeführt, ohne dass Token abgerechnet werden oder Kosten für das Cloud-Hosting anfallen.
  • Offlinefähig: Funktioniert auch ohne aktive Internetverbindung zuverlässig.

In Chrome wird über die globale LanguageModel-Schnittstelle auf die Prompt API zugegriffen.

// 1. Set your expected inputs and outputs. This is multimodal, so you can
// include other types here, too
const languages = {
   expectedInputs: [{type: "text", languages: ["en"]}],
   expectedOutputs: [{type: "text", languages: ["en"]}],
}

// 2. Check availability. Always pass in your expected inputs and outputs,
// as some models may only support some inputs and outputs
const availability = await LanguageModel.availability(languages);
// 'available', 'downloading', or 'unavailable'

// 3. Create an isolated session with system prompt and language constraints
const session = await LanguageModel.create({
  ...languages,
  // Optional: add initial context to your session, like a system prompt
  initialPrompts: [
   {
      role: 'system',
      content: 'You are an expert outdoors sales assistant...'
   }
  ]
});

// 4. Define your expected output as JSON Schema
const schema = {
   //...
}

// 5. Prompt the model (supports plain text or structured models)
const result = await session.prompt('Recommend a 3-season tent footprint.', {
  responseConstraint: schema,
});

Übung 1: Empfehlungen basierend auf dem Kaufprozess

Auf E‑Commerce-Websites gibt es in der Regel Karussells oder Upsells mit Artikeln, die häufig zusammen gekauft werden. Bei einer Outdoor-Website ist es möglicherweise sinnvoller, diese Empfehlungen auf dem Browserverlauf zu basieren.

Dazu erstellen Sie eine Empfehlungspipeline mit drei Phasen:

  1. Journey Profiler: Mit der Prompt API analysieren Sie den chronologischen Browserverlauf des Kunden, um die tatsächliche Absicht des Nutzers zu ermitteln.
  2. Produktanfrage: Aus dieser Intention heraus senden Sie eine API-Anfrage an ein gefälschtes Produkt-Backend, um ähnliche Artikel zu erhalten.
  3. Produktempfehlung: Sie geben diese Produkte an die Product API zurück, um sie zu ranken. Die fünf am besten passenden Produkte werden zurückgegeben.

Aufgabe 1.1: Prompt API initialisieren

Anstatt die Prompt API jedes Mal einzeln zu initialisieren, wenn Sie sie verwenden möchten, zentralisieren Sie die Aufrufe in einer einzigen Datei und memoizing die Erstellung durch den Systemprompt, um die Startzeit für mehrere Aufrufe desselben Agents zu verkürzen.

Rufen Sie die Datei src/ai/prompt-api.ts auf und prüfen Sie getPromptSession() in den Zeilen 27–58:

export async function getPromptSession(
  systemPrompt: string = '',
  options: { signal?: AbortSignal } = {}
): Promise<LanguageModel>
  1. Eine im Cache gespeicherte Basissitzung wiederverwenden: In Zeile 21 gibt es bereits eine Cache-Map, baseSessions, die nach Systemaufforderung indexiert wird. Wenn Sie Basismodelle wiederverwenden, anstatt neue zu clone(), wird die Startzeit verkürzt und die Grundeinrichtung wird übernommen, ohne dass sich die einzelnen Sitzungen gegenseitig beeinträchtigen. Geben Sie den Klon zurück. Anrufer können frei mit ihm interagieren, einschließlich destroy(), ohne dass Ihr zwischengespeicherter Stamm verworfen wird.
  2. API-Funktionen erkennen Erkennen Sie, ob die API vorhanden ist, und geben Sie einen Fehler aus, wenn dies nicht der Fall ist.
  3. Modalitäten und Sprachen deklarieren Integrierte Modelle können multimodale Eingaben unterstützen. Sie müssen angeben, welche Modi Sie benötigen und welche Sprachen Sie unterstützen möchten. Alle Inhalte, die Sie an das LLM übergeben, sind auf Englisch.
  4. Prüfen Sie die Verfügbarkeit, bevor Sie etwas erstellen. Auch wenn die API vorhanden ist, gibt es möglicherweise kein Modell, das Ihre Anforderungen erfüllt. Prüfen Sie, ob eine vorhanden ist. Wenn nicht, wird ein Fehler ausgegeben. Wenn der Bericht noch nicht heruntergeladen wurde, wird der Fortschritt des Downloads angezeigt.
  5. Sitzung erstellen Richten Sie die Optionen zum Erstellen einer neuen Prompt API-Sitzung und den Systemprompt (falls vorhanden) ein.

Aufgabe 1.2: Journey-Profiler implementieren

Rufen Sie die Datei src/ai/journey-profiler.ts auf und sehen Sie sich die Zielfunktion in Zeile 42–100 an:

export async function inferJourneyProfile(
  context: ProfilerInputContext,
  catalogMap: ReadonlyMap<string, Product>
): Promise<JourneyProfile>
  1. Verwenden Sie die Funktion aus Aufgabe 1, um eine neue Prompt-Sitzung zu generieren.
  2. Geben Sie dem Modell den bereitgestellten Prompt-Text und verwenden Sie journeyProfileSchema als JSON-Schema für die strukturierte Rückgabe.
  3. Analysieren Sie die Prompt-Ausgabe und entfernen Sie doppelte Zielkategorien.
  4. Ersetzen Sie die hartcodierten String-Rückgaben durch die tatsächlichen Ergebnisse Ihres Prompts.
  5. Wenn die Sitzung beendet ist, wird sie zerstört, um Arbeitsspeicher freizugeben.

Aufgabe 1.3: Synergy-Re-Ranker implementieren

Rufen Sie die Datei src/ai/synergy-reranker.ts auf und sehen Sie sich die Zielfunktion in Zeile 30–71 an:

export async function rankComplementaryGear(
  profile: JourneyProfile,
  candidates: readonly Product[],
  currentProduct?: Product | null,
  cartProducts?: readonly Product[],
  limit: number = 5
): Promise<readonly RecommendedItem[]>
  1. Verwenden Sie die Funktion aus Aufgabe 1, um eine neue Prompt-Sitzung zu generieren.
  2. Geben Sie dem Modell den bereitgestellten Prompt-Text und das generierte Schema vor.
  3. Analysieren Sie die Prompt-Ausgabe.
  4. Gibt die zusammengestellte Empfehlungsliste mit assembleRecommendations zurück.
  5. Wenn die Sitzung beendet ist, wird sie zerstört, um Arbeitsspeicher freizugeben.

Empfehlungspipeline überprüfen

  1. Öffne Chrome, um http://localhost:5173/catalog/tent-mont-tremblant-3p.
  2. Scrollen Sie nach unten zum Abschnitt Für mich.
  3. Sehen Sie sich an, wie die fünf Begleitkarten aktualisiert werden, um Smart-Kit-Kombinationen (z. B. Bodenplanen, Isomatten und leichte Heringe) anstelle von zufälligen Produkten widerzuspiegeln.
  4. Öffnen Sie die Chrome-Entwicklertools-Konsole, um die Ausführungsdauer beider Inferenzschritte in Echtzeit zu prüfen.

(Optional) Aufgabe 1.4: Weitere integrierte KI-Modelle kennenlernen

Es sind mehrere andere integrierte KI-Modelle verfügbar, darunter das Expertenmodell Translator API. Die Komponenten in dieser Codebasis sind bereits mit einem Dienst verbunden, der auf Änderungen in der aktuellen Sprache wartet und die Übersetzung anfordert. Ihre Aufgabe ist es, alles zu verbinden.

Rufen Sie die Datei auf: src/ai/translator.ts

Sehen Sie sich die Zielfunktion createTranslator in Zeile 29–45 an:

export async function createTranslator(
  targetLang: SupportedLanguage
): Promise<Translator | null>
  1. Prüfen Sie, ob die Translator API unterstützt wird, und stellen Sie sicher, dass die Zielsprache nicht Englisch ist (die Inhalte sind standardmäßig auf Englisch).
  2. Erstellen Sie ein Sprachpaar aus Englisch und der Zielsprache und prüfen Sie, ob dieses Paar verfügbar ist.
  3. Erstelle Optionen für den Übersetzer und hänge einen Monitor an, um den Fortschritt beim Herunterladen des Modells anzuzeigen.
  4. Gibt den initialisierten Übersetzer zurück.

Sehen Sie sich als Nächstes die Zielfunktion translate in Zeile 50–58 an:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. Prüfen Sie, ob ein Übersetzer mit getCachedTranslator, der in targetLang übergeben wird, verfügbar ist. Wenn nicht, gib den bereinigten Text zurück.
  2. Wenn ja, verwenden Sie den Übersetzer, um den bereinigten Text zu übersetzen.

Rufen Sie die Datei auf: src/ai/translator.ts

Sehen Sie sich die Zielfunktion render in Zeile 204 an:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. Sprachauswahl aktivieren

4. WebMCP zur Verbesserung der Agent-Erfahrung verwenden

Was ist WebMCP?

Da Nutzer zunehmend autonome und Co-Browsing-Agents verwenden, ist es wichtig, dass Websites sich anpassen. Agenten verlassen sich traditionell auf die Ausführung von Aktionen – Screenshots erstellen und DOM- und Barrierefreiheitsbäume parsen –, um zu bestimmen, wie sie mit einer Website interagieren. Das ist langsam, fehleranfällig und verschwendet Nutzer-Tokens.

WebMCP bietet eine Lösung, indem Entwickler Tools direkt für Agenten bereitstellen können, damit diese mit der Seite interagieren können, auf der sie sich befinden. Agents, die sie unterstützen, können diese Tools wie ein Tool in Ihrem Coding-Harness verwenden. Die Ein- und Rückgabewerte werden von Ihnen vorgegeben.

// Register a tool directly on document.modelContext
document.modelContext.registerTool({
  name: 'get_product_specs',
  title: 'Get Product Specs',
  description: 'Retrieve technical specifications for the active product.',
  inputSchema: {
    type: 'object',
    properties: {
      // ...
    },
  },
  annotations: {
    readOnlyHint: true, // Informs the agent this tool causes no side-effects
  },
  execute: async (input) => {
    return {
      weight: '1.8 kg',
      capacity: '3 persons',
      seasons: '3-season',
    };
  },
});

Wenn ein Agent eine Verbindung zur Webseite herstellt, wird document.modelContext.getTools() abgefragt. Jedes registrierte Tool bietet:

  • name: Programmatische Tool-ID, die von Agents beim Ausführen von Tools verwendet wird (z.B. 'get_product_specs').
  • title: Für Menschen lesbares Anzeigelabel, das von Prüfern und Agent-Schnittstellen verwendet wird (z.B. 'Get Product Specs').
  • description: Eine Beschreibung in einfachem Text, die das Modell darüber informiert, was das Tool macht und wann es aufgerufen werden soll. So ermittelt ein KI-Agent, ob er das Tool aufrufen soll. Beschreiben Sie es daher so genau wie möglich.
  • inputSchema: JSON-Schema, das die akzeptierten Argumente definiert.
  • annotations: Verhaltenshinweise, z. B. { readOnlyHint: true } für schreibgeschützte Tools, die keine Statusnebenwirkungen verursachen.
  • execute: Asynchrone Funktion, die beim Aufrufen des Tools ausgeführt wird.

Aufgabe 2.1: Empfehlungen und Produkt-Tools

Zuerst registrieren Sie ein Tool, damit Agents die Empfehlungen abrufen können, die Sie in der vorherigen Übung erstellt haben.

Rufen Sie die Datei auf: src/components/product/ForYouSection.ts

Sehen Sie sich registerWebMCPTools() in Zeile 71–94 an:

private registerWebMCPTools(): void
  1. Prüfen Sie, ob WebMCP unterstützt wird.
  2. Falls ja, registrieren Sie das Tool.
  • Wählen Sie einen Titel und eine Beschreibung, die einen Agenten dazu anregen, das Tool auszuwählen. Hier ist Prompt-Engineering gefragt.
  • Es gibt keine Eingabe. Fügen Sie daher einfach ein leeres JSON-Schema für Objekte ein.
  • Dieses Tool ist schreibgeschützt.
  • Verwenden Sie in der Funktion „execute“ recommendationStore, um die aktuellen Empfehlungen abzurufen, und geben Sie dann die aktuelle Produkt-ID und die Produktempfehlungen zurück.
  • Fügen Sie ein Abbruchsignal hinzu und fangen Sie es ab, damit kein Fehler ausgegeben wird. So wird sichergestellt, dass das Tool ordnungsgemäß entfernt wird, wenn die Komponente demontiert wird.

Rufen Sie die Datei auf: src/views/ProductView.ts

  1. Wiederholen Sie den Vorgang, um ein get_current_product-Tool zu registrieren. Diesmal wird das vollständige Produkt sowie die Empfehlungen zurückgegeben.

Aufgabe 2.2: Tools in der Warenkorbschublade

Rufen Sie die Datei auf: src/components/cart/CartDrawer.ts

Prüfen Sie registerWebMCPTools() in Zeile 83–114:

private registerWebMCPTools(): void
  1. Registrieren Sie das view_cart-Tool:
  • inputSchema sollte ein Objekt mit einer einzelnen booleschen Option, openDrawer, sein.
  • Sie sollte Lesezugriff haben.
  • Liest die Eingabe als Teil der execute-Funktion, entscheidet, ob der Warenkorb angezeigt oder ausgeblendet werden soll, aktualisiert die recommendationStore und gibt dann die Warenkorbzusammenfassung zurück.
  1. Registrieren Sie das manage_cart-Tool:
  • inputSchema sollte ein Objekt mit items sein, das ein Array von Objekten mit dem action-Enum productID, add, remove und update sowie der Ganzzahl quantity ist.
  • Die execute-Funktion sollte Elemente an this.updateCart übergeben.

Aufgabe 2.3: Tool zum Wechseln der Sprache

WebMCP weiterentwickeln, indem Sie ein Sprach-Tool für externe Agents verfügbar machen

Rufen Sie die Datei auf: src/components/navigation/LanguagePicker.ts

Prüfen Sie registerWebMCPTools() in Zeile 61–63:

private registerWebMCPTools(): void
  1. switch_language-Tool registrieren:
    • Der inputSchema sollte ein Attribut language haben, das ein Enum von SUPPORTED_LANGUAGE_CODES ist.
    • Die execute-Funktion sollte this.switchLanguage mit der angegebenen Sprache aufrufen.

Aufgabe 2.4: Navigationstools im Store

Autonome Agents können im Shop navigieren, zu Produktseiten springen, Kategorien durchsuchen oder Suchvorgänge starten.

Rufen Sie die Datei auf: src/components/navigation/SiteHeader.ts

Prüfen Sie registerWebMCPTools() in Zeile 155–171:

private registerWebMCPTools(): void
  1. Prüfen Sie, ob WebMCP unterstützt wird.
  2. search-Tool registrieren:
    • Das Eingabeschema akzeptiert einen query-String.
    • Rufen Sie in execute die Funktion this.search(input?.query) auf.
  3. go_to_catalog-Tool registrieren:
    • Das Eingabeschema akzeptiert optional activity (Aufzählung von ACTIVITIES) und category (Aufzählung von PRODUCT_CATEGORIES).
    • Rufen Sie in execute die Funktion this.goToCatalog(input?.activity, input?.category) auf.
  4. get_categories_and_activities-Tool registrieren:
    • Schreibgeschütztes Tool ohne Eingabeparameter.
    • Rufen Sie in execute die Funktion this.getCategoriesAndActivities() auf.
  5. go_to_product-Tool registrieren:
    • Für das Eingabeschema ist ein productId-String erforderlich.
    • Rufen Sie in execute die Funktion this.goToProduct(input?.productId) auf.

Mit dem WebMCP-Inspector prüfen

  1. Laden Sie http://localhost:5173/catalog/tent-mont-tremblant-3p in Chrome neu und rufen Sie eine Produktseite auf.
  2. Öffnen Sie die Chrome-Entwicklertools > „Anwendung“ > „WebMCP“.
  3. Sie sollten Ihre WebMCP-Tools sehen: get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities und go_to_product.
  4. Klicken Sie auf einen der Einträge, um die zugehörigen Details und Parameter aufzurufen.
  5. Wählen Sie ein Tool mit Parametern aus, wählen Sie einige Parameter aus und klicken Sie auf Tool ausführen, um das Tool in Aktion zu sehen.
  6. Optional: Wenn Sie das WebMCP Model Context Tool Inspector installiert und eingerichtet haben, öffnen Sie es. Es wird in der Seitenleiste von Chrome geöffnet. Verwenden Sie die Chatoberfläche, um dem Agenten zu sagen, dass er eine Aktion ausführen soll, die Ihrer Meinung nach eines Ihrer Tools aufrufen sollte, und sehen Sie sich an, wie er reagiert.

5. (Optional) Onsite-Agent erstellen

WebMCP-Tools In-Page aufrufen

WebMCP-Tools sind nicht nur für externe Browsererweiterungen oder Drittanbieterbots gedacht, sondern können auch direkt von Ihrer eigenen Anwendung aufgerufen werden. Durch Abfragen von document.modelContext.getTools() kann Ihr clientseitiger Code Tools dynamisch erkennen und ausführen.

Damit können Sie einen KI-Shopping-Assistenten auf Ihrer Website erstellen und die Suchleiste in ein Tool zur Produktfindung auf Grundlage von Eingaben in natürlicher Sprache umwandeln. Statt benutzerdefinierten imperativen Code zu schreiben, um zahlreiche Facettenfilter zu koordinieren, kann Ihre Suchleiste Anfragen in natürlicher Sprache an die Prompt API übergeben. Diese entscheidet dann, welche In-Page WebMCP-Tools aufgerufen werden.

So ermitteln und rufen Sie ein WebMCP-Tool über JavaScript auf:

// getTools() returns a Promise — it must be awaited.
const tools = await document.modelContext.getTools();
const tool = tools.find(t => t.name === 'list_items');

const json = await document.modelContext.executeTool(tool, args);
const result = JSON.parse(json); // executeTool resolves with a DOMString

Aufgabe 3.1: Facettentools in der Seitenleiste

Stellen Sie WebMCP für jede Seitenleistenfacette des Katalogs zur Verfügung, damit KI-Agenten (und Ihr In-Page-Suchassistent) Filter programmatisch ein- und ausschalten können.

Jede Facettenkomponente in src/components/facets/ bietet bereits eine Hilfsmethode in ihrer Klasse und ein exportiertes Eingabeschema in src/utils/filter-schemas.ts:

  1. In src/components/facets/ActivityFacet.ts:
    • Registrieren Sie activity_filter mit activityFilterSchema.
    • Rufen Sie in execute die Funktion this.filterActivity(input?.activity, input?.selected) auf.
  2. In src/components/facets/CategoryFacet.ts:
    • Registrieren Sie category_filter mit categoryFilterSchema.
    • Rufen Sie in execute die Funktion this.filterCategory(input?.category, input?.selected) auf.
  3. In src/components/facets/ConditionFacet.ts:
    • Registrieren Sie condition_filter mit conditionFilterSchema.
    • Rufen Sie in execute die Funktion this.filterCondition(input?.condition, input?.selected) auf.
  4. In src/components/facets/PriceFacet.ts:
    • Registrieren Sie price_filter mit priceFilterSchema.
    • Rufen Sie in execute die Funktion this.filterPrice(input?.priceRange || input?.bracket, input?.selected) auf.
  5. In src/components/facets/WeightFacet.ts:
    • Registrieren Sie weight_filter mit weightFilterSchema.
    • Rufen Sie in execute die Funktion this.filterWeight(input?.weightRange || input?.bracket, input?.selected) auf.
  6. In src/components/facets/RatingFacet.ts:
    • Registrieren Sie rating_filter mit ratingFilterSchema.
    • Rufen Sie in execute die Funktion this.filterRating(input?.minRating || input?.rating, input?.selected) auf.
  7. In src/components/facets/SearchFacet.ts:
    • Registrieren Sie keyword_filter mit keywordFilterSchema.
    • Rufen Sie in execute die Funktion this.updateKeyword(input?.keyword) auf.

Denken Sie daran, wie in Schritt 2 beschrieben, nach WebMCP-Unterstützung zu suchen und { signal: this.signal } mit .catch(() => {}) zu übergeben.

Aufgabe 3.2: Tools für die Katalogansicht

Registrieren Sie jetzt die Tools für die Auflistung auf Katalogebene, das Zurücksetzen von Filtern und die semantische Suche auf document.modelContext.

Rufen Sie die Datei auf: src/views/CatalogView.ts

Prüfen Sie registerWebMCPTools() in Zeile 125–140:

private registerWebMCPTools(): void
  1. Prüfen Sie, ob WebMCP unterstützt wird.
  2. list_items-Tool registrieren:
    • Sie verwendet keine Eingabeparameter und ist schreibgeschützt.
    • Die Funktion execute sollte this.getItemsSummary() aufrufen.
  3. reset_filters-Tool registrieren:
    • Es werden keine Eingabeparameter benötigt.
    • Die Funktion execute sollte this.resetFilters() aufrufen.
  4. semantic_catalog_filter-Tool registrieren:
    • Verwenden Sie semanticCatalogFilterSchema.
    • Die Funktion execute sollte interpretAndApplySemanticFilter(input.query) aufrufen.

Aufgabe 3.3: Semantischen Filter-Agent orchestrieren

Jetzt ist es an der Zeit, alles zu verkabeln. Bei dieser Aufgabe wird die Suche in eine semantische Pipeline umgewandelt, die das Tool semantic_catalog_filter unterstützt:

Rufen Sie die Datei auf: src/ai/catalog-semantic-filter.ts

Sehen Sie sich prewarmSemanticFilterSession() in Zeile 84–88 an:

export async function prewarmSemanticFilterSession(): Promise<void>
  1. Prüfen Sie, ob warmSession bereits vorhanden ist. Wenn ja, geben Sie die Funktion frühzeitig zurück.
  2. Eine Prompt API-Sitzung mit SEMANTIC_FILTER_SYSTEM_PROMPT mithilfe von getPromptSession() vorwärmen und in warmSession speichern. Schließen Sie den Code in einen try/catch-Block ein, damit die Suche auch dann noch ordnungsgemäß ausgeführt werden kann, wenn das Prewarming fehlschlägt.

Prüfen Sie inferSearchFacets() in den Zeilen 93–134:

async function inferSearchFacets(
  searchTerm: string,
  cachedJourney: JourneyProfile | null
): Promise<{ parsed: SemanticFilterResponse; cacheHit: boolean }>
  1. Fordern Sie die vorab aufgewärmte Sitzung von warmSession an, falls verfügbar (und setzen Sie warmSession auf null zurück), oder erstellen Sie eine neue Sitzung mit getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
  2. Geben Sie promptText als Prompt für das Modell ein und verwenden Sie semanticFilterSchema als responseConstraint.
  3. Parsen Sie das zurückgegebene JSON, speichern Sie das geparste Ergebnis mit cacheKey im persistenten Cache und beenden Sie die Sitzung in einem finally-Block.

Prüfen Sie applyFacetsViaWebMCP() in den Zeilen 139–270:

async function applyFacetsViaWebMCP(
  searchTerm: string,
  parsed: SemanticFilterResponse
): Promise<{ appliedFilters: SemanticFilterResult['appliedFilters']; toolsExecuted: string[] }>
  1. Mit await document.modelContext.getTools() können Sie registrierte Tools auf document.modelContext finden.
  2. Setzen Sie Filter zurück, um mit einem sauberen Datensatz zu beginnen, indem Sie await executeFacet('reset_filters', {}) aufrufen.
  3. Wenden Sie aktive Attribute gleichzeitig mit await Promise.all(facetTasks) an.

Prüfen Sie interpretAndApplySemanticFilter() in den Zeilen 272–316:

export async function interpretAndApplySemanticFilter(
  searchTerm: string
): Promise<SemanticFilterResult>
  1. Rufen Sie inferSearchFacets(searchTerm, cachedJourney) auf, um Suchfacetten abzuleiten.
  2. Wenden Sie die abgeleiteten Facetten mit applyFacetsViaWebMCP(searchTerm, parsed) auf den Katalog an.

In-Page-Agent überprüfen

  1. Rufen Sie http://localhost:5173/catalog auf.
  2. Geben Sie oben in die Suchleiste Folgendes ein: "lightweight 3 season tent for wet hikes"
  3. Sehen Sie sich an, wie die Prompt API die Anfrage analysiert und activity_filter (Wandern), category_filter (Zelte) und condition_filter (Nass) aufruft. Der Katalog wird sofort auf passende Ausrüstung eingegrenzt, ohne dass manuell Kontrollkästchen angeklickt werden müssen.

6. Das haben Sie gelernt

Glückwunsch! Sie haben eine E-Commerce-Anwendung in eine intelligente, agentenorientierte Anwendung umgewandelt, die vollständig auf On-Device-KI und Standard-Webplattform-APIs basiert.

Das haben Sie erstellt:

  • On-Device Prompt API: Synthetisierte Browserverlauf-Zeitachsen mit LanguageModel, um JourneyProfile-Kontext in Echtzeit zu generieren, und eine rankComplementaryGear-Synergie-Engine mit strukturierten JSON-Schemas (responseConstraint) erstellt.
  • WebMCP-Komponententools: Registrierte modulare, gekapselte Tools für UI-Komponenten (get_recommendations, get_current_product, view_cart, manage_cart) über document.modelContext.
  • Agent-Forward-Architektur: Die Ausführung von Tools wurde mit der Chrome-Erweiterung WebMCP Inspector getestet und überprüft.
  • On-Site-In-Page-Agent: Clientseitige Tools werden direkt im Browser orchestriert, um die mehrdimensionale Suche im Katalog in natürlicher Sprache über die Suchleiste in der Kopfzeile der Website zu ermöglichen.
  • Spezialisierte On-Device-KI-Modelle: Dynamische On-Device-Übersetzung mit Translator.

Wichtige Tipps:

  1. Keine Latenz und hoher Datenschutz: On-Device-Modelle wie Gemini Nano machen Cloud-API-Schlüssel, Netzwerklatenz und Bedenken hinsichtlich des Datenabflusses überflüssig.
  2. Strukturierte Ausgaben sind unerlässlich: Durch die Verwendung von JSON-Schemas mit responseConstraint wird die kreative Textgenerierung in eine zuverlässige, typsichere Anwendungslogik umgewandelt.
  3. WebMCP bereitet das Web für KI-Agenten vor: Durch die direkte Registrierung von Tools im DOM werden sowohl interne unterstützende Funktionen als auch externe autonome Browser-Agents mit verifizierten, deterministischen Aktionen ausgestattet.
  4. Modell Vorschläge machen lassen, nicht ausführen: Wenn Sie das Modell auf ein enum Ihrer registrierten Tools beschränken und das Ergebnis selbst weiterleiten, bleibt das Verhalten des Agents nachvollziehbar und es wird verhindert, dass Aktionen erfunden werden.