Shopify 和 Vercel 正在合作,为人类和 AI 共同构建电子商务商店。
在 10 月 15 日于旧金山举行的 Vercel Ship 26 大会上,Shopify CEO Tobi Lütke 和 Vercel CEO Guillermo Rauch 讨论了代理式电子商务的未来。此次合作包括 Shopify 重新构建的 Hydrogen 软件开发工具包(SDK),以及 Vercel 推出的名为 Vercel Shop 的 AI 驱动开源店面模板。
Hydrogen 为开发者提供了用于跨 JavaScript 框架构建 Shopify 店面的可重用工具。Vercel Shop 将这些工具整合到一个可定制的商店中,包含可供代理读取的产品信息和购物工具。
Vercel Shop 还包含一个可选的购物助手。因此,外部代理可以代表人类进行购物,而商店自带的助手则可以帮助人类访客寻找商品并管理购物车。
Vercel Shop 模板为人类购物者生成典型的电子商务店面,同时仍在 URL 参数中暗示结构化的产品信息。
合作背景
10 月的公告是电商平台与应用开发提供商之间合作的最新案例。此前在 6 月 30 日 Hydrogen 重建后,已允许开发者在各种 JavaScript 框架和运行时中使用 Shopify 的店面工具。
为此,重构后的 Hydrogen SDK 将常见的电商功能组织为共享工具。开发者可以复用这些功能,同时自主选择如何构建购物体验。
自定义商店前端
自定义电商商店前端需要大量的集成工作。开发者必须将购物体验与支持购买功能的系统连接起来:产品页面需要目录数据,购物车需要实时价格和库存信息,结账页面必须获取顾客选中的商品。
重构后的 Hydrogen SDK 和 Vercel Shop 模板以三种相关方式解决了上述工作:
- 电商集成:Hydrogen 提供对 Shopify 数据的访问权限,用于管理购物车、连接客户账户以及处理结账路由。
- 框架选择:重构后的 SDK 将 JavaScript 框架和运行时的选择权留给开发者。
- 一个可用的基础:Vercel Shop 将 Hydrogen 与 Next.js 商店前端模板相结合,为开发者提供产品页面、搜索、购物车和智能体功能,使其无需从零开始即可进行定制。
Lütke 解释了采取这种方案的原因,他表示:“结账流程极其难以做到完美。这是那种真正需要二十年不断调试的软件模块之一。Shopify 一直非常开放,因此我们邀请人们像你们希望的那样,从我们的结账系统中提取部分代码进行重组。基本上就是利用 Shopify 构建的所有基础设施,你可以用它构建任何你想要的东西。”
因此,Shopify 的软件使开发者能够专注于顾客如何发现商品以及与商店互动的方式,在共享的电商工具基础上,并根据需要扩展模板。
该基础还支持多种购物体验。用户可以浏览商店前端或向助手寻求帮助,而兼容的外部智能体则可以访问商家域名上的产品信息和购物工具。
外部智能体
代表消费者进行购物的 AI 代理需要寻找产品、检查选项,并最终构建购物车。Vercel Shop 支持这些任务,无需代理导航视觉店面。
- 发现:结构化数据、站点地图以及 LLMs.txt 指导购物代理,帮助 AI 找到并理解商店的内容。
- 产品信息:店面页面可以向代理返回 Markdown,同时向人类显示视觉页面。Markdown 包括描述、价格、选项和产品级别的可用性。
- 购物:通用商务协议(Universal Commerce Protocol)提供目录搜索、特定变体的实时库存、购物车操作和结账链接。Vercel Shop 通过模型上下文协议(Model Context Protocol)将这些工具在商家的域名上开放使用。
想象一个代理正在寻找特定尺寸的黑色夹克。该代理无需解析 HTML 或截取屏幕截图来查找信息。相反,产品信息以 AI 易于理解的方式呈现。
商店助理
Vercel Shop 的第二个代理体验已内置于商店本身。可选的 AI 驱动购物助手——类似于 Walmart 的 Sparky 或 Amazon 的 Alexa for Shopping——帮助购物者通过聊天查找商品、浏览产品变体、询问商店政策以及管理购物车。
该助手使用与视觉店面相同的 Shopify 购物车。购物者在浏览时可以添加一件夹克,然后要求助手更改其尺寸或寻找匹配的帽子。无论变更来自人类操作还是 AI 代理,购物车都会反映这些变化。
Shopify 确认价格、库存状态及允许的购物车变更。助手无法下单或处理支付,因此购物者需通过熟悉的结账流程完成购买。
助手默认处于禁用状态。开发人员必须启用它并配置对 Vercel AI Gateway 的访问权限。他们可以自定义其提供的指导内容以及产品展示方式。
Vercel 自己的商品商店是该模板及其购物助手的实际工作示例。

