Vercel 與 Shopify 在 10 月 16 日推出開源的 Next.js 電商範本 Vercel Shop：商品頁可以輸出機器可讀的價格、庫存與規格，透過 UCP 與 MCP 讓 AI 代理直接搜尋商品、建立購物車，再交給 Shopify 結帳；同場重建的 Hydrogen SDK 也正式成為跨框架函式庫。給品牌電商與工作室的「代理商務」入門筆記。
想像你的網路商店來了一位新客人。他不看主視覺、不滑輪播圖、對限時倒數完全無感，進門第一句話是：「請給我 M 號、黑色、有現貨、三千元以內的外套，直接放進購物車。」說完就等你回答。
這位客人不是奧客，是 AI 購物代理。而 Vercel 和 Shopify 認為，是時候正式把它當成「一級顧客」來招待了。
發生了什麼事？
2026 年 10 月 16 日，Vercel 在官方部落格發表〈Vercel and Shopify make agents first-class shoppers〉（作者 Boris Besemer、Dan Laugharn、Kevin Sundstrom），宣布 Vercel Shop 正式推出（GA）。它是一個為 Shopify 打造的開源 Next.js 電商範本，目標是讓店面同時對「人、搜尋引擎、AI 代理」都友善。
文章點出一個很實際的問題：代理其實早就在網路上購物了，但它們用的多半是「原本為人類和搜尋引擎設計」的頁面和工具。就像請一位只會讀表格的會計去看雜誌排版，看得懂，但很累，也容易看錯。
Vercel Shop 裝了哪些東西？
根據官方文章，重點有四塊：
- 機器可讀的商品頁：價格、庫存、規格選項都能以機器可讀的形式提供。同一個商品網址，對人顯示漂亮的頁面，對代理則提供不需要解讀版面就能讀的商品資訊。範本也內建嵌在頁面裡的結構化資料與 sitemap，幫助搜尋引擎與答案引擎理解商品。
- 給代理用的購物工具：Shopify 共同制定的 Universal Commerce Protocol（UCP），讓代理用標準方式搜尋目錄、讀取商品細節、確認庫存、建立購物車、取得結帳連結。Vercel Shop 讓這些能力可以在商家自己的網域被發現，代理透過 MCP 就能搜尋商品和建立購物車，不必一頁一頁「點」網站。
- 內建購物助理：由 eve 驅動的購物助理和 Next.js 店面住在同一個程式碼庫，顧客可以自己逛，也可以請助理找商品、放進購物車；兩邊共用同一個購物車，切換體驗時東西不會不見。
- 給 coding agent 的 Skills：範本附帶 Skills，引導程式代理完成安裝、客製化與範本更新。
Shopify 執行長 Tobi Lütke 在文中說得很直白：結帳流程「難到離譜」，是那種真的需要二十年慢慢打磨的軟體，而 Shopify 歡迎大家盡量拿它的結帳元件去組合。翻成白話：前台讓你自由發揮，最難的金流結帳交給 Shopify。
背後的大功臣：重建的 Hydrogen
Vercel Shop 建立在 Shopify 的 Hydrogen SDK 上。Shopify 在 10 月 14 日的開發者更新中宣布 Hydrogen 2026-10 正式推出，最大的改變是：它不再是一個綁定 React Router 的框架，而是可以加進任何 JavaScript 框架的函式庫。
Hydrogen 負責那些「看起來簡單、其實很難」的商務細節：購物車、商品款式、依買家國家顯示的幣別價格、尊重同意設定的分析、Shop Pay 與會員登入。它附帶 20 個教 coding agent 使用的 Skills；在支援 WebMCP 的瀏覽器裡，代理可以搜尋目錄、更新購物車，經買家確認後由 Shopify Checkout 送出訂單。
Shopify 也提到，Hydrogen 和 Liquid 佈景主題使用同一套標準的店面動作，所以 App、店面 UI 和代理可以共用同一份購物車契約，例如呼叫 window.Shopify.actions.updateCart() 加入商品。既有的 Hydrogen 店面照常運作，不需要立刻遷移。
一位代理的購物流程長什麼樣？
把官方文件拼起來，一次代理購物大概是這樣（以下為示意流程）：
- 顧客對 AI 助理說：「幫我找黑色 M 號外套，三千元以內。」
- 代理到商家網域讀取 UCP 商務設定檔，了解這家店支援哪些能力，例如目錄搜尋、購物車、折扣、結帳。Shopify 文件說明，雙方會取能力的交集，由商家端決定這次對話啟用哪些功能。
- 代理透過 MCP 工具搜尋目錄、讀取商品細節、確認庫存。
- 代理建立購物車，取得結帳連結。
- 顧客確認金額與收件資訊，交給 Shopify 結帳完成訂單。
整個過程中，代理不需要「看」網頁截圖、猜按鈕在哪裡，失誤的機會自然少很多。對商家來說，也比讓代理模擬點擊網站來得可預測、好追蹤。
為什麼這對你的生意重要？
第一，「被代理讀懂」會變成新的 SEO。 過去我們優化網站，是讓人看得舒服、讓 Google 讀得懂；現在還要讓 AI 代理能準確拿到價格、庫存與規格。資料不清楚，代理可能直接跳過你，去找資料寫得比較清楚的對手。
第二，結帳權仍在商家手上。 UCP 的設計是讓代理在商家的網域上取得購物車與結帳連結，並在支援的流程中經買家確認才送單。對品牌來說，訂單、會員和顧客關係不會被平台整碗端走。
第三，人和代理共用一套系統。 同一個網址、同一個購物車，不需要為代理另外蓋一座店，維護成本比較可控。
Vercel 也舉了既有案例：時尚品牌 PAIGE 用 Shopify、Next.js 與 Vercel 重新架構電商平台後，在黑色星期五到網路星期一期間營收成長 22%、轉換率成長 76%，而且沒有停機。這是重構後的成果，不是代理功能帶來的，但說明這套技術組合撐得住大檔期。
給台灣品牌與工作室的實務建議
台灣不少品牌用的是其他開店平台，未必是 Shopify。但「代理商務」的基本功其實和平台無關：
- 把商品資料整理乾淨：價格、庫存、尺寸、顏色、材質、運送時間，用一致的欄位維護，不要藏在圖片或長篇文案裡。
- 補齊結構化資料：在商品頁加上 Product、Offer 等結構化資料，確認 sitemap 涵蓋所有商品頁。這同時對搜尋引擎和 AI 有幫助。
- 讓價格與庫存即時：代理最怕「網頁寫有貨、結帳說缺貨」。庫存同步延遲是代理商務的頭號敵人。
- 設計好人工確認點：任何代理代為下單的流程，都要保留買家最後確認，金額、收件資訊與退換貨條款要清楚呈現。
- 小步試水溫：已經用 Shopify 的品牌，可以先用
pnpm create next-app@latest my-store --example https://github.com/vercel/shop建一個測試店面，觀察代理實際怎麼使用；使用其他平台的團隊，可以先從結構化資料與商品 API 開始盤點。 - 追蹤代理流量：在分析工具中區分來自代理或 AI 助理的流量與訂單，才知道這條通路值不值得加碼。
你可能會問
Q：這是不是代表以後不需要漂亮的網站了？
A：剛好相反。Vercel Shop 的設計是同一個網址同時服務人和代理，品牌形象、內容與體驗仍然決定人類顧客會不會買單。
Q：UCP 是什麼？跟 MCP 有什麼關係？
A：UCP 是 Shopify 共同制定的商務協定，定義代理如何搜尋商品、建立購物車與結帳；MCP 是代理呼叫外部工具的通用介面。Vercel Shop 讓代理透過 MCP 使用這些 UCP 能力。Shopify 文件也說明，商家的 UCP 商務設定檔通常放在網域的 /.well-known/ucp。
Q：我們用 Vue 或其他框架，也能用 Hydrogen 嗎？
A：Shopify 表示新版 Hydrogen 可搭配任何 JavaScript 框架，Vue 有對應的 composable；官方現成的入門範本則是 React Router 與 Next.js。
結語
電商的顧客名單上，正式多了一種不睡覺、不看廣告、只看資料的客人。Vercel Shop 的意義，不只是又一個 Next.js 範本，而是把「讓代理讀懂你的店」從實驗變成可以直接上線的預設值。
好消息是，準備工作大多是你本來就該做的事：資料清楚、庫存準確、結帳順暢。把這些顧好，不管進門的是人還是 AI，你都接得住。
來源：Vercel and Shopify make agents first-class shoppers（Boris Besemer、Dan Laugharn、Kevin Sundstrom，Vercel Blog，2026/10/16）。
延伸參考：Hydrogen 2026-10 is now available（Shopify Developer Changelog，2026/10/14）；Agent profiles and UCP negotiation（Shopify 開發者文件）。