Storefront MCP Chat Agent

为您的店面构建AI代理

Shopify模板应用程序，可让您在店面上嵌入AI驱动的聊天小部件。购物者可以搜索产品、询问政策或运输，并完成购买——所有这些都不需要离开对话。在引擎盖下，它说话 模型上下文协议 （MCP）利用Shopify的API。

概述

• 这是什么：聊天小部件+后端，将任何店面变成人工智能购物助手。
• 主要特点:

- 自然语言产品发现 - 店铺政策与常见问题解答查询 - 创建购物车、添加或删除商品以及启动结账 - 跟踪订单并启动退货

开发人员文档

• 从安装到深潜，一切都存在https://shopify.dev/docs/apps/build/storefront-mcp.
• 克隆此仓库并按照开发文档上的说明进行操作。

例子

• hi >将返回基于LLM的响应。请注意，您可以使用自己的提示自定义LLM调用。
• can you search for snowboards >将使用 search_shop_catalog MCP工具。
• add The Videographer Snowboard to my cart >将使用 update_cart MCP工具并提供结账URL。
• update my cart to make that 2 items please >将使用 update_cart MCP工具。
• can you tell me what is in my cart >将使用 get_cart MCP工具。
• what languages is your store available in? >将使用 search_shop_policies_and_faqs MCP工具。
• I'd like to checkout >将从上述MCP购物车工具之一调用结账。
• Show me my recent orders >将使用 get_most_recent_order_status MCP工具。
• Can you give me more details about order Id 1 >将使用 get_order_status MCP工具。

建筑

组件

此应用程序由两个主要组件组成：

1. 后端：一个React Router应用服务器，处理与Claude的通信，处理聊天消息，并充当MCP客户端。
2. 聊天界面：Shopify主题扩展，提供面向客户的聊天界面。

当您启动应用程序时，它将：

• 在开发模式下启动React Router。
• 通过隧道连接您的本地服务器，以便Shopify可以访问它。
• 提供一个预览URL，以便在您的开发商店上安装应用程序。

对于直接测试，请将您的测试套件指向 /chat 端点（流式传输的GET或POST）。

MCP工具集成

• 后端已初始化所有Shopify MCP工具——请参阅 app/mcp-client.js.
• 这些工具允许您的LLM调用产品搜索、购物车操作、订单查找等。
• 更多在我们的 开发文档.

技术栈

• 框架: React Router
• 人工智能: 克劳德Anthropic
• Shopify集成: @shopify/shopify应用程序反应路由器
• 数据库：SQLite（通过Prisma）用于会话存储

定制

这个仓库可以定制。你可以：

• 编辑提示
• 更改聊天小部件UI
• 更换LLM

您可以从我们的 开发文档.

部署

遵循标准Shopify应用程序部署程序，如 Shopify文档.

贡献

我们感谢您有兴趣为这个项目做出贡献。由于这是一个用于教育和参考目的的示例存储库，我们不接受贡献。