这两年，shadcn/ui 可谓火到出圈，霸榜各种榜单。它的设计风格极简、体验极佳，Star 数一路飙升，成为 React 开发者的首选 UI 组件库。不少人已经把它当作“前端标配”。

最近，一个叫 shadcn-ui-mcp-server 的开源项目又给它带来了新玩法：你可以让代码助手“读懂”这个组件库，帮你查组件、写示例，甚至生成整页布局。说白了，就是多了个懂 shadcn 的搭档，能和你一起“拼 UI”。

Github：https://github.com/Jpisnice/shadcn-ui-mcp-server

什么是 MCP Server？

这个项目的核心叫 MCP，英文全称是 Model Context Protocol，意思是给模型（比如代码助手）提供统一的“上下文接口”。它的目标是让模型更好地理解项目中的各种工具、库和数据结构。

而这个 MCP Server 就是专门为 shadcn/ui v4 打造的“连接器”。它会把组件的文档、源码、示例、安装方法等内容整理成模型能理解的格式，让你平时用的工具（比如 Cursor、Continue、Claude 等）能更准确地帮你写代码、补全 UI，甚至整页搭建。

比如：

• 你问它：“我想用 shadcn 做一个登录页，按钮怎么写？”
• 它不只给你抛出一段代码，还能补全整个结构，合理地调用 Button、Input、Card 等组件，直接写出一套能用的页面。

这意味着什么？以后写界面，不是“AI 会写代码”，而是“AI 懂你的组件库”——协作效率高得多，生成代码也更靠谱。

它能帮你做什么？

• 查看组件源码和示例：列出所有组件、获取 TS 源码、查看 demo，还能自动生成安装命令。
• 支持整页布局：不仅能查原子组件，还能找 dashboard、登录页、表单等完整页面 block。
• 集成多种编辑器：支持 VS Code、Cursor、Claude Desktop 等主流工具，配好之后，AI 助手就能像熟悉本地代码那样“查阅”组件。

这些功能，彻底让 AI 从一个“代码生成器”升级成你的 shadcn/ui 百科全书。

它是怎么工作的？shadcn-ui-mcp-server 是一个 Node.js 项目，运行简单，几行命令就能起服务：

shadcn-ui-mcp-server 是一个 Node.js 项目，运行简单，几行命令就能起服务：

# 基础版（60 次请求/小时）
npx @jpisnice/shadcn-ui-mcp-server

# 高级版，用 GitHub 令牌（5000 次请求/小时）
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_你的令牌

也可以通过环境变量设置 GitHub Token：

export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_你的令牌
npx @jpisnice/shadcn-ui-mcp-server

有了 Github Token，请求次数多得多，写一天代码都不怕被限流。

怎么接入编辑器？

• VS Code + Continue：安装 Continue 后，在 VS Code 的设置文件 settings.json 中中添加配置：

• Cursor：只需要在设置中添加类似配置，就能让它识别 shadcn-ui 的组件定义和用法。

配置完成后，无论你用的是 Continue 还是 Cursor，编辑器都能直接通过 MCP 接口请求组件信息，生成更贴合实际的代码建议。

运行 MCP Server 服务

你也可以不依赖具体编辑器，直接运行服务，在本地起一个接口：

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_你的 GitHub 令牌

写在最后

shadcn-ui-mcp-server 不只是让 AI 能写代码，而是让 AI 真正读懂组件库。

如果你经常在项目中用到 shadcn/ui，这套方案可以帮你省下大量查文档、对照示例的时间。和智能补全工具配合使用，开发效率会有明显提升。