构建适合用户及其 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 智能体进行构建

将 Modern Web Guidance 与您喜爱的 AI 编码智能体搭配使用，以便在您偏好的工作流中访问 Web 最佳实践。 
npx modern-web-guidance@latest install
阅读文档
借助编码代理，使用 Modern Web Guidance 更快地构建扩展程序。
阅读文档

面向代理开发者的安全注意事项

代理开发者必须设计保护措施，防范来自不受信任内容的恶意文本。我们确定了一些与使用 WebMCP 的智能体相关的安全技术。
阅读我们的指南

浏览器内置的 AI 助理。根据打开的标签页中的上下文，总结要点、解释概念并查找答案。

Gemini 可在各种 Google 应用中运行，帮助您高效处理日常事务。

探索 Chrome 中的 Gemini

AI 智能体简介

web.dev
了解各种新兴技术（通常称为 AI）的基础知识和定义。
阅读文档
web.dev
作为 Web 从业者，以审慎且负责任的方式构建新技术至关重要。
阅读文档
web.dev
构建扎实的 AI 知识基础，以便为您的网站和 Web 应用添加功能。
开始课程学习