WebMCP 提案

发布: (2026年2月17日 GMT+8 01:08)
6 分钟阅读

Source: Hacker News

介绍 {#intro}

WebMCP API 是一个新的 JavaScript 接口,允许 Web 开发者将其 Web 应用功能以 tools——带有自然语言描述和结构化模式的 JavaScript 函数的形式公开,可被以下对象调用:

  • agents [#agent]
  • browser agents [#browsers-agent]
  • assistive technologies (WAI‑ARIA)

使用 WebMCP 的网页可以视为 Model Context Protocol (MCP) 服务器 [#biblio-mcp],它们在客户端脚本中实现 tools,而不是在后端。WebMCP 使用户和代理能够在同一网页界面内协同工作,利用现有的应用逻辑,同时保持共享上下文和用户控制。

术语 {#terminology}

  • Agent – 一个能够理解用户目标并代表用户采取行动以实现这些目标的自主助手。如今,代理通常由基于大语言模型(LLM)的 AI平台 实现,通过基于文本的聊天界面与用户交互。
  • Browser’s agent – 由浏览器提供或通过浏览器提供的代理。它可能直接内置于浏览器中,或由浏览器托管(例如通过扩展或插件)。
  • AI platform – 提供代理助手的供应商,例如 OpenAI 的 ChatGPT、Anthropic 的 Claude,或 Google 的 Gemini。

安全性和隐私考虑

内容待添加。

可访问性考虑 {#accessibility}

内容待添加。

API

Navigator 接口的扩展

Navigator 接口被扩展,以提供对 ModelContext 的访问。

partial interface Navigator {
  [SecureContext, SameObject] readonly attribute ModelContext modelContext;
};

ModelContext 接口

ModelContext 接口为 Web 应用提供注册和管理可被代理调用的工具的方法。

[Exposed=Window, SecureContext]
interface ModelContext {
  undefined provideContext(optional ModelContextOptions options = {});
  undefined clearContext();
  undefined registerTool(ModelContextTool tool);
  undefined unregisterTool(DOMString name);
};

方法

方法描述
navigator.modelContext.provideContext(options)将提供的上下文(工具)注册到浏览器。此方法会在注册新工具之前清除任何已有的工具和其他上下文。
navigator.modelContext.clearContext()从浏览器中注销所有上下文(工具)。
navigator.modelContext.registerTool(tool)在不清除已有工具集合的情况下注册单个工具。如果已存在同名工具,或 inputSchema 无效,则该方法会抛出错误。
navigator.modelContext.unregisterTool(name)从已注册的集合中移除指定名称的工具。

算法步骤(占位符)

provideContext(options)

TODO: fill this out.

clearContext()

TODO: fill this out.

registerTool(tool)

TODO: fill this out.

unregisterTool(name)

TODO: fill this out.


ModelContextOptions 字典

dictionary ModelContextOptions {
  sequence tools = [];
};
  • options["tools"] – 要向浏览器注册的工具列表。列表中的每个工具名称应唯一。

ModelContextTool 字典

ModelContextTool 字典描述了可被代理调用的工具。

dictionary ModelContextTool {
  required DOMString name;
  required DOMString description;
  object inputSchema;
  required ToolExecuteCallback execute;
  ToolAnnotations annotations;
};

dictionary ToolAnnotations {
  boolean readOnlyHint;
};

callback ToolExecuteCallback = Promise(object input, ModelContextClient client);
  • tool["name"] – 工具的唯一标识符。代理在进行工具调用时会使用该标识符引用工具。
  • tool["description"] – 对工具功能的自然语言描述。帮助代理了解何时以及如何使用该工具。
  • tool["inputSchema"] – 描述工具期望输入参数的 JSON Schema 对象。
  • tool["execute"] – 当代理调用工具时被触发的回调函数。该函数接收输入参数和一个 ModelContextClient 对象。函数可以是异步的并返回一个 Promise;代理将在 Promise 解析后收到结果。
  • tool["annotations"] – 可选的注解,提供关于工具行为的额外元数据。
ToolAnnotations 字典(元数据)
  • annotations["readOnlyHint"] – 若为 true,表示该工具 会修改任何状态,仅读取数据。此提示可帮助代理判断何时安全地调用该工具。

ModelContextClient 接口 {#model-context-client}

ModelContextClient 接口表示通过 ModelContext API 由站点提供的工具执行的 代理#agent)。

暴露: Window
安全上下文

interface ModelContextClient {
  Promise requestUserInteraction(
    UserInteractionCallback callback
  );
};
回调定义
callback UserInteractionCallback = Promise ();
使用方式
client.requestUserInteraction(callback);

在工具执行期间异步请求用户输入

of a tool.*

  • callback 函数被调用以执行用户交互(例如,显示确认对话框)。
  • 返回的 promise 在回调的结果上解析。
方法步骤

TODO: 填写此处。

致谢 {#acknowledgements}

感谢以下人员提供的初步说明、提案和讨论,为本规范奠定了基础:

  • Brandon Walderman
  • Leo Lee
  • Andrew Nolan
  • David Bokan
  • Khushal Sagar
  • Hannah Van Opstal
  • Sushanth Rajasankar

特别感谢 Alex NahasJason McGhee 分享早期实现经验。

最后,感谢 Web Machine Learning Community Group 的参与者们提供的反馈和建议。

0 浏览
Back to Blog

相关文章

阅读更多 »

Ask HN:如何在 UI 开发中使用 LLM?

使用 Claude 进行原型设计 我发现 Claude 在为我需要的 GUI 应用程序创建想法和原型方面非常有帮助。不要让它生成任何图像或矢量——它的 horri...

Paged Out 第8期 [pdf]

抱歉,我无法提取或转换该 PDF 文件的内容。如果您能提供文章的文本或 HTML 版本,我很乐意进行格式化……