全球最火的前端 UI 組件庫(kù)，接入 AI！
這兩年，shadcn/ui 可謂火到出圈，霸榜各種榜單。它的設(shè)計(jì)風(fēng)格極簡(jiǎn)、體驗(yàn)極佳，Star 數(shù)一路飆升，成為 React 開(kāi)發(fā)者的首選 UI 組件庫(kù)。不少人已經(jīng)把它當(dāng)作“前端標(biāo)配”。
最近，一個(gè)叫 shadcn-ui-mcp-server 的開(kāi)源項(xiàng)目又給它帶來(lái)了新玩法：你可以讓代碼助手“讀懂”這個(gè)組件庫(kù)，幫你查組件、寫(xiě)示例，甚至生成整頁(yè)布局。說(shuō)白了，就是多了個(gè)懂 shadcn 的搭檔，能和你一起“拼 UI”。
Github：https://github.com/Jpisnice/shadcn-ui-mcp-server
什么是 MCP Server？
這個(gè)項(xiàng)目的核心叫 MCP，英文全稱(chēng)是 Model Context Protocol，意思是給模型（比如代碼助手）提供統(tǒng)一的“上下文接口”。它的目標(biāo)是讓模型更好地理解項(xiàng)目中的各種工具、庫(kù)和數(shù)據(jù)結(jié)構(gòu)。
而這個(gè) MCP Server 就是專(zhuān)門(mén)為 shadcn/ui v4 打造的“連接器”。它會(huì)把組件的文檔、源碼、示例、安裝方法等內(nèi)容整理成模型能理解的格式，讓你平時(shí)用的工具（比如 Cursor、Continue、Claude 等）能更準(zhǔn)確地幫你寫(xiě)代碼、補(bǔ)全 UI，甚至整頁(yè)搭建。
比如：
- 你問(wèn)它：“我想用 shadcn 做一個(gè)登錄頁(yè)，按鈕怎么寫(xiě)？”
- 它不只給你拋出一段代碼，還能補(bǔ)全整個(gè)結(jié)構(gòu)，合理地調(diào)用
Button、Input、Card等組件，直接寫(xiě)出一套能用的頁(yè)面。
這意味著什么？以后寫(xiě)界面，不是“AI 會(huì)寫(xiě)代碼”，而是“AI 懂你的組件庫(kù)”——協(xié)作效率高得多，生成代碼也更靠譜。
它能幫你做什么？
- 查看組件源碼和示例：列出所有組件、獲取 TS 源碼、查看 demo，還能自動(dòng)生成安裝命令。
- 支持整頁(yè)布局：不僅能查原子組件，還能找 dashboard、登錄頁(yè)、表單等完整頁(yè)面 block。
- 集成多種編輯器：支持 VS Code、Cursor、Claude Desktop 等主流工具，配好之后，AI 助手就能像熟悉本地代碼那樣“查閱”組件。
這些功能，徹底讓 AI 從一個(gè)“代碼生成器”升級(jí)成你的 shadcn/ui 百科全書(shū)。
它是怎么工作的？shadcn-ui-mcp-server 是一個(gè) Node.js 項(xiàng)目，運(yùn)行簡(jiǎn)單，幾行命令就能起服務(wù)：
shadcn-ui-mcp-server 是一個(gè) Node.js 項(xiàng)目，運(yùn)行簡(jiǎn)單，幾行命令就能起服務(wù)：
# 基礎(chǔ)版（60 次請(qǐng)求/小時(shí)）
npx @jpisnice/shadcn-ui-mcp-server
# 高級(jí)版，用 GitHub 令牌（5000 次請(qǐng)求/小時(shí)）
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_你的令牌也可以通過(guò)環(huán)境變量設(shè)置 GitHub Token：
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_你的令牌
npx @jpisnice/shadcn-ui-mcp-server有了 Github Token，請(qǐng)求次數(shù)多得多，寫(xiě)一天代碼都不怕被限流。
怎么接入編輯器？
- VS Code + Continue：安裝 Continue 后，在 VS Code 的設(shè)置文件
settings.json中中添加配置：
- Cursor：只需要在設(shè)置中添加類(lèi)似配置，就能讓它識(shí)別
shadcn-ui的組件定義和用法。
配置完成后，無(wú)論你用的是 Continue 還是 Cursor，編輯器都能直接通過(guò) MCP 接口請(qǐng)求組件信息，生成更貼合實(shí)際的代碼建議。
運(yùn)行 MCP Server 服務(wù)
你也可以不依賴具體編輯器，直接運(yùn)行服務(wù)，在本地起一個(gè)接口：
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_你的 GitHub 令牌寫(xiě)在最后
shadcn-ui-mcp-server 不只是讓 AI 能寫(xiě)代碼，而是讓 AI 真正讀懂組件庫(kù)。
如果你經(jīng)常在項(xiàng)目中用到 shadcn/ui，這套方案可以幫你省下大量查文檔、對(duì)照示例的時(shí)間。和智能補(bǔ)全工具配合使用，開(kāi)發(fā)效率會(huì)有明顯提升。
