AI导哈

代理式商业MCP演示

一个展示代理式商业用户体验的MCP服务器，提供餐厅查找、菜单查看、模拟订单和收据生成的交互式HTML界面。

  • by aharvard
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 aharvard/mcp_agentic-commerce

使用说明

代理商务MCP演示（Goose+MCP UI）

一个小型模型上下文协议（MCP）服务器，使用内部的MCP UI块展示代理商务用户体验 鹅。它返回丰富的交互式HTML UI，用于简单的“查找餐厅”→ 视图菜单→ 假订单→ “收据”流程。

重要提示：

  • 仅演示。没有真正的卖家、数据、付款或资金流动。一切都是合成的或嘲笑的。
  • 不是生产代码。这是为了演示MCP UI如何推动点击优先的代理体验。

特性

  • 具有多种工具的流式HTTP MCP服务器：
    • find_restaurants –按城市/州搜索附近的合成餐厅并查询
    • view_restaurant –餐厅详细信息卡
    • view_menu –带有图像和定价的菜单（如果检测到“方形”，则模拟目录；否则为通用菜单回退）
    • order_takeout –交互式订单页面（编辑数量，删除项目）
    • view_receipt –俏皮的假收据
  • 单击第一个MCP UI：UI根据用户操作将工具调用分派回代理。
  • 开发HTML预览以进行本地测试http://127.0.0.1:8000/dev
  • 您可以通过脚本重新生成大型合成数据集

这不是什么

  • 没有Square API电话直播，没有资金流动，没有真正的卖家或PII
  • 无持久存储；无授权；无生产硬化

回购布局

  • src/server.ts –带有渲染UI工具的MCP服务器
  • src/ui/* –HTML shell、样式和视图构建器
  • src/lib/restaurants.ts –本地搜索合成卖家+通过OpenStreetMap提名进行地理编码
  • src/lib/square.ts –用于“方形检测”和样品目录的小型模拟
  • src/data/* –为餐厅和类别菜单生成JSON
  • src/scripts/* –上述数据的生成器
  • scenarios.md –对话流程和用户体验笔记示例

先决条件

  • Node.js 20+
  • pnpm（与Node捆绑在一起）或ppnpm/yarn

设置

  1. 安装依赖项
pnpm install
  1. 生成演示数据（可选；存储库包括预构建的JSON）
# Regenerate synthetic restaurants (5MB+ file)
# You can control density:
#   GEN_MIN_PER_CATEGORY=3 GEN_MAX_PER_CATEGORY=5 pnpm run generate:data
pnpm run generate:data

# Regenerate generic menus by category
pnpm run generate:menus
  1. 运行MCP服务器（dev）
# Starts an HTTP (streamable) MCP server on 127.0.0.1:8000/mcp
pnpm run dev
# or
pnpm run dev:mcp

您可以设置的环境变量：

  • MCP_HOST（默认值：127.0.0.1）
  • MCP_PORT（默认值：8000）
  • MCP_GEOCODE_USERAGENT（默认值：“MCP代理商务/1.0(+https://squareup.com)")
  1. 在浏览器中尝试本地UI预览
  • http://127.0.0.1:8000/dev
  • 例子：http://127.0.0.1:8000/dev/restaurants?city=Austin&state=TX&query=bbq

与鹅一起使用

该项目旨在作为Goose的MCP扩展。

选项A——在Goose设置中手动添加：

  • 打开Goose桌面→ 设置→ 扩展→ 添加MCP服务器
  • 类型：HTTP（可流式传输）
  • 网址：http://127.0.0.1:8000/mcp
  • 名称：代理商务MCP演示
  • 保存。开始一个新的聊天，问一些类似的问题：
    • “在奥斯汀附近找咖啡”
    • “多伦多附近的披萨秀”
    • “在山姆的指导下，9:15从Midtown Bean点两杯拿铁。”

选项B——使用MCP检查器（便于测试工具和UI）：

# Runs the Inspector against this server
pnpm run dev:inspector
# Then open the printed Inspector URL; try executing tools directly

提示：如果您的模型/代理支持MCP UI，它将内联呈现HTML卡、菜单和收据，并在点击按钮时调用调度工具。

工具参考

  • find_restaurants
    • args：城市（字符串，默认“Austin”）、州（可选）、查询（可选）和限制（1..25，默认10）
    • 返回：附近卖家的UI列表；“详细信息”和“立即订购”按钮
  • view_restaurant
    • args：business_id（字符串）
    • 返回：带有地址、时间、电话、网站的UI卡；CTA按钮
  • view_menu
    • args：business_id（字符串）
    • 行为：如果检测到模拟“Square”->使用模拟目录；其他按主要类别分类的通用菜单
  • order_takeout
    • args：business_id（字符串），项目（{名称、数量、价格}数组）
    • return：带有总计和“下订单”按钮的交互式订单表
  • view_receipt
    • args：business_id（字符串），items（与上述相同）
    • return：好玩的演示收据UI

数据注释

  • 餐厅是合成的，基于美国/加利福尼亚州许多城市的种子发电机。您可以通过生成器脚本上的env变量重新生成或降低数据集密度。
  • 菜单图像从Unsplash热链接，仅用于本演示中的说明目的。

安全和免责声明

  • 仅供演示；不要将任何信息视为事实。
  • 没有资金流动。“下订单”流程仅呈现确认UI。

部署

部署到Netlify

此项目配置为在Netlify上部署为无服务器功能：

  1. 连接到Netlify:

    • 首选 Netlify
    • 点击“添加新网站”→ “导入现有项目”
    • 连接您的GitHub存储库

  2. 生成设置 （从netlify.toml自动检测到）：

    • 构建命令： pnpm run build
    • 发布目录： dist

  3. 部署:

    • Netlify将自动部署到主推送
    • 您的MCP服务器将在以下网址提供： https://your-site-name.netlify.app/mcp
    • 开发人员预览版可在以下网址获得： https://your-site-name.netlify.app/dev

  4. 与鹅一起使用（生产）:

    • 部署后，在Goose设置中使用您的Netlify URL
    • 类型：HTTP（可流式传输）
    • 网址： https://your-site-name.netlify.app/mcp

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

相关 MCP