/ 目錄 / 演練場 / shadcn/ui MCP Server
● 社群 Jpisnice ⚡ 即開即用

shadcn/ui MCP Server

作者 Jpisnice · Jpisnice/shadcn-ui-mcp-server

不再複製貼上 shadcn/ui 元件 — Claude 在對話時即時取得當前原始碼、相依套件與安裝指令,沒有過時知識。

shadcn/ui MCP 伺服器直接從 shadcn/ui 登錄檔取得最新的元件原始碼、示範、安裝指令與相依套件。支援 React、Vue(Vite/Nuxt)、Svelte 5 及 React Native 變體。徹底消除「Claude 用去年的 API 寫元件」這類問題。

為什麼要用

核心特性

即時演示

實際使用效果

shadcn-ui-mcp.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "shadcn-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: shadcn/ui MCP Server

建立不會有 API 版本漂移的 shadcn/ui Form

👤 建立 React/Next 應用程式的前端開發者 ⏱ ~20 min intermediate

何時使用: 你想要 Form + react-hook-form + Zod,但 Claude 一直使用過時的 shadcn 匯入路徑。

前置條件
  • 已初始化 shadcn/ui 的 Next.js/Vite 應用程式npx shadcn@latest init
步驟
  1. 取得當前 Form 原始碼
    shadcn-ui MCP:取得 form(React)的當前原始碼及其相依套件。顯示安裝指令。✓ 已複製
    → 回傳最新原始碼;相依清單包含 react-hook-form、zod
  2. 建立我的表單
    現在使用這些確切的 API 建立 SignupForm。Email + 密碼 + 條款核取方塊;帶有驗證訊息的 Zod schema。不使用任何自創匯入。✓ 已複製
    → 元件能在當前 shadcn 版本下編譯
  3. 驗證
    執行 tsc --noEmit 並回報任何未解析的匯入。✓ 已複製
    → TypeScript 檢查通過

結果: 針對當前 shadcn/ui API 的可運作 Form — 不再有 import { ... } from '@/components/ui/old-name' 的錯誤。

注意事項
  • 專案使用較舊的 shadcn 版本 — 透過 --registry 固定版本,或接受升級並執行 shadcn upgrade
搭配使用: filesystem

直接套用 shadcn Block(驗證/儀表板)

👤 需要預製版面的開發者 ⏱ ~15 min beginner

何時使用: 你需要完整的登入頁面或儀表板版面,不只是單一元件。

步驟
  1. 瀏覽 Blocks
    shadcn-ui:列出可用的 Blocks。我想要側邊欄儀表板版面。✓ 已複製
    → 帶有名稱 + 預覽的 Block 清單
  2. 取得並調整
    取得 sidebar-07 的原始碼。將其調整到我的路由 — 將示範連結替換為 /dashboard、/clients、/settings。✓ 已複製
    → 回傳 Block 程式碼;我的路徑已替換

結果: 完整儀表板版面在 10 分鐘內運行,並已自訂到我的應用程式。

注意事項
  • Block 相依你未安裝的元件 — MCP 會回傳相依清單;先安裝缺少的部分
搭配使用: filesystem

將 React 應用程式的 shadcn 用法移植到 Svelte

👤 正在遷移框架的開發者 ⏱ ~30 min advanced

何時使用: 你正從 Next 遷移到 SvelteKit,並想找到 shadcn-svelte 的對應元件。

步驟
  1. 對應元件
    列出我的應用程式從 @/components/ui 匯入的元件。針對每個,從 shadcn-ui MCP 取得 Svelte 5 的對應版本。✓ 已複製
    → 逐元件的對應清單,附有 API 差異說明
  2. 翻譯一個範例
    使用實際的當前 API 將這段 React Form 用法翻譯成 Svelte 版本。✓ 已複製
    → 慣用的 Svelte 5 程式碼

結果: 遷移計劃 + 供團隊遵循的參考翻譯。

注意事項
  • 某些元件在 Svelte 移植版中尚未存在 — MCP 會顯示「找不到」;將這些標記為需要手動移植

組合

與其他 MCP 搭配,撬動十倍槓桿

shadcn-ui-mcp + filesystem

直接將元件產生到你的倉庫

shadcn:取得 Form。Filesystem:用我的 schema 將程式碼寫入 src/components/SignupForm.tsx。✓ 已複製
shadcn-ui-mcp + github

PR 一個使用當前 shadcn API 的介面重構

取得當前 Dialog API。重構 src/components/Modal.tsx 以符合。開一個 PR。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
list_components framework?: react|vue|svelte|react-native 探索用 1 fetch
get_component name: str, framework?: str 寫程式碼之前 1 fetch
get_component_demo name: str, framework?: str 查看真實用法 1 fetch
list_blocks framework?: str 尋找預製版面 1 fetch
get_block name: str 套用版面 1 fetch

成本與限制

運行它的成本

API 配額
GitHub raw 取得(未驗證 60 次/小時,已驗證 5000 次/小時)
每次呼叫 Token 數
300–4000(元件原始碼可能很大)
費用
免費開源
提示
傳入 GITHUB_PERSONAL_ACCESS_TOKEN 以避免 60 次/小時的限制

安全

權限、密鑰、影響範圍

憑證儲存: 可選的 GitHub token 以提高速率限制
資料出站: github.com(raw 和 api)
切勿授予: repo:write

故障排查

常見錯誤與修復

超過速率限制

設定 GITHUB_PERSONAL_ACCESS_TOKEN 環境變數

在框架中找不到元件

Vue/Svelte 移植版落後 React;在該框架執行 list_components 確認

回傳的原始碼使用與我專案不同的 API

專案使用較舊的 shadcn;要麼升級,要麼固定到舊版登錄檔

替代方案

shadcn/ui MCP Server 對比其他方案

替代方案何時用它替代權衡
Magic MCP(21st Dev)你想要更廣泛的介面產生,不只是 shadcn更有主見;較重
元件 MCP(自訂登錄檔)你有內部設計系統需要自行建立

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills