Xuất bản: Ngày 18 tháng 5 năm 2026
| Video giải thích | Web | Phần mở rộng | Trạng thái của Chrome | Mục đích |
|---|---|---|---|---|
| GitHub | Xem | Ý định thử nghiệm |
Bạn có thể sử dụng WebMCP Imperative API để xác định nhiều loại công cụ bằng JavaScript tiêu chuẩn. Các công cụ của bạn có thể thực hiện nhiều chức năng, chẳng hạn như nhập biểu mẫu, điều hướng trang web và quản lý trạng thái.
Trước khi sử dụng API này, hãy đọc về các trường hợp sử dụng ví dụ.
Cung cấp bối cảnh cho mô hình
Sử dụng giao diện modelContext để đăng ký các công cụ. Để đăng ký công cụ, bạn cần có tên, nội dung mô tả và giản đồ đầu vào có các thuộc tính liên quan,
Dùng registertool để thêm một công cụ vào ngữ cảnh mô hình.
WebMCPza Maker
navigator.modelContext.registerTool({
name: 'toggle_layer',
description: 'Control pizza layers (sauce, cheese). Use "add", "remove", or "toggle".',
inputSchema: {
type: 'object',
properties: {
layer: { type: 'string', enum: ['sauce-layer', 'cheese-layer'] },
action: { type: 'string', enum: ['add', 'remove', 'toggle'] },
},
required: ['layer'],
},
execute: ({ layer, action }) => {
toggleLayer(layer, action);
return `Performed ${action || 'toggle'} on layer: ${layer}`;
},
});
Lấy trạng thái đơn đặt hàng
navigator.modelContext.registerTool({
name: 'get_order_status',
description: 'Search orders in a given timeframe. Returns order number, shipping status and location',
inputSchema: {
"type": "object",
"properties": {
"timeframe": { "type": "string", "oneOf": [
{ "type": "string", "const": "today", "title": "Today" },
{ "type": "string", "const": "yesterday", "title": "Yesterday" },
{ "type": "string", "const": "last_7_days", "title": "Last 7 Days" },
{ "type": "string", "const": "last_30_days", "title": "Last 30 Days" },
{ "type": "string", "const": "last_6_months", "title": "Last 6 Months" }],
"enum": [ "today", "yesterday", "last_7_days", "last_30_days", "last_6_months" ],
"description": "Timeframe for the order lookup." }
},
"required": [ "timeframe" ]
},
execute: ({ timeframe }) => {
// Add your API or database logic here to fetch and return the order data as a string.
},
});
Bạn có thể xoá một công cụ bằng AbortSignal khi được truyền dưới dạng một tham số không bắt buộc.
const addTodoTool = {
name: "addTodo",
description: "Add a new item to the to-do list",
inputSchema: {
type: "object",
properties: { text: { type: "string" } },
},
execute: ({ text }) => {
// You should handle the persistence logic here (omitted for demo)
return `Added to-do: ${text}`;
},
annotations: {
readOnlyHint: false,
untrustedContentHint: true
},
};
const controller = new AbortController();
navigator.modelContext.registerTool(addTodoTool, { signal: controller.signal });
// Unregister the tool later...
controller.abort();
Khám phá các công cụ
Để xem các công cụ có sẵn, hãy dùng lệnh navigator.modelContext.getTools(). Phương thức không đồng bộ này trả về danh sách các công cụ mà tài liệu gọi được phép truy cập dựa trên nguồn gốc của tài liệu.
const [tool] = await navigator.modelContext.getTools();
console.log(tool);
// {
// annotations: { readOnlyHint: false, untrustedContentHint: true },
// description: "Add a new item to the to-do list",
// inputSchema: '{"type":"object","properties":{"text":{"type":"string"}}}',
// name: "addTodo",
// origin: "https://example.com",
// window: Window {window: Window, self: Window, ...},
// }
Thực thi công cụ
Để thực thi một công cụ được phát hiện trong getTools() theo cách thủ công, hãy gọi navigator.modelContext.executeTool() bằng các đối số đầu vào dưới dạng một chuỗi JSON hợp lệ. Phương thức không đồng bộ này trả về kết quả thực thi công cụ hoặc giá trị rỗng khi một thao tác điều hướng được kích hoạt.
const result = await navigator.modelContext.executeTool(tool, '{"text": "Buy milk"}');
console.log(result);
// 'Added to-do: Buy milk'
Bạn có thể huỷ một lệnh thực thi công cụ đang chờ xử lý bằng AbortSignal khi được truyền dưới dạng một tham số không bắt buộc.
const controller = new AbortController();
navigator.modelContext.executeTool(tool, '{"text": "Buy milk"}', {
signal: controller.signal,
});
// Cancel tool execution later...
controller.abort();
Sự kiện
Khung có thể theo dõi sự kiện toolchange trên navigator.modelContext để nhận thông báo khi danh sách các công cụ có sẵn đã thay đổi.
navigator.modelContext.addEventListener("toolchange", (event) => {
// Tools have changed.
});
Iframe trên nhiều nguồn gốc
WebMCP hỗ trợ các iframe có nguồn gốc khác nhau sử dụng cả chính sách về quyền và tính năng kiểm soát truy cập theo nguồn gốc rõ ràng.
Chính sách về quyền
Theo mặc định, tính năng đăng ký công cụ bị tắt trong iframe trên nhiều nguồn gốc. Một trang phải uỷ quyền truy cập bằng tools
Chính sách về quyền:
<iframe src="https://example.com" allow="tools"></iframe>
Tiếp xúc với nguồn gốc
Theo mặc định, các công cụ không có sẵn cho tài liệu trên nhiều nguồn gốc. Bạn có thể sử dụng mảng exposedTo trong registerTool để liệt kê những nguồn cụ thể được phép xem và thực thi một công cụ. Mảng này chỉ hỗ trợ các nguồn gốc có giao thức HTTPS.
navigator.modelContext.registerTool({
name: 'my_shared_tool',
description: 'Shared across origins',
// ...
}, {
exposedTo: ['https://trusted.com', 'https://partner.org']
});
Tương tác và chia sẻ ý kiến phản hồi
WebMCP đang được thảo luận tích cực và có thể thay đổi trong tương lai. Nếu bạn dùng thử API này và có ý kiến phản hồi, chúng tôi rất mong được lắng nghe.
- Đọc tài liệu giải thích về WebMCP, đặt câu hỏi và tham gia thảo luận.
- Đọc các phương pháp hay nhất về WebMCP.
- Xem xét việc triển khai cho Chrome trên Trạng thái của Chrome.
- Tham gia chương trình xem trước sớm để xem trước các API mới và truy cập vào danh sách gửi thư của chúng tôi.
- Nếu bạn có ý kiến phản hồi về cách Chrome triển khai, hãy báo cáo lỗi Chromium.