Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การปรับปรุงการชำระเงินอีคอมเมิร์ซด้วยความสามารถของ AI ในเบราว์เซอร์

1. บทนำ

การพัฒนาเว็บสมัยใหม่มีทางเลือกอื่นแทนการเดินทางไปกลับในระบบคลาวด์สำหรับการใช้งาน AI Chrome ได้เริ่มจัดส่ง AI API ในตัวที่ช่วยให้คุณใช้ทุกอย่างได้ตั้งแต่โมเดลผู้เชี่ยวชาญขนาดเล็กสำหรับการแปลไปจนถึงโมเดลภาษาแบบเต็มที่กลั่นกรองที่มีประสิทธิภาพ โดยทั้งหมดนี้ไม่มีค่าใช้จ่ายโทเค็นสำหรับคุณหรือผู้ใช้ และทำงานแบบส่วนตัวในอุปกรณ์ของผู้ใช้

ในขณะเดียวกัน AI Agent ก็เป็นวิธีใหม่ที่ผู้ใช้จะโต้ตอบกับเว็บแอปพลิเคชัน และการเตรียมประสบการณ์บนเว็บให้พร้อมสำหรับ Agent ด้วย WebMCP จะช่วยลดการใช้โทเค็นในขณะที่ให้ผลลัพธ์ที่แม่นยำกว่าการกระตุ้นแบบเดิมที่ต้องใช้ภาพหน้าจอและการขูด DOM

ใน Codelab นี้ คุณจะได้ทำงานกับ Mont-Royal Plein Air ซึ่งเป็นเว็บไซต์อีคอมเมิร์ซอุปกรณ์กลางแจ้ง คุณจะได้เรียนรู้วิธีสร้างและผสานรวม API ของ AI ในตัวและ WebMCP เพื่อทำสิ่งต่อไปนี้

อนุมานความตั้งใจของลูกค้าจากประวัติการท่องเว็บและสร้างคำแนะนำแบบไดนามิกสำหรับลูกค้าโดยใช้โมเดลในอุปกรณ์
แสดงเครื่องมือที่ตัวแทนและผู้ช่วยเบราว์เซอร์ใช้เพื่อไปยังส่วนต่างๆ ของเว็บไซต์ ตรวจสอบผลิตภัณฑ์และสินค้าแนะนำ รวมถึงจัดการรถเข็นช็อปปิ้งของผู้ใช้
(ไม่บังคับ) แปลเว็บไซต์ได้ทันทีโดยใช้โมเดลผู้เชี่ยวชาญขนาดเล็กในอุปกรณ์
(ไม่บังคับ) เปลี่ยนการค้นหาเว็บไซต์ขั้นพื้นฐานให้เป็นเอเจนต์ในเว็บไซต์ที่ทำงานด้วยเครื่องมือเดียวกับที่เอเจนต์ภายนอกใช้

สิ่งที่คุณจะได้เรียนรู้

วิธีใช้ Prompt API และบังคับใช้เอาต์พุต JSON ที่มีโครงสร้างจาก API
วิธีลงทะเบียนเครื่องมือ WebMCP และกลยุทธ์ในการพิจารณาองค์ประกอบและความละเอียดของเครื่องมือ
(ไม่บังคับ) วิธีใช้ Translator API เพื่อแปลเนื้อหาอย่างรวดเร็วโดยใช้โมเดลผู้เชี่ยวชาญในอุปกรณ์
(ไม่บังคับ) วิธีเรียกใช้เครื่องมือ WebMCP ด้วยตนเอง

ข้อกำหนดเบื้องต้น

บัญชี Google ส่วนบุคคลและ Google Cloud
Google Chrome เวอร์ชัน 150 ขึ้นไป หรือช่อง Canary, Dev หรือ Beta โดยเปิดใช้แฟล็ก #enable-webmcp-testing และ #devtools-webmcp-support
มีความคุ้นเคยกับ HTML, CSS, JavaScript และ TypeScript
คุ้นเคยกับ JSON Schema

2. การตั้งค่าโปรเจ็กต์

บัญชี Google

หากยังไม่มีบัญชี Google ส่วนบุคคล คุณต้องสร้างบัญชี Google

ลงชื่อเข้าใช้ คอนโซล Google Cloud โดยใช้บัญชี Google ส่วนตัว

เปิดใช้การเรียกเก็บเงิน

หากต้องการตั้งค่าบัญชีสำหรับการเรียกเก็บเงินส่วนตัว ให้เปิดใช้การเรียกเก็บเงินใน Cloud Console

สร้างโปรเจ็กต์ (ไม่บังคับ)

หากไม่มีโปรเจ็กต์ปัจจุบันที่ต้องการใช้ในแล็บนี้ ให้สร้างโปรเจ็กต์ใหม่ที่นี่

เปิดเครื่องมือแก้ไข Cloud Shell

คลิกลิงก์นี้เพื่อไปยัง 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

คุณสามารถติดตั้งเครื่องมือตรวจสอบบริบทโมเดล WebMCP เพื่อให้การทำงานกับ WebMCP ง่ายขึ้น เมื่อติดตั้งแล้ว คุณจะต้องรับคีย์ Gemini API เพื่อใช้งาน โดยทำดังนี้

ไปที่ AI Studio
คลิกปุ่มสร้างคีย์ API เพื่อสร้างคีย์ Gemini API ใหม่ที่เชื่อมโยงกับโปรเจ็กต์ที่คุณตั้งค่าไว้ก่อนหน้านี้ในขั้นตอนนี้
เปิดเครื่องมือตรวจสอบบริบทโมเดล WebMCP (จะเปิดในแผงด้านข้าง) แล้วคลิกปุ่มอัปเดต Gemini API Key
วางคีย์ API ลงในป๊อปอัปแล้วบันทึก

ส่วนขยายนี้มี Agent พื้นฐานที่ใช้ WebMCP ได้ ซึ่งช่วยให้คุณทดลองใช้เว็บไซต์ผ่านส่วนขยายนี้แทนการเรียกใช้เครื่องมือ WebMCP ผ่านเครื่องมือสำหรับนักพัฒนาเว็บโดยตรง

3. โมเดล AI ในตัวบนเว็บ

Prompt API คืออะไร

Prompt API ช่วยให้เว็บแอปพลิเคชันเข้าถึงโมเดลภาษาขนาดเล็กแบบมัลติโมดัลที่ทำงานบนอุปกรณ์ของผู้ใช้โดยตรงได้ เนื่องจากการอนุมานจะดำเนินการในเครื่อง

เวลาในการตอบสนองของระบบคลาวด์เป็น 0: ไม่มีการเดินทางไปกลับของเครือข่ายหรือการจัดคิวเซิร์ฟเวอร์แบ็กเอนด์
เป็นส่วนตัวโดยค่าเริ่มต้น: พรอมต์และบริบทที่ส่งไปยังพรอมต์จะไม่เคยออกจากอุปกรณ์
ไม่มีค่าใช้จ่าย: การอนุมานจะทำงานบนฮาร์ดแวร์ของไคลเอ็นต์โดยไม่มีการเรียกเก็บเงินตามโทเค็นหรือค่าใช้จ่ายในการโฮสต์ระบบคลาวด์
ใช้งานแบบออฟไลน์ได้: ทำงานได้อย่างน่าเชื่อถือแม้จะไม่มีการเชื่อมต่ออินเทอร์เน็ตที่ใช้งานอยู่

ใน 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: คำแนะนำตามเส้นทาง

โดยปกติแล้ว เว็บไซต์อีคอมเมิร์ซจะมีภาพหมุนหรือการอัปเซลล์ของรายการ "มักซื้อร่วมกัน" สำหรับเว็บไซต์กลางแจ้ง การสร้างคำแนะนำตามประวัติการท่องเว็บอาจมีประโยชน์มากกว่า

คุณจะต้องสร้างไปป์ไลน์การแนะนำ 3 ขั้นตอนเพื่อดำเนินการนี้

โปรไฟล์เส้นทาง: คุณจะใช้ Prompt API เพื่อวิเคราะห์ไทม์ไลน์การท่องเว็บตามลำดับเวลาของลูกค้าเพื่อพยายามอนุมานความตั้งใจในการผจญภัยที่แท้จริงของผู้ใช้
การค้นหาผลิตภัณฑ์: จากความตั้งใจนั้น คุณจะส่งคำขอ API ไปยังแบ็กเอนด์ของผลิตภัณฑ์จำลองเพื่อรับสินค้าที่เกี่ยวข้อง
สินค้าแนะนำ: คุณจะส่งผลิตภัณฑ์เหล่านั้นกลับไปยัง Product API เพื่อจัดอันดับ โดยจะแสดงผลิตภัณฑ์ 5 รายการที่สอดคล้องกับสิ่งที่ผู้ใช้กำลังดูมากที่สุด

งานที่ 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: ติดตั้งใช้งาน Journey Profiler

ไปที่ไฟล์ src/ai/journey-profiler.ts แล้วตรวจสอบฟังก์ชันเป้าหมายในบรรทัดที่ 42–100

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

ใช้ฟังก์ชันจากงานที่ 1 เพื่อสร้างเซสชันพรอมต์ใหม่ที่จะใช้
แจ้งโมเดลด้วยข้อความพรอมต์ที่ระบุ โดยใช้ journeyProfileSchema เป็น JSON Schema สำหรับการตอบกลับที่มีโครงสร้าง
แยกวิเคราะห์เอาต์พุตของพรอมต์และขจัดหมวดหมู่เป้าหมายที่ซ้ำกัน
แทนที่สตริงที่เขียนโค้ดไว้ด้วยผลลัพธ์จริงจากพรอมต์
ทำลายเซสชันเมื่อเสร็จสิ้นเพื่อเพิ่มหน่วยความจำ

งานที่ 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 เพื่อตรวจสอบระยะเวลาการดำเนินการแบบเรียลไทม์ของทั้ง 2 ขั้นตอนการอนุมาน

(ไม่บังคับ) งานที่ 1.4: สำรวจโมเดล AI ในตัวเพิ่มเติม

นอกจากนี้ยังมีโมเดล AI ในตัวอื่นๆ อีกหลายโมเดลให้ใช้งาน รวมถึงโมเดลผู้เชี่ยวชาญของ Translator API คอมโพเนนต์ในโค้ดเบสนี้เชื่อมต่อกับบริการที่คอยฟังการเปลี่ยนแปลงในภาษาปัจจุบันและขอการแปลอยู่แล้ว และคุณมีหน้าที่เชื่อมต่อทุกอย่าง

ไปที่ไฟล์ src/ai/translator.ts

ตรวจสอบฟังก์ชันเป้าหมาย createTranslator ในบรรทัดที่ 29–45:

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

ตรวจสอบว่า 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 คืออะไร

เมื่อผู้ใช้เริ่มใช้เอเจนต์แบบอัตโนมัติและเอเจนต์ที่ใช้การเรียกดูร่วมกัน เว็บไซต์จึงต้องปรับตัว โดยปกติแล้ว Agent จะอาศัยการกระตุ้น ซึ่งเป็นการถ่ายภาพหน้าจอและคัดลอก 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 หรือไม่
หากเป็นเช่นนั้น ให้ลงทะเบียนเครื่องมือ

เลือกชื่อและคำอธิบายที่ดึงดูดให้ Agent เลือกใช้เครื่องมือดังกล่าว โดยคิดถึงวิศวกรรมพรอมต์ (Prompt Engineering) ในที่นี้
ไม่มีอินพุต ดังนั้นให้รวมสคีมา JSON ของออบเจ็กต์ที่ว่างเปล่า
นี่คือเครื่องมือแบบอ่านอย่างเดียว
ในฟังก์ชันการดำเนินการ ให้ใช้ 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 ซึ่งเป็นอาร์เรย์ของออบเจ็กต์ที่มี productID, add, remove และ update action enum รวมถึงจำนวนเต็ม 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 > แอปพลิเคชัน > 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 ในหน้าเว็บใด แทนที่จะเขียนโค้ดคำสั่งที่กำหนดเองเพื่อประสานงานตัวกรองข้อมูลประกอบจำนวนมาก

แนวทางปฏิบัติแนะนำ: แม้ว่าเอเจนต์ที่คุณสร้างจะแทนที่แถบค้นหา แต่คุณไม่ควรใช้ LLM สำหรับการค้นหาในเว็บไซต์ เนื่องจากมีรูปแบบและอัลกอริทึมที่มีประสิทธิภาพ แม่นยำ และเป็นที่ยอมรับมากกว่าสำหรับการค้นหาดังกล่าว ตัวอย่างนี้มีไว้เพื่อแสดงการเรียกใช้เครื่องมือ 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 เพื่อให้ตัวแทน (และผู้ช่วยค้นหาในหน้าเว็บ) สลับตัวกรองแบบเป็นโปรแกรมได้

คอมโพเนนต์ Facet แต่ละรายการใน 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: จัดการ Agent ตัวกรองเชิงความหมาย

ตอนนี้ก็ถึงเวลาต่อสายไฟทั้งหมดแล้ว งานนี้จะเปลี่ยนการค้นหาให้เป็นไปป์ไลน์เชิงความหมายที่ขับเคลื่อน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 ของแพลตฟอร์มเว็บมาตรฐานทั้งหมด

สิ่งที่คุณสร้าง

Prompt API ในอุปกรณ์: สังเคราะห์ไทม์ไลน์การท่องเว็บของผู้ใช้ด้วย LanguageModel เพื่อสร้างบริบท JourneyProfile แบบเรียลไทม์ และสร้างrankComplementaryGearเครื่องมือเสริมประสิทธิภาพโดยใช้สคีมา JSON ที่มีโครงสร้าง (responseConstraint)
เครื่องมือคอมโพเนนต์ WebMCP: เครื่องมือแบบโมดูลาร์ที่ลงทะเบียนแล้วและแคปซูลในคอมโพเนนต์ UI (get_recommendations, get_current_product, view_cart, manage_cart) ผ่าน document.modelContext
สถาปัตยกรรมตัวแทนส่งต่อ: ทดสอบและยืนยันการดำเนินการเครื่องมือโดยใช้ส่วนขยาย Chrome WebMCP Inspector
เอเจนต์ในหน้าเว็บของเว็บไซต์: เครื่องมือฝั่งไคลเอ็นต์ที่จัดระเบียบโดยตรงในเบราว์เซอร์เพื่อขับเคลื่อนการค้นหาแคตตาล็อกด้วยภาษาธรรมชาติแบบหลายแง่มุมจากแถบค้นหาในส่วนหัวของเว็บไซต์
โมเดล AI ในอุปกรณ์เฉพาะทาง: ทดลองใช้การแปลในอุปกรณ์แบบไดนามิกโดยใช้ Translator

สิ่งสำคัญที่เรียนรู้

ความหน่วงเป็นศูนย์และความเป็นส่วนตัวสูง: โมเดลในอุปกรณ์ เช่น Gemini Nano ช่วยลดความกังวลเกี่ยวกับคีย์ API ของระบบคลาวด์ ความหน่วงของเครือข่าย และการขโมยข้อมูล
เอาต์พุตที่มีโครงสร้างเป็นสิ่งจำเป็น: การใช้สคีมา JSON กับ responseConstraint จะเปลี่ยนการสร้างข้อความครีเอทีฟโฆษณาให้เป็นตรรกะของแอปพลิเคชันที่เชื่อถือได้และปลอดภัย
WebMCP เตรียมเว็บสำหรับ AI Agent: การลงทะเบียนเครื่องมือใน DOM โดยตรงจะช่วยให้ทั้งฟีเจอร์ความช่วยเหลือภายในและ Agent เบราว์เซอร์อัตโนมัติภายนอกสามารถดำเนินการที่ได้รับการยืนยันและกำหนดได้
ให้โมเดลเสนอ ไม่ใช่ดำเนินการ: การจำกัดโมเดลให้อยู่ใน enum ของเครื่องมือที่ลงทะเบียนไว้และการส่งผลลัพธ์ด้วยตนเองจะช่วยให้ตรวจสอบพฤติกรรมของเอเจนต์ได้และป้องกันไม่ให้เอเจนต์สร้างการดำเนินการขึ้นมาเอง

การปรับปรุงการชำระเงินอีคอมเมิร์ซด้วยความสามารถของ AI ในเบราว์เซอร์

1. บทนำ

สิ่งที่คุณจะได้เรียนรู้

ข้อกำหนดเบื้องต้น

2. การตั้งค่าโปรเจ็กต์

บัญชี Google

เปิดใช้การเรียกเก็บเงิน

สร้างโปรเจ็กต์ (ไม่บังคับ)

เปิดเครื่องมือแก้ไข Cloud Shell

ตั้งค่าโปรเจ็กต์

การตั้งค่าในเครื่องและ Workspace

(ไม่บังคับ) ติดตั้งส่วนขยายเครื่องมือตรวจสอบ WebMCP

3. โมเดล AI ในตัวบนเว็บ

Prompt API คืออะไร

แบบฝึกหัดที่ 1: คำแนะนำตามเส้นทาง

งานที่ 1.1: การเริ่มต้นใช้งาน Prompt API

งาน 1.2: ติดตั้งใช้งาน Journey Profiler

งานที่ 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: จัดการ Agent ตัวกรองเชิงความหมาย

ยืนยันตัวแทนในหน้าเว็บ

6. สิ่งที่คุณได้เรียนรู้

สิ่งที่คุณสร้าง

สิ่งสำคัญที่เรียนรู้

การปรับปรุงการชำระเงินอีคอมเมิร์ซด้วยความสามารถของ AI ในเบราว์เซอร์

1. บทนำ

สิ่งที่คุณจะได้เรียนรู้

ข้อกำหนดเบื้องต้น

2. การตั้งค่าโปรเจ็กต์

บัญชี Google

ลงชื่อเข้าใช้คอนโซล Google Cloud

เปิดใช้การเรียกเก็บเงิน

สร้างโปรเจ็กต์ (ไม่บังคับ)

เปิดเครื่องมือแก้ไข Cloud Shell

ตั้งค่าโปรเจ็กต์

การตั้งค่าในเครื่องและ Workspace

(ไม่บังคับ) ติดตั้งส่วนขยายเครื่องมือตรวจสอบ WebMCP

3. โมเดล AI ในตัวบนเว็บ

Prompt API คืออะไร

แบบฝึกหัดที่ 1: คำแนะนำตามเส้นทาง

งานที่ 1.1: การเริ่มต้นใช้งาน Prompt API

งาน 1.2: ติดตั้งใช้งาน Journey Profiler

งานที่ 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: จัดการ Agent ตัวกรองเชิงความหมาย

ยืนยันตัวแทนในหน้าเว็บ

6. สิ่งที่คุณได้เรียนรู้

สิ่งที่คุณสร้าง

สิ่งสำคัญที่เรียนรู้