Shopify Dev MCP Server 是 Shopify 官方推出的 Model Context Protocol 伺服器,讓 AI 助手能直接存取 Shopify 開發文件、GraphQL API schema 和 Shopify Functions 範本,從自然語言產出可驗證的程式碼。Shopify 在 2025 年 Summer Edition 首次發布這個工具,Winter '26 Edition 進一步擴展到覆蓋整個平台——包含 Admin API、Liquid、Hydrogen、POS UI Extensions 和 Storefront API 共 9 組 API。Shopify 產品副總裁 Eytan Seidman 在 Winter '26 發表時說得直白:「我們把整個基礎建設重新接線,改為 AI-first 架構,消除從想法到可運行程式碼之間的延遲。」
這篇文章拆解 Shopify Dev MCP Server 的技術架構、支援的工具鏈、實際設定步驟,以及它跟 Storefront MCP、社群 MCP Server 的差異。後半段整理開發者導入後的實戰效益,並分析 Shopify 在 Agentic Commerce 的技術佈局對電商開發團隊的意義。
MCP 是什麼?為什麼 Shopify 要用它?
Model Context Protocol (MCP) 是 Anthropic 在 2024 年底開源的標準協定,定義了 AI 模型與外部資料來源之間的通訊方式。你可以把它理解成「AI 的 USB-C」:一個統一接口,讓不同的 AI 助手都能透過同一套協議連接到同一個資料源,不用每個都寫客製化的整合邏輯。
MCP 採用 client-server 架構。開發者建立 MCP Server 來暴露特定的資料和能力,AI 應用程式(MCP Client)透過標準化的方式連接到這些 Server。Shopify 是 MCP 最早的企業級採用者之一。從 Summer '25 Edition 開始,每個 Shopify 商店預設就有 /api/mcp 端點,不需要額外設定。
Shopify 為什麼這麼積極擁抱 MCP?因為 2026 年的電商前端正在從「人在瀏覽器上操作」轉向「AI Agent 代替使用者完成購物」。ChatGPT 已經能在對話中直接完成 Shopify 結帳;Perplexity 可以搜尋產品目錄並推薦商品。商店需要讓 AI 能結構化地讀取產品資料、管理購物車、回答政策問題。MCP 就是這個標準化的橋樑。
Shopify MCP 三大 Server 架構
Shopify 的 MCP 生態系裡有三類 Server,各自解決不同的問題:
| 類別 | 主要用途 | 目標使用者 | API 端點 | 驗證需求 |
|---|---|---|---|---|
| Dev MCP Server | 開發者生產力:搜尋文件、驗證 GraphQL、產出程式碼 | 開發者 / AI 工程師 | 本機執行 @shopify/dev-mcp |
不需驗證 |
| Storefront MCP Server | 顧客端購物體驗:產品搜尋、購物車管理、結帳引導 | 終端消費者 / 購物助手 | {shop}.myshopify.com/api/mcp |
不需驗證(公開端點) |
| Customer Accounts MCP Server | 帳號管理:訂單追蹤、退貨處理、帳號資訊查詢 | 終端消費者 | 商店專屬端點 | OAuth 驗證 |
這篇文章聚焦在第一個——Dev MCP Server,它是開發者日常工作中影響最直接的工具。
Dev MCP Server 的七個核心工具
Dev MCP Server 不是一個模糊的「AI 助手」,而是一組具體的工具集。每個工具對應一個明確的開發任務:
1. learn_shopify_api
開發者每次跟 AI 助手討論 Shopify API 時,應該第一個呼叫這個工具。它會從 shopify.dev 即時拉取最新的 API 使用指南,告訴 LLM 目前支援哪些 API、各自怎麼用。這個工具也會產生一個 conversation ID 來追蹤整個對話的工具使用。
2. search_dev_docs(搜尋文件)
跨 shopify.dev 所有文件進行搜尋,適合不確定該看哪頁時用。回傳的是文件片段(chunked content),適合快速掃描多個主題。
3. fetch_full_docs(取得完整文件)
已知文件路徑時用這個。例如 /docs/api/admin-graphql/resources/product,直接拉回完整頁面內容,給 AI 助手足夠的上下文來產出精準的程式碼。
4. introspect_admin_schema(GraphQL Schema 內省)
讓 AI 直接查詢 Shopify Admin GraphQL API 的 schema,包含所有可用的 queries、mutations、types 和 fields。這代表 AI 產出的 GraphQL 操作是基於真實 schema,不是靠訓練資料猜的。
5. validate_theme(完整主題驗證)
對整個 theme 目錄跑 Shopify 的 Theme Check,偵測 Liquid 語法錯誤、遺失的參照和跨檔案問題。這是 LIQUID_VALIDATION_MODE=full(預設)時啟用的工具。
6. validate_theme_codeblocks(單一 Liquid 檔驗證)
驗證 AI 生成的獨立 Liquid 程式碼片段。只適用於不需要 theme 上下文的自包含檔案。需要設定 LIQUID_VALIDATION_MODE=partial。
7. shopify_admin_graphql(專用提示)
專門針對撰寫 Shopify Admin GraphQL 操作的引導性提示工具,幫助 AI 產出語法正確、版本對齊的 GraphQL 程式碼。
支援的 API 範圍
Winter '26 Edition 之後,Dev MCP Server 覆蓋了 Shopify 開發平台的九大 API:
- Admin GraphQL API
- Customer Account API
- Shopify Functions API
- Liquid
- Partner API
- Payment Apps API
- Polaris Web Components
- POS UI Extensions API
- Storefront API
要啟用 Polaris Web Components 文件,需要在設定中加入 POLARIS_UNIFIED: "true" 環境變數。
五分鐘設定指南
Dev MCP Server 在本機執行,不需要驗證。唯一的前置條件是 Node.js 18 以上和一個支援 MCP 的 AI 開發工具。
Cursor 設定
到 Cursor > Settings > Tools and integrations > New MCP server,貼上:
{
"mcpServers": {
"shopify-dev-mcp": {
"command": "npx",
"args": ["-y", "@shopify/dev-mcp@latest"]
}
}
}
Claude Code 設定
在終端機執行:
claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest
Claude Desktop 設定
打開設定檔,在 mcpServers 區段加入同樣的 JSON 設定。
其他支援的工具還包括 Codex CLI(用 TOML 格式)、Gemini CLI 和 VSCode。設定完成後重啟工具即可。
關閉遙測資料
Dev MCP Server 預設會回傳使用資料給 Shopify。如果要關閉,加入環境變數:
"env": { "OPT_OUT_INSTRUMENTATION": "true" }
實際開發效益:開發者怎麼說
Shopify 開發者 Karan Goyal 在 Winter '26 Edition 上線後幾天就寫了使用心得,他的描述相當具體。
案例:產出一個客製化的 POS UI Extension
Goyal 用自然語言描述需求:「Build a new POS UI extension that shows all the product SKUs of the order in the order details screen.」整個過程花了 15 分鐘。他回報的感受是:程式碼不完美,他需要調整 query filter 語法和加上客製驗證邏輯,但從第一次跑出來就是可以工作的、接近上線品質的程式碼。
他歸納了三個最明顯的改變:
第一個,樣板程式碼的負擔消失了。每個 Shopify 專案一開始都要處理驗證、API client 設定、webhook handler、session storage。MCP Server 根據你要做什麼來處理這些。開發者把時間花在商業邏輯上,不是腳手架上。
第二個,自然語言直接轉成通過驗證的程式碼。當他要求一個 GraphQL mutation 時,Server 知道目前的 API 版本、必填欄位和棄用警告。產出的查詢可以直接對開發商店執行。
第三個,大幅減少上下文切換。以前要不斷在 IDE 和文件之間來回切換,現在 AI 助手已經讀過文件了。
Dev MCP vs Storefront MCP:不要搞混
這兩個 Server 解決完全不同的問題,混用會造成架構上的錯誤:
| 面向 | Dev MCP Server | Storefront MCP Server |
|---|---|---|
| 定位 | 開發者工具 | 顧客體驗基礎建設 |
| 解決的問題 | 「怎麼寫一個 Shopify Function?」 | 「有沒有 NTD 3,000 以下的紅色洋裝?」 |
| 資料來源 | shopify.dev 文件 + API schema | 特定商店的產品目錄 + 購物車 + 政策 |
| 執行環境 | 本機(開發者電腦) | 商店端點(雲端) |
| 驗證 | 不需要 | 不需要(公開端點) |
| 典型輸出 | GraphQL 程式碼、Liquid 模板、Function scaffold | 產品推薦、購物車操作、結帳引導 |
社群也建了不少 Shopify MCP Server——例如 shopify-mcp(GeLi2001 版本)提供 31 個 Admin API 工具,包含產品 CRUD、訂單管理、客戶合併和庫存管理。這些社群 Server 聚焦在後端資料操作,跟官方的 Dev MCP(聚焦開發者生產力)和 Storefront MCP(聚焦購物體驗)形成互補。
MCP UI:突破純文字的購物體驗
Shopify 工程團隊在 2025 年 8 月發表了 MCP UI,這是一個開源的 MCP 延伸協議,讓 AI Agent 不只回傳文字,還能回傳完整的互動式 UI 元件。
電商場景裡,產品不只是 SKU 和價格。它是不同角度的圖片、可以點選的色票、會即時更新庫存的尺碼選擇器、影響定價的組合配置。純文字的 AI 聊天介面根本不夠用。
MCP UI 支援三種傳遞方式:
- Inline HTML(透過 sandboxed iframe 的 srcDoc 嵌入)
- Remote resources(載入 sandboxed iframe)
- 結構化的 JSON 回應搭配
ui://嵌入式資源
互動元件不會直接修改狀態,而是把 intent(意圖)往上冒泡給 Agent 處理。例如使用者在嵌入的元件裡點了「加入購物車」,元件會發出一個 intent event,由 Agent 來判斷下一步。這個架構讓 Agent 保持控制權,同時讓使用者有豐富的互動體驗。
Shopify 資深工程師 Liad Yosef 發表的原型已經展示了搜尋、產品、購物車和結帳元件的互動預覽。
Agentic Commerce:Shopify 的技術路線圖
Winter '26 Edition 把 MCP 擺在 Shopify 開發平台的核心位置。幾個關鍵的技術發展:
Shopify Catalog API:讓 AI Agent 搜尋 Shopify 上數十億個商品。Summer '25 還只是給特定合作夥伴的預覽,Winter '26 全面開放給所有使用 MCP tools 或 REST API 的開發者。
Checkout Kit + Checkout MCP:把 Shopify 結帳流程嵌入到任何 Agent 體驗裡。支援 JavaScript、Swift、Android、React Native。Checkout MCP 工具正在預覽給特定合作夥伴。
Agentic Storefronts:商家在 Admin 裡設定一次,產品資料就自動同步到 ChatGPT、Copilot、Perplexity 等 AI 平台。不需要逐一整合每個 AI 平台。
Dev Dashboard:一站式的 Agentic Commerce 開發工作區,整合了 Shopify Catalog、Checkout Kit 和 MCP 工具。開發者可以在這裡原型設計、測試、出版 Agent 購物體驗。
Sidekick App Extensions:開發者可以建立 Sidekick 擴充套件,讓商家直接在 Shopify Admin 裡透過 Sidekick 存取第三方 App 的資料和功能。
這些不是零散的功能更新。它們組合起來的圖像是:Shopify 正在把自己從「線上商店平台」轉型成「Agentic Commerce 基礎建設供應商」。商店的「使用者」不再只是人,還有 AI Agent。
對 Shopify 開發團隊的實務建議
如果你的團隊在做 Shopify 開發,以下是根據 Dev MCP Server 的技術特性整理的導入建議。
現在就安裝。設定只要五分鐘,沒有理由不裝。npx -y @shopify/dev-mcp@latest 就跑起來了,不需要額外認證或付費。
把 learn_shopify_api 設為每次對話的第一步。Shopify 的官方文件明確寫著「Always call this tool first when working with Shopify APIs」,這不是建議而是使用規範。跳過這一步,AI 助手可能會基於過時的訓練資料產出程式碼。
優先用 validate_theme 而不是 validate_theme_codeblocks。除非你確定 Liquid 檔案是完全自包含的,不需要任何 theme 上下文,否則用完整的 theme 驗證模式。Partial 模式會漏掉跨檔案的參照錯誤。
搭配 Claude Code 或 Cursor 使用。Dev MCP Server 在有專案上下文的 IDE 裡效果最好——AI 助手能看到你的檔案結構、現有程式碼和相依套件,產出的程式碼才會客製化到你的專案,而不是通用範例。
留意 Storefront MCP 的商業機會。如果你的客戶是電商品牌,Storefront MCP 代表了一個新的銷售通路。AI 購物助手會直接查詢商店的 MCP 端點來推薦產品。產品資料的結構化程度直接影響被 AI 推薦的機率。
Shopify Dev MCP Server 需要付費嗎?
不需要。Dev MCP Server 是免費工具,安裝後在本機執行,不需要 API 金鑰或 Shopify 帳號。唯一的前置條件是 Node.js 18 以上和一個支援 MCP 的 AI 開發工具(Cursor、Claude Code、Claude Desktop、Gemini CLI、VSCode、Codex CLI)。
Shopify Dev MCP 跟 Storefront MCP 有什麼不同?
Dev MCP 是給開發者用的,讓 AI 助手能存取 Shopify 文件和 API schema 來加速寫程式。Storefront MCP 是給消費者用的,讓 AI 購物助手能查詢商店的產品目錄、管理購物車和處理結帳。Dev MCP 在本機執行、不需驗證;Storefront MCP 是每個商店預設開啟的雲端端點 {shop}.myshopify.com/api/mcp。
Shopify Dev MCP Server 支援哪些 AI 工具?
截至 2026 年 3 月,官方支援 Cursor、Claude Code、Claude Desktop、Codex CLI、Gemini CLI 和 VSCode。任何支援 MCP 標準協議的 AI 工具理論上都可以連接。
Dev MCP Server 會不會產出過時的程式碼?
不太會。learn_shopify_api 工具會即時從 shopify.dev 拉取最新的 API 使用指南,introspect_admin_schema 直接查詢真實的 GraphQL schema。這跟一般 LLM 靠訓練資料猜測不同。但 AI 產出的程式碼仍然需要人工審查,特別是驗證邏輯和安全性相關的部分。
MCP UI 是什麼?跟 Dev MCP 有關嗎?
MCP UI 是 Shopify 工程團隊開發的開源協議延伸,讓 AI Agent 能回傳互動式 UI 元件而不只是文字。它是建在 Storefront MCP 上面的,跟 Dev MCP 是不同層級的東西。Dev MCP 解決開發者生產力,MCP UI 解決消費者的購物體驗品質。
引用來源
- Shopify — Dev MCP Server 官方文件
- Shopify — Winter '26 Edition: AI-native, developer-ready
- Shopify Engineering — MCP UI: Breaking the text wall with interactive components
- Shopify — About Storefront MCP
- Karan Goyal — Shopify's Dev MCP Server: AI-Powered Development
關於作者
Erik (EKC) 是 Tenten.co 的數位策略總監。Tenten 是台灣的 AI-native 數位代理商,同時是 Shopify Partner,在過去三年間為超過 40 家電商品牌提供 Shopify 開發和 AI 整合服務。
在 Shopify 推出 MCP 生態系之前,我們就已經在客戶專案裡用 Claude Code 搭配 MCP 來加速開發工作流程。Dev MCP Server 上線後,最明顯的差別是 Liquid 模板和 GraphQL 操作的產出品質——AI 不再靠訓練資料猜測 API 結構,而是即時查詢真實 schema。我們在一個 Shopify Plus 遷移專案裡實測,客製化 checkout extension 的開發時間從平均 4 天縮短到 1.5 天。省下來的時間讓我們能做更多使用者測試和效能優化。
但我要提醒一件事:Dev MCP Server 不會取代開發者的判斷力。它產出的程式碼大概八成可以直接用,剩下兩成需要人工調整——特別是涉及安全性、效能最佳化和邊界情境處理的部分。把它當作一個非常懂 Shopify 文件的 pair programmer,而不是自動寫程式的機器。
如果你正在評估 Shopify 開發效率的提升方案,或考慮把 AI Agent 整合到電商流程裡,歡迎跟 Tenten 團隊預約諮詢。
