Nâng cao quy trình thanh toán của trang thương mại điện tử bằng các tính năng AI của trình duyệt

1. Giới thiệu

Công nghệ phát triển web hiện đại cung cấp một giải pháp thay thế cho các chuyến khứ hồi dựa trên đám mây để sử dụng AI. Chrome đã bắt đầu cung cấp các API AI tích hợp cho phép bạn sử dụng mọi thứ, từ các mô hình chuyên gia nhỏ để dịch cho đến các mô hình ngôn ngữ đầy đủ được tinh chỉnh, tất cả đều không tốn mã thông báo cho bạn hoặc người dùng của bạn, chạy riêng tư trên thiết bị của họ.

Đồng thời, các tác nhân AI mang đến một cách thức mới để người dùng tương tác với các ứng dụng web. Việc chuẩn bị sẵn sàng cho tác nhân trải nghiệm web của bạn bằng WebMCP có thể giúp giảm mức sử dụng mã thông báo trong khi cung cấp kết quả chính xác hơn so với phương thức kích hoạt truyền thống yêu cầu ảnh chụp màn hình và trích xuất DOM.

Trong lớp học lập trình này, bạn sẽ làm việc trên Mont-Royal Plein Air, một trang web thương mại điện tử về thiết bị ngoài trời. Bạn sẽ tìm hiểu cách tạo và tích hợp các API AI tích hợp sẵn và WebMCP để:

  1. Suy luận ý định của khách hàng từ nhật ký duyệt web và tự động tạo đề xuất cho họ bằng các mô hình trên thiết bị.
  2. Hiển thị các công cụ mà các tác nhân và trợ lý trình duyệt có thể sử dụng để điều hướng trang web, kiểm tra sản phẩm và đề xuất, cũng như quản lý giỏ hàng của người dùng.
  3. (Không bắt buộc) Dịch trang web của bạn ngay lập tức bằng các mô hình chuyên gia nhỏ trên thiết bị.
  4. (Không bắt buộc) Chuyển đổi tính năng tìm kiếm cơ bản trên trang web thành một tác nhân trên trang web bằng cách sử dụng các công cụ tương tự như tác nhân bên ngoài.

Kiến thức bạn sẽ học được

  • Cách sử dụng Prompt API và thực thi đầu ra JSON có cấu trúc từ API này.
  • Cách đăng ký các công cụ WebMCP và chiến lược để xem xét thành phần cũng như độ chi tiết của công cụ.
  • (Không bắt buộc) Cách sử dụng Translator API để dịch nhanh nội dung bằng mô hình chuyên gia trên thiết bị.
  • (Không bắt buộc) Cách tự gọi các công cụ WebMCP.

Điều kiện tiên quyết

  • Tài khoản Google cá nhân và Google Cloud.
  • Google Chrome phiên bản 150 trở lên hoặc các kênh Canary, Dev hoặc Beta, có bật cờ #enable-webmcp-testing và #devtools-webmcp-support.
  • Có kiến thức về HTML, CSS, JavaScript và TypeScript.
  • Sử dụng thành thạo Giản đồ JSON.

2. Thiết lập dự án

Tài khoản Google

Nếu chưa có Tài khoản Google cá nhân, bạn phải tạo một Tài khoản Google.

Đăng nhập vào Cloud Console

Đăng nhập vào Google Cloud Console bằng Tài khoản Google cá nhân.

Bật tính năng thanh toán

Để thiết lập tài khoản thanh toán cá nhân, hãy bật tính năng thanh toán trong Cloud Console.

Tạo dự án (không bắt buộc)

Nếu bạn không có dự án hiện tại muốn sử dụng cho lớp học này, hãy tạo một dự án mới tại đây.

Mở trình chỉnh sửa Cloud Shell

  1. Nhấp vào đường liên kết này để chuyển trực tiếp đến Cloud Shell Editor.
  2. Nếu bạn được nhắc uỷ quyền vào bất kỳ thời điểm nào trong ngày hôm nay, hãy nhấp vào Uỷ quyền để tiếp tục. Nhấp để uỷ quyền cho Cloud Shell
  3. Nếu thiết bị đầu cuối không xuất hiện ở cuối màn hình, hãy mở thiết bị đầu cuối:
    • Nhấp vào Chế độ xem.
    • Nhấp vào Terminal (Thiết bị đầu cuối).Mở cửa sổ lệnh mới trong Trình chỉnh sửa Cloud Shell

Thiết lập dự án

  1. Trong thiết bị đầu cuối, hãy thiết lập dự án bằng lệnh sau: 
    gcloud config set project [PROJECT_ID]
    Ví dụ: gcloud config set project lab-project-id-example Đặt mã dự án trong thiết bị đầu cuối Cloud Shell Editor
  2. Bạn sẽ thấy thông báo sau: Updated property [core/project].

Thiết lập cục bộ và thiết lập Workspace

  1. Trong thiết bị đầu cuối (hoặc thiết bị đầu cuối Cloud Shell), hãy sao chép kho lưu trữ dự án và chuyển đến thư mục dự án: 
    git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
cd mont-royal
  2. Chuyển đến thư mục ecommerce-ai-enhancements/starter: 
    cd ecommerce-ai-enhancements/starter
  3. Cài đặt các phần phụ thuộc bằng pnpm: 
    pnpm install
  4. Khởi động máy chủ phát triển cục bộ: 
    pnpm dev
    Mở trình duyệt để truy cập vào http://localhost:5173 và xem cửa hàng Mont-Royal Plein Air.

(Không bắt buộc) Cài đặt tiện ích trình kiểm tra WebMCP

Để dễ dàng làm việc với WebMCP, bạn có thể cài đặt Công cụ kiểm tra ngữ cảnh mô hình WebMCP. Sau khi cài đặt, bạn cần lấy khoá Gemini API để sử dụng:

  • Chuyển đến AI Studio.
  • Nhấp vào nút Tạo khoá API để tạo một Khoá Gemini API mới được liên kết với dự án mà bạn đã thiết lập ở bước trước.
  • Mở Công cụ kiểm tra bối cảnh mô hình WebMCP (công cụ này sẽ mở ra trong bảng điều khiển bên) rồi nhấp vào nút Cập nhật khoá API Gemini.
  • Dán khoá API vào cửa sổ bật lên rồi lưu.

Tiện ích này có một tác nhân cơ bản có thể sử dụng WebMCP, cho phép bạn dùng thử trang web của mình thông qua tiện ích này thay vì gọi trực tiếp các công cụ WebMCP thông qua Công cụ cho nhà phát triển.

3. Các mô hình AI tích hợp sẵn trên web

Prompt API là gì?

Prompt API giúp các ứng dụng web có quyền truy cập trực tiếp vào một mô hình ngôn ngữ đa phương thức nhỏ chạy hoàn toàn trên thiết bị của người dùng. Vì quá trình suy luận diễn ra cục bộ:

  • Độ trễ bằng 0 trên đám mây: Không có chuyến khứ hồi trên mạng hoặc hàng đợi máy chủ phụ trợ.
  • Riêng tư theo mặc định: Các câu lệnh và mọi ngữ cảnh được truyền đến các câu lệnh đó sẽ không bao giờ rời khỏi thiết bị
  • Không tốn phí: Suy luận chạy trên phần cứng của máy khách mà không tốn phí lập hoá đơn theo mã thông báo hoặc chi phí lưu trữ trên đám mây.
  • Có thể hoạt động ngoại tuyến: Hoạt động ổn định ngay cả khi không có kết nối Internet.

Trong Chrome, bạn có thể truy cập Prompt API thông qua giao diện LanguageModel chung.

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

Bài tập 1: Đề xuất dựa trên hành trình

Các trang web thương mại điện tử thường có băng chuyền hoặc đề xuất bán thêm các mặt hàng "thường được mua cùng nhau". Đối với một trang web về hoạt động ngoài trời, việc xây dựng những đề xuất đó dựa trên nhật ký duyệt web có thể hữu ích hơn.

Để thực hiện việc này, bạn sẽ xây dựng một quy trình đề xuất gồm 3 giai đoạn:

  1. Trình phân tích hành trình: Bằng cách sử dụng Prompt API, bạn sẽ phân tích dòng thời gian duyệt web theo trình tự của khách hàng để cố gắng suy luận ý định thực sự về chuyến phiêu lưu của người dùng.
  2. Truy vấn sản phẩm: Từ ý định đó, bạn sẽ đưa ra một yêu cầu API đến một phần phụ trợ sản phẩm giả để nhận các mặt hàng có liên quan.
  3. Đề xuất sản phẩm: Bạn sẽ chuyển những sản phẩm đó trở lại Product API để xếp hạng, trả về 5 sản phẩm phù hợp nhất với nội dung mà người dùng đang xem.

Nhiệm vụ 1.1: Khởi chạy Prompt API

Thay vì khởi chạy Prompt API riêng lẻ mỗi khi muốn sử dụng, bạn sẽ tập trung các lệnh gọi vào một tệp duy nhất, ghi nhớ việc tạo bằng lời nhắc hệ thống để giảm thời gian khởi động cho nhiều lệnh gọi đến cùng một tác nhân.

Chuyển đến tệp src/ai/prompt-api.ts và kiểm tra getPromptSession() trên các dòng 27–58:

export async function getPromptSession(
  systemPrompt: string = '',
  options: { signal?: AbortSignal } = {}
): Promise<LanguageModel>
  1. Sử dụng lại một phiên cơ sở được lưu vào bộ nhớ đệm. Đã có một bản đồ bộ nhớ đệm trên dòng 21, baseSessions, được khoá bằng lời nhắc hệ thống. Việc sử dụng lại các mô hình cơ sở thay vì clone() các mô hình mới sẽ giảm thời gian khởi động và kế thừa chế độ thiết lập cốt lõi mà không làm cho mỗi phiên hoạt động can thiệp lẫn nhau. Trả về bản sao – người gọi có thể tương tác với bản sao này, bao gồm cả việc destroy() bản sao một cách thoải mái mà không cần loại bỏ cơ sở được lưu vào bộ nhớ đệm.
  2. Phát hiện tính năng của API. Phát hiện tính năng nếu API tồn tại, gửi lỗi nếu API không tồn tại.
  3. Khai báo phương thức và ngôn ngữ. Các mô hình tích hợp sẵn có thể hỗ trợ dữ liệu đầu vào đa phương thức. Bạn cần khai báo những chế độ bạn cần và những ngôn ngữ bạn muốn hỗ trợ. Tất cả nội dung bạn truyền cho LLM đều bằng tiếng Anh.
  4. Kiểm tra phạm vi cung cấp trước khi tạo nội dung. Ngay cả khi API tồn tại, thì có thể mô hình đáp ứng các yêu cầu của bạn lại không tồn tại. Kiểm tra xem có tài khoản nào không. Nếu không, hãy gửi thông báo lỗi. Nếu tệp chưa được tải xuống, hãy báo cáo tiến trình tải xuống.
  5. Tạo phiên. Thiết lập các lựa chọn để tạo một phiên Prompt API mới và câu lệnh hệ thống (nếu có)

Nhiệm vụ 1.2: Triển khai trình phân tích hành trình

Chuyển đến tệp src/ai/journey-profiler.ts rồi kiểm tra hàm mục tiêu trên các dòng 42–100:

export async function inferJourneyProfile(
  context: ProfilerInputContext,
  catalogMap: ReadonlyMap<string, Product>
): Promise<JourneyProfile>
  1. Sử dụng hàm trong Bước 1 để tạo một phiên câu lệnh mới để sử dụng.
  2. Nhắc mô hình bằng văn bản nhắc được cung cấp, sử dụng journeyProfileSchema làm Giản đồ JSON cho kết quả có cấu trúc.
  3. Phân tích cú pháp đầu ra của câu lệnh và loại bỏ các danh mục đích trùng lặp.
  4. Thay thế các chuỗi được mã hoá cứng bằng kết quả thực tế từ câu lệnh của bạn.
  5. Huỷ phiên khi phiên kết thúc để giải phóng bộ nhớ.

Việc 1.3: Triển khai bộ sắp xếp lại kết hợp

Chuyển đến tệp src/ai/synergy-reranker.ts rồi kiểm tra hàm mục tiêu trên các dòng 30–71:

export async function rankComplementaryGear(
  profile: JourneyProfile,
  candidates: readonly Product[],
  currentProduct?: Product | null,
  cartProducts?: readonly Product[],
  limit: number = 5
): Promise<readonly RecommendedItem[]>
  1. Sử dụng hàm trong Bước 1 để tạo một phiên câu lệnh mới để sử dụng.
  2. Đưa ra câu lệnh cho mô hình bằng văn bản câu lệnh và giản đồ được tạo.
  3. Phân tích cú pháp kết quả của câu lệnh.
  4. Trả về danh sách đề xuất đã được tổng hợp bằng cách sử dụng assembleRecommendations.
  5. Huỷ phiên khi phiên kết thúc để giải phóng bộ nhớ.

Xác minh quy trình đề xuất

  1. Mở Chrome để http://localhost:5173/catalog/tent-mont-tremblant-3p.
  2. Di chuyển xuống phần Dành cho bạn.
  3. Quan sát cách 5 thẻ đi kèm cập nhật để phản ánh các cặp thiết bị thông minh (chẳng hạn như dấu chân trên mặt đất, miếng lót ngủ và cọc nhẹ) thay vì các sản phẩm ngẫu nhiên.
  4. Mở Bảng điều khiển Công cụ của Chrome cho nhà phát triển để kiểm tra thời lượng thực thi theo thời gian thực của cả hai bước suy luận.

(Không bắt buộc) Bài tập 1.4: Khám phá thêm các mô hình AI tích hợp

Có một số mô hình AI tích hợp sẵn khác, bao gồm cả mô hình chuyên gia Translator API. Các thành phần trong toàn bộ mã nguồn này đã được kết nối với một dịch vụ lắng nghe các thay đổi về ngôn ngữ hiện tại và yêu cầu bản dịch. Nhiệm vụ của bạn là kết nối tất cả các thành phần đó.

Chuyển đến tệp: src/ai/translator.ts

Kiểm tra hàm mục tiêu createTranslator trên các dòng 29–45:

export async function createTranslator(
  targetLang: SupportedLanguage
): Promise<Translator | null>
  1. Kiểm tra xem Translator API có được hỗ trợ hay không và đảm bảo rằng ngôn ngữ đích không phải là tiếng Anh (nội dung mặc định là tiếng Anh).
  2. Tạo một cặp ngôn ngữ từ tiếng Anh sang ngôn ngữ đích và kiểm tra xem cặp ngôn ngữ đó có sẵn hay không.
  3. Tạo các lựa chọn cho trình dịch và đính kèm một màn hình theo dõi tiến trình tải mô hình xuống.
  4. Trả về trình dịch đã khởi tạo.

Tiếp theo, hãy kiểm tra hàm mục tiêu translate trên các dòng 50–58:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. Kiểm tra xem có trình dịch nào có sẵn với getCachedTranslator truyền trong targetLang hay không. Nếu không có, hãy trả về văn bản đã được làm sạch.
  2. Nếu có, hãy dùng trình dịch để dịch văn bản đã được làm sạch.

Chuyển đến tệp: src/ai/translator.ts

Kiểm tra hàm mục tiêu render trên dòng 204:

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. Bật thành phần Bộ chọn ngôn ngữ

4. Sử dụng WebMCP để cải thiện trải nghiệm của nhân viên hỗ trợ

WebMCP là gì?

Khi người dùng bắt đầu sử dụng các tác nhân tự trị và tác nhân duyệt web cùng nhau, việc các trang web thích ứng trở nên quan trọng. Theo truyền thống, các tác nhân dựa vào cơ chế kích hoạt (chụp ảnh màn hình và trích xuất DOM cũng như cây hỗ trợ tiếp cận) để xác định cách tương tác với một trang web. Cách này chậm, dễ bị lỗi và lãng phí mã thông báo của người dùng.

WebMCP giúp giải quyết vấn đề này bằng cách cho phép nhà phát triển cung cấp trực tiếp các công cụ cho tác nhân để tương tác với trang mà tác nhân đang truy cập. Các tác nhân hỗ trợ những công cụ này có thể sử dụng chúng giống như một công cụ trong bộ công cụ mã hoá của bạn, với các giá trị đầu vào và giá trị trả về rõ ràng, có cấu trúc do bạn chỉ định.

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

Khi một tác nhân kết nối với trang web, tác nhân đó sẽ truy vấn document.modelContext.getTools(). Mỗi công cụ đã đăng ký sẽ hiển thị:

  • name: Giá trị nhận dạng công cụ có lập trình mà các tác nhân sử dụng khi thực thi công cụ (ví dụ: 'get_product_specs').
  • title: Nhãn hiển thị mà con người có thể đọc được, được dùng bởi các thanh tra viên và giao diện của nhân viên hỗ trợ (ví dụ: 'Get Product Specs').
  • description: Nội dung mô tả bằng văn bản thuần tuý cho mô hình biết công cụ này làm gì và thời điểm gọi công cụ. Đây là cách mà một tác nhân xác định xem có nên gọi công cụ hay không, vì vậy, hãy mô tả một cách chi tiết.
  • inputSchema: Giản đồ JSON xác định các đối số được chấp nhận.
  • annotations: Gợi ý về hành vi, chẳng hạn như { readOnlyHint: true } cho các công cụ chỉ đọc không gây ra tác dụng phụ về trạng thái.
  • execute: Hàm không đồng bộ được thực thi khi công cụ được gọi.

Việc cần làm 2.1: Đề xuất và công cụ sản phẩm

Bạn bắt đầu bằng cách đăng ký một công cụ để cho phép các trợ lý ảo truy xuất những đề xuất mà bạn vừa tạo trong bài tập trước.

Chuyển đến tệp: src/components/product/ForYouSection.ts

Kiểm tra registerWebMCPTools() trên các dòng 71–94:

private registerWebMCPTools(): void
  1. Kiểm tra xem WebMCP có được hỗ trợ hay không.
  2. Nếu có, hãy đăng ký công cụ này.
  • Chọn một tiêu đề và nội dung mô tả hấp dẫn để tác nhân chọn công cụ này – hãy nghĩ đến thiết kế câu lệnh ở đây.
  • Không có dữ liệu đầu vào, vì vậy, bạn chỉ cần thêm một giản đồ JSON đối tượng trống.
  • Đây là một công cụ chỉ có thể đọc.
  • Trong hàm thực thi, hãy dùng recommendationStore để lấy bộ đề xuất hiện tại, sau đó trả về mã sản phẩm hiện tại và bộ đề xuất sản phẩm.
  • Thêm một tín hiệu huỷ và bắt tín hiệu đó để tín hiệu không gây ra lỗi. Điều này đảm bảo công cụ được xoá đúng cách khi thành phần huỷ gắn kết.

Chuyển đến tệp: src/views/ProductView.ts

  1. Lặp lại quy trình tương tự để đăng ký một công cụ get_current_product, lần này trả về toàn bộ sản phẩm cũng như các đề xuất

Nhiệm vụ 2.2: Công cụ ngăn giỏ hàng

Chuyển đến tệp: src/components/cart/CartDrawer.ts

Kiểm tra registerWebMCPTools() trên các dòng 83–114:

private registerWebMCPTools(): void
  1. Đăng ký công cụ view_cart:
  • inputSchema của đối tượng này phải là một đối tượng có một lựa chọn boolean duy nhất là openDrawer.
  • Bạn chỉ nên đọc.
  • Đọc dữ liệu đầu vào trong hàm execute, quyết định có hiện hay ẩn giỏ hàng, làm mới recommendationStore, sau đó trả về bản tóm tắt giỏ hàng
  1. Đăng ký công cụ manage_cart:
  • inputSchema của đối tượng này phải là một đối tượng có items, là một mảng các đối tượng có enum productID, add, remove và update action, cũng như số nguyên quantity,
  • Hàm execute phải chuyển các mục đến this.updateCart

Thao tác 2.3: Công cụ chuyển đổi ngôn ngữ

Khai thác WebMCP hơn nữa bằng cách cung cấp một công cụ ngôn ngữ cho các tác nhân bên ngoài.

Chuyển đến tệp: src/components/navigation/LanguagePicker.ts

Kiểm tra registerWebMCPTools() trên các dòng 61–63:

private registerWebMCPTools(): void
  1. Đăng ký công cụ switch_language:
    • inputSchema phải có một thuộc tính language là một enum của SUPPORTED_LANGUAGE_CODES.
    • Hàm execute của nó sẽ gọi this.switchLanguage bằng ngôn ngữ được cung cấp.

Việc 2.4: Công cụ điều hướng trong cửa hàng

Cho phép các tác nhân tự trị điều hướng cửa hàng, chuyển đến trang sản phẩm, duyệt xem danh mục hoặc bắt đầu tìm kiếm.

Chuyển đến tệp: src/components/navigation/SiteHeader.ts

Kiểm tra registerWebMCPTools() trên các dòng 155–171:

private registerWebMCPTools(): void
  1. Kiểm tra xem WebMCP có được hỗ trợ hay không.
  2. Đăng ký công cụ search:
    • Giản đồ đầu vào lấy chuỗi query.
    • Trong execute, hãy gọi this.search(input?.query).
  3. Đăng ký công cụ go_to_catalog:
    • Giản đồ đầu vào chấp nhận activity (enum của ACTIVITIES) và category (enum của PRODUCT_CATEGORIES) (không bắt buộc).
    • Trong execute, hãy gọi this.goToCatalog(input?.activity, input?.category).
  4. Đăng ký công cụ get_categories_and_activities:
    • Công cụ chỉ đọc không có tham số đầu vào.
    • Trong execute, hãy gọi this.getCategoriesAndActivities().
  5. Đăng ký công cụ go_to_product:
    • Sơ đồ đầu vào yêu cầu một chuỗi productId.
    • Trong execute, hãy gọi this.goToProduct(input?.productId).

Xác minh bằng trình kiểm tra WebMCP

  1. Tải lại http://localhost:5173/catalog/tent-mont-tremblant-3p trong Chrome rồi chuyển đến một trang sản phẩm.
  2. Mở Chrome DevTools > Application > WebMCP.
  3. Bạn sẽ thấy các công cụ WebMCP: get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities và go_to_product.
  4. Nhấp vào một trong số các sự kiện đó để xem thông tin chi tiết và thông số của sự kiện.
  5. Chọn một hoặc một số mục có tham số rồi nhấp vào Chạy công cụ để xem kết quả.
  6. (Không bắt buộc) Nếu bạn đã cài đặt và thiết lập WebMCP Model Context Tool Inspector, hãy mở công cụ này. Công cụ này sẽ mở trong bảng điều khiển bên của Chrome. Sử dụng giao diện trò chuyện để yêu cầu trợ lý thực hiện một hành động mà bạn cho rằng sẽ gọi một trong các công cụ của bạn để xem trợ lý phản hồi như thế nào.

5. (Không bắt buộc) Xây dựng một tác nhân tại chỗ

Gọi các công cụ WebMCP trong trang

Các công cụ WebMCP không chỉ dành cho tiện ích trình duyệt bên ngoài hoặc bot của bên thứ ba mà ứng dụng của riêng bạn cũng có thể gọi trực tiếp các công cụ này. Bằng cách truy vấn document.modelContext.getTools(), mã phía máy khách của bạn có thể khám phá và thực thi các công cụ một cách linh động.

Bạn có thể sử dụng công cụ này để tạo trợ lý mua sắm dựa trên AI trên trang web, biến thanh tìm kiếm thành một công cụ khám phá sản phẩm dựa trên thông tin đầu vào bằng ngôn ngữ tự nhiên. Thay vì viết mã mệnh lệnh tuỳ chỉnh để điều phối nhiều bộ lọc khía cạnh, thanh tìm kiếm của bạn có thể chuyển các cụm từ tìm kiếm bằng ngôn ngữ tự nhiên đến Prompt API. API này sẽ quyết định gọi công cụ WebMCP nào trong trang.

Cách khám phá và gọi một công cụ WebMCP từ 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

Nhiệm vụ 3.1: Công cụ khía cạnh trên thanh bên

Hiển thị từng khía cạnh của thanh bên danh mục cho WebMCP để các nhân viên hỗ trợ (và trợ lý tìm kiếm trên trang của bạn) có thể bật/tắt bộ lọc theo cách lập trình.

Mỗi thành phần khía cạnh trong src/components/facets/ đều cung cấp một phương thức trợ giúp trên lớp và một giản đồ đầu vào được xuất trong src/utils/filter-schemas.ts:

  1. Trong src/components/facets/ActivityFacet.ts:
    • Đăng ký activity_filter bằng activityFilterSchema.
    • Trong execute, hãy gọi this.filterActivity(input?.activity, input?.selected).
  2. Trong src/components/facets/CategoryFacet.ts:
    • Đăng ký category_filter bằng categoryFilterSchema.
    • Trong execute, hãy gọi this.filterCategory(input?.category, input?.selected).
  3. Trong src/components/facets/ConditionFacet.ts:
    • Đăng ký condition_filter bằng conditionFilterSchema.
    • Trong execute, hãy gọi this.filterCondition(input?.condition, input?.selected).
  4. Trong src/components/facets/PriceFacet.ts:
    • Đăng ký price_filter bằng priceFilterSchema.
    • Trong execute, hãy gọi this.filterPrice(input?.priceRange || input?.bracket, input?.selected).
  5. Trong src/components/facets/WeightFacet.ts:
    • Đăng ký weight_filter bằng weightFilterSchema.
    • Trong execute, hãy gọi this.filterWeight(input?.weightRange || input?.bracket, input?.selected).
  6. Trong src/components/facets/RatingFacet.ts:
    • Đăng ký rating_filter bằng ratingFilterSchema.
    • Trong execute, hãy gọi this.filterRating(input?.minRating || input?.rating, input?.selected).
  7. Trong src/components/facets/SearchFacet.ts:
    • Đăng ký keyword_filter bằng keywordFilterSchema.
    • Trong execute, hãy gọi this.updateKeyword(input?.keyword).

Hãy nhớ kiểm tra xem có hỗ trợ WebMCP hay không và truyền { signal: this.signal } bằng .catch(() => {}) như bạn đã tìm hiểu ở Bước 2.

Việc 3.2: Công cụ xem danh mục

Bây giờ, hãy đăng ký các công cụ tìm kiếm ngữ nghĩa, đặt lại bộ lọc và trang thông tin cấp danh mục trên document.modelContext.

Chuyển đến tệp: src/views/CatalogView.ts

Kiểm tra registerWebMCPTools() trên các dòng 125–140:

private registerWebMCPTools(): void
  1. Kiểm tra xem WebMCP có được hỗ trợ hay không.
  2. Đăng ký công cụ list_items:
    • Phương thức này không nhận tham số đầu vào và chỉ đọc.
    • Hàm execute của nó phải gọi this.getItemsSummary().
  3. Đăng ký công cụ reset_filters:
    • Hàm này không có tham số đầu vào.
    • Hàm execute của nó phải gọi this.resetFilters().
  4. Đăng ký công cụ semantic_catalog_filter:
    • Sử dụng semanticCatalogFilterSchema.
    • Hàm execute của nó phải gọi interpretAndApplySemanticFilter(input.query).

Tác vụ 3.3: Điều phối tác nhân bộ lọc ngữ nghĩa

Giờ là lúc kết nối mọi thứ. Tác vụ này biến hoạt động tìm kiếm thành một quy trình ngữ nghĩa hỗ trợ công cụ semantic_catalog_filter:

Chuyển đến tệp: src/ai/catalog-semantic-filter.ts

Kiểm tra prewarmSemanticFilterSession() trên các dòng 84–88:

export async function prewarmSemanticFilterSession(): Promise<void>
  1. Kiểm tra xem warmSession đã tồn tại hay chưa; nếu có, hãy trả về sớm.
  2. Làm nóng trước một phiên Prompt API bằng SEMANTIC_FILTER_SYSTEM_PROMPT bằng cách sử dụng getPromptSession() và lưu trữ phiên đó trong warmSession. Gói trong khối try/catch để quá trình tạo tìm kiếm vẫn có thể dự phòng một cách hiệu quả nếu quá trình làm nóng trước không thành công.

Kiểm tra inferSearchFacets() trên các dòng 93–134:

async function inferSearchFacets(
  searchTerm: string,
  cachedJourney: JourneyProfile | null
): Promise<{ parsed: SemanticFilterResponse; cacheHit: boolean }>
  1. Yêu cầu phiên được khởi động trước từ warmSession nếu có (và đặt lại warmSession thành null), hoặc tạo một phiên mới bằng cách sử dụng getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
  2. Nhắc mô hình bằng promptText, sử dụng semanticFilterSchema làm responseConstraint.
  3. Phân tích cú pháp JSON được trả về, lưu trữ kết quả đã phân tích cú pháp trong bộ nhớ đệm cố định bằng cacheKey và hủy bỏ phiên trong khối finally.

Kiểm tra applyFacetsViaWebMCP() trên các dòng 139–270:

async function applyFacetsViaWebMCP(
  searchTerm: string,
  parsed: SemanticFilterResponse
): Promise<{ appliedFilters: SemanticFilterResult['appliedFilters']; toolsExecuted: string[] }>
  1. Khám phá các công cụ đã đăng ký trên document.modelContext bằng cách sử dụng await document.modelContext.getTools().
  2. Đặt lại bộ lọc để bắt đầu lại từ đầu bằng cách gọi await executeFacet('reset_filters', {}).
  3. Áp dụng đồng thời các khía cạnh đang hoạt động bằng cách dùng await Promise.all(facetTasks).

Kiểm tra interpretAndApplySemanticFilter() trên các dòng 272–316:

export async function interpretAndApplySemanticFilter(
  searchTerm: string
): Promise<SemanticFilterResult>
  1. Suy luận các khía cạnh tìm kiếm bằng cách gọi inferSearchFacets(searchTerm, cachedJourney).
  2. Áp dụng các khía cạnh được suy luận cho danh mục bằng cách sử dụng applyFacetsViaWebMCP(searchTerm, parsed).

Xác minh nhân viên hỗ trợ trên trang

  1. Chuyển đến http://localhost:5173/catalog.
  2. Trong thanh tìm kiếm ở trên cùng, hãy nhập: "lightweight 3 season tent for wet hikes"
  3. Xem Prompt API phân tích cú pháp yêu cầu, gọi activity_filter (Đi bộ đường dài), category_filter (Lều) và condition_filter (Ướt), ngay lập tức thu hẹp danh mục xuống các thiết bị phù hợp mà không cần nhấp vào hộp đánh dấu theo cách thủ công.

6. Kiến thức bạn học được

Xin chúc mừng. Bạn đã chuyển đổi một ứng dụng thương mại điện tử thành một trải nghiệm thông minh, hướng đến tác nhân, hoàn toàn dựa trên AI trên thiết bị và các API tiêu chuẩn của nền tảng web.

Sản phẩm bạn đã tạo:

  • Prompt API trên thiết bị: Tổng hợp dòng thời gian duyệt web của người dùng bằng LanguageModel để tạo ngữ cảnh JourneyProfile theo thời gian thực và xây dựng một công cụ rankComplementaryGear hiệp lực bằng cách sử dụng các lược đồ JSON có cấu trúc (responseConstraint).
  • Các công cụ thành phần WebMCP: Các công cụ mô-đun, được đóng gói đã đăng ký trên các thành phần giao diện người dùng (get_recommendations, get_current_product, view_cart, manage_cart) thông qua document.modelContext.
  • Cấu trúc chuyển tiếp tác nhân: Thực thi công cụ đã được kiểm thử và xác minh bằng tiện ích Chrome WebMCP Inspector.
  • Tác nhân trong trang trên trang web: Điều phối các công cụ phía máy khách ngay trong trình duyệt để hỗ trợ tính năng tìm kiếm danh mục bằng ngôn ngữ tự nhiên nhiều khía cạnh từ thanh tìm kiếm ở tiêu đề trang web.
  • Các mô hình AI chuyên biệt trên thiết bị: Khám phá tính năng dịch linh hoạt trên thiết bị bằng Translator.

Các điểm chính:

  1. Độ trễ bằng 0 và quyền riêng tư cao: Các mô hình trên thiết bị như Gemini Nano loại bỏ khoá API đám mây, độ trễ mạng và các mối lo ngại về việc đánh cắp dữ liệu.
  2. Đầu ra có cấu trúc là điều cần thiết: Việc sử dụng giản đồ JSON với responseConstraint sẽ biến quá trình tạo văn bản sáng tạo thành logic ứng dụng đáng tin cậy và an toàn về kiểu.
  3. WebMCP chuẩn bị web cho các tác nhân AI: Việc đăng ký các công cụ ngay trong DOM giúp cả các tính năng hỗ trợ nội bộ và các tác nhân trình duyệt tự động bên ngoài thực hiện các hành động đã xác minh và có tính xác định.
  4. Cho phép mô hình đề xuất, không thực thi: Việc giới hạn mô hình trong enum của các công cụ đã đăng ký và tự gửi kết quả giúp hành vi của tác nhân có thể kiểm tra được và ngăn tác nhân tự nghĩ ra các hành động.