WebMCP cho phép các ứng dụng React cung cấp các API công cụ (tool APIs) có cấu trúc trực tiếp cho các tác nhân AI (AI agents), thay thế việc quét giao diện (UI-scraping) vốn mong manh bằng các lệnh gọi đáng tin cậy và không phụ thuộc vào giao diện. Tính năng này hiện có sẵn trong bản thử nghiệm nguồn (origin-trial) cho Chrome 149 trở lên, và bạn có thể bật nó thông qua chrome://flags/#enable-webmcp-testing.

Vấn đề khi dạy các tác nhân cách nhấp chuột

Hầu hết các nỗ lực hiện nay nhằm cho phép các tác nhân AI tương tác với một trang web đều dựa vào các tín hiệu hình ảnh. Một tác nhân sẽ phân tích DOM, đoán xem phần tử nào là nút bấm, mô phỏng các cú nhấp chuột, cuộn trang và điền vào các trường biểu mẫu. Ngay khi một nút di chuyển, một nhãn thay đổi hoặc bố cục được tinh chỉnh, kịch bản sẽ thất bại. Cách tiếp cận này chậm vì nó phải chờ trình duyệt kết xuất (render) từng bước, và một đợt thiết kế lại định kỳ có thể làm hỏng toàn bộ quy trình tự động hóa.

WebMCP đảo ngược mô hình này

WebMCP là một tiêu chuẩn web mới được Google Chrome giới thiệu. Thay vì hiển thị một bề mặt hình ảnh để tác nhân khám phá, một trang web sẽ quảng bá một tập hợp các công cụ (tools) — đó là các thao tác có tên và kiểu dữ liệu cụ thể mà trang web có thể thực hiện. Một tác nhân AI trước tiên sẽ hỏi "có những công cụ nào khả dụng?"; trang web sẽ trả lời bằng một danh sách như "searchProducts" hoặc "checkout". Sau đó, tác nhân sẽ gọi một công cụ bằng cách gửi một payload JSON khớp với schema đầu vào đã khai báo của công cụ đó, ví dụ: searchProducts(query: "jacket"). Trình duyệt sẽ chuyển tiếp yêu cầu trực tiếp đến JavaScript của trang, nơi thực thi logic nền tảng mà không cần bất kỳ sự can thiệp nào của giao diện người dùng (UI).

Kết quả là một sự tương tác tức thì, hoạt động bất kể các thay đổi về CSS và duy trì tính ổn định miễn là các định nghĩa công cụ không thay đổi.

Những lợi ích quan trọng đối với nhà phát triển

  • Tốc độ – Việc giao tiếp diễn ra bên trong hệ thống nhắn tin của trình duyệt, loại bỏ chu kỳ chờ đợi việc kết xuất các cú nhấp chuột và chờ cập nhật trang.
  • Độ tin cậy – Các công cụ gọi chính các hàm mà trang web đã sử dụng cho giao diện của chính nó, vì vậy việc thiết kế lại sẽ không làm hỏng API.
  • Khả năng kiểm soát – Các nhà phát triển quyết định thao tác nào được hiển thị, các tham số nào được chấp nhận và tác nhân có thể thấy gì trong phản hồi.
  • Không phụ thuộc vào UI – Việc thay đổi kiểu dáng (styling), bố cục hoặc tái cấu trúc (refactoring) thành phần sẽ không còn ảnh hưởng đến khả năng gọi một tính năng của tác nhân.

WebMCP không thay thế MCP (Message-Channel-Protocol) hiện có đang được sử dụng ở phía máy chủ. MCP tiếp tục xử lý việc truy xuất dữ liệu nặng và điều phối backend, trong khi WebMCP xử lý các tương tác trực tiếp ngay trong tab.

Cách các nhà phát triển React có thể bắt đầu

Mã React có thể đăng ký các công cụ bằng cách sử dụng API JavaScript theo kiểu mệnh lệnh (imperative) hoặc API dựa trên biểu mẫu HTML theo kiểu khai báo (declarative). Một mô hình phổ biến là bao bọc việc đăng ký trong một custom hook:

  1. Gọi một hàm đăng ký với tên công cụ và một mô tả ngắn gọn.
  2. Cung cấp một input schema (ví dụ: một JSON schema mô tả các trường bắt buộc).
  3. Cung cấp một callback execute để chạy logic nghiệp vụ hiện có — thường là cùng một hàm mà một cú nhấp chuột vào nút sẽ kích hoạt.

Khi hook chạy, trình duyệt sẽ thêm công cụ vào manifest WebMCP của trang. Một tác nhân AI khi phát hiện ra manifest này sau đó có thể gọi công cụ mà không cần chạm vào DOM.

Vì việc đăng ký diễn ra tại thời điểm component được gắn (mount), các công cụ có thể được giới hạn phạm vi trong các route hoặc feature flag cụ thể, giúp các nhóm có quyền kiểm soát chi tiết về những gì AI có thể làm trong môi trường production so với môi trường thử nghiệm.

Những lưu ý và điều cần chú ý

WebMCP vẫn đang trong giai đoạn thử nghiệm nguồn (origin trial). Nó chỉ hoạt động trên Chrome 149+ và phải được bật thủ công thông qua một flag.

Các bước tiếp theo

Google đã mở đợt thử nghiệm cho các nhà phát triển muốn thử nghiệm các trải nghiệm web thuần AI (AI-native). Các bước tiếp theo cho bất kỳ ai quan tâm là:

  • Bật flag trong Chrome và tải lại trang web mục tiêu.
  • Thêm một đăng ký công cụ đơn giản trong một React component và quan sát manifest xuất hiện trong devtools của trình duyệt.
  • Kiểm tra một AI client (ví dụ: một script cục bộ tuân theo giao thức WebMCP) để gọi công cụ và xác minh phản hồi.
  • Theo dõi trang trạng thái của đợt thử nghiệm để cập nhật về việc phát hành bản ổn định.

Điểm mấu chốt: WebMCP mang đến cho các nhà phát triển React một cách để làm cho ứng dụng của họ có thể được gọi trực tiếp bởi các tác nhân AI, biến các phần tử UI thành các dịch vụ có kiểu dữ liệu và ổn định. Sự chuyển dịch này loại bỏ nỗi ám ảnh về bảo trì do việc quét màn hình (screen-scraping) và mở ra con đường hướng tới các ứng dụng web thuần AI — với điều kiện là các nhóm phát triển cảm thấy thoải mái khi làm việc trong môi trường Chrome thử nghiệm.