Ulepszanie procesu płatności w e-commerce za pomocą funkcji AI w przeglądarce

1. Wprowadzenie

Nowoczesne tworzenie stron internetowych zapewnia alternatywę dla podróży w obie strony do chmury w przypadku korzystania z AI. Chrome zaczął udostępniać wbudowane interfejsy API AI, które umożliwiają korzystanie z różnych modeli, od małych modeli eksperckich do tłumaczenia po zaawansowane skondensowane pełne modele językowe. Wszystko to bez kosztów tokenów dla Ciebie i Twoich użytkowników, z zachowaniem prywatności na ich urządzeniach.

Jednocześnie agenty AI oferują użytkownikom nowy sposób interakcji z aplikacjami internetowymi, a przygotowanie witryny do obsługi agentów za pomocą WebMCP może pomóc w zmniejszeniu zużycia tokenów przy jednoczesnym zapewnieniu dokładniejszych wyników niż tradycyjne działanie, które wymaga zrzutów ekranu i wyodrębniania danych z DOM.

W tym ćwiczeniu będziesz pracować nad Mont-Royal Plein Air, czyli witryną e-commerce z wyposażeniem outdoorowym. Dowiesz się, jak tworzyć i integrować wbudowane interfejsy AI API i WebMCP, aby:

1. Wywnioskuj intencje klienta na podstawie historii przeglądania i dynamicznie twórz dla niego rekomendacje za pomocą modeli na urządzeniu.
2. Udostępnia narzędzia, których agenci i asystenci przeglądarki mogą używać do poruszania się po witrynie, sprawdzania produktów i rekomendacji oraz zarządzania koszykiem na zakupy użytkownika.
3. (Opcjonalnie) Tłumacz witrynę na bieżąco za pomocą małych modeli eksperckich na urządzeniu.
4. (Opcjonalnie) Przekształć podstawowe wyszukiwanie w witrynie w agenta w witrynie, który korzysta z tych samych narzędzi co agenci zewnętrzni.

Czego się nauczysz

• Jak korzystać z interfejsu Prompt API i wymuszać z niego strukturalne dane wyjściowe w formacie JSON.
• Jak rejestrować narzędzia WebMCP i jakie strategie stosować w przypadku kompozycji i szczegółowości narzędzi.
• (Opcjonalnie) Jak używać interfejsu Translator API do szybkiego tłumaczenia treści za pomocą modelu eksperckiego na urządzeniu.
• (Opcjonalnie) Jak samodzielnie wywoływać narzędzia WebMCP.

Wymagania wstępne

• osobiste konto Google i Google Cloud;
• Google Chrome w wersji 150 lub nowszej albo w wersji Canary, deweloperskiej lub beta z włączonymi flagami #enable-webmcp-testing i #devtools-webmcp-support.
• znajomość języków HTML, CSS, JavaScript i TypeScript;
• Znajomość schematu JSON.

2. Konfigurowanie projektu

Konto Google

Jeśli nie masz jeszcze osobistego konta Google, musisz je utworzyć.

Zaloguj się w konsoli Google Cloud

Zaloguj się w konsoli Google Cloud, korzystając z osobistego konta Google.

Włącz płatności

Wskazówka: jeśli skonfigurujesz płatności za pomocą środków w Google Cloud, możesz pominąć ten krok.

Aby skonfigurować osobiste konto rozliczeniowe, włącz płatności w Cloud Console.

Tworzenie projektu (opcjonalnie)

Jeśli nie masz bieżącego projektu, którego chcesz użyć w tym ćwiczeniu, utwórz nowy projekt.

Otwieranie edytora Cloud Shell

1. Kliknij ten link, aby przejść bezpośrednio do edytora Cloud Shell.
2. Jeśli w dowolnym momencie pojawi się prośba o autoryzację, kliknij Autoryzuj, aby kontynuować.
3. Jeśli terminal nie pojawia się u dołu ekranu, otwórz go:
   • Kliknij Wyświetl.
   • Kliknij Terminal.

Ustawianie projektu

1. W terminalu ustaw projekt za pomocą tego polecenia:

   gcloud config set project [PROJECT_ID]
   

   Przykład: gcloud config set project lab-project-id-example

   Jeśli nie pamiętasz identyfikatora projektu, możesz wyświetlić listę wszystkich identyfikatorów projektów za pomocą polecenia gcloud projects list.

   
2. Wyświetli się ten komunikat: Updated property [core/project].

   Jeśli widzisz znak WARNING i pojawia się pytanie Do you want to continue (Y/n)?, prawdopodobnie identyfikator projektu został wpisany nieprawidłowo. Naciśnij n, a następnie Enter i spróbuj ponownie uruchomić polecenie gcloud config set project.

Konfiguracja lokalna i obszaru roboczego

1. W terminalu (lub terminalu Cloud Shell) sklonuj repozytorium projektu i przejdź do katalogu projektu:

   git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
   cd mont-royal
   

2. Przejdź do folderu ecommerce-ai-enhancements/starter:

   cd ecommerce-ai-enhancements/starter
   

3. Zainstaluj zależności za pomocą narzędzia pnpm:

   pnpm install
   

4. Uruchom lokalny serwer programistyczny:

   pnpm dev
   

   Otwórz przeglądarkę i przejdź na stronę http://localhost:5173, aby wyświetlić sklep Mont-Royal Plein Air.

(Opcjonalnie) Instalowanie rozszerzenia WebMCP Inspector

Aby ułatwić sobie pracę z WebMCP, możesz zainstalować inspektora narzędzia kontekstu modelu WebMCP. Po zainstalowaniu musisz uzyskać klucz interfejsu Gemini API, aby z niej korzystać:

• Otwórz AI Studio.
• Kliknij przycisk Utwórz klucz interfejsu API, aby wygenerować nowy klucz interfejsu Gemini API powiązany z projektem skonfigurowanym wcześniej w tym kroku.
• Otwórz inspektora narzędzia kontekstowego modelu WebMCP (otwiera się w panelu bocznym) i kliknij przycisk Update Gemini API Key (Zaktualizuj klucz interfejsu Gemini API).
• Wklej klucz interfejsu API w wyskakującym okienku i zapisz go.

To rozszerzenie ma podstawowego agenta, który może korzystać z WebMCP. Dzięki temu możesz wypróbować swoją witrynę za jego pomocą zamiast wywoływać narzędzia WebMCP bezpośrednio w Narzędziach deweloperskich.

3. Wbudowane modele AI w internecie

Czym jest interfejs Prompt API?

Interfejs Prompt API zapewnia aplikacjom internetowym bezpośredni dostęp do małego, multimodalnego modelu językowego działającego w całości na urządzeniu użytkownika. Ponieważ wnioskowanie jest wykonywane lokalnie:

• Zerowe opóźnienie w chmurze: brak podróży w obie strony w sieci i kolejkowania na serwerze zaplecza.
• Prywatne domyślnie: prompty i wszystkie przekazywane do nich konteksty nigdy nie opuszczają urządzenia.
• Brak kosztów: wnioskowanie odbywa się na sprzęcie klienta bez naliczania opłat za tokeny i kosztów hostingu w chmurze.
• Działa w trybie offline: działa niezawodnie nawet bez aktywnego połączenia z internetem.

W Chrome dostęp do interfejsu Prompt API uzyskuje się za pomocą interfejsu globalnego LanguageModel.

// 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,
});

Sprawdzone metody zarządzania pamięcią:

• Możesz clone() sesję, kopiując pełny stan okna kontekstu, i używać klonów niezależnie, co skróci czas potrzebny na uruchomienie nowej sesji.
• Gdy skończysz korzystać z sesji, destroy() ją, aby zwolnić zasoby.

Ćwiczenie 1. Rekomendacje oparte na ścieżce

Witryny e-commerce zwykle zawierają karuzele lub oferty dodatkowe z produktami „często kupowanymi razem”. W przypadku witryny o tematyce outdoorowej bardziej przydatne może być tworzenie rekomendacji na podstawie historii przeglądania.

Aby to osiągnąć, utworzysz 3-etapowy potok rekomendacji:

1. Profilowanie ścieżki: za pomocą interfejsu Prompt API przeanalizujesz chronologiczną oś czasu przeglądania klienta, aby spróbować wywnioskować prawdziwe zamiary użytkownika.
2. Zapytanie o produkt: na podstawie tej intencji wyślesz żądanie do interfejsu API do fałszywego backendu produktu, aby uzyskać powiązane produkty.
3. Rekomendacja produktu: przekaż te produkty z powrotem do interfejsu Product API, aby je uszeregować i zwrócić 5 najbardziej pasujących produktów do tego, co ogląda użytkownik.

Zadanie 1.1. Inicjowanie interfejsu Prompt API

Zamiast inicjować interfejs Prompt API za każdym razem, gdy chcesz go użyć, możesz scentralizować wywołania w jednym pliku, zapamiętując tworzenie za pomocą promptu systemowego, aby skrócić czas uruchamiania wielu wywołań tego samego agenta.

Otwórz plik src/ai/prompt-api.ts i sprawdź getPromptSession() w wierszach 27–58:

export async function getPromptSession(
  systemPrompt: string = '',
  options: { signal?: AbortSignal } = {}
): Promise<LanguageModel>

1. Ponowne użycie sesji podstawowej w pamięci podręcznej W wierszu 21 znajduje się już mapa pamięci podręcznej, baseSessions, z kluczem w postaci promptu systemowego. Ponowne używanie modeli podstawowych zamiast clone()nowych skraca czas uruchamiania i umożliwia dziedziczenie konfiguracji podstawowej bez wzajemnego zakłócania sesji. Wróć do klona – dzwoniący mogą z nim wchodzić w interakcje, w tym destroy(), bez odrzucania Twojej zapisanej bazy.
2. Wykryj funkcje interfejsu API. Sprawdź, czy interfejs API istnieje, a jeśli nie, zgłoś błąd.
3. Zadeklaruj swoje tryby i języki. Wbudowane modele mogą obsługiwać dane wejściowe multimodalne. Musisz zadeklarować, jakich trybów potrzebujesz i jakie języki chcesz obsługiwać. Wszystkie treści przekazywane do LLM są w języku angielskim.
4. Zanim coś utworzysz, sprawdź dostępność. Nawet jeśli interfejs API istnieje, model, który spełnia Twoje wymagania, może nie być dostępny. Sprawdź, czy jest dostępna. Jeśli nie, zgłoś błąd. Jeśli raport nie został jeszcze pobrany, zgłoś postęp pobierania.
5. Utwórz sesję. Skonfiguruj opcje tworzenia nowej sesji interfejsu Prompt API i w razie potrzeby podaj prompt systemowy.

Zadanie 1.2. Wdrażanie profilera ścieżki

Otwórz plik src/ai/journey-profiler.ts i sprawdź funkcję docelową w wierszach 42–100:

export async function inferJourneyProfile(
  context: ProfilerInputContext,
  catalogMap: ReadonlyMap<string, Product>
): Promise<JourneyProfile>

1. Użyj funkcji z zadania 1, aby wygenerować nową sesję promptu.
2. Poproś model o odpowiedź na podany tekst promptu, używając journeyProfileSchema jako schematu JSON dla uporządkowanej odpowiedzi.
3. Przeanalizuj dane wyjściowe promptu i usuń zduplikowane kategorie docelowe.
4. Zastąp zakodowane na stałe ciągi znaków rzeczywistymi wynikami z promptu.
5. Po zakończeniu sesji usuń ją, aby zwolnić pamięć.

Przeczytaj src/utils/journey-helpers.ts, aby dowiedzieć się, jak zebrane informacje są przekształcane w prompt.

Zadanie 1.3. Zaimplementuj funkcję ponownego rankingu opartą na synergii

Otwórz plik src/ai/synergy-reranker.ts i sprawdź funkcję docelową w wierszach 30–71:

export async function rankComplementaryGear(
  profile: JourneyProfile,
  candidates: readonly Product[],
  currentProduct?: Product | null,
  cartProducts?: readonly Product[],
  limit: number = 5
): Promise<readonly RecommendedItem[]>

1. Użyj funkcji z zadania 1, aby wygenerować nową sesję promptu.
2. Wprowadź do modelu podany tekst prompta i wygenerowany schemat.
3. Przeanalizuj dane wyjściowe prompta.
4. Zwróć utworzoną listę rekomendacji za pomocą assembleRecommendations.
5. Po zakończeniu sesji usuń ją, aby zwolnić pamięć.

Przeczytaj sekcje src/utils/reranker-helpers.ts i src/utils/recommendation-schemas.ts, aby dowiedzieć się, jak generowane są prompt i schemat oraz jak rekomendacje są tworzone na podstawie wyników promptu.

Weryfikowanie potoku rekomendacji

1. Otwórz Chrome, aby http://localhost:5173/catalog/tent-mont-tremblant-3p.
2. Przewiń w dół do sekcji Dla Ciebie.
3. Zwróć uwagę, jak 5 kart dodatkowych aktualizuje się, aby odzwierciedlać inteligentne zestawy (np. ślady stóp, maty do spania i lekkie śledzie), a nie losowe produkty.
4. Otwórz konsolę Narzędzi deweloperskich w Chrome, aby sprawdzić czas wykonania obu kroków wnioskowania w czasie rzeczywistym.

(Opcjonalnie) Zadanie 1.4. Zapoznanie się z większą liczbą wbudowanych modeli AI

Dostępnych jest kilka innych wbudowanych modeli AI, w tym model ekspercki interfejsu Translator API. Komponenty w tej bazie kodu są już połączone z usługą, która nasłuchuje zmian w bieżącym języku i prosi o tłumaczenie. Twoim zadaniem jest połączenie tego wszystkiego.

Przejdź do pliku: src/ai/translator.ts

Sprawdź funkcję docelową createTranslator w wierszach 29–45:

export async function createTranslator(
  targetLang: SupportedLanguage
): Promise<Translator | null>

1. Sprawdź, czy interfejs Translator API jest obsługiwany, i upewnij się, że język docelowy nie jest angielski (domyślnie treść jest w języku angielskim).
2. Utwórz parę językową, np. angielski–język docelowy, i sprawdź, czy jest dostępna.
3. Utwórz opcje dla tłumacza i dołącz monitor pokazujący postęp pobierania modelu.
4. Zwraca zainicjowany obiekt tłumacza.

Następnie sprawdź funkcję docelową translate w wierszach 50–58:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>

5. Sprawdź, czy jest dostępny tłumacz, który może przekazać getCachedTranslator w targetLang. Jeśli nie, zwróć oczyszczony tekst.
6. Jeśli tak, użyj tłumacza, aby przetłumaczyć oczyszczony tekst.

Przejdź do pliku: src/ai/translator.ts

Sprawdź funkcję docelową render w wierszach 204:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>

7. Włącz komponent selektora języka

Przeczytaj src/utils/translator-helpers.ts, aby dowiedzieć się, jak działa pamięć podręczna tłumaczeń i subskrypcja.

4. Używanie WebMCP do poprawy komfortu pracy agenta

Czym jest WebMCP?

W miarę jak użytkownicy zaczynają korzystać z autonomicznych agentów i agentów współprzeglądających, dostosowanie się do tego trendu staje się dla witryn coraz ważniejsze. Agenci tradycyjnie polegają na aktywacji – robieniu zrzutów ekranu oraz analizowaniu DOM i drzewa dostępności – aby określić, jak wchodzić w interakcje z witryną. Jest to powolne, niestabilne i podatne na błędy, a także marnuje tokeny użytkownika.

WebMCP pomaga rozwiązać ten problem, umożliwiając deweloperom udostępnianie agentom narzędzi do bezpośredniej interakcji ze stroną, na której się znajdują. Agenci, którzy je obsługują, mogą używać tych narzędzi tak samo jak narzędzi w Twoim zestawie do kodowania, z jasnymi, uporządkowanymi danymi wejściowymi i wartościami zwracanymi określonymi przez Ciebie.

// 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',
    };
  },
});

Gdy agent połączy się ze stroną, wyśle zapytanie do document.modelContext.getTools(). Każde zarejestrowane narzędzie udostępnia:

• name: identyfikator narzędzia automatyzacji reklamy używany przez agentów podczas wykonywania narzędzi (np. 'get_product_specs').
• title: czytelna dla człowieka etykieta wyświetlana używana przez kontrolerów i interfejsy agentów (np. 'Get Product Specs').
• description: opis w formie zwykłego tekstu informujący model o tym, do czego służy narzędzie i kiedy należy go użyć. W ten sposób agent określa, czy powinien wywołać narzędzie, więc podaj opis.
• inputSchema: schemat JSON określający akceptowane argumenty.
• annotations: wskazówki dotyczące działania, np. { readOnlyHint: true } w przypadku narzędzi tylko do odczytu, które nie powodują efektów ubocznych.
• execute: funkcja asynchroniczna wykonywana po wywołaniu narzędzia.

Sprawdzone metody: sprawdzone metody dotyczące tego, jak szczegółowe powinny być narzędzia, wciąż się rozwijają. Wydaje się, że zamiast narzędzi uniwersalnych najlepszym rozwiązaniem są bardziej szczegółowe narzędzia, za pomocą których agenci mogą tworzyć własne ścieżki użytkowników. Dlatego właśnie takie narzędzia są tu prezentowane.

Zadanie 2.1. Rekomendacje i narzędzia do usług

Zacznij od zarejestrowania narzędzia, aby umożliwić agentom pobieranie rekomendacji utworzonych w poprzednim ćwiczeniu.

Przejdź do pliku: src/components/product/ForYouSection.ts

Sprawdź registerWebMCPTools() w wierszach 71–94:

private registerWebMCPTools(): void

1. Sprawdź, czy WebMCP jest obsługiwany.
2. Jeśli tak, zarejestruj narzędzie.

• Wybierz tytuł i opis, które zachęcą agenta do wybrania narzędzia – pomyśl o inżynierii promptów.
• Nie ma danych wejściowych, więc wystarczy dodać pusty obiekt JSON Schema.
• To narzędzie jest tylko do odczytu.
• W funkcji execute użyj recommendationStore, aby uzyskać bieżący zestaw rekomendacji, a następnie zwróć bieżący identyfikator produktu i zestaw rekomendacji dotyczących produktów.
• Dodaj sygnał przerwania i go przechwyć, aby nie powodował błędu. Dzięki temu narzędzie zostanie prawidłowo usunięte po odmontowaniu komponentu.

Przejdź do pliku: src/views/ProductView.ts

3. Powtórz ten sam proces, aby zarejestrować narzędzie get_current_product. Tym razem zwróć pełny produkt oraz rekomendacje.

Wskazówka: rejestracja narzędzia odbywa się na poziomie komponentu, więc gdy komponenty są łączone w celu utworzenia strony, narzędzia są dołączane do niej.

Zadanie 2.2. Narzędzia panelu koszyka

Przejdź do pliku: src/components/cart/CartDrawer.ts

Sprawdź registerWebMCPTools() w wierszach 83–114:

private registerWebMCPTools(): void

1. Zarejestruj view_cart:

• Jego pole inputSchema powinno być obiektem z jedną opcją logiczną, openDrawer.
• Powinien być tylko do odczytu.
• Odczytuje dane wejściowe w ramach funkcji execute, decyduje, czy wyświetlić lub ukryć koszyk, odświeża recommendationStore, a następnie zwraca podsumowanie koszyka.

2. Zarejestruj manage_cart:

• Jego inputSchema powinien być obiektem z items, czyli tablicą obiektów z wyliczeniem productID, add, remove i update action oraz liczbą całkowitą quantity.
• Funkcja execute powinna przekazywać elementy do this.updateCart

Zadanie 2.3. Narzędzie do zmiany języka

Rozszerz możliwości WebMCP, udostępniając narzędzie językowe zewnętrznym agentom.

Przejdź do pliku: src/components/navigation/LanguagePicker.ts

Sprawdź registerWebMCPTools() w wierszach 61–63:

private registerWebMCPTools(): void

1. Zarejestruj narzędzie switch_language:
   • inputSchema powinna mieć właściwość language, która jest wyliczeniem SUPPORTED_LANGUAGE_CODES.
   • Jej funkcja execute powinna wywoływać funkcję this.switchLanguage z podanym językiem.

Zadanie 2.4. Narzędzia do nawigacji po sklepie

Umożliwia autonomicznym agentom poruszanie się po sklepie, przechodzenie do stron produktów, przeglądanie kategorii i rozpoczynanie wyszukiwania.

Przejdź do pliku: src/components/navigation/SiteHeader.ts

Sprawdź registerWebMCPTools() w wierszach 155–171:

private registerWebMCPTools(): void

1. Sprawdź, czy WebMCP jest obsługiwany.
2. Zarejestruj narzędzie search:
   • Schemat wejściowy przyjmuje ciąg znaków query.
   • W funkcji execute wywołaj funkcję this.search(input?.query).
3. Zarejestruj narzędzie go_to_catalog:
   • Schemat wejściowy akceptuje opcjonalne parametry activity (wyliczenie ACTIVITIES) i category (wyliczenie PRODUCT_CATEGORIES).
   • W funkcji execute wywołaj funkcję this.goToCatalog(input?.activity, input?.category).
4. Zarejestruj narzędzie get_categories_and_activities:
   • Narzędzie tylko do odczytu bez parametrów wejściowych.
   • W funkcji execute wywołaj funkcję this.getCategoriesAndActivities().
5. Zarejestruj narzędzie go_to_product:
   • Schemat wejściowy wymaga productId ciągu tekstowego.
   • W funkcji execute wywołaj funkcję this.goToProduct(input?.productId).

Weryfikacja za pomocą inspektora WebMCP

1. Odśwież http://localhost:5173/catalog/tent-mont-tremblant-3p Chrome i otwórz stronę produktu.
2. Otwórz Narzędzia deweloperskie w Chrome > Aplikacja > WebMCP.
3. Powinny być widoczne narzędzia WebMCP: get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities i go_to_product.
4. Kliknij jeden z nich, aby wyświetlić szczegóły i parametry.
5. Wybierz narzędzie z parametrami, wybierz niektóre z nich i kliknij Uruchom narzędzie, aby zobaczyć, jak działa.
6. (Opcjonalnie) Jeśli masz zainstalowane i skonfigurowane narzędzie WebMCP Model Context Tool Inspector, otwórz je – pojawi się w panelu bocznym Chrome. Użyj interfejsu czatu, aby poprosić agenta o wykonanie działania, które Twoim zdaniem powinno wywołać jedno z Twoich narzędzi. Sprawdź, jak ono zareaguje.

5. (Opcjonalnie) Tworzenie agenta w witrynie

Wywoływanie narzędzi WebMCP na stronie

Narzędzia WebMCP nie są przeznaczone tylko dla zewnętrznych rozszerzeń przeglądarki lub botów innych firm – może je wywoływać bezpośrednio Twoja aplikacja. Wysyłając zapytania do document.modelContext.getTools(), kod po stronie klienta może dynamicznie wykrywać i uruchamiać narzędzia.

Możesz użyć tego narzędzia do stworzenia wirtualnego asystenta zakupów opartego na AI, który przekształci pasek wyszukiwania w narzędzie do odkrywania produktów na podstawie danych wejściowych w języku naturalnym. Zamiast pisać niestandardowy kod imperatywny do koordynowania wielu filtrów aspektów, pasek wyszukiwania może przekazywać zapytania w języku naturalnym do interfejsu Prompt API, który decyduje, które narzędzia WebMCP na stronie mają zostać wywołane.

Sprawdzone metody: chociaż tworzony przez Ciebie agent zastępuje pasek wyszukiwania, nie należy używać modelu LLM do wyszukiwania w witrynie – istnieją znacznie wydajniejsze, dokładniejsze i sprawdzone wzorce oraz algorytmy. Ma to tylko pokazać, jak w sposób niedeterministyczny wywoływać narzędzia WebMCP w swojej witrynie.

Aby wykryć i wywołać narzędzie WebMCP z JavaScriptu:

// 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

Zadanie 3.1. Narzędzia do zawężania na pasku bocznym

Udostępnij każdy aspekt paska bocznego katalogu w WebMCP, aby agenty (i asystent wyszukiwania na stronie) mogły programowo przełączać filtry.

Każdy komponent aspektu w src/components/facets/ ma już metodę pomocniczą w swojej klasie i wyeksportowany schemat wejściowy w src/utils/filter-schemas.ts:

1. W src/components/facets/ActivityFacet.ts:
   • Zarejestruj activity_filter za pomocą narzędzia activityFilterSchema.
   • W funkcji execute wywołaj funkcję this.filterActivity(input?.activity, input?.selected).
2. W src/components/facets/CategoryFacet.ts:
   • Zarejestruj category_filter za pomocą narzędzia categoryFilterSchema.
   • W funkcji execute wywołaj funkcję this.filterCategory(input?.category, input?.selected).
3. W src/components/facets/ConditionFacet.ts:
   • Zarejestruj condition_filter za pomocą narzędzia conditionFilterSchema.
   • W funkcji execute wywołaj funkcję this.filterCondition(input?.condition, input?.selected).
4. W src/components/facets/PriceFacet.ts:
   • Zarejestruj price_filter za pomocą narzędzia priceFilterSchema.
   • W funkcji execute wywołaj funkcję this.filterPrice(input?.priceRange || input?.bracket, input?.selected).
5. W src/components/facets/WeightFacet.ts:
   • Zarejestruj weight_filter za pomocą narzędzia weightFilterSchema.
   • W funkcji execute wywołaj funkcję this.filterWeight(input?.weightRange || input?.bracket, input?.selected).
6. W src/components/facets/RatingFacet.ts:
   • Zarejestruj rating_filter za pomocą narzędzia ratingFilterSchema.
   • W funkcji execute wywołaj funkcję this.filterRating(input?.minRating || input?.rating, input?.selected).
7. W src/components/facets/SearchFacet.ts:
   • Zarejestruj keyword_filter za pomocą narzędzia keywordFilterSchema.
   • W funkcji execute wywołaj funkcję this.updateKeyword(input?.keyword).

Pamiętaj, aby sprawdzić obsługę WebMCP i przekazać { signal: this.signal } z .catch(() => {}), jak opisano w kroku 2.

Zadanie 3.2. Narzędzia widoku katalogu

Zarejestruj teraz informacje o produktach na poziomie katalogu, resetowanie filtrów i narzędzia wyszukiwania semantycznego na stronie document.modelContext.

Przejdź do pliku: src/views/CatalogView.ts

Sprawdź registerWebMCPTools() w wierszach 125–140:

private registerWebMCPTools(): void

1. Sprawdź, czy WebMCP jest obsługiwany.
2. Zarejestruj narzędzie list_items:
   • Nie przyjmuje parametrów wejściowych i jest tylko do odczytu.
   • Jego funkcja execute powinna wywoływać funkcję this.getItemsSummary().
3. Zarejestruj narzędzie reset_filters:
   • Nie przyjmuje parametrów wejściowych.
   • Jego funkcja execute powinna wywoływać funkcję this.resetFilters().
4. Zarejestruj narzędzie semantic_catalog_filter:
   • Użyj konta semanticCatalogFilterSchema.
   • Jego funkcja execute powinna wywoływać funkcję interpretAndApplySemanticFilter(input.query).

Zadanie 3.3. Koordynowanie działania agenta filtra semantycznego

Teraz czas to wszystko połączyć. To zadanie przekształca wyszukiwanie w potok semantyczny, który obsługuje narzędzie semantic_catalog_filter:

Przejdź do pliku: src/ai/catalog-semantic-filter.ts

Sprawdź prewarmSemanticFilterSession() w wierszach 84–88:

export async function prewarmSemanticFilterSession(): Promise<void>

1. Sprawdź, czy warmSession już istnieje. Jeśli tak, zakończ działanie funkcji.
2. Wstępnie rozgrzej sesję Prompt API za pomocą SEMANTIC_FILTER_SYSTEM_PROMPT, używając getPromptSession(), i zapisz ją w warmSession. Umieść go w bloku try/catch, aby w przypadku niepowodzenia wstępnego rozgrzewania można było nadal tworzyć wyszukiwanie.

Sprawdź inferSearchFacets() w wierszach 93–134:

async function inferSearchFacets(
  searchTerm: string,
  cachedJourney: JourneyProfile | null
): Promise<{ parsed: SemanticFilterResponse; cacheHit: boolean }>

3. Przejmij wstępnie rozgrzaną sesję z warmSession, jeśli jest dostępna (i zresetuj warmSession do null), lub utwórz nową sesję za pomocą getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
4. Wyślij prompt do modelu promptText, używając semanticFilterSchema jako responseConstraint.
5. Przeanalizuj zwrócony kod JSON, zapisz przeanalizowany wynik w stałej pamięci podręcznej za pomocą cacheKey i zakończ sesję w bloku finally.

Sprawdź applyFacetsViaWebMCP() w wierszach 139–270:

async function applyFacetsViaWebMCP(
  searchTerm: string,
  parsed: SemanticFilterResponse
): Promise<{ appliedFilters: SemanticFilterResult['appliedFilters']; toolsExecuted: string[] }>

6. Odkrywaj zarejestrowane narzędzia na stronie document.modelContext za pomocą await document.modelContext.getTools().
7. Zresetuj filtry, aby zacząć od nowa, wywołując funkcję await executeFacet('reset_filters', {}).
8. Jednoczesne stosowanie aktywnych aspektów za pomocą await Promise.all(facetTasks).

Sprawdź interpretAndApplySemanticFilter() w wierszach 272–316:

export async function interpretAndApplySemanticFilter(
  searchTerm: string
): Promise<SemanticFilterResult>

9. Wywnioskuj aspekty wyszukiwania, wywołując inferSearchFacets(searchTerm, cachedJourney).
10. Zastosuj wywnioskowane aspekty do katalogu za pomocą applyFacetsViaWebMCP(searchTerm, parsed).

Weryfikowanie agenta na stronie

1. Wejdź na http://localhost:5173/catalog.
2. Na pasku wyszukiwania u góry wpisz: "lightweight 3 season tent for wet hikes"
3. Zobacz, jak interfejs Prompt API analizuje żądanie i wywołuje ikony activity_filter (wędrówki), category_filter (namioty) i condition_filter (mokre), natychmiast zawężając katalog do pasującego sprzętu bez konieczności ręcznego klikania pól wyboru.

6. Czego się dowiedziałeś(-aś)

Gratulacje. Przekształcono aplikację e-commerce w inteligentne rozwiązanie oparte na agentach, które w całości wykorzystuje sztuczną inteligencję na urządzeniu i standardowe interfejsy API platformy internetowej.

Utworzone przez Ciebie treści:

• Interfejs Prompt API na urządzeniu: syntetyzowane osie czasu przeglądania użytkownika z LanguageModel w celu generowania kontekstu w czasie rzeczywistym JourneyProfile i utworzenia rankComplementaryGear silnika synergii przy użyciu uporządkowanych schematów JSON (responseConstraint).
• Narzędzia komponentu WebMCP: zarejestrowane modułowe, zamknięte narzędzia w komponentach interfejsu (get_recommendations, get_current_product, view_cart, manage_cart) za pomocą document.modelContext.
• Architektura z przekazywaniem do agenta: przetestowane i zweryfikowane wykonywanie narzędzi za pomocą rozszerzenia Chrome WebMCP Inspector.
• Agent na stronie: narzędzia po stronie klienta zintegrowane bezpośrednio w przeglądarce, które umożliwiają wieloaspektowe wyszukiwanie w katalogu w języku naturalnym z paska wyszukiwania w nagłówku witryny.
• Specjalistyczne modele AI na urządzeniu: zbadaliśmy dynamiczne tłumaczenie na urządzeniu za pomocą Translator.

Kluczowe wnioski:

1. Brak opóźnień i wysoki poziom prywatności: modele na urządzeniu, takie jak Gemini Nano, eliminują klucze API w chmurze, opóźnienia sieciowe i obawy związane z wydobywaniem danych.
2. Ustrukturyzowane dane wyjściowe są niezbędne: używanie schematów JSON z parametrem responseConstraint przekształca generowanie tekstu kreatywnego w niezawodną logikę aplikacji bezpieczną pod względem typów.
3. WebMCP przygotowuje internet dla agentów AI: rejestrowanie narzędzi bezpośrednio w DOM umożliwia zarówno wewnętrzne funkcje pomocnicze, jak i zewnętrzne autonomiczne agenty przeglądarki z zweryfikowanymi, deterministycznymi działaniami.
4. Pozwól modelowi proponować, a nie wykonywać działań: ograniczenie modelu do enum zarejestrowanych narzędzi i samodzielne wysyłanie wyników sprawia, że zachowanie agenta jest możliwe do sprawdzenia i zapobiega wymyślaniu przez niego działań.