Hướng dẫn WebMCP: Xây dựng website sẵn sàng cho tác nhân với tiêu chuẩn mới của Chrome

Hiện tại, các tác tử AI duyệt web giống như khách du lịch đọc thực đơn tiếng nước ngoài: nheo mắt nhìn từng điểm ảnh, đoán xem nút bấm làm gì, và hy vọng trang không đổi bố cục ngay lúc bấm. Google và Microsoft đã quyết định đây là vấn đề đáng để giải quyết cho ra trò.

Tháng 2/2026, Chrome 146 phát hành bản xem trước sớm của WebMCP, một tiêu chuẩn web đề xuất cho phép website cho tác tử biết chính xác họ có thể làm gì và làm như thế nào. 

Không còn phải cào màn hình (screen-scraping). 

Không còn phải dịch ngược DOM.

Trong hướng dẫn này, tôi sẽ cùng bạn tìm hiểu WebMCP thực chất là gì, cách thiết lập môi trường, rồi xây dựng tích hợp hoạt động được theo cả hai cách: dựa trên HTML và dựa trên JavaScript. 

Tôi cũng sẽ đề cập đến các mẹo an toàn khi xử lý lời gọi từ tác tử, cùng cách kiểm thử mọi thứ bằng công cụ gỡ lỗi của Chrome.

WebMCP là gì?

WebMCP (Web Model Context Protocol) là một tiêu chuẩn trình duyệt mới cho phép website khai báo các khả năng của mình như những công cụ có cấu trúc mà tác tử AI có thể gọi trực tiếp. Thay vì buộc AI phải “đọc” và bấm qua giao diện trực quan, WebMCP biến chính trang web thành một API phía client gọn gàng.

Hãy nghĩ về việc một tác tử cố gắng đặt vé máy bay trên một trang du lịch ngày nay. Nó phải tự hiểu trường nào là nơi nhập thành phố khởi hành, đoán định dạng ngày là MM/DD hay YYYY-MM-DD, tìm nút tìm kiếm, và hy vọng trang không tải lại sang một bố cục lạ hoắc. Nếu trang có thể công bố một công cụ tên là searchFlights với các tham số có kiểu cho điểm đi, điểm đến, ngày và số hành khách, tất cả việc đoán mò đó sẽ biến mất.

WebMCP giúp điều đó trở thành khả thi. Một trang đăng ký các công cụ thông qua API trình duyệt tên navigator.modelContext, trong đó mỗi công cụ có tên, mô tả ngôn ngữ tự nhiên và JSON schema cho đầu vào/đầu ra. Tác tử khám phá các công cụ đó, gửi tham số khớp với schema và nhận dữ liệu có cấu trúc trả về.

Kỹ sư từ Google và Microsoft cùng xây dựng đặc tả này trong nhóm cộng đồng W3C Web Machine Learning. Kiến trúc hoàn toàn phía client, khác với các triển khai MCP điển hình nơi một máy chủ backend riêng xử lý thực thi công cụ. Nếu MCP chuẩn kết nối tác tử với máy chủ backend qua JSON-RPC, thì WebMCP giữ mọi thứ trong tab trình duyệt. 

Công cụ được thực thi trong JavaScript của trang; chúng chia sẻ bất kỳ phiên làm việc nào người dùng đã có, và trình duyệt đứng ra điều phối những gì tác tử được phép làm. Nếu bạn từng làm việc với máy chủ MCP trước đây (ví dụ, trong hướng dẫn MCP Model Context Protocol của chúng tôi), khái niệm đăng ký công cụ sẽ quen thuộc, nhưng mô hình triển khai thì khác khá nhiều.

Các tính năng và khả năng chính của WebMCP

Có hai API với mục đích khác nhau:

• API khai báo (Declarative) hoạt động qua các chú thích HTML. Bạn thêm thuộc tính toolname và tooldescription vào phần tử <form>, kèm tùy chọn toolparamdescription trên từng trường; trình duyệt sẽ tạo JSON schema dựa trên cấu trúc form sẵn có. Các trang vốn đã có form được xây dựng tốt sẽ cần rất ít thay đổi để sẵn sàng cho tác tử.
• API mệnh lệnh (Imperative) cho bạn quyền kiểm soát lập trình đầy đủ. Bạn gọi navigator.modelContext.registerTool() và định nghĩa tên công cụ, mô tả, schema đầu vào, cùng callback execute. Đây là lựa chọn cho mọi thứ quá động so với form thuần: quy trình nhiều bước, gọi API, kết quả tính toán, và logic kiểm tra hợp lệ tùy chỉnh.

Cả hai API đều cho phép đăng ký động, nghĩa là công cụ có thể xuất hiện/biến mất khi trạng thái trang thay đổi. Trước khi người dùng đăng nhập, bạn có thể chỉ công bố công cụ login. Sau khi xác thực, các công cụ theo tài khoản sẽ được đăng ký.

• JSON schema trên mỗi công cụ quy định kiểu, enum, trường bắt buộc và mô tả tham số. Cấu trúc này giúp ngăn tác tử bịa giá trị tham số hoặc đặt dữ liệu sai trường.
• Pseudo-class CSS cung cấp phản hồi trực quan trong lúc tác tử tương tác. Chrome áp dụng :tool-form-active cho bất kỳ form nào tác tử đang điền, và :tool-submit-active cho nút gửi của form đó. Người dùng đang xem màn hình sẽ thấy chính xác tác tử đang làm việc với form nào.

Hiện chưa có cơ chế khám phá tích hợp sẵn. Tác tử phải truy cập trang của bạn trước khi có thể biết bạn cung cấp công cụ gì. Nhóm Chrome đã bàn về ý tưởng tệp manifest .well-known/webmcp để cho phép khám phá trước khi truy cập, nhưng đến nay vẫn chưa có đặc tả nào cho hướng này.

Vì WebMCP vẫn đang ở giai đoạn xem trước sớm, bạn nên kỳ vọng sẽ có những góc cạnh thô và thay đổi liên tục, nhất là khi đặc tả đã tiến hóa qua nhiều phiên bản, bao gồm việc loại bỏ các phương thức provideContext và clearContext vào tháng 3/2026. 

Khả năng khám phá công cụ chỉ giới hạn ở các trang bạn đã từng truy cập, và các vấn đề bảo mật như prompt injection và rò rỉ dữ liệu qua chuỗi công cụ được thừa nhận trong đặc tả nhưng chưa được giải quyết triệt để. Trước khi bắt đầu, bạn có thể xem nhật ký thay đổi trong tài liệu Chrome vì bề mặt API có thể đã thay đổi kể từ khi viết hướng dẫn này.

Điều kiện tiên quyết và thiết lập môi trường WebMCP

Thiết lập môi trường đúng cách chỉ tốn vài phút, nhưng dùng sai phiên bản Chrome có thể khiến bạn tốn nhiều thời gian hơn thế.

Cần Chrome Canary phiên bản 146.0.7672.0 hoặc cao hơn. Bản ổn định, Beta và Dev của Chrome không có cờ WebMCP. Một số nhà phát triển trên diễn đàn Chrome đã cài nhầm phiên bản và mất thời gian thắc mắc vì sao không thấy cờ. Hãy tải đúng từ trang Canary.

Trang tải Chrome Canary

Ngoài trình duyệt, bạn cần nắm vững form HTML và xử lý sự kiện JavaScript. Nếu cần ôn lại, khóa Introduction to JavaScript của DataCamp bao quát các nền tảng cơ bản. 

Tiện ích mở rộng Model Context Tool Inspector không bắt buộc, nhưng rất đáng cài đặt. Nó liệt kê mọi công cụ đã đăng ký trên trang hiện tại, cho phép bạn tự chạy chúng với tham số nhập tay, và tích hợp sẵn Gemini API để thử gọi công cụ bằng ngôn ngữ tự nhiên.

Bật cờ thử nghiệm WebMCP

Sau khi cài Chrome Canary:

1. Đi tới chrome://flags/#enable-webmcp-testing trên thanh địa chỉ.
2. Đặt cờ "WebMCP for testing" thành Enabled.
3. Nhấp Relaunch ở cuối trang.

Trang chrome://flags với cờ WebMCP được làm nổi bật và đặt thành Enabled

Sau khi khởi động lại, mở DevTools (F12), vào thẻ Console và chạy:

console.log(navigator.modelContext);Được hỗ trợ bởi

Bảng điều khiển DevTools hiển thị đối tượng navigator.modelContext.

Nếu đầu ra là một đối tượng (không phải undefined) thì xác nhận API đã sẵn sàng. Từ đây, bạn có thể cài đặt tiện ích Model Context Tool Inspector và mở bản demo du lịch của Google để xem đăng ký công cụ hoạt động trên một trang thực. 

Tại đó, bạn chỉ cần khởi chạy tiện ích và sẽ thấy giao diện tương tự như sau:

Kiểm tra công cụ searchFlights bằng tiện ích Model Context Tool Inspector của Chrome với website demo Flight Search của Google. 

Như bạn thấy, Model Context Tool Inspector phát hiện công cụ searchFlights và hiển thị schema đầu vào của nó, giúp mô hình hiểu rõ hơn cách tương tác với trang.

Xây dựng tích hợp WebMCP đầu tiên của bạn

Có hai cách để bạn xây dựng tích hợp WebMCP đầu tiên, và chúng tôi trình bày cả hai bên dưới:

Cách tiếp cận khai báo (HTML)

Cách đơn giản nhất để đăng ký một công cụ WebMCP là chú thích một form đã có sẵn trên trang. Dưới đây là form tìm kiếm sản phẩm tiêu chuẩn không có chú thích WebMCP:

<form action="/search" method="GET">
  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required>

  <label for="category">Category</label>
  <select name="category" id="category">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Được hỗ trợ bởi

Bốn thuộc tính sẽ biến nó thành công cụ có thể được tác tử gọi. toolname và tooldescription đặt trên thẻ <form>. Trên từng trường, toolparamtitle và toolparamdescription sẽ ghi đè nhãn mặc định khi các nhãn đó chưa đủ mô tả để tác tử hiểu:

<form toolname="search_products"
      tooldescription="Search the product catalog by keyword and optional category filter"
      action="/search" method="GET">

  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required
         toolparamdescription="The keyword or phrase to search for in product titles and descriptions">

  <label for="category">Category</label>
  <select name="category" id="category"
          toolparamtitle="Product Category"
          toolparamdescription="Filter results to a specific product category. Use 'all' for no filter.">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Được hỗ trợ bởi

Những thuộc tính đó được trình duyệt dùng để tạo JSON schema nội bộ. Tên công cụ, kiểu tham số, các giá trị enum từ tùy chọn <select>, và đánh dấu bắt buộc từ HTML đều được chuyển sang mà không cần cấu hình bổ sung.

Để kiểm thử, hãy tạo một tệp .html đơn giản trên máy của bạn bằng bất kỳ trình soạn thảo nào, dán đoạn mã trên vào, và mở nó trong Chrome bằng file:///{your_document_path.html}; để tiện ích hoạt động với tệp cục bộ, bạn cũng cần mở phần cài đặt tiện ích, vào Chi tiết (Details), và bật quyền truy cập URL tệp, như ảnh chụp màn hình bên dưới.

Cho phép tiện ích truy cập tệp cục bộ.

Nếu không, trình duyệt sẽ không thể tương tác với tệp HTML cục bộ của bạn. Sau khi xong, mở tệp bằng Chrome và kiểm tra tiện ích WebMCP, bạn sẽ thấy giao diện tương tự ảnh chụp sau. 

Tiện ích hiển thị schema được tạo cho công cụ search_products sau khi thêm chú thích.

Vậy chuyện gì xảy ra khi một tác tử gọi công cụ này? 

Chrome sẽ focus vào form, điền các trường với giá trị tác tử cung cấp, và dừng lại ở đó. Người dùng vẫn phải bấm Gửi (Submit). Mặc định này là có chủ ý, vì con người nên xác nhận hành động trước khi thực thi.

Thêm thuộc tính toolautosubmit vào thẻ form sẽ bỏ qua bước xác nhận. Điều này hợp lý cho các thao tác chỉ đọc như truy vấn tìm kiếm. Với bất kỳ tác vụ nào sửa dữ liệu, kích hoạt mua hàng, hoặc thay đổi cài đặt tài khoản, hãy để nguyên, đừng bật.

Cũng có cách chặn sự kiện gửi và trả về kết quả có cấu trúc cho tác tử. Phương thức respondWith() trên sự kiện submit nhận một promise, và bất cứ thứ gì bạn resolve sẽ trở thành đầu ra của công cụ:

<form toolname="search_products"
      tooldescription="Search the product catalog"
      toolautosubmit
      action="/search">
  <input type="text" name="query" required>
  <button type="submit">Search</button>
</form>

<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault();

    const query = new FormData(e.target).get("query");

    if (!query || query.trim().length === 0) {
      if (e.agentInvoked) {
        e.respondWith(Promise.resolve({
          error: "Search query cannot be empty. Please provide a keyword."
        }));
      }
      return;
    }

    const results = performSearch(query);

    if (e.agentInvoked) {
      e.respondWith(Promise.resolve({
        content: [{ type: "text", text: JSON.stringify(results) }]
      }));
    }
  });
</script>Được hỗ trợ bởi

Biến boolean agentInvoked trên sự kiện submit sẽ là true khi tác tử kích hoạt việc gửi và false khi người dùng bấm bình thường. Bạn có thể dùng nó để rẽ nhánh giữa định dạng phản hồi dành cho tác tử và xử lý form thông thường.

Khi một trường không có toolparamdescription, trình duyệt sẽ lấy mô tả từ phần tử <label> liên kết, hoặc nếu không có, từ thuộc tính aria-description. Vì vậy, markup chuẩn truy cập đã cung cấp mô tả tham số hợp lý mà không cần thêm việc gì.

Một điểm hơi lạ hiện tại: với nhóm phần tử <input type="radio">, toolparamdescription phải đặt trên nút radio đầu tiên trong nhóm và áp dụng cho cả tham số.

Cách tiếp cận mệnh lệnh (JavaScript)

Form bao quát được rất nhiều, nhưng một số công cụ cần làm việc với trạng thái ứng dụng, gọi API, hoặc trả về kết quả tính toán không khớp với việc gửi form truyền thống. Dưới đây là một công cụ cơ bản thêm mục vào danh sách việc cần làm:

window.navigator.modelContext.registerTool({
  name: "addTodo",
  description: "Add a new item to the user's to-do list. Use when the user asks to create, add, or remember a task.",
  inputSchema: {
    type: "object",
    properties: {
      text: {
        type: "string",
        description: "The task description"
      },
      priority: {
        type: "string",
        enum: ["low", "medium", "high"],
        description: "Task priority level. Default to 'medium' if not specified by the user."
      }
    },
    required: ["text"]
  },
  execute: ({ text, priority = "medium" }) => {
    const newItem = { id: Date.now(), text, priority, done: false };
    todoApp.addItem(newItem);
    todoApp.renderList();

    return {
      content: [{
        type: "text",
        text: Added task: "${text}" with ${priority} priority. The to-do list now has ${todoApp.getCount()} items.
      }]
    };
  }
});Được hỗ trợ bởi

Callback execute nhận các tham số tác tử gửi (phải khớp inputSchema), chạy logic ứng dụng của bạn và trả về một mảng content. 

Một chi tiết quan trọng: cập nhật UI trước khi trả về. 

Đôi khi tác tử sẽ kiểm tra xem trang trông thế nào sau khi gọi công cụ để xác minh có thành công không, nên nếu UI chưa thay đổi, tác tử có thể cho rằng lời gọi đã thất bại. Bạn có thể đăng ký/hủy đăng ký công cụ khi trạng thái trang thay đổi:

function onUserLogin(user) {
  navigator.modelContext.registerTool({
    name: "viewOrderHistory",
    description: "Show the user's past orders with dates and totals",
    inputSchema: {
      type: "object",
      properties: {
        limit: {
          type: "number",
          description: "Maximum number of orders to return. Defaults to 10."
        }
      }
    },
    execute: async ({ limit = 10 }) => {
      const orders = await fetchOrders(user.id, limit);
      return {
        content: [{ type: "text", text: JSON.stringify(orders) }]
      };
    }
  });
}

function onUserLogout() {
  navigator.modelContext.unregisterTool("viewOrderHistory");
}Được hỗ trợ bởi

Một kịch bản thực tế hơn: trang đặt bàn nhà hàng kiểm tra tình trạng bàn trống. Ví dụ này cũng minh họa việc kiểm tra hợp lệ trong mã, điều được tài liệu Chrome khuyến nghị vì ràng buộc trong schema hữu ích cho tác tử nhưng không phải tác tử nào cũng bắt buộc tuân thủ.

navigator.modelContext.registerTool({
  name: "checkAvailability",
  description: "Check table availability for a given date and party size at this restaurant. Returns available time slots.",
  inputSchema: {
    type: "object",
    properties: {
      date: {
        type: "string",
        description: "The desired reservation date in YYYY-MM-DD format"
      },
      partySize: {
        type: "number",
        description: "Number of guests, between 1 and 12"
      }
    },
    required: ["date", "partySize"]
  },
  execute: async ({ date, partySize }) => {
    if (partySize < 1 || partySize > 12) {
      return {
        content: [{
          type: "text",
          text: "Party size must be between 1 and 12. For larger groups, please call the restaurant directly at (555) 123-4567."
        }]
      };
    }

    const parsedDate = new Date(date);
    if (isNaN(parsedDate.getTime()) || parsedDate < new Date()) {
      return {
        content: [{
          type: "text",
          text: "Please provide a valid future date in YYYY-MM-DD format."
        }]
      };
    }

    const slots = await api.getAvailableSlots(date, partySize);
    renderAvailabilityCalendar(date, slots);

    return {
      content: [{
        type: "text",
        text: JSON.stringify({
          date,
          partySize,
          availableSlots: slots.map(s => s.time),
          message: slots.length > 0
            ? Found ${slots.length} available time slots.
            : "No availability for this date. Try a different date or smaller party."
        })
      }]
    };
  }
});Được hỗ trợ bởi

Một vài điểm đáng lưu ý từ tài liệu Chrome. Hãy chấp nhận đầu vào thô từ người dùng bất cứ khi nào có thể. Nếu ai đó nói "11:00 đến 15:00", công cụ của bạn nên nhận trực tiếp các chuỗi đó thay vì yêu cầu tác tử chuyển đổi sang phút tính từ nửa đêm hay định dạng nội bộ khác. 

Hãy kiểm tra hợp lệ trong mã, không chỉ trong schema, vì mức độ thực thi schema thay đổi giữa các tác tử. Và chỉ trả về sau khi UI đã được cập nhật, vì tác tử có thể xem trang để xác nhận thao tác đã hoàn tất.

Với các công cụ MCP phía máy chủ bổ trợ cho triển khai WebMCP phía client, hướng dẫn của chúng tôi về xây dựng máy chủ MCP với FastMCP trình bày chi tiết thiết lập.

Xử lý lời gọi từ tác tử và an toàn trong WebMCP

Đặc tả WebMCP giả định có con người giám sát. Các tác giả tại Google và Microsoft thiết kế nó xoay quanh quy trình cộng tác, không phải vận hành tự động. Các cơ chế dưới đây phản ánh triết lý đó.

Phân biệt người dùng AI và con người

Một thuộc tính boolean mới có tên agentInvoked xuất hiện trên giao diện SubmitEvent. Khi một tác nhân kích hoạt việc gửi biểu mẫu, thuộc tính này có giá trị true. Khi một người bấm Gửi theo cách thông thường, nó có giá trị false.

document.querySelector("form").addEventListener("submit", (e) => {
  if (e.agentInvoked) {
    console.log("AI agent submitted the form");
    if (!isWithinAgentRateLimit()) {
      e.preventDefault();
      e.respondWith(Promise.resolve({
        error: "Too many requests. Please wait before trying again."
      }));
      return;
    }
  }
});Được hỗ trợ bởi

Ngoài việc gửi biểu mẫu, có hai sự kiện cấp cửa sổ theo dõi hoạt động của tác nhân. toolactivated được kích hoạt sau khi một tác nhân gọi một công cụ, và Chrome điền sẵn các trường trong biểu mẫu liên quan. toolcancel được kích hoạt nếu người dùng hủy thao tác hoặc đặt lại biểu mẫu. 

Cả hai sự kiện đều không thể hủy, nhưng đều mang thuộc tính toolName để bạn biết công cụ nào có liên quan.

window.addEventListener("toolactivated", ({ toolName }) => {
  showAgentActivityBanner(toolName);
});

window.addEventListener("toolcancel", ({ toolName }) => {
  hideAgentActivityBanner();
});Được hỗ trợ bởi

Thực thi quyền có người duyệt (human-in-the-loop)

Với các công cụ khai báo, hành vi mặc định là con người phải bấm Gửi sau khi tác nhân điền các trường. Mặc định đó nên được giữ nguyên cho mọi thứ có hệ quả thực sự.

Thuộc tính toolautosubmit loại bỏ bước đó. Nó phù hợp với các công cụ chỉ đọc hoặc rủi ro thấp: truy vấn tìm kiếm, tra cứu tình trạng khả dụng, kiểm tra trạng thái. 

Bất cứ thứ gì tạo, sửa hoặc xóa dữ liệu đều nên yêu cầu bấm tay.

Bạn có thể tạo kiểu cho trạng thái tương tác của tác nhân bằng các pseudo-class CSS:

form:tool-form-active {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">1rem;
  border-radius: 8px;
}

form:tool-form-active::before {
  content: "AI agent is filling this form";
  display: block;
  font-size: 0.875rem;
  color: #2563eb;
  font-weight: 600;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">0.5rem;
}Được hỗ trợ bởi

Một biểu mẫu với kiểu :tool-form-active được áp dụng, hiển thị viền xanh lam và nhãn "AI agent is filling this form".

Các công cụ mệnh lệnh đặt ra thách thức khác. Không có biểu mẫu và nút gửi, nên việc thực thi diễn ra ngay khi tác nhân gọi công cụ. 

Với mọi thao tác không nên xảy ra nếu chưa có sự chấp thuận của con người, bạn cần xây dựng bước xác nhận ngay trong chính công cụ:

navigator.modelContext.registerTool({
  name: "deleteAccount",
  description: "Permanently delete the user's account and all associated data. Cannot be undone.",
  inputSchema: {
    type: "object",
    properties: {
      confirmPhrase: {
        type: "string",
        description: "The user must type 'DELETE MY ACCOUNT' to confirm."
      }
    },
    required: ["confirmPhrase"]
  },
  execute: ({ confirmPhrase }) => {
    if (confirmPhrase !== "DELETE MY ACCOUNT") {
      return {
        content: [{
          type: "text",
          text: "Confirmation phrase does not match. Ask the user to confirm explicitly."
        }]
      };
    }

    return new Promise((resolve) => {
      showConfirmationModal("Are you sure?", {
        onConfirm: async () => {
          await api.deleteAccount();
          resolve({ content: [{ type: "text", text: "Account deleted." }] });
        },
        onCancel: () => {
          resolve({ content: [{ type: "text", text: "Deletion cancelled by user." }] });
        }
      });
    });
  }
});Được hỗ trợ bởi

Mẫu hình trong hệ sinh thái MCP nhất quán: tác nhân nêu ý định, con người xác nhận thực thi. Để có góc nhìn rộng hơn về cách điều này vận hành qua các triển khai MCP khác nhau, hãy xem phần tổng quan của chúng tôi về các máy chủ và khách hàng MCP hàng đầu.

Kiểm thử triển khai WebMCP của bạn

Khi bạn đã có tích hợp WebMCP đầu tiên hoạt động, đã đến lúc kiểm thử. 

Sử dụng bộ mô phỏng tác nhân trong Chrome DevTools

Sau khi cài đặt tiện ích Model Context Tool Inspector, một huy hiệu nhỏ trên biểu tượng sẽ cho bạn biết có bao nhiêu công cụ được trang hiện tại đăng ký. Mở pop-up sẽ hiển thị từng công cụ với tên, mô tả và sơ đồ đầu vào. Nếu một công cụ bạn đã đăng ký không xuất hiện ở đây, việc đăng ký đã không thành công.

Bảng điều khiển của tiện ích hiển thị danh sách nhiều công cụ đã đăng ký với sơ đồ được mở rộng.

Để thử bộ mô phỏng tác nhân, hãy quay lại trang web demo Flight Search của Google. Giờ chúng ta có thể kiểm thử cách thực thi ứng dụng này theo cách thủ công hoặc bằng ngôn ngữ tự nhiên. 

Cách thực thi thủ công

Thực thi thủ công loại bỏ yếu tố bất định trong việc kiểm thử tác nhân. Chọn một công cụ từ danh sách thả xuống trong bảng tiện ích, nhập một đối tượng JSON vào trường "Input Arguments", rồi bấm "Execute Tool." Tiện ích sẽ gọi trực tiếp công cụ đó với các tham số bạn cung cấp.

Tiện ích với công cụ searchFlights được chọn, tham số JSON đã điền và nút Execute Tool hiển thị.

Điều này hữu ích để cô lập vấn đề. Khi một công cụ hoạt động đúng với tham số viết tay nhưng thất bại khi tác nhân gọi, bạn biết vấn đề nằm ở mô tả công cụ hoặc sơ đồ, không phải trong hàm execute. Ví dụ, với demo du lịch của Google:

{
  "origin": "LON",
  "destination": "NYC",
  "tripType": "round-trip",
  "outboundDate": "2026-06-10",
  "inboundDate": "2026-06-17",
  "passengers": 2
}Được hỗ trợ bởi

Trang demo du lịch hiển thị kết quả tìm kiếm sau khi thực thi công cụ thủ công.

Kiểm thử bằng ngôn ngữ tự nhiên

Kiểm thử bằng ngôn ngữ tự nhiên sử dụng API Gemini. Dán một khóa từ AI Studio vào phần cài đặt của tiện ích, rồi nhập một lời nhắc như 

Search for round-trip flights from London to New York leaving June 10th, returning June 17th, for 2 passengers.Được hỗ trợ bởi

Tiện ích gửi lời nhắc đó đến Gemini 2.5 Flash cùng với định nghĩa công cụ của bạn, và mô hình quyết định nên gọi công cụ nào và truyền tham số gì.

Trường nhập ngôn ngữ tự nhiên của tiện ích với lời nhắc đã nhập và phản hồi gọi công cụ của tác nhân bên dưới.

Nếu tác nhân chọn sai công cụ hoặc ánh xạ tham số không chính xác, có lẽ mô tả công cụ của bạn cần cụ thể hơn. Mô tả tốt giải thích công cụ làm gì theo hướng khẳng định ("dùng cái này để kiểm tra tình trạng chuyến bay"), không phải những gì nó không nên dùng cho.

Trình tự kiểm thử thực tế:

1. Xác minh các công cụ xuất hiện trong tiện ích sau khi tải trang.
2. Thực thi từng công cụ thủ công với tham số đúng. Xác nhận logic execute hoạt động và UI cập nhật như mong đợi.
3. Thực thi với tham số sai. Kiểm tra việc xác thực của bạn bắt lỗi và thông điệp đủ rõ để tác nhân tự sửa.
4. Kiểm thử bằng ngôn ngữ tự nhiên. Xem liệu tác nhân chọn đúng công cụ và ánh xạ lời người dùng sang tham số sơ đồ chính xác không.
5. Kiểm thử các trường hợp biên: người dùng chưa xác thực, biểu mẫu bị vô hiệu, API ngừng hoạt động, và các cuộc gọi lặp lại nhanh.

Để có bối cảnh về các công cụ MCP trong hệ sinh thái của Google nói riêng, hướng dẫn Google MCP Servers của chúng tôi bao quát một số mẫu hình liên quan. Và để có cái nhìn rộng hơn về bức tranh giao thức ngoài Chrome, hãy xem Top Remote MCP Servers.

Kết luận

WebMCP cung cấp cho các website một kênh giao tiếp trực tiếp với các tác nhân AI. Thay vì tác nhân đoán mò cách điều hướng trang, trang web công bố các định nghĩa công cụ có cấu trúc, và tác nhân gọi chúng với tham số có kiểu. API khai báo biến các biểu mẫu hiện có thành công cụ có thể gọi bởi tác nhân chỉ với vài thuộc tính HTML. API mệnh lệnh bao phủ mọi thứ phức tạp hơn. Mô hình an toàn giữ con người kiểm soát các hành động quan trọng.

Đặc tả vẫn còn sớm, chỉ có trên Chrome Canary sau cờ, và chưa phù hợp để dùng sản xuất. Nhưng việc cả Google và Microsoft cùng đồng tác giả, với W3C quản trị, cho thấy nó có con đường thực sự để trở thành tiêu chuẩn web ổn định. Dành thời gian với API ngay bây giờ đồng nghĩa bạn sẽ hiểu sẵn các mẫu thiết kế công cụ và cơ chế an toàn khi bản phát hành ổn định đến.

Nếu bạn muốn bắt đầu chuẩn bị ngay, hãy kiểm toán các biểu mẫu trên những trang hiện có và xác định cái nào sẽ hưởng lợi nhiều nhất từ quyền truy cập của tác nhân. Biểu mẫu tìm kiếm và bộ kiểm tra tình trạng khả dụng là những điểm khởi đầu rủi ro thấp. Khi bạn đã quen với API khai báo ở đó, hãy chuyển sang các công cụ mệnh lệnh cho các quy trình làm việc cần logic tùy chỉnh. 

Để tiếp tục khám phá chủ đề, tôi khuyến nghị:

• Hướng dẫn giao thức MCP Model Context cho các khái niệm nền tảng đằng sau WebMCP.
• Xây dựng máy chủ MCP với FastMCP cho các công cụ MCP phía máy chủ bổ trợ cho WebMCP phía khách.
• Hướng dẫn Google MCP Servers cho các mẫu tích hợp đặc thù Google.
• Top Remote MCP Servers và Top MCP Servers and Clients cho hệ sinh thái rộng hơn.