ब्राउज़र में एआई की सुविधाओं का इस्तेमाल करके, ई-कॉमर्स चेकआउट की प्रोसेस को बेहतर बनाना

1. परिचय

मॉडर्न वेब डेवलपमेंट, एआई के इस्तेमाल के लिए क्लाउड पर राउंड ट्रिप का विकल्प देता है. Chrome ने पहले से मौजूद एआई एपीआई उपलब्ध कराने शुरू कर दिए हैं. इनकी मदद से, अनुवाद के लिए छोटे एक्सपर्ट मॉडल से लेकर, बेहतर फ़ुल लैंग्वेज मॉडल तक, हर तरह के मॉडल का इस्तेमाल किया जा सकता है. इसके लिए, आपको या आपके उपयोगकर्ताओं को टोकन का शुल्क नहीं देना होगा. ये मॉडल, उनके डिवाइस पर निजी तौर पर काम करते हैं.

साथ ही, एआई एजेंट, उपयोगकर्ताओं को वेब ऐप्लिकेशन के साथ इंटरैक्ट करने का एक नया तरीका देते हैं. WebMCP की मदद से, वेब ऐप्लिकेशन को एजेंट के साथ काम करने के लिए तैयार करने से, टोकन के इस्तेमाल को कम किया जा सकता है. साथ ही, यह पारंपरिक ऐक्चुएशन की तुलना में ज़्यादा सटीक नतीजे दे सकता है. पारंपरिक ऐक्चुएशन के लिए, स्क्रीनशॉट और डीओएम स्क्रैपिंग की ज़रूरत होती है.

इस कोडलैब में, आपको Mont-Royal Plein Air नाम की ई-कॉमर्स साइट पर काम करना होगा. यह साइट, आउटडोर में इस्तेमाल होने वाले सामान को बेचती है. आपको बिल्ट-इन एआई एपीआई और WebMCP को बनाने और इंटिग्रेट करने का तरीका सिखाया जाएगा, ताकि:

1. ब्राउज़िंग इतिहास से ग्राहक की दिलचस्पी का पता लगाना और उपयोगकर्ता के डिवाइस पर मौजूद मॉडल का इस्तेमाल करके, उनके लिए डाइनैमिक तरीके से सुझाव तैयार करना.
2. ऐसे टूल उपलब्ध कराएं जिनका इस्तेमाल एजेंट और ब्राउज़र असिस्टेंट, साइट पर नेविगेट करने, प्रॉडक्ट और सुझावों की जांच करने, और उपयोगकर्ता की शॉपिंग कार्ट को मैनेज करने के लिए कर सकें.
3. (ज़रूरी नहीं) छोटे और उपयोगकर्ता के डिवाइस पर मौजूद एक्सपर्ट मॉडल का इस्तेमाल करके, अपनी साइट का तुरंत अनुवाद करें.
4. (ज़रूरी नहीं) साइट पर मौजूद बुनियादी खोज की सुविधा को, साइट पर मौजूद एजेंट में बदलें. इसके लिए, वही टूल इस्तेमाल करें जो बाहरी एजेंट इस्तेमाल करते हैं.

आपको क्या सीखने को मिलेगा

• Prompt API का इस्तेमाल कैसे करें और इससे स्ट्रक्चर्ड JSON आउटपुट कैसे पाएं.
• WebMCP टूल और टूल कंपोज़िशन और ग्रैन्युलैरिटी के बारे में सोचने की रणनीतियों को रजिस्टर करने का तरीका.
• (ज़रूरी नहीं) उपयोगकर्ता के डिवाइस पर मौजूद एक्सपर्ट मॉडल का इस्तेमाल करके, कॉन्टेंट का तुरंत अनुवाद करने के लिए Translator API का इस्तेमाल कैसे करें.
• (ज़रूरी नहीं) WebMCP टूल को खुद कॉल करने का तरीका.

ज़रूरी शर्तें

• निजी Google खाता और Google Cloud.
• Google Chrome का वर्शन 150 या उसके बाद का वर्शन या Canary, Dev या Beta चैनल. साथ ही, #enable-webmcp-testing और #devtools-webmcp-support फ़्लैग चालू होने चाहिए.
• एचटीएमएल, सीएसएस, JavaScript, और TypeScript के बारे में जानकारी होना.
• JSON स्कीमा के बारे में जानकारी होना.

2. प्रोजेक्ट सेटअप करना

Google खाता

अगर आपके पास पहले से कोई निजी Google खाता नहीं है, तो आपको Google खाता बनाना होगा.

Google Cloud Console में साइन इन करें

किसी निजी Google खाते का इस्तेमाल करके, Google Cloud Console में साइन इन करें.

बिलिंग की सुविधा चालू करें

अहम जानकारी: अगर आपने Google Cloud क्रेडिट का इस्तेमाल करके बिलिंग सेट अप की है, तो इस चरण को स्किप किया जा सकता है.

निजी बिलिंग खाता सेट अप करने के लिए, Cloud Console में बिलिंग की सुविधा चालू करें.

प्रोजेक्ट बनाएं (ज़रूरी नहीं)

अगर आपको इस लैब के लिए किसी मौजूदा प्रोजेक्ट का इस्तेमाल नहीं करना है, तो यहां जाकर नया प्रोजेक्ट बनाएं.

Cloud Shell एडिटर खोलें

1. सीधे Cloud Shell Editor पर जाने के लिए, इस लिंक पर क्लिक करें.
2. अगर आपको आज किसी भी समय अनुमति देने के लिए कहा जाता है, तो जारी रखने के लिए अनुमति दें पर क्लिक करें.
3. अगर टर्मिनल स्क्रीन पर सबसे नीचे नहीं दिखता है, तो इसे खोलें:
   • देखें क्लिक करें.
   • Terminal पर क्लिक करें.

अपना प्रोजेक्ट सेट करना

1. टर्मिनल में, इस निर्देश का इस्तेमाल करके अपना प्रोजेक्ट सेट करें:

   gcloud config set project [PROJECT_ID]
   

   उदाहरण: gcloud config set project lab-project-id-example

   अगर आपको अपना प्रोजेक्ट आईडी याद नहीं है, तो gcloud projects list का इस्तेमाल करके, अपने सभी प्रोजेक्ट आईडी की सूची देखी जा सकती है.

   
2. आपको यह मैसेज दिखेगा: Updated property [core/project].

   अगर आपको WARNING दिखता है और आपसे Do you want to continue (Y/n)? पूछा जाता है, तो इसका मतलब है कि आपने प्रोजेक्ट आईडी गलत डाला है. n दबाएं, Enter दबाएं, और gcloud config set project निर्देश को फिर से चलाने की कोशिश करें.

लोकल और Workspace सेटअप करना

1. अपने टर्मिनल (या Cloud Shell टर्मिनल) में, प्रोजेक्ट रिपॉज़िटरी को क्लोन करें और प्रोजेक्ट डायरेक्ट्री में जाएं:

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

2. ecommerce-ai-enhancements/starter फ़ोल्डर में जाएं:

   cd ecommerce-ai-enhancements/starter
   

3. pnpm का इस्तेमाल करके डिपेंडेंसी इंस्टॉल करें:

   pnpm install
   

4. लोकल डेवलपमेंट सर्वर शुरू करें:

   pnpm dev
   

   Mont-Royal Plein Air स्टोर देखने के लिए, अपने ब्राउज़र में http://localhost:5173 पर जाएं.

(ज़रूरी नहीं) WebMCP Inspector एक्सटेंशन इंस्टॉल करना

WebMCP के साथ काम करना आसान बनाने के लिए, WebMCP मॉडल कॉन्टेक्स्ट टूल इंस्पेक्टर इंस्टॉल किया जा सकता है. इंस्टॉल करने के बाद, इसका इस्तेमाल करने के लिए आपको Gemini API का पासकोड पाना होगा:

• AI Studio पर जाएं.
• एपीआई पासकोड बनाएं बटन पर क्लिक करके, Gemini API का नया पासकोड जनरेट करें. यह पासकोड, उस प्रोजेक्ट से जुड़ा होगा जिसे आपने इस चरण में सेट अप किया था.
• WebMCP Model Context Tool Inspector खोलें. यह साइड पैनल में खुलता है. इसके बाद, Update Gemini API Key बटन पर क्लिक करें.
• एपीआई पासकोड को पॉप-अप में चिपकाएं और सेव करें.

इस एक्सटेंशन में एक बेसिक एजेंट होता है, जो WebMCP का इस्तेमाल कर सकता है. इससे, DevTools के ज़रिए WebMCP टूल को सीधे तौर पर कॉल करने के बजाय, अपनी वेबसाइट को आज़माया जा सकता है.

3. वेब पर पहले से मौजूद एआई मॉडल

Prompt API क्या है?

Prompt API की मदद से, वेब ऐप्लिकेशन को उपयोगकर्ता के डिवाइस पर पूरी तरह से काम करने वाले छोटे, मल्टीमॉडल लैंग्वेज मॉडल का सीधा ऐक्सेस मिलता है. अनुमान लगाने की प्रोसेस स्थानीय तौर पर होती है, इसलिए:

• क्लाउड में डेटा ट्रांसफ़र में लगने वाला समय कम होना: नेटवर्क राउंडट्रिप या बैकएंड सर्वर क्यूइंग नहीं होती.
• डिफ़ॉल्ट रूप से निजी: प्रॉम्प्ट और उन्हें पास किया गया कोई भी कॉन्टेक्स्ट, डिवाइस से बाहर नहीं जाता
• बिना किसी शुल्क के: अनुमान लगाने की प्रोसेस, क्लाइंट के हार्डवेयर पर चलती है. इसके लिए, टोकन बिलिंग या क्लाउड होस्टिंग के खर्च की ज़रूरत नहीं होती.
• ऑफ़लाइन काम करने की सुविधा: इंटरनेट कनेक्शन न होने पर भी भरोसेमंद तरीके से काम करता है.

Chrome में, Prompt API को ग्लोबल 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,
});

मेमोरी मैनेज करने के सबसे सही तरीके:

• किसी सेशन को clone() किया जा सकता है. इससे, उसकी पूरी कॉन्टेक्स्ट विंडो की स्थिति कॉपी हो जाती है. साथ ही, क्लोन का इस्तेमाल अलग-अलग किया जा सकता है. इससे नया सेशन शुरू करने में लगने वाला समय कम हो जाता है
• किसी सेशन का इस्तेमाल करने के बाद, उसे destroy() करें, ताकि संसाधनों को खाली किया जा सके

पहली कसरत: यात्रा के आधार पर सुझाव

ई-कॉमर्स साइटों पर, आम तौर पर "अक्सर साथ में खरीदे गए" आइटम के कैरसेल या अपसेल होते हैं. आउटडोर साइट जैसी किसी साइट के लिए, ब्राउज़िंग इतिहास के आधार पर सुझाव देना ज़्यादा फ़ायदेमंद हो सकता है.

इसके लिए, आपको सुझाव देने वाली तीन चरणों वाली पाइपलाइन बनानी होगी:

1. यात्रा की जानकारी देने वाला टूल: Prompt API का इस्तेमाल करके, ग्राहक की ब्राउज़िंग टाइमलाइन का विश्लेषण किया जाएगा. इससे यह अनुमान लगाया जा सकेगा कि उपयोगकर्ता को असल में किस तरह की यात्रा करनी है.
2. प्रॉडक्ट के बारे में क्वेरी: इस इंटेंट के आधार पर, आपको मिलते-जुलते आइटम पाने के लिए, फ़र्ज़ी प्रॉडक्ट बैकएंड को एपीआई अनुरोध भेजना होगा.
3. प्रॉडक्ट का सुझाव: आपको उन प्रॉडक्ट को वापस Product API पर भेजना होगा, ताकि उन्हें रैंक किया जा सके. इससे, उपयोगकर्ता को पांच सबसे मिलते-जुलते प्रॉडक्ट दिखेंगे.

टास्क 1.1: Prompt API को शुरू करना

Prompt API का इस्तेमाल करने के लिए, हर बार उसे अलग-अलग शुरू करने के बजाय, कॉल को एक ही फ़ाइल में इकट्ठा करें. साथ ही, सिस्टम प्रॉम्प्ट के ज़रिए बनाए गए कॉन्टेंट को मेमोइज़ करें, ताकि एक ही एजेंट को कई बार कॉल करने पर, स्टार्टअप में लगने वाला समय कम हो जाए.

फ़ाइल src/ai/prompt-api.ts पर जाएं और लाइन 27–58 पर getPromptSession() की जांच करें:

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

1. कैश मेमोरी में सेव किए गए बुनियादी सेशन का फिर से इस्तेमाल करना. लाइन 21, baseSessions पर पहले से ही एक कैश मैप मौजूद है. इसे सिस्टम प्रॉम्प्ट के हिसाब से सेट किया गया है. नए मॉडल clone() करने के बजाय, बेस मॉडल का फिर से इस्तेमाल करने से स्टार्टअप का समय कम हो जाता है. साथ ही, यह मुख्य सेटअप को इनहेरिट करता है. इससे हर सेशन एक-दूसरे में दखल नहीं देता. क्लोन को वापस लाएं—कॉल करने वाले लोग, इसके साथ इंटरैक्ट कर सकते हैं. इसमें destroy() करना भी शामिल है. वे ऐसा बिना किसी रुकावट के कर सकते हैं. इसके लिए, उन्हें आपकी कैश मेमोरी में सेव की गई मूल इमेज को हटाने की ज़रूरत नहीं होगी.
2. एपीआई की सुविधा का पता लगाएं. यह पता लगाएं कि एपीआई मौजूद है या नहीं. अगर मौजूद नहीं है, तो गड़बड़ी का मैसेज दिखाएं.
3. अपनी भाषाएं और मोड बताएं. इनपुट के तौर पर, टेक्स्ट, इमेज, और वीडियो वगैरह का इस्तेमाल किया जा सकता है. आपको यह बताना होगा कि आपको किन मोड की ज़रूरत है और आपको किन भाषाओं में सहायता चाहिए. एलएलएम को दिया गया पूरा कॉन्टेंट अंग्रेज़ी में हो.
4. कोई भी कॉन्टेंट बनाने से पहले, यह देख लें कि वह उपलब्ध है या नहीं. ऐसा हो सकता है कि एपीआई मौजूद होने के बावजूद, आपकी ज़रूरतों के हिसाब से मॉडल उपलब्ध न हो. देखें कि कोई खाता मौजूद है या नहीं. अगर ऐसा नहीं होता है, तो गड़बड़ी का मैसेज दिखाएं. अगर इसे अभी तक डाउनलोड नहीं किया गया है, तो डाउनलोड की प्रोग्रेस की जानकारी दें.
5. सेशन बनाएं. Prompt API के साथ नया सेशन बनाने के लिए विकल्प सेट अप करें. साथ ही, अगर शामिल किया गया है, तो सिस्टम प्रॉम्प्ट भी सेट अप करें

टास्क 1.2: जर्नी प्रोफ़ाइलर को लागू करना

फ़ाइल src/ai/journey-profiler.ts पर जाएं और लाइन 42–100 पर टारगेट फ़ंक्शन की जांच करें:

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

1. इस्तेमाल करने के लिए नया प्रॉम्प्ट सेशन जनरेट करने के लिए, पहले टास्क में दिए गए फ़ंक्शन का इस्तेमाल करें.
2. स्ट्रक्चर्ड डेटा के तौर पर जवाब पाने के लिए, journeyProfileSchema को JSON स्कीमा के तौर पर इस्तेमाल करके, मॉडल को प्रॉम्प्ट टेक्स्ट दें.
3. प्रॉम्प्ट के आउटपुट को पार्स करना और टारगेट कैटगरी से डुप्लीकेट हटाना.
4. हार्डकोड की गई स्ट्रिंग को, प्रॉम्प्ट से मिले असल नतीजों से बदलें.
5. सेशन खत्म होने पर, उसे बंद करें, ताकि मेमोरी खाली हो जाए.

src/utils/journey-helpers.ts पढ़ें और जानें कि कॉन्टेक्स्ट इकट्ठा करने की प्रोसेस को प्रॉम्प्ट में कैसे बदला जाता है.

टास्क 1.3: तालमेल के आधार पर फिर से रैंक करने वाले टूल को लागू करना

फ़ाइल src/ai/synergy-reranker.ts पर जाएं और लाइन 30–71 पर टारगेट फ़ंक्शन की जांच करें:

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

1. इस्तेमाल करने के लिए नया प्रॉम्प्ट सेशन जनरेट करने के लिए, पहले टास्क में दिए गए फ़ंक्शन का इस्तेमाल करें.
2. मॉडल को दिए गए प्रॉम्प्ट टेक्स्ट और जनरेट किए गए स्कीमा के साथ प्रॉम्प्ट करें.
3. प्रॉम्प्ट के आउटपुट को पार्स करें.
4. assembleRecommendations का इस्तेमाल करके, सुझावों की सूची को असेंबल करके दिखाओ.
5. सेशन खत्म होने पर, उसे बंद करें, ताकि मेमोरी खाली हो जाए.

src/utils/reranker-helpers.ts और src/utils/recommendation-schemas.ts पढ़ें. इससे आपको यह पता चलेगा कि प्रॉम्प्ट और स्कीमा कैसे जनरेट होते हैं. साथ ही, प्रॉम्प्ट के नतीजों से सुझाव कैसे मिलते हैं

सुझाव देने वाली पाइपलाइन की पुष्टि करना

1. Chrome खोलकर http://localhost:5173/catalog/tent-mont-tremblant-3p.
2. नीचे की ओर स्क्रोल करके, आपके लिए सेक्शन पर जाएं.
3. देखें कि पांच कंपैनियन कार्ड, रैंडम प्रॉडक्ट के बजाय स्मार्ट किट के पेयरिंग (जैसे कि ग्राउंड फ़ुटप्रिंट, स्लीपिंग पैड, और हल्के स्टेक) को दिखाने के लिए कैसे अपडेट होते हैं.
4. Chrome DevTools कंसोल खोलें, ताकि दोनों अनुमान लगाने वाले चरणों के रीयल-टाइम में पूरे होने की अवधि की जांच की जा सके.

(ज़रूरी नहीं) टास्क 1.4: पहले से मौजूद अन्य एआई मॉडल एक्सप्लोर करना

पहले से मौजूद कई अन्य एआई मॉडल उपलब्ध हैं. इनमें Translator API का एक्सपर्ट मॉडल भी शामिल है. इस कोडबेस में मौजूद कॉम्पोनेंट, पहले से ही ऐसी सेवा से जुड़े हुए हैं जो मौजूदा भाषा में होने वाले बदलावों को सुनती है और उनके अनुवाद का अनुरोध करती है. आपको इन सभी को जोड़ना है.

फ़ाइल पर जाएं: src/ai/translator.ts

29 से 45 लाइन में मौजूद टारगेट फ़ंक्शन createTranslator की जांच करें:

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

1. देखें कि Translator API काम करता हो. साथ ही, पक्का करें कि टारगेट की गई भाषा अंग्रेज़ी न हो. कॉन्टेंट डिफ़ॉल्ट रूप से अंग्रेज़ी में होता है.
2. अंग्रेज़ी से टारगेट की गई भाषा के लिए, भाषा की जोड़ी बनाएं. साथ ही, देखें कि वह जोड़ी उपलब्ध है या नहीं.
3. अनुवादक के लिए विकल्प बनाएं और एक मॉनिटर अटैच करें, ताकि मॉडल डाउनलोड होने की प्रोग्रेस दिख सके.
4. शुरू किए गए अनुवादक को वापस लाता है.

इसके बाद, 50 से 58 लाइन में मौजूद टारगेट फ़ंक्शन translate की जांच करें:

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

5. देखें कि targetLang में getCachedTranslator पास करने वाला कोई अनुवादक उपलब्ध है या नहीं. अगर ऐसा नहीं है, तो साफ़ टेक्स्ट दिखाएं.
6. अगर ऐसा है, तो अनुवादक का इस्तेमाल करके साफ़ टेक्स्ट का अनुवाद करें.

फ़ाइल पर जाएं: src/ai/translator.ts

लाइन 204 पर टारगेट फ़ंक्शन render की जांच करें:

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

7. भाषा चुनने की सुविधा देने वाले कॉम्पोनेंट को चालू करना

अनुवाद की कैश मेमोरी और सदस्यता कैसे काम करती है, यह जानने के लिए src/utils/translator-helpers.ts पढ़ें.

4. एजेंट के अनुभव को बेहतर बनाने के लिए WebMCP का इस्तेमाल करना

WebMCP क्या है?

उपयोगकर्ता, ऑटोनॉमस और को-ब्राउज़िंग एजेंट का इस्तेमाल करने लगे हैं. इसलिए, वेबसाइटों के लिए इन बदलावों के साथ चलना ज़रूरी हो गया है. आम तौर पर, एजेंट किसी साइट से इंटरैक्ट करने का तरीका तय करने के लिए, ऐक्चुएशन पर निर्भर होते हैं. जैसे, स्क्रीनशॉट लेना, DOM और ऐक्सेसिबिलिटी ट्री को स्क्रैप करना. यह प्रोसेस धीमी होती है, इसमें गड़बड़ियां होने की आशंका होती है, और इससे उपयोगकर्ता के टोकन बर्बाद होते हैं.

WebMCP इस समस्या को हल करने में मदद करता है. यह डेवलपर को एजेंट को सीधे तौर पर टूल उपलब्ध कराने की सुविधा देता है, ताकि वे उस पेज के साथ इंटरैक्ट कर सकें जिस पर वे हैं. इन टूल का इस्तेमाल करने वाले एजेंट, इन टूल को कोडिंग हार्नेस में मौजूद टूल की तरह इस्तेमाल कर सकते हैं. साथ ही, साफ़ तौर पर और स्ट्रक्चर में इनपुट दे सकते हैं. इसके अलावा, एजेंट को जवाब में मिलने वाली वैल्यू भी तय कर सकते हैं.

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

जब कोई एजेंट वेबपेज से कनेक्ट होता है, तो वह document.modelContext.getTools() से क्वेरी करता है. रजिस्टर किया गया हर टूल यह जानकारी दिखाता है:

• name: प्रोग्रामैटिक टूल आइडेंटिफ़ायर, जिसका इस्तेमाल एजेंट टूल (जैसे कि 'get_product_specs') को लागू करते समय करते हैं.
• title: यह ऐसा डिसप्ले लेबल होता है जिसे आसानी से पढ़ा जा सकता है.इसका इस्तेमाल इंस्पेक्टर और एजेंट इंटरफ़ेस करते हैं. जैसे, 'Get Product Specs'.
• description: सादे टेक्स्ट में ब्यौरा. इससे मॉडल को यह जानकारी मिलती है कि टूल क्या करता है और इसे कब कॉल करना है. इस जानकारी के आधार पर एजेंट यह तय करता है कि उसे टूल को कॉल करना चाहिए या नहीं. इसलिए, इस बारे में पूरी जानकारी दें.
• inputSchema: JSON स्कीमा, जिसमें स्वीकार किए गए आर्ग्युमेंट तय किए जाते हैं.
• annotations: व्यवहार के बारे में सुझाव, जैसे कि { readOnlyHint: true } सिर्फ़ पढ़ने वाले टूल के लिए, जिनसे कोई साइड इफ़ेक्ट नहीं होता.
• execute: यह एक एसिंक्रोनस फ़ंक्शन है, जो टूल को लागू करने पर एक्ज़ीक्यूट होता है.

सबसे सही तरीके: टूल को कितना ज़्यादा बारीकी से बनाया जाए, इसके लिए सबसे सही तरीके अब भी विकसित हो रहे हैं. एजेंट के पास ऐसे ज़्यादा विस्तृत टूल होने चाहिए जिनसे वे अपने हिसाब से उपयोगकर्ता अनुभव बना सकें. इस तरह के टूल, ओम्निबस टूल के मुकाबले ज़्यादा फ़ायदेमंद होते हैं. इसलिए, यहां ऐसे टूल के बारे में बताया गया है.

टास्क 2.1: सुझाव और प्रॉडक्ट टूल

सबसे पहले, आपको एक टूल रजिस्टर करना होगा, ताकि एजेंट उन सुझावों को वापस पा सकें जिन्हें आपने पिछली गतिविधि में बनाया था.

फ़ाइल पर जाएं: src/components/product/ForYouSection.ts

71 से 94 लाइनों में registerWebMCPTools() की जांच करें:

private registerWebMCPTools(): void

1. देखें कि WebMCP काम करता है या नहीं.
2. अगर ऐसा है, तो टूल को रजिस्टर करें.

• ऐसा टाइटल और ब्यौरा चुनें जिससे एजेंट को टूल चुनने के लिए बढ़ावा मिले. इसके लिए, प्रॉम्प्ट इंजीनियरिंग का इस्तेमाल करें.
• कोई इनपुट नहीं है. इसलिए, सिर्फ़ एक खाली ऑब्जेक्ट JSON स्कीमा शामिल करें.
• इस टूल का इस्तेमाल सिर्फ़ पढ़ने के लिए किया जा सकता है.
• execute फ़ंक्शन में, सुझावों का मौजूदा सेट पाने के लिए recommendationStore का इस्तेमाल करें. इसके बाद, मौजूदा प्रॉडक्ट आईडी और प्रॉडक्ट के सुझावों का सेट दिखाएं.
• एक अबॉर्ट सिग्नल जोड़ें और उसे पकड़ें, ताकि कोई गड़बड़ी न हो. इससे यह पक्का होता है कि कॉम्पोनेंट के अनमाउंट होने पर, टूल को सही तरीके से हटा दिया गया हो.

फ़ाइल पर जाएं: src/views/ProductView.ts

3. get_current_product टूल को रजिस्टर करने के लिए, इसी प्रोसेस को दोहराएं. इस बार, पूरे प्रॉडक्ट के साथ-साथ सुझाव भी दिखाएं

अहम जानकारी: टूल का रजिस्ट्रेशन कॉम्पोनेंट लेवल पर होता है. इसलिए, जब कॉम्पोनेंट को एक साथ कंपोज़ करके कोई पेज बनाया जाता है, तो उनके टूल भी साथ में आ जाते हैं.

टास्क 2.2: कार्ट ड्रॉअर टूल

फ़ाइल पर जाएं: src/components/cart/CartDrawer.ts

83 से 114 लाइनों में मौजूद registerWebMCPTools() की जांच करें:

private registerWebMCPTools(): void

1. view_cart टूल को रजिस्टर करें:

• इसका inputSchema, एक ऑब्जेक्ट होना चाहिए. इसमें एक बूलियन विकल्प, openDrawer होना चाहिए.
• इसे सिर्फ़ पढ़ने के लिए होना चाहिए.
• इनपुट को execute फ़ंक्शन के हिस्से के तौर पर पढ़ता है. इसके बाद, यह तय करता है कि कार्ट को दिखाना है या छिपाना है. इसके बाद, recommendationStore को रीफ़्रेश करता है और फिर कार्ट की खास जानकारी दिखाता है

2. manage_cart टूल को रजिस्टर करें:

• इसका inputSchema, items वाला ऑब्जेक्ट होना चाहिए. यह productID, add, remove, और update action enum के साथ-साथ पूर्णांक quantity वाला ऑब्जेक्ट का कलेक्शन होता है,
• इसके execute फ़ंक्शन को आइटम, this.updateCart को पास करने चाहिए

टास्क 2.3: भाषा बदलने वाला टूल

WebMCP को बेहतर बनाने के लिए, बाहरी एजेंट को भाषा टूल का ऐक्सेस दें.

फ़ाइल पर जाएं: src/components/navigation/LanguagePicker.ts

61 से 63 लाइनों में registerWebMCPTools() की जांच करें:

private registerWebMCPTools(): void

1. switch_language टूल रजिस्टर करें:
   • inputSchema में language प्रॉपर्टी होनी चाहिए, जो SUPPORTED_LANGUAGE_CODES का enum है.
   • इसके execute फ़ंक्शन को, दी गई भाषा के साथ this.switchLanguage को कॉल करना चाहिए.

टास्क 2.4: स्टोर नेविगेशन टूल

ऑटोनॉमस एजेंट को स्टोर पर नेविगेट करने, प्रॉडक्ट पेजों पर जाने, कैटगरी ब्राउज़ करने या खोज शुरू करने की अनुमति दें.

फ़ाइल पर जाएं: src/components/navigation/SiteHeader.ts

155 से 171 लाइनों में registerWebMCPTools() की जांच करें:

private registerWebMCPTools(): void

1. देखें कि WebMCP काम करता है या नहीं.
2. search टूल रजिस्टर करें:
   • इनपुट स्कीमा, query स्ट्रिंग लेता है.
   • execute में, this.search(input?.query) को कॉल करो.
3. go_to_catalog टूल रजिस्टर करें:
   • इनपुट स्कीमा, activity (ACTIVITIES का enum) और category (PRODUCT_CATEGORIES का enum) को स्वीकार करता है. हालांकि, ये दोनों ज़रूरी नहीं हैं.
   • execute में, this.goToCatalog(input?.activity, input?.category) को कॉल करो.
4. get_categories_and_activities टूल रजिस्टर करें:
   • रीड-ओनली टूल, जिसमें कोई इनपुट पैरामीटर नहीं होता.
   • execute में, this.getCategoriesAndActivities() को कॉल करो.
5. go_to_product टूल रजिस्टर करें:
   • इनपुट स्कीमा के लिए, productId स्ट्रिंग की ज़रूरत होती है.
   • execute में, this.goToProduct(input?.productId) को कॉल करो.

WebMCP इंस्पेक्टर की मदद से पुष्टि करना

1. Chrome में http://localhost:5173/catalog/tent-mont-tremblant-3p को फिर से लोड करें और किसी प्रॉडक्ट पेज पर जाएं.
2. Chrome DevTools > ऐप्लिकेशन > WebMCP खोलें.
3. आपको WebMCP टूल दिखने चाहिए: get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities, और go_to_product.
4. इनमें से किसी एक पर क्लिक करके, उनकी जानकारी और पैरामीटर देखें.
5. पैरामीटर वाला कोई एक विकल्प चुनें, कुछ विकल्प चुनें, और टूल चलाएं पर क्लिक करके देखें कि यह कैसे काम करता है.
6. (ज़रूरी नहीं) अगर आपने WebMCP Model Context Tool Inspector इंस्टॉल और सेट अप किया है, तो इसे खोलें. यह Chrome के साइड पैनल में खुलता है. चैट इंटरफ़ेस का इस्तेमाल करके, एजेंट को कोई ऐसी कार्रवाई करने के लिए कहें जिससे आपके किसी टूल को कॉल किया जा सके. इससे आपको यह पता चलेगा कि टूल कैसे जवाब देता है.

5. (ज़रूरी नहीं) साइट पर मौजूद एजेंट बनाना

पेज में WebMCP टूल को कॉल करना

WebMCP टूल सिर्फ़ बाहरी ब्राउज़र एक्सटेंशन या तीसरे पक्ष के बॉट के लिए नहीं हैं. आपका ऐप्लिकेशन सीधे तौर पर इन्हें कॉल कर सकता है. document.modelContext.getTools() से क्वेरी करके, आपका क्लाइंट-साइड कोड डाइनैमिक तौर पर टूल ढूंढ सकता है और उन्हें एक्ज़ीक्यूट कर सकता है.

इसका इस्तेमाल करके, साइट पर एआई शॉपिंग असिस्टेंट बनाया जा सकता है. इससे खोज बार को, नैचुरल लैंग्वेज में दिए गए इनपुट के आधार पर प्रॉडक्ट खोजने वाले टूल में बदला जा सकता है. कई फ़ैसेट फ़िल्टर को मैनेज करने के लिए, कस्टम इंपरेटिव कोड लिखने के बजाय, खोज बार में नैचुरल लैंग्वेज में की गई क्वेरी को Prompt API को भेजा जा सकता है. इससे यह तय होता है कि इन-पेज WebMCP टूल को चालू करना है.

सबसे सही तरीके: आपके बनाए गए एजेंट के खोज बार की जगह लेने के दौरान, आपको साइट पर खोज करने के लिए एलएलएम का इस्तेमाल नहीं करना चाहिए. इसके लिए, ज़्यादा असरदार, सटीक, और अच्छी तरह से स्थापित पैटर्न और एल्गोरिदम उपलब्ध हैं. इसका मकसद सिर्फ़ यह दिखाना है कि अपनी साइट के WebMCP टूल को नॉन-डिटरमिनिस्टिक तरीके से कैसे कॉल किया जाता है.

JavaScript से WebMCP टूल को खोजने और उसे चालू करने के लिए:

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

टास्क 3.1: साइडबार में मौजूद फ़ेसट टूल

हर कैटलॉग साइडबार फ़ेसट को WebMCP के साथ इंटिग्रेट करें, ताकि एजेंट (और पेज पर मौजूद खोज में मदद करने वाला टूल) प्रोग्राम के हिसाब से फ़िल्टर को टॉगल कर सकें.

src/components/facets/ में मौजूद हर फ़ैसेट कॉम्पोनेंट, अपनी क्लास पर पहले से ही एक हेल्पर मेथड और src/utils/filter-schemas.ts में एक्सपोर्ट किया गया इनपुट स्कीमा उपलब्ध कराता है:

1. src/components/facets/ActivityFacet.ts में:
   • activityFilterSchema का इस्तेमाल करके, activity_filter को रजिस्टर करें.
   • execute में, this.filterActivity(input?.activity, input?.selected) को कॉल करो.
2. src/components/facets/CategoryFacet.ts में:
   • categoryFilterSchema का इस्तेमाल करके, category_filter को रजिस्टर करें.
   • execute में, this.filterCategory(input?.category, input?.selected) को कॉल करो.
3. src/components/facets/ConditionFacet.ts में:
   • conditionFilterSchema का इस्तेमाल करके, condition_filter को रजिस्टर करें.
   • execute में, this.filterCondition(input?.condition, input?.selected) को कॉल करो.
4. src/components/facets/PriceFacet.ts में:
   • priceFilterSchema का इस्तेमाल करके, price_filter को रजिस्टर करें.
   • execute में, this.filterPrice(input?.priceRange || input?.bracket, input?.selected) को कॉल करो.
5. src/components/facets/WeightFacet.ts में:
   • weightFilterSchema का इस्तेमाल करके, weight_filter को रजिस्टर करें.
   • execute में, this.filterWeight(input?.weightRange || input?.bracket, input?.selected) को कॉल करो.
6. src/components/facets/RatingFacet.ts में:
   • ratingFilterSchema का इस्तेमाल करके, rating_filter को रजिस्टर करें.
   • execute में, this.filterRating(input?.minRating || input?.rating, input?.selected) को कॉल करो.
7. src/components/facets/SearchFacet.ts में:
   • keywordFilterSchema का इस्तेमाल करके, keyword_filter को रजिस्टर करें.
   • execute में, this.updateKeyword(input?.keyword) को कॉल करो.

दूसरे चरण में बताए गए तरीके से, WebMCP के साथ काम करने की सुविधा की जांच करना न भूलें. साथ ही, { signal: this.signal } के साथ .catch(() => {}) पास करें.

टास्क 3.2: कैटलॉग व्यू टूल

अब document.modelContext पर कैटलॉग-लेवल की लिस्टिंग, फ़िल्टर रीसेट करने की सुविधा, और सिमैंटिक खोज टूल रजिस्टर करें.

फ़ाइल पर जाएं: src/views/CatalogView.ts

125 से 140 लाइनों में registerWebMCPTools() की जांच करें:

private registerWebMCPTools(): void

1. देखें कि WebMCP काम करता है या नहीं.
2. list_items टूल रजिस्टर करें:
   • इसमें कोई इनपुट पैरामीटर नहीं होता और इसे सिर्फ़ पढ़ा जा सकता है.
   • इसके execute फ़ंक्शन को this.getItemsSummary() को कॉल करना चाहिए.
3. reset_filters टूल रजिस्टर करें:
   • इसमें कोई इनपुट पैरामीटर नहीं होता.
   • इसके execute फ़ंक्शन को this.resetFilters() को कॉल करना चाहिए.
4. semantic_catalog_filter टूल रजिस्टर करें:
   • semanticCatalogFilterSchema का उपयोग करें.
   • इसके execute फ़ंक्शन को interpretAndApplySemanticFilter(input.query) को कॉल करना चाहिए.

टास्क 3.3: सिमैंटिक फ़िल्टर एजेंट को व्यवस्थित करना

अब इन सभी को एक साथ कनेक्ट करने का समय है. इस टास्क से, खोज को एक सिमैंटिक पाइपलाइन में बदल दिया जाता है. इससे semantic_catalog_filter टूल को बेहतर तरीके से काम करने में मदद मिलती है:

फ़ाइल पर जाएं: src/ai/catalog-semantic-filter.ts

84 से 88 लाइनों में prewarmSemanticFilterSession() की जांच करें:

export async function prewarmSemanticFilterSession(): Promise<void>

1. जांच करें कि warmSession पहले से मौजूद है या नहीं. अगर ऐसा है, तो फ़ंक्शन को तुरंत बंद कर दें.
2. getPromptSession() का इस्तेमाल करके, SEMANTIC_FILTER_SYSTEM_PROMPT के साथ Prompt API सेशन को प्रीवार्म करें और इसे warmSession में सेव करें. इसे try/catch ब्लॉक में रैप करें, ताकि प्रीवार्मिंग की प्रोसेस पूरी न होने पर भी खोज बनाने की प्रोसेस ठीक से काम कर सके.

93 से 134 लाइनों में inferSearchFacets() की जांच करें:

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

3. अगर warmSession उपलब्ध है, तो उससे प्रीवार्म किए गए सेशन को क्लेम करें और warmSession को null पर रीसेट करें. इसके अलावा, getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT) का इस्तेमाल करके नया सेशन बनाया जा सकता है.
4. semanticFilterSchema को responseConstraint के तौर पर इस्तेमाल करके, मॉडल को promptText के साथ प्रॉम्प्ट करें.
5. जवाब के तौर पर मिले JSON को पार्स करें. इसके बाद, पार्स किए गए नतीजे को cacheKey के साथ स्थायी कैश मेमोरी में सेव करें. साथ ही, finally ब्लॉक में सेशन को बंद करें.

लाइन 139–270 में applyFacetsViaWebMCP() की जांच करें:

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

6. document.modelContext पर रजिस्टर किए गए टूल ढूंढने के लिए await document.modelContext.getTools() का इस्तेमाल करें.
7. await executeFacet('reset_filters', {}) को कॉल करके, फ़िल्टर रीसेट करें, ताकि नए सिरे से शुरुआत की जा सके.
8. await Promise.all(facetTasks) का इस्तेमाल करके, एक साथ कई फ़ैसेट लागू करें.

272 से 316 लाइनों में मौजूद interpretAndApplySemanticFilter() की जांच करें:

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

9. inferSearchFacets(searchTerm, cachedJourney) को कॉल करके, खोज के फ़ैसेट का अनुमान लगाएं.
10. applyFacetsViaWebMCP(searchTerm, parsed) का इस्तेमाल करके, कैटलॉग में अनुमानित फ़ैसेट लागू करें.

इन-पेज एजेंट की पुष्टि करना

1. http://localhost:5173/catalog पर नेविगेट करें.
2. सबसे ऊपर मौजूद खोज बार में, यह डालें: "lightweight 3 season tent for wet hikes"
3. प्रॉम्प्ट एपीआई को अनुरोध पार्स करते हुए देखें. साथ ही, activity_filter (हाइकिंग), category_filter (टेंट), और condition_filter (बारिश) को तुरंत लागू होते हुए देखें. इससे कैटलॉग में मौजूद गियर को मैन्युअल तरीके से चुने बिना, तुरंत मिलते-जुलते गियर को दिखाया जा सकता है.

6. आपने क्या सीखा

बधाई हो। आपने एक ई-कॉमर्स ऐप्लिकेशन को एक इंटेलिजेंट, एजेंट-फ़ॉरवर्ड अनुभव में रूपांतरित किया है जो पूरी तरह से उपयोगकर्ता के डिवाइस पर मौजूद एआई और स्टैंडर्ड वेब प्लैटफ़ॉर्म एपीआई की मदद से काम करता है.

आपने क्या बनाया:

• उपयोगकर्ता के डिवाइस पर मौजूद Prompt API: LanguageModel की मदद से, उपयोगकर्ता के ब्राउज़िंग टाइमलाइन को सिंथेसाइज़ किया गया, ताकि रीयल-टाइम JourneyProfile कॉन्टेक्स्ट जनरेट किया जा सके. साथ ही, स्ट्रक्चर्ड JSON स्कीमा (responseConstraint) का इस्तेमाल करके, rankComplementaryGear सिनर्जी इंजन बनाया गया.
• WebMCP कॉम्पोनेंट टूल: document.modelContext के ज़रिए, यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट (get_recommendations, get_current_product, view_cart, manage_cart) में रजिस्टर किए गए मॉड्यूलर, एनकैप्सुलेटेड टूल.
• एजेंट-फ़ॉरवर्ड आर्किटेक्चर: Chrome WebMCP Inspector एक्सटेंशन का इस्तेमाल करके, टूल के एक्ज़ीक्यूशन की जांच की गई और पुष्टि की गई.
• साइट पर मौजूद इन-पेज एजेंट: क्लाइंट-साइड टूल को सीधे ब्राउज़र में व्यवस्थित किया जाता है, ताकि साइट के हेडर में मौजूद खोज बार से, कई तरह के सवालों के जवाब देने वाली नैचुरल लैंग्वेज में कैटलॉग खोज की जा सके.
• उपयोगकर्ता के डिवाइस पर मौजूद एआई के खास मॉडल: Translator का इस्तेमाल करके, उपयोगकर्ता के डिवाइस पर डाइनैमिक तरीके से अनुवाद करने की सुविधा के बारे में जानकारी दी गई.

ज़रूरी बातें:

1. तुरंत जवाब और बेहतर निजता: Gemini Nano जैसे उपयोगकर्ता के डिवाइस पर चलने वाले मॉडल, क्लाउड एपीआई पासकोड, नेटवर्क की वजह से होने वाली इंतज़ार का समय, और डेटा बाहर निकाले जाने की चिंताओं को दूर करते हैं.
2. स्ट्रक्चर्ड आउटपुट ज़रूरी हैं: responseConstraint के साथ JSON स्कीमा इस्तेमाल करने से, क्रिएटिव टेक्स्ट जनरेशन को भरोसेमंद और टाइप-सेफ़ ऐप्लिकेशन लॉजिक में बदला जा सकता है.
3. WebMCP, एआई एजेंट के लिए वेब को तैयार करता है: टूल को सीधे तौर पर डीओएम में रजिस्टर करने से, पुष्टि किए गए और तय किए गए ऐक्शन के साथ, सहायता करने वाली आंतरिक सुविधाओं और बाहरी ऑटोनॉमस ब्राउज़र एजेंट, दोनों को बेहतर बनाया जा सकता है.
4. मॉडल को सुझाव देने दें, कार्रवाई न करने दें: मॉडल को अपने रजिस्टर किए गए टूल के enum तक सीमित रखें. साथ ही, नतीजे खुद भेजें. इससे एजेंट की तरह काम करने वाले मॉडल की ऑडिट की जा सकेगी. साथ ही, उसे कार्रवाई करने से रोका जा सकेगा.