Vercel Shop发布：让AI Agent成为一等购物者

当AI Agent开始在电商网站上购物时，它们面对的是为人类视觉和搜索引擎爬虫设计的页面。Vercel和Shopify认为，这种"将就"的方式该结束了。

从"能用"到"一等公民"

Vercel Shop——一个基于Next.js、面向Shopify的开源店面模板——已正式全面可用。它的核心理念并不复杂：让Agent像人类一样顺畅地浏览商品、获取信息、完成购买，而不是靠解析HTML结构去"猜"页面内容。

在此之前的Agent购物体验，本质上是一种逆向工程。Agent需要渲染页面、理解布局、提取文本，然后祈祷这些解析结果没有因为页面改版而失效。Vercel Shop的做法直接跳过了这层妥协：同一商品URL，对人类返回可视化页面，对Agent则返回机器可读的结构化内容——价格、库存状态、可选规格，一应俱全，无需解析页面布局。

这背后是Shopify的Hydrogen SDK。今年早些时候，Vercel和Shopify宣布重建Hydrogen以支持跨JavaScript框架运行，如今这个重建版本也已全面可用。它让开发团队可以接入店铺的商品目录、购物车与订单管理、支付和结账能力，构建自定义店面。

Hydrogen 是 Shopify 官方推出的电商前端开发框架，最初专为 Remix 打造。2024 年，Shopify 与 Vercel 合作对其进行了重建，使其能够跨 React、Next.js、Remix 等多个 JavaScript 框架运行。Hydrogen 提供了预置的组件、Hooks 和工具函数，开发者可以直接接入 Shopify 的商品目录、购物车、订单、支付和结账等后端能力，而无需从零构建电商基础设施。它本质上是 Shopify Storefront API 的一层开发者友好封装，让团队可以专注于店面体验的设计，而非底层数据管道的搭建。Vercel Shop 正是构建在重建后的 Hydrogen SDK 之上的模板，因此天然继承了这套能力。

UCP协议与MCP：Agent购物的标准化路径

Shopify联合开发的Universal Commerce Protocol（UCP）为Agent提供了一套标准化的操作方式：搜索商品目录、读取商品详情、检查库存、构建购物车、获取结账链接。Vercel Shop让这些能力直接暴露在商家自己的域名下，Agent可以通过MCP在无需浏览网站的情况下完成搜索和加购。

这一步的意义超出了单个模板的范畴。如果说MCP正在成为Agent与外部工具交互的通用接口，那么UCP在电商场景中的角色就是让"购物"这个动作本身变得可编程。商家不需要为每个AI平台单独适配，Agent也不需要为每个电商网站写一套爬虫逻辑。

Shopify CEO Tobi Lütke在谈到结账系统时说得很直白："结账是极其难以做对的事情。它是那种真正需要20年打磨的软件。"他的态度是开放的——Shopify邀请开发者从它的结账系统中自由取用组件，"基本上就是把Shopify构建的所有基础设施拿来，你可以用它搭建任何你想要的东西。"

MCP（Model Context Protocol） 是由 Anthropic 提出并已获得广泛采用的开放协议，旨在标准化 AI 模型与外部工具、数据源之间的交互方式。在电商场景中，MCP 让 Agent 能够以结构化、可发现的方式调用商家暴露的工具接口，而不必依赖脆弱的页面抓取。Agent 通过 MCP 服务器获取可用的工具列表及其参数定义，然后直接调用搜索、加购、结账等操作。这意味着商家只需实现一次 MCP 接口，就能被所有支持该协议的 AI 平台调用，无需为每个平台单独适配。MCP 与 UCP 的关系在于：UCP 定义了电商领域的操作语义（搜索、库存、购物车等），MCP 则提供了这些操作被 Agent 发现和调用的传输层标准。

购物助手与店面共存于同一代码库

Vercel Shop把商品目录、购物车、结账与Next.js店面整合在一起，同时内置了由eve驱动的购物助手。店面界面和助手共享同一个代码库，这意味着团队可以同时定制店铺设计和助手的交互方式。

模板中包含的Skills可以引导编程Agent完成安装、定制和模板更新。购物者可以在商品页面浏览，也可以让助手帮他们找商品并加入购物车——两种体验共享同一个购物车，用户在切换时不会丢失已添加的商品。

Vercel CEO Guillermo Rauch的评价保持了他一贯的直接风格："你可以用Vercel Shop构建高度定制、设计精良、Agent就绪的体验。它运行在Next.js上，构建在Shopify之上，而且快得离谱。"

eve 是 Vercel 推出的 AI Agent 开发框架，专注于构建可部署、可编排的智能助手。在 Vercel Shop 中，eve 驱动的购物助手能够理解自然语言请求，调用底层的商品搜索和购物车接口，并以对话形式返回结果。由于助手与店面共享同一代码库和同一购物车状态，用户从手动浏览切换到助手交互时，已添加的商品不会丢失。这种架构的关键优势在于一致性：店铺的定制化设计（主题、布局、品牌元素）与助手的交互逻辑可以同步迭代，避免了传统方案中"前端一套、AI 助手另一套"的割裂问题。对于开发团队而言，这意味着维护成本的显著降低和体验一致性的提升。

已经上路的品牌案例

Vercel同步上线了自己的周边商店vercel.store，销售限量版商品，本身就是Vercel Shop的一个展示窗口。

更值得关注的是已有品牌的实践数据。AG1、Bombas和PAIGE等品牌已经在使用Shopify、Next.js和Vercel的组合来驱动店面。PAIGE在重新架构其电商平台后，黑色星期五和网络星期一期间实现了22%的收入增长和76%的转化率提升，且没有出现宕机。

这些数据说明，Agent就绪的店面架构并不只是一个面向未来的概念——它在当下的购物旺季中已经产生了可衡量的商业回报。

如何开始

开发者可以通过以下命令快速创建一个Vercel Shop店面：

pnpm create next-app@latest my-store --example https://github.com/vercel/shop

Vercel Shop已开源，文档提供了连接Shopify店铺和配置店面的完整指引。对于正在考虑如何让自己的电商业务对AI Agent友好的团队来说，这是一个值得认真评估的起点。