Shopify Ucp Demo MCP

Shopify UCP演示——远程MCP服务器

远程MCP服务器，允许任何AI代理（Claude、ChatGPT等）搜索Shopify的全球产品目录，并使用 通用商业协议（UCP）.

它做什么

建筑

User's AI (Claude / ChatGPT / etc.)
    ↓  Remote MCP  (Streamable HTTP POST /mcp)
This Server  (Node.js on Render)
    ├──→  Shopify Catalog MCP  (https://discover.shopifyapps.com/global/mcp)
    └──→  Shopify Checkout MCP (https://{shop}/api/ucp/mcp)

有关显示AI代理、演示MCP服务器和Shopify API之间完整交互流的详细序列图，请参阅 docs/序列图.md.

有关提高搜索质量、评级和结账处理的实施提示，请参阅 docs/tips.md.

设置

1.获取Shopify API证书

1. 首选 Shopify开发仪表板
2. 导航至 目录 → 获取API密钥
3. 创建密钥并复制您的 客户端ID 和 客户端密钥

2.配置环境变量

cp .env.example .env
# Edit .env with your credentials

3.在本地运行

pnpm install
pnpm run dev

MCP端点位于 http://localhost:3000/mcp.

4.部署以渲染

1. 推送到GitHub（通过Render触发自动部署）
2. 设置 构建命令 在“渲染”仪表板中：

   pnpm install --prod=false && pnpm run build

1. 集 开始命令 致：

   node dist/index.js

1. 在Render仪表板中设置环境变量：

- SHOPIFY_CLIENT_ID - SHOPIFY_CLIENT_SECRET - UCP_AGENT_PROFILE （您的渲染URL） - SHOPIFY_CATALOG_ID *（可选）* --已从开发人员仪表板中保存目录段

将您的AI连接到此MCP服务器

将以下内容添加到AI的MCP配置中：

{
  "mcpServers": {
    "shopify-ucp": {
      "url": "https://your-app-name.onrender.com/mcp",
      "transport": "streamable-http"
    }
  }
}

适用于克劳德桌面(claude_desktop_config.json):

{
  "mcpServers": {
    "shopify-ucp": {
      "url": "https://your-app-name.onrender.com/mcp"
    }
  }
}

对于Claude Code（CLI）：

claude mcp add shopify-ucp --transport http https://your-app-name.onrender.com/mcp

演示

请参阅 维基 对于使用提示的视频演练：

美国制造的牛仔裤在东京有售。

示例对话

用户： 给我找一件东京有售的春季大衣。 人工智能： *（检测“东京”→ ships_to: "JP"，呼叫 search_products)* 这是开往日本的5辆皮卡。.. 用户： 告诉我更多关于第一个。 人工智能： *（电话 get_product_details 随着 ships_to: "JP")* 可选尺寸：S/M/L/XL。结账：\[url\] 用户： 我要M号的。 人工智能： *（电话 create_checkout 带有变体ID）* 结账开始了。你的收货地址是什么？ 用户： 〒100-0001东京都千代田区... 人工智能： *（电话 update_checkout 带地址）* 准备完成。请继续付款：\[continue_url\]

更多示例提示

位置处理

AI代理会自动从用户的查询中提取发货国家：

如果无法推断位置，AI会问： *“你在哪个国家购物？”* 在搜索之前。

结账流程

结账遵循UCP定义的状态驱动工作流：

create_checkout
    ↓
status: incomplete → update_checkout (add missing info)
    ↓
status: requires_escalation → show continue_url to buyer (payment UI)
    ↓
status: ready_for_complete → complete_checkout
    ↓
status: completed ✓

发展

pnpm install          # install dependencies
pnpm run dev          # start with hot-reload (tsx watch)
pnpm run build        # compile TypeScript → dist/
pnpm run typecheck    # type-check without emitting

参考文献

• Shopify代理商务文档
• 通用商业协议
• 目录MCP参考
• 查看MCP参考
• MCP规范