Tarayıcı yapay zeka özellikleriyle e-ticaret ödeme sürecini iyileştirme

1. Giriş

Modern web geliştirme, yapay zeka kullanımı için bulut tabanlı gidiş dönüşlere alternatif sunar. Chrome, çeviri için küçük uzman modellerinden yetenekli özetlenmiş tam dil modellerine kadar her şeyi kullanmanıza olanak tanıyan yerleşik yapay zeka API'lerini göndermeye başladı. Bu API'ler, kullanıcılarınız veya sizin için jeton maliyeti olmadan, cihazlarında gizli olarak çalışır.

Aynı zamanda, yapay zeka aracıları kullanıcıların web uygulamalarıyla etkileşim kurması için yeni bir yol sunar. Web deneyiminizi WebMCP ile aracıya hazır hale getirmek, ekran görüntüleri ve DOM kazıma gerektiren geleneksel etkinleştirmeye kıyasla daha doğru sonuçlar sunarken jeton kullanımını azaltmaya yardımcı olabilir.

Bu codelab'de, açık hava ekipmanları e-ticaret sitesi olan Mont-Royal Plein Air üzerinde çalışacaksınız. Yerleşik yapay zeka API'lerini ve WebMCP'yi oluşturup entegre ederek şunları yapmayı öğreneceksiniz:

  1. Göz atma geçmişinden müşteri amacını çıkarın ve cihaz üzerinde modelleri kullanarak müşteriler için dinamik olarak öneriler oluşturun.
  2. Ajanların ve tarayıcı asistanlarının siteye göz atmak, ürünleri ve önerileri incelemek ve kullanıcının alışveriş sepetini yönetmek için kullanabileceği araçları kullanıma sunun.
  3. (İsteğe bağlı) Küçük boyutlu, cihaz üzerinde çalışan uzman modelleri kullanarak sitenizi anında çevirin.
  4. (İsteğe bağlı) Temel site arama işlevini, harici temsilcilerin kullandığı araçlarla desteklenen bir site içi temsilciye dönüştürün.

Neler öğreneceksiniz?

  • Prompt API'sini kullanma ve bu API'den yapılandırılmış JSON çıkışı zorunlu kılma
  • WebMCP araçlarını kaydetme ve araç bileşimi ile ayrıntı düzeyi hakkında düşünme stratejileri.
  • (İsteğe bağlı) Cihaz üzerinde uzman bir model kullanarak içeriği hızlı bir şekilde çevirmek için Translator API'yi kullanma
  • (İsteğe bağlı) WebMCP araçlarını kendiniz nasıl çağırabilirsiniz?

Ön koşullar

  • Kişisel bir Google Hesabı ve Google Cloud
  • #enable-webmcp-testing ve #devtools-webmcp-support işaretleri etkinleştirilmiş Google Chrome 150 veya sonraki sürümler ya da Canary, Dev veya Beta kanalları.
  • HTML, CSS, JavaScript ve TypeScript hakkında bilgi sahibi olmak
  • JSON şeması hakkında bilgi sahibi olmak.

2. Proje ayarlama

Google hesabı

Kişisel Google Hesabınız yoksa Google Hesabı oluşturmanız gerekir.

Google Cloud Console'da oturum açma

Kişisel bir Google Hesabı kullanarak Google Cloud Console'da oturum açın.

Faturalandırmayı etkinleştir

Kişisel bir faturalandırma hesabı oluşturmak için Cloud Console'da faturalandırmayı etkinleştirin.

Proje oluşturma (isteğe bağlı)

Bu laboratuvarda kullanmak istediğiniz mevcut bir projeniz yoksa buradan yeni bir proje oluşturun.

Cloud Shell Düzenleyici'yi açma

  1. Doğrudan Cloud Shell Düzenleyici'ye gitmek için bu bağlantıyı tıklayın.
  2. Bugün herhangi bir noktada yetkilendirmeniz istenirse devam etmek için Yetkilendir'i tıklayın. Cloud Shell'i yetkilendirmek için tıklayın.
  3. Terminal ekranın alt kısmında görünmüyorsa açın:
    • Görünüm’ü tıklayın.
    • Terminal'i tıklayın.Cloud Shell Düzenleyici'de yeni terminal açma

Projenizi ayarlama

  1. Terminalde şu komutu kullanarak projenizi ayarlayın: 
    gcloud config set project [PROJECT_ID]
    Örnek: gcloud config set project lab-project-id-example Cloud Shell Düzenleyici terminalinde proje kimliğini ayarlama
  2. Şu mesajı görürsünüz: Updated property [core/project].

Yerel ve çalışma alanı kurulumu

  1. Terminalinizde (veya Cloud Shell terminalinde) proje deposunu klonlayın ve proje dizinine gidin: 
    git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
cd mont-royal
  2. ecommerce-ai-enhancements/starter klasörüne gidin: 
    cd ecommerce-ai-enhancements/starter
  3. Bağımlılıkları pnpm ile yükleyin: 
    pnpm install
  4. Yerel geliştirme sunucusunu başlatın: 
    pnpm dev
    http://localhost:5173 adresine giderek tarayıcınızda Mont-Royal Plein Air mağazasını görüntüleyin.

(İsteğe bağlı) WebMCP Inspector uzantısını yükleyin

WebMCP ile çalışmayı kolaylaştırmak için WebMCP Model Context Tool Inspector'ı yükleyebilirsiniz. Yüklendikten sonra kullanmak için Gemini API anahtarı almanız gerekir:

  • AI Studio'ya gidin.
  • Bu adımda daha önce ayarladığınız projeyle ilişkili yeni bir Gemini API anahtarı oluşturmak için API Anahtarı Oluştur düğmesini tıklayın.
  • WebMCP Model Context Tool Inspector'ı (yan panelde açılır) açın ve Update Gemini API Key (Gemini API Anahtarını Güncelle) düğmesini tıklayın.
  • API anahtarınızı pop-up'a yapıştırıp kaydedin.

Bu uzantıda, WebMCP'yi kullanabilen temel bir aracı bulunur. Bu sayede, WebMCP araçlarını doğrudan Geliştirici Araçları üzerinden çağırmak yerine web sitenizi bu uzantı üzerinden deneyebilirsiniz.

3. Web'deki yerleşik yapay zeka modelleri

Prompt API nedir?

Prompt API, web uygulamalarına tamamen kullanıcının cihazında çalışan küçük ve çok formatlı bir dil modeline doğrudan erişim imkanı verir. Çıkarım yerel olarak yürütüldüğünden:

  • Sıfır bulut gecikmesi: Ağda gidiş dönüş veya arka uç sunucusu kuyruğu yoktur.
  • Varsayılan olarak gizli: İstemler ve bunlara iletilen bağlamlar hiçbir zaman cihazdan ayrılmaz.
  • Sıfır maliyet: Çıkarım, istemci donanımında jeton faturalandırması veya bulut barındırma giderleri olmadan çalışır.
  • Çevrimdışı kullanılabilir: Etkin bir internet bağlantısı olmasa bile güvenilir şekilde çalışır.

Chrome'da Prompt API'ye genel LanguageModel arayüzü üzerinden erişilir.

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

Alıştırma 1: Yolculuğa dayalı öneriler

E-ticaret sitelerinde genellikle "sıklıkla birlikte satın alınan" öğelerin bantları veya ek satışları bulunur. Örneğin, açık hava temalı bir site için bu önerileri tarama geçmişine göre oluşturmak daha faydalı olabilir.

Bunu yapmak için üç aşamalı bir öneri ardışık düzeni oluşturacaksınız:

  1. Yolculuk profili oluşturucu: Prompt API'yi kullanarak müşterinin kronolojik göz atma zaman çizelgesini analiz edip kullanıcının gerçek macera amacını tahmin etmeye çalışırsınız.
  2. Ürün sorgusu: Bu amaçla, ilgili öğeleri almak için sahte bir ürün arka ucuna API isteği gönderirsiniz.
  3. Ürün önerisi: Bu ürünleri sıralamak için Product API'ye geri iletirsiniz. Böylece, kullanıcının görüntülediği ürünle en uyumlu beş ürün gösterilir.

Görev 1.1: Prompt API'yi başlatma

Prompt API'yi her kullanmak istediğinizde ayrı ayrı başlatmak yerine, çağrıları tek bir dosyada merkezileştirirsiniz. Aynı aracıya yapılan birden fazla çağrının başlatma süresini azaltmak için sistem istemiyle oluşturma işlemini memoize edersiniz.

Dosyaya gidin src/ai/prompt-api.ts ve 27-58. satırlardaki getPromptSession() öğesini inceleyin:

export async function getPromptSession(
  systemPrompt: string = '',
  options: { signal?: AbortSignal } = {}
): Promise<LanguageModel>
  1. Önbelleğe alınmış bir temel oturumu yeniden kullanın. 21. satırda, baseSessions, sistem istemiyle anahtarlanmış bir önbellek haritası zaten var. clone() yeni modeller oluşturmak yerine temel modelleri yeniden kullanmak, başlatma süresini kısaltır ve her oturumun birbiriyle etkileşime girmesini önleyerek temel kurulumu devralır. Klonu döndürün: Arayanlar, önbelleğe alınmış tabanınızı atmadan klonla serbestçe etkileşimde bulunabilir (destroy() dahil).
  2. API'yi özellik algılama ile tespit edin. API'nin mevcut olup olmadığını algılayın, mevcut değilse hata verin.
  3. Modlarınızı ve dillerinizi beyan edin. Yerleşik modeller, çok formatlı girişi destekleyebilir. Hangi modlara ihtiyacınız olduğunu ve hangi dilleri desteklemek istediğinizi belirtmeniz gerekir. Büyük dil modeline ilettiğiniz tüm içerikler İngilizce olmalıdır.
  4. İçerik oluşturmadan önce kullanılabilirliği kontrol edin. API mevcut olsa bile, gereksinimlerinizi karşılayan bir model olmayabilir. Bir tane olup olmadığını kontrol edin. Aksi takdirde hata verin. Henüz indirilmediyse raporun indirme ilerleme durumunu bildirin.
  5. Oturumu oluşturun. Yeni bir Prompt API oturumu oluşturmak için seçenekleri ve varsa sistem istemini ayarlayın.

Görev 1.2: Yolculuk profili oluşturucuyu uygulama

Dosyaya src/ai/journey-profiler.ts gidin ve 42-100. satırlardaki hedef işlevi inceleyin:

export async function inferJourneyProfile(
  context: ProfilerInputContext,
  catalogMap: ReadonlyMap<string, Product>
): Promise<JourneyProfile>
  1. Kullanılacak yeni bir istem oturumu oluşturmak için 1. görevdeki işlevi kullanın.
  2. Yapılandırılmış dönüş için journeyProfileSchema öğesini JSON şeması olarak kullanarak modeli sağlanan istem metniyle istemleyin.
  3. İstem çıkışını ayrıştırın ve hedef kategorilerin yinelenenlerini kaldırın.
  4. Sabit kodlanmış dize döndürmelerini, isteminizden gelen gerçek sonuçlarla değiştirin.
  5. Bellekte yer açmak için oturum bittiğinde oturumu yok edin.

Görev 1.3: Sinerji yeniden sıralayıcıyı uygulama

Dosyaya src/ai/synergy-reranker.ts gidin ve 30-71. satırlardaki hedef işlevi inceleyin:

export async function rankComplementaryGear(
  profile: JourneyProfile,
  candidates: readonly Product[],
  currentProduct?: Product | null,
  cartProducts?: readonly Product[],
  limit: number = 5
): Promise<readonly RecommendedItem[]>
  1. Kullanılacak yeni bir istem oturumu oluşturmak için 1. görevdeki işlevi kullanın.
  2. Modeli, sağlanan istem metni ve oluşturulan şemayla isteme.
  3. İstem çıktısını ayrıştırın.
  4. assembleRecommendations kullanarak oluşturulan öneri listesini döndürün.
  5. Bellekte yer açmak için oturum bittiğinde oturumu yok edin.

Öneri ardışık düzenini doğrulama

  1. Chrome'u açıp http://localhost:5173/catalog/tent-mont-tremblant-3p.
  2. Aşağı kaydırarak Sizin İçin bölümüne gidin.
  3. 5 eşlikçi kartın, rastgele ürünler yerine akıllı kit eşleşmelerini (ör. ayak izi, uyku matı ve hafif kazıklar) yansıtacak şekilde nasıl güncellendiğini inceleyin.
  4. Her iki çıkarım adımının gerçek zamanlı yürütme süresini incelemek için Chrome Geliştirici Araçları Konsolu'nu açın.

(İsteğe bağlı) Görev 1.4: Diğer yerleşik yapay zeka modellerini keşfedin

Translator API uzman modeli de dahil olmak üzere başka yerleşik yapay zeka modelleri de mevcuttur. Bu kod tabanındaki bileşenler, mevcut dildeki değişiklikleri dinleyen ve çevirilerini isteyen bir hizmete zaten bağlanmış durumda. Tüm bunları bağlamak sizin göreviniz.

Dosyaya gidin: src/ai/translator.ts

29-45. satırlarda hedef işlev createTranslator'yı inceleyin:

export async function createTranslator(
  targetLang: SupportedLanguage
): Promise<Translator | null>
  1. Çeviri API'sinin desteklenip desteklenmediğini kontrol edin ve hedef dilin İngilizce olmadığından emin olun (içerik varsayılan olarak İngilizce'dir).
  2. İngilizce'den hedef dile bir dil çifti oluşturun ve bu çiftin kullanılabilir olup olmadığını kontrol edin.
  3. Çevirmen için seçenekler oluşturun ve modelin indirilme ilerleme durumunu gösteren bir monitör ekleyin.
  4. Başlatılan çevirmeni döndürür.

Ardından, 50-58. satırlarda hedef işlev translate'yi inceleyin:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. getCachedTranslator ile targetLang aktarımı yapan bir çevirmen olup olmadığını kontrol edin. Yoksa temiz metni döndürün.
  2. Varsa temiz metni çevirmek için çevirmeni kullanın.

Dosyaya gidin: src/ai/translator.ts

204. satırlarda hedef işlevi render inceleyin:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. Dil seçici bileşenini etkinleştirme

4. Aracı deneyimini iyileştirmek için WebMCP'yi kullanma

WebMCP nedir?

Kullanıcılar otonom ve ortak tarama aracısı kullanmaya başladıkça web sitelerinin bu duruma uyum sağlaması önem kazandı. Ajanlar, bir siteyle nasıl etkileşim kuracaklarını belirlemek için geleneksel olarak etkinleştirmeye (ekran görüntüleri alma, DOM ve erişilebilirlik ağaçlarını kazıma) güvenir. Bu yöntem yavaş, hassas ve hataya açıktır ve kullanıcı jetonlarının boşa harcanmasına neden olur.

WebMCP, geliştiricilerin bulundukları sayfayla etkileşim kurmaları için doğrudan aracılara araçlar sunmalarına olanak tanıyarak bu sorunu çözmeye yardımcı olur. Bu araçları destekleyen aracılar, kodlama koşumunuzdaki bir araç gibi, sizin belirlediğiniz net ve yapılandırılmış girişler ve dönüş değerleriyle kullanabilir.

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

Bir aracı web sayfasına bağlandığında document.modelContext.getTools() sorgulanır. Kayıtlı her araç şunları kullanıma sunar:

  • name: Aracı çalıştırırken (ör. 'get_product_specs') aracılar tarafından kullanılan programatik araç tanımlayıcısı.
  • title: Denetçiler ve aracı arayüzleri tarafından kullanılan, kullanıcılar tarafından okunabilen görüntüleme etiketi (ör. 'Get Product Specs').
  • description: Modelin, aracın ne yaptığını ve ne zaman çağrılacağını bildiren düz metin açıklaması. Ajan, aracı çağırıp çağırmaması gerektiğini bu açıklamaya göre belirler. Bu nedenle, açıklayıcı olun.
  • inputSchema: Kabul edilen bağımsız değişkenleri tanımlayan JSON şeması.
  • annotations: Durum yan etkilerine neden olmayan salt okunur araçlar için { readOnlyHint: true } gibi davranış ipuçları.
  • execute: Araç çağrıldığında yürütülen eşzamansız işlev.

Görev 2.1: Öneri ve ürün araçları

Öncelikle, temsilcilerin önceki alıştırmada oluşturduğunuz önerileri almasına olanak tanıyan bir araç kaydederek işe başlayın.

Dosyaya gidin: src/components/product/ForYouSection.ts

71-94. satırlarda registerWebMCPTools() öğesini inceleyin:

private registerWebMCPTools(): void
  1. WebMCP'nin desteklenip desteklenmediğini kontrol edin.
  2. Öyleyse aracı kaydedin.
  • Bir ajanı aracı seçmeye teşvik eden bir başlık ve açıklama seçin. Burada istem mühendisliği yapmanız gerekir.
  • Giriş olmadığından yalnızca boş bir nesne JSON şeması ekleyin.
  • Bu, salt okunur bir araçtır.
  • execute işlevinde, geçerli öneri grubunu almak için recommendationStore kullanın, ardından geçerli ürün kimliğini ve ürün önerileri grubunu döndürün.
  • Bir iptal sinyali ekleyin ve hata vermemesi için bu sinyali yakalayın. Bu, bileşen kaldırıldığında aracın düzgün şekilde kaldırılmasını sağlar.

Dosyaya gidin: src/views/ProductView.ts

  1. get_current_product aracını kaydetmek için aynı işlemi tekrarlayın. Bu kez, önerilerin yanı sıra ürünün tamamını da döndürün.

Görev 2.2: Alışveriş sepeti çekmecesi araçları

Dosyaya gidin: src/components/cart/CartDrawer.ts

83-114. satırlarda registerWebMCPTools() öğesini inceleyin:

private registerWebMCPTools(): void
  1. view_cart aracını kaydedin:
  • inputSchema, tek bir Boole seçeneği olan openDrawer içeren bir nesne olmalıdır.
  • Salt okunur olmalıdır.
  • Girişi execute işlevinin bir parçası olarak okur, alışveriş sepetini gösterip göstermeyeceğine karar verir, recommendationStore değerini yeniler ve alışveriş sepeti özetini döndürür.
  1. manage_cart aracını kaydedin:
  • inputSchema, items ile bir nesne olmalıdır. productID, add, remove ve update action enum'u ve tam sayı quantity ile nesneler dizisidir.
  • execute işlevi, öğeleri this.updateCart işlevine aktarmalıdır.

Görev 2.3: Dil değiştirme aracı

Harici temsilcilere bir dil aracı sunarak WebMCP'yi daha da geliştirin.

Dosyaya gidin: src/components/navigation/LanguagePicker.ts

61-63. satırlarda registerWebMCPTools() öğesini inceleyin:

private registerWebMCPTools(): void
  1. switch_language aracını kaydedin:
    • inputSchema, SUPPORTED_LANGUAGE_CODES enum'ı olan bir language özelliğine sahip olmalıdır.
    • execute işlevi, sağlanan dille this.switchLanguage işlevini çağırmalıdır.

Görev 2.4: Gezinme araçlarını saklama

Özerk temsilcilerin mağazada gezinmesine, ürün sayfalarına gitmesine, kategorilere göz atmasına veya arama başlatmasına olanak tanıyın.

Dosyaya gidin: src/components/navigation/SiteHeader.ts

155-171. satırlarda registerWebMCPTools() öğesini inceleyin:

private registerWebMCPTools(): void
  1. WebMCP'nin desteklenip desteklenmediğini kontrol edin.
  2. search aracını kaydedin:
    • Giriş şeması bir query dizesi alır.
    • execute bölgesinde this.search(input?.query) numaralı telefonu arayın.
  3. go_to_catalog aracını kaydedin:
    • Giriş şeması, isteğe bağlı activity (ACTIVITIES numaralandırması) ve category (PRODUCT_CATEGORIES numaralandırması) değerlerini kabul eder.
    • execute bölgesinde this.goToCatalog(input?.activity, input?.category) numaralı telefonu arayın.
  4. get_categories_and_activities aracını kaydedin:
    • Giriş parametresi olmayan salt okunur araç.
    • execute bölgesinde this.getCategoriesAndActivities() numaralı telefonu arayın.
  5. go_to_product aracını kaydedin:
    • Giriş şeması için productId dizesi gerekir.
    • execute bölgesinde this.goToProduct(input?.productId) numaralı telefonu arayın.

WebMCP inceleyici ile doğrulama

  1. Chrome'da http://localhost:5173/catalog/tent-mont-tremblant-3p simgesini tıklayarak sayfayı yeniden yükleyin ve bir ürün sayfasına gidin.
  2. Chrome Geliştirici Araçları > Uygulama > WebMCP'yi açın.
  3. WebMCP araçlarınızı (get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities ve go_to_product) görmeniz gerekir.
  4. Ayrıntılarını ve parametrelerini görmek için bunlardan birini tıklayın.
  5. Parametre içeren birini veya birkaçını seçip Aracı Çalıştır'ı tıklayarak nasıl çalıştığını görebilirsiniz.
  6. (İsteğe bağlı) WebMCP Model Context Tool Inspector'ı yükleyip ayarladıysanız açın. Bu araç, Chrome'un yan panelinde açılır. Ajanın, araçlarınızdan birini çağırması gerektiğini düşündüğünüz bir işlemi yapmasını istemek için sohbet arayüzünü kullanın ve nasıl yanıt verdiğini görün.

5. (İsteğe bağlı) Tesis içi bir ajan oluşturma

Sayfa içi WebMCP araçlarını çağırma

WebMCP araçları yalnızca harici tarayıcı uzantıları veya üçüncü taraf botlar için değildir. Kendi uygulamanız da bunları doğrudan çağırabilir. İstemci tarafı kodunuz, document.modelContext.getTools() sorgusu göndererek araçları dinamik olarak keşfedip yürütebilir.

Bunu kullanarak sitede yapay zeka destekli bir alışveriş asistanı oluşturabilir, arama çubuğunu doğal dil girişine dayalı bir ürün keşif aracına dönüştürebilirsiniz. Çok sayıda yön filtresini koordine etmek için özel zorunlu kod yazmak yerine, arama çubuğunuz doğal dil sorgularını Prompt API'ye iletebilir. Bu API, hangi sayfa içi WebMCP araçlarının çağrılacağına karar verir.

JavaScript'ten bir WebMCP aracını keşfetmek ve çağırmak için:

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

Görev 3.1: Kenar çubuğu yön araçları

Her katalog kenar çubuğu yönünü WebMCP'ye gösterin. Böylece temsilciler (ve sayfa içi arama asistanınız) filtreleri programatik olarak açıp kapatabilir.

src/components/facets/ içindeki her yön bileşeni, sınıfında yardımcı bir yöntem ve src/utils/filter-schemas.ts içinde dışa aktarılmış bir giriş şeması sağlar:

  1. src/components/facets/ActivityFacet.ts içinde:
    • activityFilterSchema uygulamasını kullanarak activity_filter kaydedin.
    • execute bölgesinde this.filterActivity(input?.activity, input?.selected) numaralı telefonu arayın.
  2. src/components/facets/CategoryFacet.ts içinde:
    • categoryFilterSchema uygulamasını kullanarak category_filter kaydedin.
    • execute bölgesinde this.filterCategory(input?.category, input?.selected) numaralı telefonu arayın.
  3. src/components/facets/ConditionFacet.ts içinde:
    • conditionFilterSchema uygulamasını kullanarak condition_filter kaydedin.
    • execute bölgesinde this.filterCondition(input?.condition, input?.selected) numaralı telefonu arayın.
  4. src/components/facets/PriceFacet.ts içinde:
    • priceFilterSchema uygulamasını kullanarak price_filter kaydedin.
    • execute bölgesinde this.filterPrice(input?.priceRange || input?.bracket, input?.selected) numaralı telefonu arayın.
  5. src/components/facets/WeightFacet.ts içinde:
    • weightFilterSchema uygulamasını kullanarak weight_filter kaydedin.
    • execute bölgesinde this.filterWeight(input?.weightRange || input?.bracket, input?.selected) numaralı telefonu arayın.
  6. src/components/facets/RatingFacet.ts içinde:
    • ratingFilterSchema uygulamasını kullanarak rating_filter kaydedin.
    • execute bölgesinde this.filterRating(input?.minRating || input?.rating, input?.selected) numaralı telefonu arayın.
  7. src/components/facets/SearchFacet.ts içinde:
    • keywordFilterSchema uygulamasını kullanarak keyword_filter kaydedin.
    • execute bölgesinde this.updateKeyword(input?.keyword) numaralı telefonu arayın.

2. adımda öğrendiğiniz gibi, WebMCP desteğini kontrol etmeyi ve { signal: this.signal } ile .catch(() => {})'yi geçmeyi unutmayın.

3.2. Görev: Katalog görünümü araçları

Artık katalog düzeyindeki listeleme, filtre sıfırlama ve semantik arama araçlarını document.modelContext adresinde kaydedebilirsiniz.

Dosyaya gidin: src/views/CatalogView.ts

125-140. satırlarda registerWebMCPTools() öğesini inceleyin:

private registerWebMCPTools(): void
  1. WebMCP'nin desteklenip desteklenmediğini kontrol edin.
  2. list_items aracını kaydedin:
    • Giriş parametresi almaz ve salt okunurdur.
    • execute işlevi this.getItemsSummary() işlevini çağırmalıdır.
  3. reset_filters aracını kaydedin:
    • Giriş parametresi almaz.
    • execute işlevi this.resetFilters() işlevini çağırmalıdır.
  4. semantic_catalog_filter aracını kaydedin:
    • semanticCatalogFilterSchema e-posta adresini kullanın.
    • execute işlevi interpretAndApplySemanticFilter(input.query) işlevini çağırmalıdır.

3.3 Görev: Anlamsal filtre aracısını düzenleme

Şimdi her şeyi bağlama zamanı. Bu görev, aramayı semantic_catalog_filter aracını destekleyen anlamsal bir işlem hattına dönüştürür:

Dosyaya gidin: src/ai/catalog-semantic-filter.ts

84-88. satırlarda prewarmSemanticFilterSession() öğesini inceleyin:

export async function prewarmSemanticFilterSession(): Promise<void>
  1. warmSession öğesinin mevcut olup olmadığını kontrol edin. Mevcutsa erken döndürün.
  2. SEMANTIC_FILTER_SYSTEM_PROMPT kullanarak bir Prompt API oturumunu getPromptSession() ile önceden ısıtın ve warmSession içinde saklayın. Ön ısıtma başarısız olursa arama oluşturma işleminin sorunsuz bir şekilde geri dönebilmesi için try/catch bloğuna sarın.

93-134. satırlarda inferSearchFacets() öğesini inceleyin:

async function inferSearchFacets(
  searchTerm: string,
  cachedJourney: JourneyProfile | null
): Promise<{ parsed: SemanticFilterResponse; cacheHit: boolean }>
  1. Varsa warmSession üzerinden önceden ısıtılmış oturumu talep edin (ve warmSession değerini null olarak sıfırlayın) veya getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT) kullanarak yeni bir oturum oluşturun.
  2. promptText ile modele istem gönderin. semanticFilterSchema, responseConstraint olarak kullanılır.
  3. Döndürülen JSON'ı ayrıştırın, ayrıştırılan sonucu cacheKey ile kalıcı önbellekte saklayın ve oturumu finally bloğunda kaldırın.

139-270. satırlarda applyFacetsViaWebMCP() öğesini inceleyin:

async function applyFacetsViaWebMCP(
  searchTerm: string,
  parsed: SemanticFilterResponse
): Promise<{ appliedFilters: SemanticFilterResult['appliedFilters']; toolsExecuted: string[] }>
  1. document.modelContext kullanarak await document.modelContext.getTools() üzerinde kayıtlı araçları keşfedin.
  2. await executeFacet('reset_filters', {}) numaralı telefonu arayarak filtreleri sıfırlayın ve temiz bir başlangıç yapın.
  3. await Promise.all(facetTasks) kullanarak etkin yönleri eşzamanlı olarak uygulayın.

272-316. satırlarda interpretAndApplySemanticFilter() öğesini inceleyin:

export async function interpretAndApplySemanticFilter(
  searchTerm: string
): Promise<SemanticFilterResult>
  1. inferSearchFacets(searchTerm, cachedJourney) işlevini çağırarak arama yönlerini tahmin edin.
  2. applyFacetsViaWebMCP(searchTerm, parsed) kullanarak çıkarılan yönleri kataloga uygulayın.

Sayfa içi aracıyı doğrulama

  1. http://localhost:5173/catalog adresine gidiş rotasını izle.
  2. Üstteki arama çubuğuna şunu girin: "lightweight 3 season tent for wet hikes"
  3. Prompt API'nin isteği ayrıştırıp activity_filter (Doğa Yürüyüşü), category_filter (Çadır) ve condition_filter (Islak) öğelerini çağırdığını izleyin. Böylece katalog, herhangi bir manuel onay kutusu tıklaması olmadan anında eşleşen ekipmanlarla sınırlandırılır.

6. Öğrendikleriniz

Tebrikler. Bir e-ticaret uygulamasını, tamamen cihaz üzerinde yapay zeka ve standart web platformu API'leri tarafından desteklenen akıllı ve aracı odaklı bir deneyime dönüştürdünüz.

Oluşturduğunuz öğeler:

  • Cihaz Üzerinde İstek API'si: LanguageModel ile kullanıcı göz atma zaman çizelgelerini sentezleyerek gerçek zamanlı JourneyProfile bağlam oluşturdu ve yapılandırılmış JSON şemalarını (responseConstraint) kullanarak rankComplementaryGear sinerji motoru geliştirdi.
  • WebMCP bileşen araçları: document.modelContext aracılığıyla kullanıcı arayüzü bileşenlerinde (get_recommendations, get_current_product, view_cart, manage_cart) kayıtlı modüler, kapsüllenmiş araçlar.
  • Aracı yönlendirme mimarisi: Chrome WebMCP Inspector uzantısı kullanılarak araç yürütme test edildi ve doğrulandı.
  • Site içi sayfa içi temsilci: Site başlığı arama çubuğundan çok yönlü doğal dil kataloğu araması yapmak için doğrudan tarayıcıda istemci tarafı araçları düzenler.
  • Özel cihaz üzerinde yapay zeka modelleri: Translator kullanılarak dinamik cihaz üzerinde çeviri özelliği keşfedildi.

Temel çıkarımlar:

  1. Sıfır gecikme ve yüksek gizlilik: Gemini Nano gibi cihaz üzerinde çalışan modeller, bulut API anahtarlarını, ağ gecikmesini ve veri sızdırma endişelerini ortadan kaldırır.
  2. Yapılandırılmış çıkışlar çok önemlidir: responseConstraint ile JSON şemaları kullanmak, yaratıcı metin oluşturmayı güvenilir ve tür açısından güvenli uygulama mantığına dönüştürür.
  3. WebMCP, web'i yapay zeka ajanlarına hazırlar: Araçları doğrudan DOM'a kaydetmek hem dahili yardımcı özellikleri hem de harici otonom tarayıcı ajanlarını doğrulanmış, deterministik işlemlerle destekler.
  4. Modelin önermesine izin verin, yürütmesine değil: Modeli, kayıtlı araçlarınızın enum ile sınırlandırmak ve sonucu kendiniz göndermek, temsilci davranışının denetlenebilir olmasını sağlar ve eylemler uydurmasını önler.