WebMCP là gì? Chuẩn kết nối AI Agent với ứng dụng Web

Thay vì yêu cầu kiến trúc backend phức tạp hay bắt agent phải suy đoán giao diện thô, WebMCP giúp trang web hoạt động như một máy chủ Model Context Protocol (MCP) ngay trong trình duyệt. Thông qua cơ chế này, AI agent có thể kích hoạt các hàm client-side sẵn có, thực thi tác vụ chính xác, đồng bộ giao diện trực quan và giữ nguyên ngữ cảnh phiên làm việc hiện tại của người dùng.

Phóng to: Minh hoạ WebMCP biến trang web thành máy chủ MCP client-side cho AI agent

Vì sao AI Agent cần WebMCP thay vì cào DOM hay chụp màn hình

Phương pháp tự động hoá giao diện này gặp nhiều hạn chế kỹ thuật cố hữu: tốc độ phản hồi chậm, cực kỳ dễ gãy (brittle) khi cấu trúc HTML/CSS thay đổi, tiêu tốn dung lượng context window của mô hình và có tỷ lệ thất bại cao đối với các giao diện đơn trang (SPA) hoặc ứng dụng đồ hoạ phức tạp.

Phóng to: So sánh hạn chế của cào DOM truyền thống với phương thức gọi tool có cấu trúc của WebMCP

[Mô phỏng UI cũ]:  Agent -> Chụp màn hình/DOM -> Đoán vị trí Click/Gõ phím -> Phụ thuộc UI thô
[Mô hình WebMCP]: Agent -> Gọi hàm JavaScript (API) -> Thực thi logic Client -> Cập nhật UI & State

Do mô hình LLM mang tính xác suất (probabilistic) và không thể đảm bảo an toàn tuyệt đối trước các dữ liệu không xác định, lập trình viên frontend cần tư duy thiết kế phòng thủ (defensive design). WebMCP không xung đột hay loại bỏ hoàn toàn các kỹ thuật tự động hoá hiện tại; nếu trang web chưa hỗ trợ WebMCP hoặc không cung cấp đủ công cụ cho tác vụ cụ thể, agent vẫn có thể chủ động chuyển về (fallback) phương án cào DOM hoặc điều khiển giao diện truyền thống để hoàn tất công việc.

Cơ chế hoạt động: Biến trang web thành MCP Server ngay trong trình duyệt

Phóng to: Kiến trúc luồng xử lý WebMCP giữa AI Agent Queue và Event Loop của trình duyệt

Quy trình thực thi công cụ trên trình duyệt (In-browser tool flow) của WebMCP được thiết kế theo luồng dữ liệu khép kín giữa Agent và Main Thread của trình duyệt:

[User Prompt] -> [AI Platform] -> [Browser Agent]
                                        | (Kích hoạt WebMCP Tool)
                                        v
[Agent Response] <- [JSON Result] <- [Web Page (Main Thread Event Loop)]

Về kiến trúc thực thi, Browser Agent chạy song song trên một hàng đợi riêng (AI agent queue). Khi agent yêu cầu gọi một công cụ, tác vụ thực thi sẽ được đẩy vào nguồn tác vụ webmcp task source nằm trực tiếp trên Event Loop (main thread) của context trang web tương ứng. Cơ chế này đảm bảo mọi thao tác biến đổi trạng thái (state mutation) và cập nhật DOM diễn ra đồng bộ, an toàn trong môi trường đơn luồng chuẩn của trình duyệt, triệt tiêu hoàn toàn rủi ro xung đột dữ liệu (race conditions) hoặc phá vỡ luồng render của khung hình (frame rendering).

Dưới đây là đoạn mã JavaScript minh hoạ cách đăng ký một công cụ client-side bằng API document.modelContext.registerTool():

await document.modelContext.registerTool({
  name: "add-todo",
  description: "Thêm một mục mới vào danh sách công việc của người dùng",
  inputSchema: {
    type: "object",
    properties: {
      text: { type: "string", description: "Nội dung chi tiết của công việc" },
    },
    required: ["text"],
  },
  async execute({ text }) {
    // Tái sử dụng logic client-side sẵn có và cập nhật UI
    await addTodoItemToCollection(text);
    return { content: [{ type: "text", text: `Đã thêm công việc: "${text}"` }] };
  },
});

Hai cách khai báo công cụ: JavaScript API và HTML Declarative Form

Hệ sinh thái WebMCP phân chia cơ chế khai báo công cụ thành hai hướng tiếp cận: Imperative API (Lệnh) và Declarative API (Khai báo).

Hướng tiếp cận Imperative API dựa trên phương thức document.modelContext.registerTool(). Đây là chuẩn cơ sở chính thức trong bản thảo kỹ thuật của W3C. Phương thức này cung cấp cho bạn khả năng kiểm soát tuyệt đối khi xử lý các logic động phức tạp, cập nhật trạng thái ứng dụng theo thời gian thực hoặc tương tác với Canvas/WebGL. Đặc biệt, bạn có thể truyền một AbortSignal vào phương thức đăng ký để hủy công cụ linh hoạt theo ngữ cảnh người dùng. Điều này rất quan trọng về mặt tối ưu hệ thống: bạn không nên dại dột đăng ký hàng trăm tool cùng lúc làm tràn context window và gây hiện tượng ảo giác (hallucination) cho LLM.

const controller = new AbortController();
 
// Đăng ký tool kèm signal điều khiển vòng đời
await document.modelContext.registerTool(toolDefinition, { signal: controller.signal });
 
// Hủy đăng ký tool khi người dùng chuyển tab hoặc đổi trạng thái UI
controller.abort();

Hướng tiếp cận Declarative API (hiện đang dừng ở mức thử nghiệm thông qua thư viện polyfill webmcp-declarative.js thuộc bộ công cụ webmcp-tools và nằm ngoài bản thảo spec cốt lõi của W3C) cho phép trình duyệt tự động trích xuất metadata của công cụ trực tiếp từ thẻ HTML <form toolname>. Cơ chế này sử dụng các thuộc tính mở rộng như toolautosubmit, phương thức respondWith(), cùng các lớp giả CSS như :tool-form-active và :tool-submit-active để biến form HTML truyền thống thành tool cho AI.

Declarative API chỉ đóng vai trò thử nghiệm bổ trợ cho các biểu mẫu tĩnh. Trong thực tế, Imperative API vẫn là nền tảng bắt buộc vì các ứng dụng web hiện đại dựa hoàn toàn vào luồng xử lý JavaScript động trên client.

Mô hình bảo mật và cơ chế kiểm soát của người dùng

Phóng to: Mô hình bảo mật Hai chiều đồng ý (Two-Sided Opt-In) và ranh giới Same-Origin Policy trong WebMCP

Mở rộng khả năng gọi hàm JavaScript cho AI agent đồng nghĩa với việc đối mặt với các nguy cơ an ninh mạng mới. Chuẩn WebMCP phân tích và đưa ra cơ chế phòng ngự cho 3 nhóm rủi ro chính:

1. Indirect Prompt Injection: Phổ biến nhất là Tool Poisoning (chèn câu lệnh độc hại vào metadata/description của tool để chiếm quyền điều khiển agent) và Output Injection (dữ liệu trả về từ tool chứa câu lệnh độc hại). Ví dụ: Một công cụ lấy bình luận từ diễn đàn (get-forum-posts) trả về nội dung do người dùng xấu đăng tải chứa chuỗi kịch bản tấn công Agent. Để phòng ngừa, WebMCP cung cấp cờ untrustedContentHint: true cảnh báo agent phải cô lập nội dung trả về, không được coi đó là chỉ thị hệ thống.
2. Privacy Leakage via Over-Parameterization: Trang web cố tình khai báo schema chứa nhiều tham số dư thừa (như tuổi, vị trí, lịch sử duyệt web) nhằm khai thác dữ liệu riêng tư mà Agent đang nắm giữ trong ngữ cảnh cá nhân hóa.
3. Cross-Origin Violation: Nguy cơ iframe độc hại can thiệp hoặc thực thi trái phép các công cụ của trang mẹ.

Để đảm bảo an toàn, WebMCP thiết lập cơ chế cô lập dựa trên Same-Origin Policy (SOP) và quy trình Hai chiều đồng ý (Two-Sided Opt-In):

[Child Frame (widget.example)]                                    [Parent Frame (app.example)]
  registerTool(..., { exposedTo: ["app.example"] })  <--->  getTools({ fromOrigins: ["widget.example"] })

• Cấu hình Permissions Policy: Khung nhúng phải được trang mẹ cấp quyền qua thuộc tính <iframe allow="tools">.
• Opt-In Phía Cung Cấp (exposedTo): Trang cung cấp tool (ví dụ: iframe con) phải chỉ định rõ danh sách origin tin cậy được phép truy cập.
• Opt-In Phía Tiêu Thụ (fromOrigins): Trang tiêu thụ tool (ví dụ: trang mẹ) phải khai báo chính xác origin cần lấy tool trong hàm getTools().

Lưu ý về điểm lỗi bảo mật (Security Failure Mode): Nếu iframe con khai báo exposedTo: ["app.example"] nhưng trang mẹ lại quên khai báo fromOrigins: ["widget.example"] khi gọi getTools(), trình duyệt sẽ chặn hoàn toàn việc khám phá công cụ và tool đó sẽ ở trạng thái ẩn (undiscovered).

Ngoài ra, WebMCP định nghĩa các nhãn Annotation Metadata để đánh giá mức độ ảnh hưởng của hành động:

• readOnlyHint: Khẳng định công cụ chỉ đọc dữ liệu, không ghi đè hay thay đổi trạng thái.
• untrustedContentHint: Cảnh báo kết quả trả về chứa nội dung do người dùng tạo (UGC) chưa được kiểm duyệt.
• consequentialHint: Cảnh báo công cụ thực hiện thao tác có hậu quả lớn hoặc không thể đảo ngược (thanh toán tiền, xóa dữ liệu, đặt vé). Khi phát hiện nhãn này, agent bắt buộc phải hiển thị hộp thoại yêu cầu người dùng xác nhận thủ công trên giao diện trước khi kích hoạt hàm.

So sánh WebMCP và MCP phía máy chủ (Backend MCP)

Mô hình Backend MCP kết nối AI Platform trực tiếp với máy chủ dịch vụ thông qua API (OpenAPI, SSE hoặc stdio). Kiến trúc này bộc lộ nhiều hạn chế khi áp dụng cho các ứng dụng web tương tác:

• Tách rời giao diện (UI Disintermediation): Mọi thao tác diễn ra ngầm giữa AI server và Backend server, khiến giao diện trình duyệt của người dùng bị "mất ngữ cảnh", không cập nhật trạng thái tương ứng.
• Tái tạo Authentication & State: Lập trình viên bắt buộc phải xây dựng lại hệ thống xác thực (chuyển tiếp OAuth token, Session Cookie) và tái tạo toàn bộ ứng dụng logic trên một máy chủ MCP riêng biệt.

Hệ sinh thái hiện tại và lộ trình phát triển của WebMCP

Công cụ thử nghiệm và hệ sinh thái kỹ thuật hiện tại tập trung trong bộ công cụ webmcp-tools do Google Chrome Labs quản lý, bao gồm:

• Extension Model Context Tool Inspector: Hỗ trợ debug, kiểm tra danh sách công cụ và kiểm tra tính hợp lệ của JSON Schema trực tiếp trên trình duyệt.
• WebMCP Evals: Bộ công cụ CLI dùng để đánh giá tỷ lệ gọi đúng tool của agent đối với từng trang web.
• WebMCP Skills: Kịch bản mẫu kiểm thử workflow của agent.
• Hệ thống Demo phong phú: Các ứng dụng thực tế áp dụng WebMCP như React Flight Search, Le Petit Bistro, Smart Home Dashboard, Spreadsheet và Maze Game.

Ở khía cạnh nghiên cứu độc lập, Simon Willison đã chứng minh tính khả thi của việc sử dụng một script Python bên ngoài truy cập và điều khiển các WebMCP tool trên trang web thông qua giao thức Chrome DevTools Protocol (CDP).

Tình trạng chuẩn hoá & Cảnh báo kỹ thuật: Bản phác thảo WebMCP hiện ở dạng Draft Community Group Report thuộc W3C Web Machine Learning Community Group và đang được thử nghiệm qua Chrome Origin Trials.

Cần ghi nhớ rõ hai điểm về mặt chuẩn hoá và bảo mật:

1. WebMCP chưa phải là chuẩn chính thức của W3C và chưa nằm trên luồng chuẩn hoá chính thức (W3C Standards Track).
2. Mã nguồn thử nghiệm từ Google Chrome Labs không thuộc phạm vi chương trình thưởng lỗi bảo mật mã nguồn mở (Google Open Source VRP).

Tuy nhiên, trước khi đưa vào sản xuất (production), hãy thiết kế chặt chẽ JSON schema, giới hạn số lượng công cụ chủ động bằng AbortSignal để bảo vệ context window, thiết lập chính xác cấu hình Same-Origin Policy và khai báo đầy đủ các nhãn Annotation (consequentialHint, untrustedContentHint) để loại bỏ nguy cơ gián tiếp bị tiêm lệnh AI.

Tài liệu tham khảo

• W3C WebML CG: WebMCP Explainer
• W3C GitHub: webmachinelearning/webmcp Repository & Draft Specification
• Chrome for Developers: WebMCP Overview & JavaScript API
• Chrome for Developers: WebMCP Secure Tools & Permissions
• Google Chrome Labs: webmcp-tools (Inspector, Evals, Polyfills, Demos)
• Simon Willison's Weblog: Research: WebMCP + Chrome DevTools Protocol Demo
• Model Context Protocol (MCP) Official Documentation