摘要： Vercel 與 Shopify 在 2026 年 10 月 16 日宣布，開源 Next.js 店面範本 Vercel Shop 正式 GA。它讓同一個產品頁面同時服務人類購物者、搜尋引擎與 AI agent，並透過 Shopify 共同開發的 Universal Commerce Protocol 讓 agent 能直接搜尋目錄、建購物車、取得結帳連結。對做電商的團隊來說，agent 流量從「順便處理」變成可以明確設計的一等公民。
為什麼 agent 需要自己的店面體驗
Agent 早就在網路上購物了，但它們多半是在為人類設計的頁面上硬讀版面。Vercel 的論點很直接：與其讓 agent 猜測頁面結構，不如把產品資訊做成機器可讀的內容。Vercel Shop 的同一個產品 URL 會對人類回傳視覺化頁面，對 agent 則回傳價格、庫存與規格等可直接解析的資訊；頁面內也嵌入結構化資料與 sitemap，幫助搜尋與 answer engine 理解商品。
工具層面，Shopify 與其他夥伴共同開發了 Universal Commerce Protocol（UCP），讓 agent 以標準方式搜尋目錄、閱讀商品細節、確認庫存、建購物車並取得結帳連結。Vercel Shop 把這些能力放在商家自己的網域下，agent 可以用 MCP 搜尋商品、建購物車，不需要真的「逛」網站。這和先前 Cloudflare 與 OpenAI 的搜尋試點是同一股趨勢：讓 agent 能在商家掌控的環境中取得結構化資訊，而不是靠爬蟲自行解讀。
店面與購物助理共用同一份程式碼
Vercel Shop 底層建在 Shopify 的 Hydrogen SDK 上，涵蓋商品目錄、購物車與訂單管理、付款與結帳。今年稍早兩家公司宣布將 Hydrogen 重建為跨 JavaScript framework 通用，重建後的 SDK 現在也已 GA。Shopify CEO Tobi Lütke 在發布中提到，結帳是極難做對的軟體，需要二十年以上的打磨，而 Shopify 邀請開發者自由取用其結帳基礎設施來組裝自己的體驗。
範本還內建一個由 eve 驅動的購物助理，與店面共用同一個程式碼庫。這個設計有個務實的細節：購物者可以自己瀏覽商品頁，也可以請助理找商品、加入購物車，兩邊共用同一個購物車，切換體驗時不會弄丟已加入的商品。對團隊來說，自訂店面設計和自訂助理行為是在同一處完成，不必維護兩套系統。
範本中也包含 Skills，引導 coding agent 完成設定、客製化與範本更新——也就是說，你大概率會用另一個 agent 來打造這個服務 agent 的店面。
實際成效與怎麼開始
Vercel 自己的周邊商品店 vercel.store 已用 Vercel Shop 上線，店內的購物助理可以幫顧客找商品、加入購物車並前往結帳。已採用 Shopify、Next.js 與 Vercel 組合的品牌包括 AG1、Bombas 與 PAIGE；其中 PAIGE 在重建電商平台後，黑五到網一期間營收成長 22%、轉換率成長 76%，且零停機。
想試的話，一行指令就能建立店面：
pnpm create next-app@latest my-store --example https://github.com/vercel/shop然後接上你的 Shopify store 並依文件設定即可。
一個值得留意的限制：agent 購物的標準仍在成形，UCP 與 MCP 的生態採用度會決定這套「agent 一等公民」設計能吃到多少真實流量。如果你手上已有 Shopify 店面，把 Vercel Shop 跑起來、觀察 agent 帶來的流量與轉換，會比等標準塵埃落定更實際。
參考來源
在 X 上查看原貼文