建構網站和應用程式，供使用者及其 AI 代理使用。
開始使用 加入來源試用計畫

WebMCP 的運作方式

只要三個步驟，網站就能明確告知代理程式可執行的動作。
步驟 1

您的網站會將代理可執行的動作宣告為 WebMCP 工具。每個工具都有名稱、說明和 JSON 結構定義。

// Imperative API
document.modelContext.registerTool({
  name: "bookSlot",
  title: "Book a consultation slot",
  description: "Reserve a 30-minute consultation.",
  inputSchema: {
    type: "object",
    properties: {
      date:  { type: "string", format: "date" },
      time:  { type: "string" },
      name:  { type: "string" },
      email: { type: "string", format: "email" }
    },
    required: ["date", "time", "name", "email"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input, client) => {
    return await api.book(input);
  }
});
步驟 2

瀏覽器會收集這些工具，並連同網頁的網址、標題和來源權限範圍，一併提供給使用者的 WebMCP 感知代理。

網站會與瀏覽器通訊，瀏覽器則會為代理程式翻譯。
步驟 3

代理程式會看到合約、提供結構化引數，其餘工作則由您的程式碼完成。使用者會持續收到權限和確認通知。確實掌握門前動靜

// the agent's view
{
  "tool": "bookSlot",
  "arguments": {
    "date": "2026-07-31",
    "time": "14:00",
    "name": "Jerry Jones",
    "email": "jerry.jones@example.com"
  }
}

建構代理的工具

深入瞭解 WebMCP API 和說明文件。
開始使用
加入 WebMCP 工具，為網站發掘更多機會，協助使用者和服務專員提升效率。
閱讀說明文件
使用標準 JavaScript 定義 WebMCP 工具，執行網站專屬函式，例如表單輸入和網站導覽。
閱讀說明文件
新增註解，將標準 HTML 表單轉換為 WebMCP 工具。
閱讀說明文件
測試工具，確認虛擬服務專員瞭解何時應呼叫工具、如何執行工具，以及可接受的答案。
閱讀說明文件
瞭解使用 WebMCP API 的最佳做法。
閱讀說明文件
瞭解如何為網站建構安全工具。
閱讀說明文件
WebMCP 和 MCP 共同協助代理程式代表真人使用者完成個人化工作。
閱讀說明文件

使用 AI 代理建構

搭配您慣用的程式設計 AI 代理使用 Modern Web Guidance，即可在偏好的工作流程中存取網頁最佳做法。 
npx modern-web-guidance@latest install
閱讀說明文件
使用 Modern Web Guidance，在程式碼代理程式的協助下，更快建構擴充功能。
閱讀說明文件

代理程式開發人員的安全考量

代理程式開發人員必須設計防護機制，防範來自不受信任內容的惡意文字。我們找出一些與使用 WebMCP 的代理程式相關的安全性技術。
閱讀指南

直接在瀏覽器中獲得 AI 輔助。針對開啟的分頁內容，取得重點摘要、釐清概念和尋找答案。

Gemini 可跨 Google 應用程式運作，協助你處理一天大小事。

探索 Chrome 內建 Gemini

隆重推出 AI 代理

web.dev
瞭解各種新興技術 (通常稱為 AI) 的基本概念和定義。
閱讀說明文件
web.dev
身為網路從業人員，我們必須以負責任的態度審慎地打造新技術。
閱讀說明文件
web.dev
建立 AI 基礎知識，為網站和網頁應用程式新增功能。
參加課程