shadcn MCP 伺服器

概述

shadcn MCP 伺服器是 shadcn/ui 的模型上下文協議（Model Context Protocol，簡稱 MCP） 官方實作。它讓 AI 助手與智能代理能夠安全連接到相容 shadcn 的組件註冊表，可以瀏覽可用組件、搜尋特定組件、取得原始碼、展示範例、元資料，甚至透過自然語言指令直接將組件安裝到專案中。

這徹底解決了 AI 常見的問題，例如知識過時或憑空捏造的屬性（hallucinated props），因為它提供即時、結構化的最新註冊表資料存取，並與 shadcn CLI 無縫整合。

主要功能

• 瀏覽與搜尋註冊表：AI 可列出並查詢任何 shadcn 相容註冊表中的組件、區塊（blocks）與圖表（charts）。
• 取得精確資料：即時獲取最新的 TypeScript 原始碼、Props/介面定義、使用範例與安裝指令。
• 直接安裝：透過整合的 CLI 橋接，讓 AI 自動執行 shadcn add 指令完成安裝。
• 框架無關的註冊表支援：相容任何 shadcn 註冊表（官方或自訂），主要基於 React + Tailwind 的組件。
• 安全本地執行：通常以本地伺服器形式運行（透過 npx 或安裝套件），支援可設定的身份驗證。
• IDE 與工具整合：原生支援 Cursor、Claude Desktop、Zed 等具備 MCP 能力的工具。

運作原理

1. 安裝 MCP 伺服器（通常透過 npx 或專案設定）。
2. 在 components.json 中設定你的註冊表。
3. 將 AI 助手連接到本地 MCP 端點。
4. 使用自然語言提示，例如「新增一個漂亮的帶有 shadcn 圖表的儀表板」—— AI 會查詢註冊表、挑選合適組件並自動安裝。

使用場景

• 在 Cursor 或 Claude Code 中進行 AI 驅動的 UI 快速原型開發。
• 在大型程式碼庫中自動化組件安裝流程。
• 建構多代理工作流：一個代理負責研究組件，另一個負責組裝 UI。
• 企業設計系統的自訂註冊表整合。

快速上手

請參考官方文件：https://ui.shadcn.com/docs/mcp

通常透過以下指令啟動：

npx shadcn@latest mcp

或在專案中完成設定後，使用相容的 AI 工具即可。

社群中有許多分支與增強版本（例如支援 Svelte/Vue 的多框架版本），但大多數使用者建議優先使用 shadcn/ui 官方版本。