# shadcn MCP 伺服器

官方 MCP 伺服器，讓 AI 助手能透過自然語言直接從註冊表瀏覽、搜尋並安裝 shadcn/ui 組件，實現零幻覺的 AI 驅動 UI 開發。

Canonical URL: https://a2a-mcp.org/entry/shadcn-mcp-server-zh-tw

Language: zh-TW

Category: MCP Servers

Updated: 2026-03-18

## 概述

shadcn MCP 伺服器是 shadcn/ui 的[模型上下文協議（Model Context Protocol，簡稱 MCP）](https://modelcontextprotocol.io) 官方實作。它讓 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

通常透過以下指令啟動：
```bash
npx shadcn@latest mcp
```
或在專案中完成設定後，使用相容的 AI 工具即可。

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

## Tags

- shadcn
- mcp
- ai-agent
- ui-components
- registry
- typescript
- react
- tailwind
- claude
- cursor

## Sources

- [Project website](https://ui.shadcn.com/docs/mcp)