WebMCP trên Chrome: AI gọi thẳng hàm của website

1. WebMCP Là Gì?

WebMCP (Web Model Context Protocol) trong Chrome là một tiêu chuẩn trình duyệt thử nghiệm, cho phép các trang web đăng ký trực tiếp các công cụ có cấu trúc (structured tools) để các tác nhân AI (AI agents) khám phá và gọi đến một cách trực tiếp.

Thay vì bắt AI phải chụp ảnh màn hình, phân tích cấu trúc DOM phức tạp rồi giả lập thao tác chuột/phím như con người (Screen/DOM Scraping), WebMCP cung cấp một "đường tắt" kỹ thuật giúp AI giao tiếp trực tiếp với các hàm xử lý bên dưới của website thông qua trình duyệt Chrome.

2. Bản Chất Thực Tế: Sơ Đồ Luồng Hoạt Động (4 Thực Thể)

Để hình dung trọn vẹn, hãy xem cách 4 thực thể phối hợp khi User yêu cầu Claude (Web AI) đặt một đơn hàng trên trang Akitao.com thông qua trình duyệt Chrome:

[ 1. USER (Người dùng) ]
         │
         │ (Bước 1: Ra lệnh bằng ngôn ngữ tự nhiên)
         ▼
[ 2. CLAUDE (Web AI) ] ◄─── (Bước 2: Quét/Gọi hàm qua JSON) ───► [ 3. TRÌNH DUYỆT CHROME ]
                                                                        │
                                                                        │ (Bước 4: Thực thi JS ngầm)
                                                                        ▼
                                                             [ 4. TARGET (Akitao.com) ]

Chi tiết luồng xử lý kỹ thuật từng bước:

Khai báo trước: Lập trình viên của Akitao.com dùng mã Frontend để đăng ký một hàm tên là dat_hang_akitao với Chrome.
Bước 1 (User -> Claude): Bạn mở Claude trên Chrome và gõ: "Mua hộ tôi 2 cái áo thun mã X trên tab Akitao.com đang mở".
Bước 2 (Claude -> Chrome): Claude gửi yêu cầu ngầm tới Chrome: "Tab Akitao.com có công cụ MCP nào không?". Chrome kiểm tra bộ nhớ và trả về danh sách hàm dat_hang_akitao(id_san_pham, so_luong).
Bước 3 (Bảo mật - Chrome -> User): Chrome hiển thị một bảng thông báo (Browser Prompt) hỏi bạn: "Claude muốn gọi hàm đặt hàng trên Akitao.com, bạn có cho phép không?". Bạn bấm Cho phép (Allow).
Bước 4 (Thực thi - Claude -> Chrome -> Target): Claude gửi đoạn mã JSON chuẩn hóa đến Chrome. Chrome nhận lệnh, chuyển thành JavaScript và chạy trực tiếp trên tab Akitao.com.
Bước 5 (Xử lý & Trả kết quả): Website Akitao.com chạy hàm, sử dụng chính Cookie/Phiên đăng nhập hiện tại của bạn để tạo đơn hàng (không làm lộ mật khẩu cho Claude). Sau đó trả kết quả thành công về cho Chrome để Chrome chuyển tiếp cho Claude hiển thị tới bạn.

3. So Sánh Trực Quan: Trước & Sau Khi Có WebMCP

Tiêu chí	🛑 TRƯỚC: Cào giao diện (DOM/Screen Scraping)	🚀 SAU: Dùng WebMCP (Gọi công cụ trực tiếp)
Cách AI hoạt động	Quét mã HTML, phân tích tọa độ hình ảnh để tìm nút bấm.	Gọi trực tiếp hàm hệ thống do Website khai báo sẵn.
Giao tiếp thực tế	AI cố gắng click ảo vào phần tử `#btn-submit-booking`.	AI gửi lệnh: `dat_hang_akitao(id: "X", so_luong: 2)`.
Độ chính xác	❌ Thấp. Web đổi giao diện, đổi vị trí nút là AI bấm trượt ngay.	✅ Tuyệt đối. Giao diện thay đổi thế nào thì hàm core bên dưới vẫn giữ nguyên.
Tốc độ xử lý	⏳ Chậm. Phải đợi tải xong toàn bộ hình ảnh, popup quảng cáo.	⚡ Tức thì. Bỏ qua phần nhìn, tương tác trực tiếp với logic ngầm.
Bảo mật & Cookie	⚠️ Kém. AI phải "nhìn" toàn bộ màn hình để tìm thông tin.	✅ Cao. Chạy bằng Cookie chính chủ của User trên trình duyệt, không lộ mật khẩu.

4. Phân Biệt WebMCP (Client-side) vs MCP Truyền Thống (Backend MCP)

Nhiều lập trình viên lầm tưởng WebMCP giống như việc mở một cổng Custom MCP Server từ phía Backend. Thực tế hai công nghệ này hoàn toàn khác biệt:

Custom MCP thông thường (Server-to-Server): Máy chủ Akitao.com phải dựng một cổng API công khai (qua SSE hoặc WebSocket). Server của Claude sẽ kết nối trực tiếp qua Internet tới máy chủ của bạn từ xa. Thường dùng cho các hệ thống chạy ngầm tự động (Headless/CLI).
WebMCP của Chrome (Client-side MCP): Hàm WebMCP chỉ tồn tại trong bộ nhớ RAM của trình duyệt Chrome của User khi họ đang mở tab. Server từ xa của Claude không thể tự ý chọc thẳng vào RAM của Chrome được do chính sách bảo mật (Same-Origin Policy). Mọi thao tác bắt buộc phải có Chrome đứng giữa làm cầu nối điều phối.

5. Hiện Thực Hóa: Mã Nguồn Minh Họa Cho Website

Để website của bạn sẵn sàng cho kỷ nguyên AI Agent, đây là đoạn code JavaScript mẫu (Frontend) nhằm khai báo công cụ thông qua hàm tiêu chuẩn của trình duyệt:

// Kiểm tra xem trình duyệt của User có hỗ trợ WebMCP hay không
if ('modelContext' in navigator) {

  // Đăng ký công cụ với trình duyệt Chrome
  navigator.modelContext.registerTool({
    name: "dat_hang_akitao",
    description: "Tự động thêm sản phẩm vào giỏ hàng và tiến hành tạo đơn hàng cho người dùng",

    // Định nghĩa các tham số đầu vào mà AI cần phải cung cấp
    inputSchema: {
      type: "object",
      properties: {
        id_san_pham: {
          type: "string",
          description: "Mã định danh (ID) hoặc SKU của sản phẩm cần mua"
        },
        so_luong: {
          type: "number",
          description: "Số lượng sản phẩm cần mua",
          default: 1
        }
      },
      required: ["id_san_pham", "so_luong"]
    },

    // Hàm xử lý thực tế sẽ chạy trên Tab khi AI kích hoạt lệnh
    execute: async (input) => {
      const { id_san_pham, so_luong } = input;

      try {
        // Gọi hàm nội bộ của Website (Ví dụ hàm xử lý giỏ hàng sẵn có của bạn)
        const result = await myWebsiteCartSystem.addToCart(id_san_pham, so_luong);

        return {
          content: [{
            type: "text",
            text: `Thành công! Đã thêm ${so_luong} sản phẩm ${id_san_pham} vào giỏ hàng. Mã đơn hàng tạm tính: ${result.orderId}`
          }]
        };
      } catch (error) {
        return {
          isError: true,
          content: [{ type: "text", text: `Lỗi xử lý: ${error.message}` }]
        };
      }
    }
  });

  console.log("WebMCP đã được đăng ký thành công trên Akitao.com");
} else {
  console.log("Trình duyệt này chưa bật hoặc không hỗ trợ WebMCP");
}

6. Trạng Thái Hiện Tại & Tương Lai

Trạng thái: Tính năng này hiện tại đang nằm ở dạng thử nghiệm (preview) trên các bản cập nhật mới của Chrome (từ Chrome 146) và được bật qua cờ chrome://flags/#enable-webmcp-testing ("WebMCP for testing").
Tầm ảnh hưởng: Khi WebMCP trở thành tiêu chuẩn chung của tổ chức W3C, cuộc đua tối ưu SEO (Search Engine Optimization) truyền thống sẽ dịch chuyển một phần sang AIO (AI Optimization). Website nào sở hữu hệ thống WebMCP sạch, khai báo rõ ràng sẽ được các Trợ lý AI ưu tiên ghé thăm và thực hiện giao dịch cho người dùng nhanh hơn.

Toàn tập về WebMCP trên Chrome: bước ngoặt thay đổi cách AI tương tác với website