全球最火的前端 UI 组件库，接入 AI！

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

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

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

Github：https://github.com/Jpisnice/shadcn-ui-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 中中添加配置：