‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

שיפור תהליך התשלום במסחר אלקטרוני באמצעות יכולות AI בדפדפן

1. מבוא

פיתוח אתרים מודרני מספק חלופה לשימוש ב-AI באמצעות נסיעות הלוך ושוב מבוססות-ענן. התחלנו לשלוח ב-Chrome ממשקי API מובנים של AI שמאפשרים לכם להשתמש בכל דבר, החל ממודלים קטנים של מומחים לתרגום ועד מודלים מזוקקים של שפה מלאה, והכול בלי עלויות של טוקנים לכם או למשתמשים שלכם, ופועל באופן פרטי במכשיר שלהם.

במקביל, סוכני ה-AI מציעים למשתמשים דרך חדשה לקיים אינטראקציה עם אפליקציות אינטרנט. שימוש ב-WebMCP כדי להכין את חוויית האינטרנט שלכם לשימוש בסוכנים יכול לעזור לכם לצמצם את השימוש בטוקנים, וגם לספק תוצאות מדויקות יותר מאשר הפעלה מסורתית שמצריכה צילומי מסך וגירוד DOM.

בשיעור Codelab הזה תעבדו על Mont-Royal Plein Air, אתר מסחר אלקטרוני לציוד לפעילויות בטבע. תלמדו איך ליצור ולשלב ממשקי API מובנים של AI ו-WebMCP כדי:

הסקת כוונת הלקוח מהיסטוריית הגלישה שלו ויצירת המלצות באופן דינמי באמצעות מודלים במכשיר.
חשיפת כלים שסוכני AI ועוזרים בדפדפן יכולים להשתמש בהם כדי לנווט באתר, לבדוק מוצרים והמלצות ולנהל את עגלת הקניות של המשתמש.
(אופציונלי) אפשר לתרגם את האתר תוך כדי תנועה באמצעות מודלים ייעודיים קטנים שפועלים במכשיר.
(אופציונלי) אפשר להפוך את החיפוש הבסיסי באתר לסוכן באתר שמבוסס על אותם כלים שסוכנים חיצוניים משתמשים בהם.

מה תלמדו

איך משתמשים ב-Prompt API ומגדירים פלט JSON מובנה.
איך לרשום כלי WebMCP ואסטרטגיות לחשיבה על הרכב הכלי ורמת הפירוט שלו.
(אופציונלי) איך משתמשים ב-Translator API כדי לתרגם תוכן במהירות באמצעות מודל מומחה במכשיר.
(אופציונלי) איך להפעיל בעצמכם כלי WebMCP.

דרישות מוקדמות

חשבון Google אישי ו-Google Cloud.
‫Google Chrome בגרסה 150 ומעלה, או בערוצי Canary, ‏ Dev או בטא, עם ההגדרות #enable-webmcp-testing ו-#devtools-webmcp-support מופעלות.
היכרות עם HTML,‏ CSS,‏ JavaScript ו-TypeScript.
היכרות עם JSON Schema.

2. הגדרת הפרויקט

חשבון Google

אם אין לכם חשבון Google אישי, אתם צריכים ליצור חשבון Google.

נכנסים למסוף Google Cloud באמצעות חשבון Google אישי.

הפעלת החיוב

כדי להגדיר חשבון לחיוב לשימוש אישי, מפעילים את החיוב במסוף Cloud.

יצירת פרויקט (אופציונלי)

אם אין לכם פרויקט שאתם רוצים להשתמש בו במעבדה הזו, אתם יכולים ליצור פרויקט חדש כאן.

פתיחת Cloud Shell Editor

כדי לעבור ישירות אל Cloud Shell Editor, לוחצים על הקישור הזה.
אם תתבקשו לאשר את הפעולה בשלב כלשהו היום, לחצו על אישור כדי להמשיך.
אם הטרמינל לא מופיע בתחתית המסך, פותחים אותו:
- לוחצים על תצוגה.
- לוחצים על Terminal (טרמינל).

הגדרת הפרויקט

בטרמינל, מגדירים את הפרויקט באמצעות הפקודה הבאה:
```
gcloud config set project [PROJECT_ID]
```
דוגמה: gcloud config set project lab-project-id-example
אם אתם לא זוכרים את מזהה הפרויקט, אתם יכולים להשתמש בפקודה gcloud projects list כדי להציג רשימה של כל מזהי הפרויקטים שלכם.
תוצג ההודעה הבאה: Updated property [core/project].
אם מופיע WARNING ואתם מתבקשים Do you want to continue (Y/n)?, כנראה שהזנתם את מזהה הפרויקט בצורה שגויה. לוחצים על n, לוחצים על Enter ומנסים להריץ שוב את הפקודה gcloud config set project.

הגדרה מקומית והגדרת Workspace

בטרמינל (או בטרמינל של Cloud Shell), משכפלים את מאגר הפרויקט ועוברים לספריית הפרויקט:
```
git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
cd mont-royal
```
מנווטים לתיקייה ecommerce-ai-enhancements/starter:
```
cd ecommerce-ai-enhancements/starter
```
מתקינים את יחסי התלות באמצעות pnpm:
```
pnpm install
```
מפעילים את שרת הפיתוח המקומי:
```
pnpm dev
```
פותחים את הדפדפן ועוברים אל http://localhost:5173 כדי לראות את החנות Mont-Royal Plein Air.

(אופציונלי) התקנת התוסף WebMCP inspector

כדי להקל על העבודה עם WebMCP, אפשר להתקין את הכלי לבדיקת הקשר של מודל WebMCP. אחרי ההתקנה, צריך לקבל מפתח Gemini API כדי להשתמש בו:

עוברים אל AI Studio.
לוחצים על הלחצן Create API Key (יצירת מפתח API) כדי ליצור מפתח Gemini API חדש שמקושר לפרויקט שהגדרתם קודם לכן בשלב הזה.
פותחים את הכלי לבדיקת הקשר של מודל WebMCP (הוא נפתח בחלונית הצדדית) ולוחצים על הלחצן Update Gemini API Key (עדכון מפתח Gemini API).
מדביקים את מפתח ה-API בחלון הקופץ ושומרים.

לתוסף הזה יש סוכן בסיסי שיכול להשתמש ב-WebMCP, כך שאתם יכולים לנסות את האתר שלכם דרכו במקום להפעיל כלי WebMCP ישירות דרך כלי הפיתוח.

3. מודלים מוטמעים של AI באינטרנט

מה זה 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,
});

תרגיל 1: המלצות מבוססות-מסלול

באתרי מסחר אלקטרוני יש בדרך כלל קרוסלות או מוצרים משודרגים של פריטים שנקנים לעיתים קרובות ביחד. באתרים שקשורים לפעילויות בחוץ, למשל, יכול להיות שימושי יותר לבסס את ההמלצות על היסטוריית הגלישה.

כדי לעשות את זה, תבנו צינור עיבוד נתונים להמלצות בשלושה שלבים:

כלי ליצירת פרופיל של מסלול: באמצעות Prompt API, תנתחו את ציר הזמן הכרונולוגי של היסטוריית הגלישה של הלקוח כדי לנסות להסיק את כוונת ההרפתקה האמיתית של המשתמש.
שאילתת מוצר: מתוך הכוונה הזו, תשלחו בקשת API לשרת קצה פיקטיבי של מוצר כדי לקבל פריטים קשורים.
המלצה על מוצר: מעבירים את המוצרים האלה בחזרה אל Product API כדי לדרג אותם, ומחזירים את חמשת המוצרים שהכי מתאימים למוצר שהמשתמש צופה בו.

משימה 1.1: הפעלת Prompt API

במקום לאתחל את Prompt API בנפרד בכל פעם שרוצים להשתמש בו, אפשר לרכז את הקריאות בקובץ אחד, לשמור במטמון את היצירה באמצעות הנחיית מערכת כדי לקצר את זמן ההפעלה של כמה קריאות לאותו סוכן.

עוברים לקובץ src/ai/prompt-api.ts ובודקים את getPromptSession() בשורות 27 עד 58:

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

שימוש חוזר בסשן בסיס ששמור במטמון. כבר יש מפת מטמון בשורה 21, ‏ baseSessions, עם מפתח לפי הנחיה למערכת. שימוש חוזר במודלים בסיסיים במקום clone() חדשים מקצר את זמן ההפעלה ומאפשר להשתמש בהגדרת הליבה בלי שכל סשן יפריע לסשן אחר. מחזירים את השיבוט – המתקשרים יכולים לקיים איתו אינטראקציה, כולל destroy(), באופן חופשי בלי למחוק את הבסיס ששמור במטמון.
מבצעים זיהוי תכונות של ה-API. בודקים אם ה-API קיים, ואם לא, מעלים שגיאה.
מצהירים על האופנים והשפות. מודלים מוטמעים יכולים לתמוך בקלט רב-אופני. צריך להצהיר אילו מצבים נדרשים ואילו שפות רוצים לתמוך בהן. כל התוכן שמעבירים למודל שפה גדול (LLM) הוא באנגלית.
חשוב לבדוק את הזמינות לפני שיוצרים תוכן. גם אם ה-API קיים, יכול להיות שלא קיים מודל שתומך בדרישות שלכם. בודקים אם קיים כזה. אם לא, מוצגת שגיאה. אם ההורדה עדיין לא הסתיימה, אפשר לדווח על התקדמות ההורדה.
יוצרים את הסשן. הגדרת האפשרויות ליצירת סשן חדש של Prompt API, והנחיית המערכת, אם היא כלולה

משימה 1.2: הטמעה של כלי ליצירת פרופיל של מסלול ההמרה

עוברים לקובץ src/ai/journey-profiler.ts ובודקים את פונקציית היעד בשורות 42 עד 100:

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

משתמשים בפונקציה ממשימה 1 כדי ליצור סשן חדש של הנחיות לשימוש.
מזינים את טקסט ההנחיה שסופק למודל, ומשתמשים ב-journeyProfileSchema כסכימת JSON להחזרה מובנית.
מנתחים את הפלט של ההנחיה ומסירים כפילויות בקטגוריות היעד.
מחליפים את המחרוזות שמוחזרות עם קידוד קשיח בתוצאות בפועל מההנחיה.
כדי לפנות מקום בזיכרון, צריך להרוס את הסשן בסיום.

משימה 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 כדי ליצור סשן חדש של הנחיות לשימוש.
מזינים את טקסט ההנחיה ואת הסכימה שנוצרה למודל.
מנתחים את הפלט של ההנחיה.
מחזירים את רשימת ההמלצות המורכבת באמצעות assembleRecommendations.
כדי לפנות מקום בזיכרון, צריך להרוס את הסשן בסיום.

אימות צינור ההמלצות

פותחים את Chrome http://localhost:5173/catalog/tent-mont-tremblant-3p.
גוללים למטה לקטע בשבילך.
שימו לב איך 5 הכרטיסים הנלווים מתעדכנים כדי לשקף צירופים של ציוד חכם (כמו טביעות רגל על הקרקע, מזרנים לשינה ויתדות קלות) במקום מוצרים אקראיים.
פותחים את כלי הפיתוח ל-Chrome כדי לבדוק את משך הביצוע בזמן אמת של שני שלבי ההסקה.

(אופציונלי) משימה 1.4: בדיקת מודלים נוספים של AI מובנה

יש עוד כמה מודלים מובנים של AI, כולל מודל המומחה Translator API. הרכיבים בבסיס הקוד הזה כבר מחוברים לשירות שמקשיב לשינויים בשפה הנוכחית ומבקש את התרגום שלהם, והתפקיד שלכם הוא לחבר את הכול.

עוברים לקובץ: src/ai/translator.ts

בודקים את פונקציית היעד createTranslator בשורות 29 עד 45:

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

בודקים אם יש תמיכה ב-Translator API ומוודאים ששפת היעד היא לא אנגלית (ברירת המחדל של התוכן היא אנגלית).
יוצרים צמד שפות, מאנגלית לשפת היעד, ובודקים אם הצמד הזה זמין.
יוצרים אפשרויות למתרגם ומצרפים צג שמציג את התקדמות ההורדה של המודל.
מחזירה את האובייקט של הכלי לתרגום שאותחל.

לאחר מכן, בודקים את פונקציית היעד translate בשורות 50 עד 58:

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

בודקים אם יש מתרגם זמין עם getCachedTranslator שמועבר ב-targetLang. אם אין, מחזירה את הטקסט הנקי.
אם יש, משתמשים בכלי התרגום כדי לתרגם את הטקסט הנקי.

עוברים לקובץ: src/ai/translator.ts

בודקים את פונקציית היעד render בשורות 204:

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

הפעלת הרכיב 'כלי לבחירת שפה'

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 Schema שמגדיר את הארגומנטים הקבילים.
‫annotations: רמזים לגבי התנהגות, כמו { readOnlyHint: true } עבור כלים לקריאה בלבד שלא גורמים לתופעות לוואי במצב.
‫execute: פונקציה אסינכרונית שמופעלת כשמפעילים את הכלי.

משימה 2.1: המלצות וכלי מוצר

מתחילים ברישום כלי כדי לאפשר לנציגים לאחזר את ההמלצות שיצרתם בתרגיל הקודם.

עוברים לקובץ: src/components/product/ForYouSection.ts

בדיקת registerWebMCPTools() בשורות 71 עד 94:

private registerWebMCPTools(): void

בודקים אם WebMCP נתמך.
אם כן, צריך לרשום את הכלי.

בוחרים שם ותיאור שיעודדו את הסוכן לבחור בכלי – כאן כדאי לחשוב על הנדסת פרומפטים.
אין קלט, לכן צריך לכלול רק סכימת JSON של אובייקט ריק.
הכלי הזה הוא לקריאה בלבד.
בפונקציה execute, משתמשים ב-recommendationStore כדי לקבל את קבוצת ההמלצות הנוכחית, ואז מחזירים את מזהה המוצר הנוכחי ואת קבוצת המלצות המוצרים.
מוסיפים אות ביטול ומטפלים בו כדי שלא תופעל שגיאה. כך מוודאים שהכלי יוסר בצורה תקינה כשהרכיב מוסר.

עוברים לקובץ: src/views/ProductView.ts

חוזרים על אותו תהליך כדי לרשום כלי get_current_product, והפעם מחזירים את המוצר המלא וגם את ההמלצות

משימה 2.2: כלים בחלונית ההזזה של עגלת הקניות

עוברים לקובץ: src/components/cart/CartDrawer.ts

בדיקת registerWebMCPTools() בשורות 83 עד 114:

private registerWebMCPTools(): void

רישום הכלי view_cart:

המאפיין inputSchema שלו צריך להיות אובייקט עם אפשרות בוליאנית אחת, openDrawer.
הוא צריך להיות לקריאה בלבד.
קורא את הקלט כחלק מהפונקציה execute, מחליט אם להציג או להסתיר את עגלת הקניות, מרענן את recommendationStore ואז מחזיר את סיכום עגלת הקניות

רישום הכלי manage_cart:

המאפיין inputSchema שלו צריך להיות אובייקט עם items, שהוא מערך של אובייקטים עם enum‏ productID, add, remove ו-update action, ומספר שלם quantity,
הפונקציה execute צריכה להעביר פריטים אל this.updateCart

משימה 2.3: כלי להחלפת שפה

אפשר להשתמש ב-WebMCP גם כדי לחשוף כלי שפה לסוכנים חיצוניים.

עוברים לקובץ: src/components/navigation/LanguagePicker.ts

בדיקה של registerWebMCPTools() בשורות 61 עד 63:

private registerWebMCPTools(): void

רושמים את הכלי switch_language:
- ל-inputSchema צריך להיות מאפיין language שהוא enum של SUPPORTED_LANGUAGE_CODES.
- הפונקציה execute צריכה לקרוא לפונקציה this.switchLanguage עם השפה שצוינה.

אפשר להפעיל סוכנים אוטונומיים כדי לנווט בחנות, לעבור לדפי מוצרים, לעיין בקטגוריות או להתחיל חיפושים.

עוברים לקובץ: src/components/navigation/SiteHeader.ts

צריך לבדוק את registerWebMCPTools() בשורות 155 עד 171:

private registerWebMCPTools(): void

בודקים אם WebMCP נתמך.
רושמים את הכלי search:
- סכימת הקלט מקבלת מחרוזת query.
- בexecute, מתקשרים אל this.search(input?.query).
רושמים את הכלי go_to_catalog:
- סכימת הקלט מקבלת את האפשרויות activity (enum של ACTIVITIES) ו-category (enum של PRODUCT_CATEGORIES).
- בexecute, מתקשרים אל this.goToCatalog(input?.activity, input?.category).
רושמים את הכלי get_categories_and_activities:
- כלי לקריאה בלבד ללא פרמטרים של קלט.
- בexecute, מתקשרים אל this.getCategoriesAndActivities().
רושמים את הכלי go_to_product:
- סכימת הקלט דורשת מחרוזת productId.
- בexecute, מתקשרים אל this.goToProduct(input?.productId).

אימות באמצעות הכלי לבדיקת WebMCP

טוענים מחדש את http://localhost:5173/catalog/tent-mont-tremblant-3p ב-Chrome ועוברים לדף מוצר.
פותחים את כלי הפיתוח ל-Chrome > Application (אפליקציה) > WebMCP.
אמורים להופיע כלי WebMCP: ‏ get_recommendations,‏ get_current_product,‏ view_cart,‏ manage_cart,‏ switch_language,‏ search,‏ go_to_catalog,‏ get_categories_and_activities ו-go_to_product.
לוחצים על אחד מהם כדי לראות את הפרטים והפרמטרים שלו.
בוחרים אחת מהאפשרויות עם פרמטרים, בוחרים כמה מהן ולוחצים על הפעלת הכלי כדי לראות את הפעולה.
(אופציונלי) אם התקנתם והגדרתם את WebMCP Model Context Tool Inspector, פותחים אותו – הוא ייפתח בחלונית הצדדית של Chrome. משתמשים בממשק הצ'אט כדי להגיד לסוכן לבצע פעולה שלדעתכם אמורה להפעיל אחד מהכלים שלכם, כדי לראות איך הוא מגיב.

5. (אופציונלי) בניית סוכן באתר

הפעלת כלי WebMCP בדף

הכלים של WebMCP לא מיועדים רק לתוספי דפדפן חיצוניים או לבוטים של צד שלישי – האפליקציה שלכם יכולה להפעיל אותם ישירות. על ידי שליחת שאילתה ל-document.modelContext.getTools(), הקוד בצד הלקוח יכול לגלות כלים ולהפעיל אותם באופן דינמי.

אתם יכולים להשתמש בזה כדי לבנות עוזר קניות מבוסס-AI באתר, ולהפוך את סרגל החיפוש לכלי לגילוי מוצרים שמבוסס על קלט בשפה טבעית. במקום לכתוב קוד אימפרטיבי מותאם אישית כדי לתאם בין מסנני פאסט רבים, אפשר להשתמש בסרגל החיפוש כדי להעביר שאילתות בשפה טבעית ל-Prompt API, שמחליט אילו כלים של WebMCP בדף להפעיל.

כדי לגלות ולהפעיל כלי WebMCP מ-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

צריך לחשוף כל היבט בסרגל הצד של הקטלוג ל-WebMCP, כדי שנציגים (ועוזר החיפוש בדף) יוכלו להפעיל או להשבית מסננים באופן פרוגרמטי.

לכל רכיב של היבט ב-src/components/facets/ כבר יש שיטת עזר במחלקה שלו וסכימת קלט מיוצאת ב-src/utils/filter-schemas.ts:

ב-src/components/facets/ActivityFacet.ts:
- רושמים את activity_filter באמצעות activityFilterSchema.
- בexecute, מתקשרים אל this.filterActivity(input?.activity, input?.selected).
ב-src/components/facets/CategoryFacet.ts:
- רושמים את category_filter באמצעות categoryFilterSchema.
- בexecute, מתקשרים אל this.filterCategory(input?.category, input?.selected).
ב-src/components/facets/ConditionFacet.ts:
- רושמים את condition_filter באמצעות conditionFilterSchema.
- בexecute, מתקשרים אל this.filterCondition(input?.condition, input?.selected).
ב-src/components/facets/PriceFacet.ts:
- רושמים את price_filter באמצעות priceFilterSchema.
- בexecute, מתקשרים אל this.filterPrice(input?.priceRange || input?.bracket, input?.selected).
ב-src/components/facets/WeightFacet.ts:
- רישום של weight_filter באמצעות weightFilterSchema.
- בexecute, מתקשרים אל this.filterWeight(input?.weightRange || input?.bracket, input?.selected).
ב-src/components/facets/RatingFacet.ts:
- רושמים את rating_filter באמצעות ratingFilterSchema.
- בexecute, מתקשרים אל this.filterRating(input?.minRating || input?.rating, input?.selected).
ב-src/components/facets/SearchFacet.ts:
- רישום של keyword_filter באמצעות keywordFilterSchema.
- בexecute, מתקשרים אל this.updateKeyword(input?.keyword).

חשוב לזכור לבדוק אם יש תמיכה ב-WebMCP ולעבור { signal: this.signal } עם .catch(() => {}) כמו שלמדתם בשלב 2.

משימה 3.2: כלים לתצוגת קטלוג

עכשיו רושמים את כלי החיפוש הסמנטי, איפוס המסננים והרישום ברמת הקטלוג ב-document.modelContext.

עוברים לקובץ: src/views/CatalogView.ts

בדיקת registerWebMCPTools() בשורות 125 עד 140:

private registerWebMCPTools(): void

בודקים אם WebMCP נתמך.
רושמים את הכלי list_items:
- היא לא מקבלת פרמטרים של קלט והיא מוגדרת לקריאה בלבד.
- הפונקציה execute צריכה לקרוא לפונקציה this.getItemsSummary().
רושמים את הכלי reset_filters:
- היא לא מקבלת פרמטרים של קלט.
- הפונקציה execute צריכה לקרוא לפונקציה this.resetFilters().
רושמים את הכלי semantic_catalog_filter:
- שימוש בכתובת semanticCatalogFilterSchema.
- הפונקציה execute צריכה לקרוא לפונקציה interpretAndApplySemanticFilter(input.query).

משימה 3.3: תזמור של סוכן המסנן הסמנטי

עכשיו הגיע הזמן לחבר את הכול. המשימה הזו הופכת את החיפוש לצינור סמנטי שמפעיל את הכלי semantic_catalog_filter:

עוברים לקובץ: src/ai/catalog-semantic-filter.ts

בדיקה של prewarmSemanticFilterSession() בשורות 84 עד 88:

export async function prewarmSemanticFilterSession(): Promise<void>

בודקים אם warmSession כבר קיים. אם כן, מחזירים מוקדם.
מפעילים מראש סשן של Prompt API עם SEMANTIC_FILTER_SYSTEM_PROMPT באמצעות getPromptSession() ומאחסנים אותו ב-warmSession. כדאי להוסיף את הבלוק try/catch כדי שאם החימום המוקדם ייכשל, עדיין תהיה אפשרות ליצור חיפוש.

בדיקת inferSearchFacets() בשורות 93 עד 134:

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

תפיסת הסשן שחומם מראש מ-warmSession אם הוא זמין (ואיפוס warmSession ל-null), או יצירת סשן חדש באמצעות getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
מזינים הנחיה למודל promptText, ומשתמשים ב-semanticFilterSchema כresponseConstraint.
מנתחים את ה-JSON שמוחזר, מאחסנים את התוצאה המנותחת במטמון הקבוע באמצעות cacheKey, ומשמידים את הסשן בבלוק finally.

בדיקת applyFacetsViaWebMCP() בשורות 139 עד 270:

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

אפשר לראות את הכלים הרשומים ב-document.modelContext באמצעות await document.modelContext.getTools().
כדי לאפס את המסננים ולהתחיל מחדש, מתקשרים אל await executeFacet('reset_filters', {}).
אפשר להחיל היבטים פעילים בו-זמנית באמצעות await Promise.all(facetTasks).

בדיקת interpretAndApplySemanticFilter() בשורות 272 עד 316:

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

הסקת היבטים של חיפוש על ידי קריאה ל-inferSearchFacets(searchTerm, cachedJourney).
החלת ההיבטים שהוסקו על הקטלוג באמצעות applyFacetsViaWebMCP(searchTerm, parsed).

אימות סוכן המודעה שמשולבת בדף

נווט אל http://localhost:5173/catalog.
בסרגל החיפוש העליון, מזינים: "lightweight 3 season tent for wet hikes"
אפשר לראות את Prompt API מנתח את הבקשה, מפעיל את activity_filter (Hiking), category_filter (Tents) ו-condition_filter (Wet), ומצמצם באופן מיידי את הקטלוג לציוד מתאים בלי שצריך לסמן תיבות סימון באופן ידני.

6. מה למדתם

מעולה. הפכתם אפליקציית מסחר אלקטרוני לחוויה חכמה שמתבססת על סוכנים, ומופעלת כולה על ידי AI במכשיר וממשקי API סטנדרטיים של פלטפורמת אינטרנט.

מה יצרתם:

‫On-device Prompt API: סינתזנו ציר זמן של היסטוריית הגלישה של המשתמשים באמצעות LanguageModel כדי ליצור JourneyProfile הקשר בזמן אמת, ובנינו rankComplementaryGear מנוע סינרגיה באמצעות סכימות JSON מובנות (responseConstraint).
כלים של רכיב WebMCP: כלים מודולריים רשומים ומוצפנים ברכיבי ממשק משתמש (get_recommendations,‏ get_current_product,‏ view_cart,‏ manage_cart) דרך document.modelContext.
ארכיטקטורה של העברת בקשות לסוכן: ביצוע הבדיקה והאימות של הכלי באמצעות התוסף Chrome WebMCP Inspector.
סוכן בדף באתר: כלים בצד הלקוח שמתואמים ישירות בדפדפן כדי להפעיל חיפוש בקטלוג בשפה טבעית עם היבטים רבים מסרגל החיפוש בכותרת האתר.
מודלים מיוחדים של AI במכשיר: נבדק תרגום דינמי במכשיר באמצעות Translator.

נקודות מרכזיות:

אפס זמן אחזור ופרטיות גבוהה: מודלים שפועלים במכשיר כמו Gemini Nano מבטלים את הצורך במפתחות API בענן, את זמן האחזור ברשת ואת החששות לגבי זליגת נתונים.
פלט מובנה הוא חיוני: שימוש בסכימות JSON עם responseConstraint הופך יצירת טקסט יצירתי ללוגיקת אפליקציה מהימנה שמונעת שגיאות הקלדה.
WebMCP מכין את האינטרנט לסוכני AI: רישום כלים ישירות ב-DOM מאפשר גם לתכונות עזר פנימיות וגם לסוכני דפדפן חיצוניים אוטונומיים לבצע פעולות מאומתות ודטרמיניסטיות.
מאפשרים למודל להציע, לא לבצע: הגבלת המודל לשימוש בenum של הכלים הרשומים ושליחת התוצאה בעצמכם מאפשרת לבדוק את ההתנהגות של הסוכן ומונעת ממנו להמציא פעולות.

שיפור תהליך התשלום במסחר אלקטרוני באמצעות יכולות AI בדפדפן

1. מבוא

מה תלמדו

דרישות מוקדמות

2. הגדרת הפרויקט

חשבון Google

הפעלת החיוב

יצירת פרויקט (אופציונלי)

פתיחת Cloud Shell Editor

הגדרת הפרויקט

הגדרה מקומית והגדרת Workspace

(אופציונלי) התקנת התוסף WebMCP inspector

3. מודלים מוטמעים של AI באינטרנט

מה זה Prompt API?

תרגיל 1: המלצות מבוססות-מסלול

משימה 1.1: הפעלת Prompt API

משימה 1.2: הטמעה של כלי ליצירת פרופיל של מסלול ההמרה

משימה 1.3: הטמעה של רכיב לדירוג מחדש של תוצאות החיפוש

אימות צינור ההמלצות

(אופציונלי) משימה 1.4: בדיקת מודלים נוספים של AI מובנה

4. שימוש ב-WebMCP כדי לשפר את חוויית השימוש בסוכן

מהו WebMCP?

משימה 2.1: המלצות וכלי מוצר

משימה 2.2: כלים בחלונית ההזזה של עגלת הקניות

משימה 2.3: כלי להחלפת שפה

משימה 2.4: כלים לניווט בחנות

אימות באמצעות הכלי לבדיקת WebMCP

5. (אופציונלי) בניית סוכן באתר

הפעלת כלי WebMCP בדף

משימה 3.1: כלים של היבטים בסרגל הצד

משימה 3.2: כלים לתצוגת קטלוג

משימה 3.3: תזמור של סוכן המסנן הסמנטי

אימות סוכן המודעה שמשולבת בדף

6. מה למדתם

מה יצרתם:

נקודות מרכזיות:

שיפור תהליך התשלום במסחר אלקטרוני באמצעות יכולות AI בדפדפן

1. מבוא

מה תלמדו

דרישות מוקדמות

2. הגדרת הפרויקט

חשבון Google

כניסה למסוף Google Cloud

הפעלת החיוב

יצירת פרויקט (אופציונלי)

פתיחת Cloud Shell Editor

הגדרת הפרויקט

הגדרה מקומית והגדרת Workspace

(אופציונלי) התקנת התוסף WebMCP inspector

3. מודלים מוטמעים של AI באינטרנט

מה זה Prompt API?

תרגיל 1: המלצות מבוססות-מסלול

משימה 1.1: הפעלת Prompt API

משימה 1.2: הטמעה של כלי ליצירת פרופיל של מסלול ההמרה

משימה 1.3: הטמעה של רכיב לדירוג מחדש של תוצאות החיפוש

אימות צינור ההמלצות

(אופציונלי) משימה 1.4: בדיקת מודלים נוספים של AI מובנה

4. שימוש ב-WebMCP כדי לשפר את חוויית השימוש בסוכן

מהו WebMCP?

משימה 2.1: המלצות וכלי מוצר

משימה 2.2: כלים בחלונית ההזזה של עגלת הקניות

משימה 2.3: כלי להחלפת שפה

משימה 2.4: כלים לניווט בחנות

אימות באמצעות הכלי לבדיקת WebMCP

5. (אופציונלי) בניית סוכן באתר

הפעלת כלי WebMCP בדף

משימה 3.1: כלים של היבטים בסרגל הצד

משימה 3.2: כלים לתצוגת קטלוג

משימה 3.3: תזמור של סוכן המסנן הסמנטי

אימות סוכן המודעה שמשולבת בדף

6. מה למדתם

מה יצרתם:

נקודות מרכזיות: