Meningkatkan kualitas checkout e-commerce dengan kemampuan AI browser

1. Pengantar

Pengembangan web modern menyediakan alternatif untuk perjalanan pulang pergi berbasis cloud untuk penggunaan AI. Chrome telah mulai menyediakan API AI bawaan yang memungkinkan Anda menggunakan semuanya, mulai dari model pakar kecil untuk terjemahan hingga model bahasa lengkap yang disederhanakan dan mumpuni, semuanya tanpa biaya token untuk Anda atau pengguna Anda, yang dijalankan secara pribadi di perangkat mereka.

Pada saat yang sama, agen AI menawarkan cara baru bagi pengguna untuk berinteraksi dengan aplikasi web, dan membuat pengalaman web Anda siap untuk agen dengan WebMCP dapat membantu mengurangi penggunaan token sekaligus memberikan hasil yang lebih akurat daripada aktuasi tradisional yang memerlukan screenshot dan scraping DOM.

Dalam codelab ini, Anda akan mengerjakan Mont-Royal Plein Air, situs e-commerce peralatan luar ruangan. Anda akan mempelajari cara membangun dan mengintegrasikan API AI bawaan dan WebMCP untuk:

1. Menyimpulkan niat pelanggan dari histori penjelajahan dan membuat rekomendasi untuk mereka secara dinamis menggunakan model di perangkat.
2. Mengekspos alat yang dapat digunakan agen dan asisten browser untuk menjelajahi situs, memeriksa produk dan rekomendasi, serta mengelola keranjang belanja pengguna.
3. (Opsional) Terjemahkan situs Anda secara langsung menggunakan model pakar kecil di perangkat.
4. (Opsional) Ubah penelusuran situs dasar menjadi agen di situs yang didukung menggunakan alat yang sama dengan yang digunakan agen eksternal.

Yang akan Anda pelajari

• Cara menggunakan Prompt API dan menerapkan output JSON terstruktur darinya.
• Cara mendaftarkan alat WebMCP dan strategi untuk memikirkan komposisi dan perincian alat.
• (Opsional) Cara menggunakan Translator API untuk menerjemahkan konten dengan cepat menggunakan model pakar di perangkat.
• (Opsional) Cara memanggil alat WebMCP sendiri.

Prasyarat

• Akun Google pribadi dan Google Cloud.
• Google Chrome versi 150+, atau saluran Canary, Dev, atau Beta, dengan mengaktifkan tanda #enable-webmcp-testing dan #devtools-webmcp-support.
• Memahami HTML, CSS, JavaScript, dan TypeScript.
• Memahami Skema JSON.

2. Penyiapan project

Akun Google

Jika belum memiliki Akun Google pribadi, Anda harus membuat Akun Google.

Login ke Konsol Google Cloud

Login ke Konsol Google Cloud menggunakan Akun Google pribadi.

Aktifkan penagihan

Tips: Jika Anda menyiapkan penagihan menggunakan kredit Google Cloud, Anda dapat melewati langkah ini.

Untuk menyiapkan akun penagihan pribadi, aktifkan penagihan di Cloud Console.

Membuat project (opsional)

Jika Anda tidak memiliki project saat ini yang ingin digunakan untuk lab ini, buat project baru di sini.

Membuka editor Cloud Shell

1. Klik link ini untuk langsung membuka Cloud Shell Editor.
2. Jika Anda diminta untuk memberikan otorisasi kapan saja hari ini, klik Authorize untuk melanjutkan.
3. Jika terminal tidak muncul di bagian bawah layar, buka terminal:
   • Klik View.
   • Klik Terminal.

Menetapkan project Anda

1. Di terminal, tetapkan project Anda menggunakan perintah ini:

   gcloud config set project [PROJECT_ID]
   

   Contoh: gcloud config set project lab-project-id-example

   Jika tidak ingat project ID, Anda dapat mencantumkan semua project ID menggunakan gcloud projects list.

   
2. Anda akan melihat pesan berikut: Updated property [core/project].

   Jika Anda melihat WARNING dan diminta Do you want to continue (Y/n)?, kemungkinan Anda telah memasukkan ID project dengan salah. Tekan n, tekan Enter, lalu coba jalankan perintah gcloud config set project lagi.

Penyiapan lokal dan ruang kerja

1. Di terminal (atau terminal Cloud Shell), clone repositori project dan buka direktori project:

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

2. Buka folder ecommerce-ai-enhancements/starter:

   cd ecommerce-ai-enhancements/starter
   

3. Instal dependensi menggunakan pnpm:

   pnpm install
   

4. Mulai server pengembangan lokal:

   pnpm dev
   

   Buka browser Anda ke http://localhost:5173 untuk melihat toko Mont-Royal Plein Air.

(Opsional) Menginstal ekstensi pemeriksa WebMCP

Untuk mempermudah penggunaan WebMCP, Anda dapat menginstal Pemeriksa Alat Konteks Model WebMCP. Setelah diinstal, Anda perlu mendapatkan kunci Gemini API untuk menggunakannya:

• Buka AI Studio.
• Klik tombol Create API Key untuk membuat Gemini API Key baru yang terkait dengan project yang Anda siapkan sebelumnya pada langkah ini.
• Buka WebMCP Model Context Tool Inspector (akan terbuka di panel samping) dan klik tombol Update Gemini API Key.
• Tempelkan kunci API Anda ke pop-up dan simpan.

Ekstensi ini memiliki agen dasar yang dapat menggunakan WebMCP, sehingga Anda dapat mencoba situs Anda melalui ekstensi ini, bukan memanggil alat WebMCP secara langsung melalui DevTools.

3. Model AI bawaan di web

Apa itu Prompt API?

Prompt API memberi aplikasi web akses langsung ke model bahasa multimodal kecil yang berjalan sepenuhnya di perangkat pengguna. Karena inferensi dijalankan secara lokal:

• Latensi cloud nol: Tidak ada perjalanan pulang pergi jaringan atau antrean server backend.
• Pribadi secara default: Perintah, dan konteks apa pun yang diteruskan ke perintah tersebut, tidak pernah keluar dari perangkat
• Tanpa biaya: Inferensi berjalan di hardware klien tanpa penagihan token atau biaya hosting cloud.
• Dapat digunakan secara offline: Berfungsi dengan andal meskipun tanpa koneksi internet yang aktif.

Di Chrome, Prompt API diakses melalui antarmuka LanguageModel global.

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

Praktik terbaik pengelolaan memori:

• Anda dapat clone() sesi, menyalin status jendela konteks lengkapnya, dan menggunakan clone secara independen, sehingga mengurangi waktu yang diperlukan untuk menjalankan sesi baru
• Setelah selesai menggunakan sesi, destroy() sesi tersebut untuk membebaskan resource

Latihan 1: Rekomendasi berbasis perjalanan

Situs e-commerce biasanya memiliki korsel atau penawaran item "sering dibeli bersama". Untuk situs luar ruangan, mungkin lebih berguna untuk membuat rekomendasi tersebut berdasarkan histori penjelajahan.

Untuk melakukannya, Anda akan membuat pipeline rekomendasi tiga tahap:

1. Profiler perjalanan: Dengan menggunakan Prompt API, Anda akan menganalisis linimasa penjelajahan kronologis pelanggan untuk mencoba menyimpulkan niat petualangan sebenarnya pengguna.
2. Kueri produk: Dari maksud tersebut, Anda akan membuat permintaan API ke backend produk palsu untuk mendapatkan item terkait.
3. Rekomendasi produk: Anda akan meneruskan produk tersebut kembali ke Product API untuk memberi peringkat, sehingga menampilkan lima pendamping paling kohesif untuk produk yang dilihat pengguna.

Tugas 1.1: Inisialisasi Prompt API

Daripada melakukan inisialisasi Prompt API satu per satu setiap kali Anda ingin menggunakannya, Anda memusatkan panggilan ke dalam satu file, memoizing pembuatan dengan perintah sistem untuk mengurangi waktu mulai beberapa panggilan ke agen yang sama.

Buka file src/ai/prompt-api.ts dan periksa getPromptSession() di baris 27–58:

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

1. Menggunakan kembali sesi dasar yang di-cache. Sudah ada peta cache di baris 21, baseSessions, yang dikunci oleh perintah sistem. Menggunakan kembali model dasar, bukan clone()membuat model baru, akan mengurangi waktu mulai dan mewarisi penyiapan inti tanpa setiap sesi saling mengganggu. Mengembalikan clone—pemanggil dapat berinteraksi dengannya, termasuk destroy()-nya, dengan bebas tanpa menghapus cache dasar Anda.
2. Deteksi fitur API. Mendeteksi fitur jika API ada, menampilkan error jika tidak ada.
3. Nyatakan modalitas dan bahasa Anda. Model bawaan dapat mendukung input multimodal. Anda perlu mendeklarasikan mode yang Anda butuhkan dan bahasa yang ingin Anda dukung. Semua konten yang Anda teruskan ke LLM dalam bahasa Inggris.
4. Periksa ketersediaan sebelum membuat apa pun. Meskipun API ada, model yang mendukung persyaratan Anda mungkin tidak ada. Periksa apakah ada. Jika tidak, tampilkan error. Jika belum didownload, laporkan progres download.
5. Buat sesi. Siapkan opsi untuk membuat sesi Prompt API baru dengan, dan perintah sistem, jika disertakan

Tugas 1.2: Menerapkan profiler perjalanan

Buka file src/ai/journey-profiler.ts dan periksa fungsi target di baris 42–100:

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

1. Gunakan fungsi dari Tugas 1 untuk membuat sesi perintah baru yang akan digunakan.
2. Berikan perintah pada model dengan teks perintah yang disediakan, menggunakan journeyProfileSchema sebagai Skema JSON untuk respons terstruktur.
3. Parse output perintah dan hapus duplikat kategori target.
4. Ganti hasil string hardcode dengan hasil sebenarnya dari perintah Anda.
5. Hancurkan sesi setelah selesai untuk membebaskan memori.

Baca src/utils/journey-helpers.ts untuk melihat cara pengumpulan konteks diubah menjadi perintah.

Tugas 1.3: Menerapkan pengurutan ulang sinergi

Buka file src/ai/synergy-reranker.ts dan periksa fungsi target di baris 30–71:

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

1. Gunakan fungsi dari Tugas 1 untuk membuat sesi perintah baru yang akan digunakan.
2. Berikan perintah pada model dengan teks perintah dan skema yang dihasilkan.
3. Parse output perintah.
4. Menampilkan daftar rekomendasi yang telah disusun menggunakan assembleRecommendations.
5. Hancurkan sesi setelah selesai untuk membebaskan memori.

Baca src/utils/reranker-helpers.ts dan src/utils/recommendation-schemas.ts untuk melihat cara perintah dan skema dibuat serta rekomendasi disusun dari hasil perintah

Memverifikasi pipeline rekomendasi

1. Buka Chrome untuk http://localhost:5173/catalog/tent-mont-tremblant-3p.
2. Scroll ke bawah ke bagian Untuk Anda.
3. Perhatikan cara 5 kartu pendamping diperbarui untuk mencerminkan pemasangan kit pintar (seperti jejak kaki di tanah, alas tidur, dan pasak ringan) dan bukan produk acak.
4. Buka Konsol Chrome DevTools untuk memeriksa durasi eksekusi real-time dari kedua langkah inferensi.

(Opsional) Tugas 1.4: Jelajahi lebih banyak model AI bawaan

Ada beberapa model AI bawaan lainnya yang tersedia, termasuk model pakar Translator API. Komponen dalam codebase ini sudah terhubung ke layanan yang memproses perubahan dalam bahasa saat ini dan meminta terjemahannya, dan tugas Anda adalah menghubungkan semuanya.

Buka file: src/ai/translator.ts

Periksa fungsi target createTranslator pada baris 29–45:

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

1. Periksa dukungan Translator API dan pastikan bahasa target bukan bahasa Inggris (kontennya dalam bahasa Inggris secara default).
2. Buat pasangan bahasa, dari bahasa Inggris ke bahasa target, dan periksa apakah pasangan tersebut tersedia.
3. Buat opsi untuk penerjemah dan lampirkan monitor yang menampilkan progres mendownload model.
4. Menampilkan penerjemah yang diinisialisasi.

Selanjutnya, periksa fungsi target translate pada baris 50–58:

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

5. Periksa apakah penerjemah tersedia dengan meneruskan getCachedTranslator di targetLang. Jika tidak ada, kembalikan teks yang bersih.
6. Jika ada, gunakan penerjemah untuk menerjemahkan teks yang sudah dibersihkan.

Buka file: src/ai/translator.ts

Periksa fungsi target render pada baris 204:

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

7. Aktifkan komponen Pemilih Bahasa

Baca src/utils/translator-helpers.ts untuk melihat cara kerja cache terjemahan dan langganan.

4. Menggunakan WebMCP untuk meningkatkan kualitas pengalaman agen

Apa itu WebMCP?

Saat pengguna mulai menggunakan agen penjelajahan bersama dan otonom, situs harus beradaptasi. Agen biasanya mengandalkan aktuasi—mengambil screenshot dan meng-scraping DOM serta hierarki aksesibilitas—untuk menentukan cara berinteraksi dengan situs. Cara ini lambat, rentan, dan rawan error, serta menghabiskan token pengguna.

WebMCP membantu mengatasi masalah ini dengan memungkinkan developer menyediakan alat langsung kepada agen untuk berinteraksi dengan halaman yang sedang mereka buka. Agen yang mendukungnya dapat menggunakan alat tersebut seperti alat dalam harness coding Anda, dengan input dan nilai yang ditampilkan yang jelas dan terstruktur yang ditentukan oleh Anda.

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

Saat agen terhubung ke halaman web, agen akan membuat kueri document.modelContext.getTools(). Setiap alat yang terdaftar mengekspos:

• name: ID alat terprogram yang digunakan oleh agen saat menjalankan alat (misalnya, 'get_product_specs').
• title: Label tampilan yang mudah dibaca manusia yang digunakan oleh pemeriksa dan antarmuka agen (misalnya, 'Get Product Specs').
• description: Deskripsi teks biasa yang memberi tahu model tentang fungsi alat dan kapan harus memanggilnya. Dengan begitu, agen dapat menentukan apakah harus memanggil alat tersebut atau tidak, jadi berikan deskripsi yang jelas.
• inputSchema: Skema JSON yang menentukan argumen yang diterima.
• annotations: Petunjuk perilaku, seperti { readOnlyHint: true } untuk alat hanya baca yang tidak menyebabkan efek samping status.
• execute: Fungsi asinkron yang dieksekusi saat alat dipanggil.

Praktik terbaik: Praktik terbaik untuk menentukan seberapa terperinci alat yang dibuat masih terus berkembang. Alat yang lebih terperinci yang dapat digunakan agen untuk membangun perjalanan pengguna mereka sendiri tampaknya muncul sebagai praktik terbaik, bukan alat omnibus, jadi itulah yang disajikan di sini.

Tugas 2.1: Alat rekomendasi dan produk

Anda akan memulai dengan mendaftarkan alat agar agen dapat mengambil rekomendasi yang baru saja Anda buat pada latihan sebelumnya.

Buka file: src/components/product/ForYouSection.ts

Periksa registerWebMCPTools() di baris 71–94:

private registerWebMCPTools(): void

1. Periksa apakah WebMCP didukung.
2. Jika ya, daftarkan alat.

• Pilih judul dan deskripsi yang menarik agen untuk memilih alat—pikirkan rekayasa perintah di sini.
• Tidak ada input, jadi cukup sertakan Skema JSON objek kosong.
• Ini adalah alat hanya baca.
• Dalam fungsi execute, gunakan recommendationStore untuk mendapatkan kumpulan rekomendasi saat ini, lalu tampilkan ID produk saat ini dan kumpulan rekomendasi produk.
• Tambahkan sinyal pembatalan dan tangkap sinyal tersebut agar tidak memunculkan error. Hal ini memastikan alat dihapus dengan benar saat komponen dilepas.

Buka file: src/views/ProductView.ts

3. Ulangi proses yang sama untuk mendaftarkan alat get_current_product, kali ini menampilkan produk lengkap serta rekomendasi

Tips: Pendaftaran alat terjadi di tingkat komponen, sehingga saat komponen disusun bersama untuk membuat halaman, alatnya akan disertakan.

Tugas 2.2: Alat panel samping keranjang

Buka file: src/components/cart/CartDrawer.ts

Periksa registerWebMCPTools() di baris 83–114:

private registerWebMCPTools(): void

1. Daftarkan alat view_cart:

• inputSchema-nya harus berupa objek dengan satu opsi boolean, openDrawer.
• Direktori ini harus bersifat hanya baca.
• Membaca input sebagai bagian dari fungsi execute, memutuskan apakah akan menampilkan atau menyembunyikan keranjang, memuat ulang recommendationStore, lalu menampilkan ringkasan keranjang

2. Daftarkan alat manage_cart:

• inputSchema-nya harus berupa objek dengan items, yang merupakan array objek dengan enum productID, add, remove, dan update action, serta bilangan bulat quantity,
• Fungsi execute-nya harus meneruskan item ke this.updateCart

Tugas 2.3: Alat pengalih bahasa

Memanfaatkan WebMCP lebih lanjut dengan mengekspos alat bahasa ke agen eksternal.

Buka file: src/components/navigation/LanguagePicker.ts

Periksa registerWebMCPTools() di baris 61–63:

private registerWebMCPTools(): void

1. Daftarkan alat switch_language:
   • inputSchema harus memiliki properti language yang merupakan enum SUPPORTED_LANGUAGE_CODES.
   • Fungsi execute-nya harus memanggil this.switchLanguage dengan bahasa yang diberikan.

Tugas 2.4: Alat navigasi toko

Memungkinkan agen otonom menavigasi toko, membuka halaman produk, menjelajahi kategori, atau memulai penelusuran.

Buka file: src/components/navigation/SiteHeader.ts

Periksa registerWebMCPTools() di baris 155–171:

private registerWebMCPTools(): void

1. Periksa apakah WebMCP didukung.
2. Daftarkan alat search:
   • Skema input menggunakan string query.
   • Di execute, panggil this.search(input?.query).
3. Daftarkan alat go_to_catalog:
   • Skema input menerima activity opsional (enum ACTIVITIES) dan category (enum PRODUCT_CATEGORIES).
   • Di execute, panggil this.goToCatalog(input?.activity, input?.category).
4. Daftarkan alat get_categories_and_activities:
   • Alat hanya baca tanpa parameter input.
   • Di execute, panggil this.getCategoriesAndActivities().
5. Daftarkan alat go_to_product:
   • Skema input memerlukan string productId.
   • Di execute, panggil this.goToProduct(input?.productId).

Memverifikasi dengan pemeriksa WebMCP

1. Muat ulang http://localhost:5173/catalog/tent-mont-tremblant-3p di Chrome dan buka halaman produk.
2. Buka Chrome DevTools > Application > WebMCP.
3. Anda akan melihat alat WebMCP Anda: get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities, dan go_to_product.
4. Klik salah satunya untuk melihat detail dan parameternya.
5. Pilih salah satu dengan parameter, pilih beberapa, lalu klik Run Tool untuk melihat cara kerjanya.
6. (Opsional) Jika Anda menginstal dan menyiapkan WebMCP Model Context Tool Inspector, buka alat tersebut—alat ini akan terbuka di panel samping Chrome. Gunakan antarmuka chat untuk memberi tahu agen agar melakukan tindakan yang menurut Anda harus memanggil salah satu alat Anda untuk melihat cara meresponsnya.

5. (Opsional) Membangun agen di situs

Memanggil alat WebMCP di halaman

Alat WebMCP tidak hanya untuk ekstensi browser eksternal atau bot pihak ketiga—aplikasi Anda sendiri dapat memanggilnya secara langsung. Dengan membuat kueri document.modelContext.getTools(), kode sisi klien Anda dapat menemukan dan mengeksekusi alat secara dinamis.

Anda dapat menggunakannya untuk membuat asisten belanja AI di situs, yang mengubah kotak penelusuran menjadi alat penemuan produk berdasarkan input bahasa alami. Daripada menulis kode imperatif kustom untuk mengoordinasikan banyak filter aspek, kotak penelusuran Anda dapat menyerahkan kueri bahasa alami ke Prompt API, yang memutuskan alat WebMCP dalam halaman mana yang akan dipanggil.

Praktik terbaik: Meskipun agen yang Anda buat menggantikan kotak penelusuran, Anda tidak boleh menggunakan LLM untuk penelusuran situs—ada pola dan algoritma yang jauh lebih efisien, akurat, dan mapan untuk hal tersebut. Tindakan ini hanya dimaksudkan untuk mendemonstrasikan pemanggilan alat WebMCP situs Anda sendiri secara non-deterministik.

Untuk menemukan dan memanggil alat WebMCP dari JavaScript:

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

Tugas 3.1: Alat aspek sidebar

Tampilkan setiap aspek sidebar katalog ke WebMCP sehingga agen (dan asisten penelusuran dalam halaman Anda) dapat mengalihkan filter secara terprogram.

Setiap komponen aspek di src/components/facets/ telah menyediakan metode helper pada class-nya dan skema input yang diekspor di src/utils/filter-schemas.ts:

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

Jangan lupa untuk memeriksa dukungan WebMCP dan meneruskan { signal: this.signal } dengan .catch(() => {}) seperti yang Anda pelajari di Langkah 2.

Tugas 3.2: Alat tampilan katalog

Sekarang daftarkan listingan tingkat katalog, reset filter, dan alat penelusuran semantik di document.modelContext.

Buka file: src/views/CatalogView.ts

Periksa registerWebMCPTools() di baris 125–140:

private registerWebMCPTools(): void

1. Periksa apakah WebMCP didukung.
2. Daftarkan alat list_items:
   • Fungsi ini tidak menggunakan parameter input dan bersifat hanya baca.
   • Fungsi execute-nya harus memanggil this.getItemsSummary().
3. Daftarkan alat reset_filters:
   • Fungsi ini tidak memerlukan parameter input.
   • Fungsi execute-nya harus memanggil this.resetFilters().
4. Daftarkan alat semantic_catalog_filter:
   • Gunakan semanticCatalogFilterSchema.
   • Fungsi execute-nya harus memanggil interpretAndApplySemanticFilter(input.query).

Tugas 3.3: Mengatur agen filter semantik

Sekarang saatnya menghubungkan semuanya. Tugas ini mengubah penelusuran menjadi pipeline semantik yang mendukung alat semantic_catalog_filter:

Buka file: src/ai/catalog-semantic-filter.ts

Periksa prewarmSemanticFilterSession() di baris 84–88:

export async function prewarmSemanticFilterSession(): Promise<void>

1. Periksa apakah warmSession sudah ada; jika ya, segera tampilkan.
2. Lakukan pemanasan sesi Prompt API dengan SEMANTIC_FILTER_SYSTEM_PROMPT menggunakan getPromptSession() dan simpan di warmSession. Gabungkan dalam blok try/catch sehingga pembuatan penelusuran masih dapat melakukan penggantian dengan baik jika pemanasan awal gagal.

Periksa inferSearchFacets() di baris 93–134:

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

3. Klaim sesi yang sudah dipanaskan dari warmSession jika tersedia (dan reset warmSession ke null), atau buat sesi baru menggunakan getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
4. Berikan perintah pada model dengan promptText, menggunakan semanticFilterSchema sebagai responseConstraint.
5. Uraikan JSON yang ditampilkan, simpan hasil yang diuraikan dalam cache persisten dengan cacheKey, dan hancurkan sesi dalam blok finally.

Periksa applyFacetsViaWebMCP() di baris 139–270:

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

6. Temukan alat terdaftar di document.modelContext menggunakan await document.modelContext.getTools().
7. Reset filter untuk memulai dari awal dengan memanggil await executeFacet('reset_filters', {}).
8. Terapkan aspek aktif secara bersamaan menggunakan await Promise.all(facetTasks).

Periksa interpretAndApplySemanticFilter() di baris 272–316:

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

9. Simpulkan faset penelusuran dengan memanggil inferSearchFacets(searchTerm, cachedJourney).
10. Terapkan aspek yang disimpulkan ke katalog menggunakan applyFacetsViaWebMCP(searchTerm, parsed).

Memverifikasi agen dalam halaman

1. Buka http://localhost:5173/catalog
2. Di kotak penelusuran atas, masukkan: "lightweight 3 season tent for wet hikes"
3. Saksikan Prompt API mengurai permintaan, memanggil activity_filter (Mendaki), category_filter (Tenda), dan condition_filter (Basah), yang langsung mempersempit katalog menjadi perlengkapan yang cocok tanpa perlu mengklik kotak centang secara manual.

6. Yang telah Anda pelajari

Selamat. Anda telah mengubah aplikasi e-commerce menjadi pengalaman cerdas yang mengutamakan agen dan sepenuhnya didukung oleh AI di perangkat dan API platform web standar.

Yang Anda bangun:

• Prompt API di perangkat: Mensintesis linimasa penjelajahan pengguna dengan LanguageModel untuk menghasilkan konteks JourneyProfile real-time, dan membuat mesin sinergi rankComplementaryGear menggunakan skema JSON terstruktur (responseConstraint).
• Alat komponen WebMCP: Alat modular dan dienkapsulasi yang terdaftar di seluruh komponen UI (get_recommendations, get_current_product, view_cart, manage_cart) melalui document.modelContext.
• Arsitektur penerusan agen: Eksekusi alat yang diuji dan diverifikasi menggunakan ekstensi Chrome WebMCP Inspector.
• Agen dalam halaman di situs: Mengatur alat sisi klien langsung di browser untuk mendukung penelusuran katalog bahasa alami multi-aspek dari kotak penelusuran header situs.
• Model AI di perangkat khusus: Menjelajahi terjemahan dinamis di perangkat menggunakan Translator.

Poin-poin penting:

1. Latensi nol & privasi tinggi: Model di perangkat seperti Gemini Nano menghilangkan kunci API cloud, latensi jaringan, dan masalah eksfiltrasi data.
2. Output terstruktur sangat penting: Menggunakan skema JSON dengan responseConstraint mengubah pembuatan teks kreatif menjadi logika aplikasi yang andal dan aman untuk jenis data.
3. WebMCP menyiapkan web untuk agen AI: Mendaftarkan alat langsung di DOM memungkinkan fitur bantuan internal dan agen browser otonom eksternal melakukan tindakan yang terverifikasi dan deterministik.
4. Biarkan model mengusulkan, bukan mengeksekusi: Membatasi model ke enum alat terdaftar Anda dan mengirimkan sendiri hasilnya membuat perilaku seperti agen dapat diaudit dan mencegahnya membuat tindakan.