WebMCP让浏览器代理直接操作电商

是什么 vincanger/webmcp-espresso-store 是一个用 TypeScript 与 Wasp 0.25 构建的 WebMCP 咖啡器具商店示例。它把商品查询和操作暴露给连接浏览器标签页的 AI 代理；上层推文将其置于 Claude Cowork 内置浏览器的背景中。

架构与核心设计 兼容性规则集中在 src/shared/compatibility.ts，是纯逻辑并有单元测试；src/webmcp/WebMCPTools.tsx 注册工具。代理可先比较咖啡机、读取历史装备，再检查尺寸与配件兼容性，用 highlight_differences 将推荐依据高亮到规格表，随后选择颜色、匹配滤芯、加购并应用优惠券。Wasp 自动查询失效机制负责让页面随状态变化实时更新。

值得借鉴的亮点 它把“网页可读”推进为“网页提供结构化、可执行能力”，让代理的判断链条落在明确工具和可见 UI 反馈上。演示还把加购与结算拆开：Prompt 2 明确不得 checkout，Prompt 3 才执行下单，体现高影响动作的分层。

坑与边界 这是演示仓库，不应直接视为生产商城。运行依赖 Node ≥24、Docker、Wasp CLI，以及 Chrome 149+ 的实验性 WebMCP、远程调试和权限配置；README 还存在工具数“16/17”的说明差异。价格是 2026 年 8 月含税近似价，图片仅作演示用途。