WebMCP: Đề xuất chuẩn W3C kết nối AI agent với ứng dụng web

Tóm tắt nhanh:
WebMCP là đề xuất kỹ thuật Draft Community Group Report từ W3C Web Machine Learning Community Group nhằm chuẩn hóa cách ứng dụng web cung cấp công cụ client cho AI agent trên trình duyệt. Thay vì cào DOM thụ động hay gọi API ngầm từ xa, WebMCP cho phép mô hình kích hoạt trực tiếp hàm JavaScript client để cập nhật giao diện trực quan, đồng thời yêu cầu nhà phát triển tự thẩm định tham số và quản lý hủy bỏ tác vụ qua AbortSignal.

AI agent trên trình duyệt cần cơ chế gọi hàm có cấu trúc thay vì giả lập thao tác chuột hoặc phụ thuộc hoàn toàn vào máy chủ. Phương pháp bóc tách HTML và chụp ảnh màn hình tiêu tốn hàng nghìn token cho mỗi hành động, đồng thời dễ gãy vỡ khi bố cục CSS thay đổi. Ngược lại, kết nối backend qua giao thức Model Context Protocol trên máy chủ tách rời mô hình khỏi phiên làm việc hiện tại, khiến giao diện không thể tự động cập nhật nếu thiếu hạ tầng đồng bộ thời gian thực phức tạp. WebMCP đưa các điểm nối công cụ vào ngay luồng thực thi JavaScript của tài liệu trình duyệt, giúp tác tử tương tác trực tiếp với logic ứng dụng.

Nhờ tích hợp trong máy khách, tác tử kích hoạt hàm nội bộ mà không cần gửi dữ liệu vòng qua máy chủ. Người dùng duy trì quyền giám sát trực quan và can thiệp kịp thời.

Giao diện document.modelContext và đăng ký công cụ client

Giao diện document.modelContext kế thừa từ EventTarget, đóng vai trò trung tâm quản lý việc đăng ký, thực thi và theo dõi trạng thái công cụ phía máy khách. Ứng dụng web công bố thao tác qua các đối tượng có cấu trúc gồm tên định danh, nhãn hiển thị title kiểu USVString, mô tả tự nhiên và lược đồ tham số JSON Schema. Các hàm thực thi có thể tiếp cận trực tiếp bộ nhớ cục bộ, trạng thái bộ nhớ đệm và hàm xử lý nghiệp vụ sẵn có trong phiên duyệt web.

if ('modelContext' in document) {
  const toolController = new AbortController();

  await document.modelContext.registerTool({
    name: 'filter_catalog',
    title: 'Lọc danh mục sản phẩm',
    description: 'Lọc danh sách sản phẩm hiển thị trên trang theo danh mục và giá trần',
    inputSchema: {
      type: 'object',
      properties: {
        category: { type: 'string', description: 'Tên danh mục sản phẩm' },
        maxPrice: { type: 'number', description: 'Mức giá tối đa cho phép' }
      },
      required: ['category']
    },
    annotations: {
      readOnlyHint: true,
      consequentialHint: false
    },
    async execute({ category, maxPrice }, { signal }) {
      if (typeof category !== 'string' || !category.trim()) {
        throw new Error('Tham số category không hợp lệ');
      }
      const budgetLimit = typeof maxPrice === 'number' && maxPrice > 0 ? maxPrice : Infinity;

      if (signal.aborted) {
        throw new DOMException('Thao tác bị hủy', 'AbortError');
      }

      const items = await queryCatalogStore(category, budgetLimit, { signal });
      updateCatalogView(items);

      return { matchedCount: items.length, status: 'success' };
    }
  }, { signal: toolController.signal });
}

Phương thức registerTool và quản lý hủy bỏ hợp tác

Phương thức registerTool yêu cầu khai báo đầy đủ thông tin định danh và hàm phản hồi bất đồng bộ, hỗ trợ các cờ annotations nhằm chỉ dẫn ranh giới an toàn cho mô hình. Cờ readOnlyHint đánh dấu công cụ không làm biến đổi dữ liệu, còn consequentialHint cảnh báo các hành vi tạo tác động vĩnh viễn cần người dùng phê duyệt. Do trình duyệt không tự hủy luồng JavaScript đang chạy ngầm, đối số signal thuộc loại AbortSignal trong hàm execute bắt buộc lập trình viên phải chủ động kiểm tra cờ hủy để dừng các tác vụ tốn kém tài nguyên.

Lắng nghe sự kiện toolchange bất đồng bộ

Sự kiện toolchange phát trên document.modelContext mỗi khi công cụ được đăng ký mới hoặc thu hồi qua AbortController, giúp tác tử cập nhật danh sách thao tác phù hợp với ngữ cảnh màn hình. Vì phương thức getTools() là hàm bất đồng bộ trả về Promise<sequence<RegisteredTool>>, mã nguồn bắt buộc phải dùng await để nhận danh sách công cụ đã giải quyết thay vì truy xuất thuộc tính mảng đồng bộ. Việc giới hạn công cụ theo từng trạng thái giúp tiết kiệm token ngữ cảnh và ngăn ngừa tác tử gọi nhầm chức năng.

document.modelContext.addEventListener('toolchange', async () => {
  const activeTools = await document.modelContext.getTools();
  console.log(`Số công cụ sẵn sàng: ${activeTools.length}`);
});

Đăng ký công cụ khai báo qua biểu mẫu HTML

Cơ chế khai báo của WebMCP mở rộng phần tử biểu mẫu <form> tiêu chuẩn để tự động biên dịch cấu trúc nhập liệu thành lược đồ JSON Schema mà không cần viết mã JavaScript đăng ký thủ công. Thông qua các thuộc tính toolname, tooldescription, toolautosubmit và toolparamdescription trên thẻ <input>, trình duyệt tự động cung cấp công cụ cho tác tử. Khi biểu mẫu được gửi, sự kiện gửi được chặn lại qua phương thức SubmitEvent#respondWith() để chuyển kết quả trực tiếp cho tác tử mà không điều hướng trang.

<form
  toolname="book_flight"
  tooldescription="Đặt vé máy bay theo điểm đến và ngày khởi hành"
  toolautosubmit>
  <label for="destination">Điểm đến:</label>
  <input
    type="text"
    id="destination"
    name="destination"
    toolparamdescription="Mã sân bay IATA hoặc tên thành phố đến"
    required>

  <label for="departure">Ngày đi:</label>
  <input
    type="date"
    id="departure"
    name="departureDate"
    toolparamdescription="Ngày khởi hành định dạng YYYY-MM-DD"
    required>

  <button type="submit">Xác nhận đặt vé</button>
</form>

<script>
const bookingForm = document.querySelector('form[toolname="book_flight"]');

bookingForm.addEventListener('submit', (event) => {
  if (event.agentInvoked) {
    event.preventDefault();
    const formData = new FormData(bookingForm);
    const bookingPayload = Object.fromEntries(formData.entries());

    event.respondWith(processFlightBooking(bookingPayload));
  }
});
</script>

Kiểm soát an toàn, Permissions Policy và quyền riêng tư

WebMCP kiểm soát an toàn dựa trên ranh giới chính sách của nền tảng web kết hợp cơ chế xác thực từ người dùng. Quyền truy cập API được quản lý bởi chỉ thị Permissions Policy với danh sách cho phép mặc định là 'self', ngăn các khung nhúng <iframe> bên thứ ba tự ý đăng ký công cụ trừ khi được cấp quyền tường minh. Quản trị viên có thể tắt tính năng trên trang nhạy cảm bằng tiêu đề HTTP Permissions-Policy: tools=(). Đối với các hành vi quan trọng như thanh toán hay xóa dữ liệu, ứng dụng cần hiển thị hộp thoại xác nhận trực quan để người dùng trực tiếp phê duyệt trước khi cam kết thay đổi.

Giới hạn quyền trong phiên duyệt web giúp ngăn chặn nguy cơ tiêm chỉ dẫn độc hại và tuân thủ nguyên tắc đặc quyền tối thiểu.

Hiện trạng thử nghiệm trên trình duyệt và chiến lược tích hợp

WebMCP là dự thảo Draft Community Group Report thuộc W3C Web Machine Learning Community Group và chưa nằm trên lộ trình chuẩn hóa chính thức của W3C. Tuy nhiên, tính năng này đã có mặt trên nhiều trình duyệt: Google Chrome triển khai Origin Trial từ bản 149 cùng cờ about:flags#enable-webmcp-testing, Microsoft Edge kích hoạt Origin Trial từ bản 150 với mã thử nghiệm 0b76fe60-b266-458e-a285-04e375c0c31a, Brave hỗ trợ trong trợ lý Leo AI theo Issue 55232, và ChatGPT Desktop cũng đã hỗ trợ giao diện này. Nhà phát triển nên áp dụng mô hình nâng cấp lũy tiến bằng cách kiểm tra điều kiện 'modelContext' in document để đảm bảo trang web vẫn hoạt động bình thường trên các trình duyệt chưa hỗ trợ.