webmcp工具包
](https://www.npmjs.com/package/webmcp-kit) ](https://www.npmjs.com/package/webmcp-kit)  
使用Zod键入安全的WebMCP工具。
什么是WebMCP？
WebMCP 是一个浏览器API，允许网站向人工智能代理公开工具，由WebML工作组开发。
API添加 navigator.modelContext，哪些网站用于注册代理可以发现和调用的工具。把它想象成让你的网站功能可供人工智能助手使用。
主要浏览器开始尝试实现。
- 铬：
- WebMCP可提前预览 - WebMCP早期预览 - TLDR：下载Chrome Canary（146+），转到 about:flags 并设置 WebMCP for testing 启用
webmcp工具包做什么？
webmcp-kit包装了原始webmcp API，使构建工具更容易：
- Zod模式：定义一次输入，获得JSON模式转换和TypeScript推理
- 内置验证：输入之前会根据您的模式进行验证
execute跑 - 减少样板：为您处理功能检测、响应格式化和注册
- 自动特征检测：当API存在时有效，当它不存在时优雅地后退
- 开发面板：在浏览器中测试和调试工具，而不需要真正的代理
import { defineTool } from 'webmcp-kit';
import { z } from 'zod';
const addToCart = defineTool({
name: 'addToCart',
description: 'Add a product to cart',
inputSchema: z.object({
productId: z.string(),
quantity: z.number().min(1),
}),
execute: async ({ productId, quantity }) => {
// productId and quantity are typed
return `Added ${quantity}x ${productId}`;
},
});
addToCart.register();安装
npm install webmcp-kit zod需要Zod v4。
安装和使用 add-webmcp-tools 技能
使用Vercel的Skills CLI从该存储库安装技能：
npx skills add victorhuangwq/webmcp-kit然后用以下请求调用它：
- “添加webmcp搜索工具”
- “调试为什么我的工具不在开发面板中”
- “更新工具架构和验证”
参考文献
- 技能定义：
skills/add-webmcp-tools/SKILL.md - 工作演示：
- examples/pizza-shop/README.md - examples/flight-booking/README.md
用法
定义工具
import { defineTool } from 'webmcp-kit';
import { z } from 'zod';
const searchProducts = defineTool({
name: 'searchProducts',
description: 'Search the product catalog',
inputSchema: z.object({
query: z.string().describe('Search query'),
limit: z.number().optional().default(10),
}),
execute: async ({ query, limit }) => {
const results = await db.products.search(query, limit);
return JSON.stringify(results);
},
});
searchProducts.register();模式转换为WebMCP API的JSON模式。你的 execute 函数接收键入的输入。
用户交互
工具可以请求用户确认或输入：
const checkout = defineTool({
name: 'checkout',
description: 'Complete purchase',
inputSchema: z.object({ cartId: z.string() }),
execute: async ({ cartId }, agent) => {
const { confirmed } = await agent.requestUserInteraction({
prompt: 'Confirm purchase?',
type: 'confirmation',
});
if (!confirmed) return 'Cancelled';
await processOrder(cartId);
return 'Order placed';
},
});响应助手
import { textContent, jsonContent, errorContent } from 'webmcp-kit';
// String responses are auto-wrapped, but you can be explicit:
return textContent('Done');
return jsonContent({ status: 'ok' });
return errorContent('Something went wrong');开发面板
没有真实代理的测试工具：
import { enableDevMode } from 'webmcp-kit/devtools';
enableDevMode();这将注入一个面板，其中列出了您的工具，从模式生成输入表单，并允许您执行它们。
API
defineTool(options)
const tool = defineTool({
name: string,
description: string,
inputSchema: ZodSchema,
execute: (input, agent) => Promise,
annotations?: ToolAnnotations,
});
tool.register(); // Add to navigator.modelContext
tool.unregister(); // Remove from navigator.modelContext
tool.execute(input); // Call directly (for testing)enableDevMode()
import { enableDevMode } from 'webmcp-kit/devtools';
enableDevMode();运作原理
defineTool() 创建工具对象。当你打电话的时候 .register():
- 它检查是否
navigator.modelContext存在 - 如果是，则向本机API注册
- 如果不是，则向内部模拟注册（这样开发面板仍然可以工作）
你的代码不会根据环境而改变。当浏览器提供WebMCP支持时，相同的代码将使用真正的API。
例子
examples/pizza-shop：使用多种工具的披萨订购流程(getMenu,addToCart,checkout).examples/flight-booking：多步骤航班购买流程(searchFlights,selectFlight,addTraveler,addExtras,purchaseFlight).
这两个示例都包括使用本机WebMCP和模拟模式进行测试的设置说明。
支持
如果你觉得webmcp工具包有用：
- 标记回购：它帮助其他人发现项目
- 报告问题：发现错误或有功能请求？ 打开一个问题
许可证
麻省理工学院