mcpField
W
webmcp

webmcp

github.com/pillarhq开发069 次安装32 周前更新
代码仓库

关于 webmcp

webmcp 是一项技能，指导开发者通过 W3C WebMCP API 向网页添加可调用的 JavaScript 工具，涵盖工具定义、安全、用户确认及 SPA 状态变化时的注册管理。

主要功能

  1. 01定义工具名称、模式与执行逻辑
  2. 02验证参数并保护敏感数据
  3. 03为重要操作请求用户确认
  4. 04随 SPA 状态变化更新工具注册
  5. 05编写便于 LLM 选择工具的描述

适用场景

  1. 01向浏览器 AI Agent 暴露页面功能
  2. 02为网页添加可调用工具
  3. 03构建有人参与的 Agent 工作流

MCP 相关

该技能介绍使用 W3C WebMCP API 的 `navigator.modelContext` 注册页面工具，供 AI Agent 和浏览器助手调用。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pillarhq/pillar-skills --skill webmcp

安装后在 Claude Code 中输入/webmcp确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
rules/
descriptions.md
dynamic-registration.md
security.md
tool-definition.md
user-interaction.md

详细介绍

WebMCP 工具

使用 W3C WebMCP API（navigator.modelContext）实现工具，让 AI Agent、浏览器助手和辅助技术能够在你的页面上调用结构化的 JavaScript 函数。

适用场景

在以下情况下参考这些指南：

  • 为浏览器 AI Agent 向网页添加工具
  • 通过 navigator.modelContext 注册可调用函数
  • 向 Agent 开放现有页面功能
  • 构建由人参与的协作式 Agent 工作流

核心规则

优先级规则描述
CRITICALtool-definition每个工具都需要名称、描述、inputSchema 和 execute
CRITICALsecurity验证参数、确认破坏性操作，不要泄露敏感数据
HIGHdescriptions编写具体的描述——大模型会读取这些描述来选择工具
HIGHdynamic-registration随着 SPA 状态变化注册或取消注册工具
MEDIUMuser-interaction对于购买、删除和发送操作，使用 agent.requestUserInteraction()

快速参考

1. 注册工具（CRITICAL）
navigator.modelContext.registerTool({
  name: "add-to-cart",
  description: "Add a product to the shopping cart by ID",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "Product ID" },
      quantity: { type: "number", description: "How many to add (1-100)" }
    },
    required: ["productId"]
  },
  execute: async ({ productId, quantity }) => {
    await cartApi.add(productId, quantity ?? 1);
    return { content: [{ type: "text", text: `Added ${quantity ?? 1} to cart` }] };
  }
});
2. 功能检测（CRITICAL）
if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({...});
}
3. 工具描述（HIGH）
// Good — specific, includes what it returns
description: "Search available flights. Returns {id, airline, price, departure, arrival}. Does not book — use book-flight to complete."

// Bad — vague
description: "Search flights"
4. 用户确认（MEDIUM）
execute: async ({ productId }, agent) => {
  const ok = await agent.requestUserInteraction(() =>
    confirm(`Buy product ${productId}?`)
  );
  if (!ok) throw new Error("Cancelled");
  await purchase(productId);
  return { content: [{ type: "text", text: "Purchased" }] };
}
5. SPA 的动态注册（HIGH）
// React — register on mount, unregister on unmount
useEffect(() => {
  if (!("modelContext" in navigator)) return;
  navigator.modelContext.registerTool({ name: "edit-doc", ... });
  return () => navigator.modelContext.unregisterTool("edit-doc");
}, [doc.id]);

使用方法

阅读各规则文件，了解详细说明和代码示例：

rules/tool-definition.md
rules/descriptions.md
rules/security.md
rules/dynamic-registration.md
rules/user-interaction.md

如需查看包含所有展开模式的完整指南，请参阅：AGENTS.md

评论

支持 Markdown