← 返回目录

Shadcn UI MCP Server

社区

让 AI 助手直接访问 shadcn/ui v4 组件、模块与示例

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 38 / 438
Stars: ★ 3.1k 非常热门
传输方式: stdio（本地进程） · SSE
运行环境: Node.js 18+ · Docker
凭据: 可选 API Key
许可证: MIT
最近提交: 18 天前
工具数: 8

66FMRS · C

该服务器提供丰富的 shadcn/ui 组件访问，支持多框架，安装简便。但依赖于 GitHub API，速率限制是主要瓶颈，需配置 token 以获得良好体验。

最强项 · 维护活跃度 16/20 最弱项 · 可靠性 8/20

可靠性

8/20

安全与权限

14/20

维护活跃度

16/20

文档质量

15/20

安装易用性

13/20

查看各项评分依据

可靠性 8/20: 源代码显示服务器具有清晰的入口点和结构化的构建过程。但未提供可验证的测试或 CI 证据，且具体工具行为未通过执行确认，因此扣分。
安全与权限 14/20: GitHub 令牌作为可选参数处理，且 README 中未出现真实令牌。工具主要为只读，不涉及破坏性操作，但未提供明确的权限最小化或数据流披露，故未满分。
维护活跃度 16/20: 仓库活跃，有近期提交和发布，并采用 MIT 许可证。但未看到明确的安全响应政策或一致的版本治理，因此扣分。
文档质量 15/20: README 和文档文件夹提供了安装、配置、集成和故障排除的详细指导。但某些假设未明确（如速率限制），且未提供可验证的执行证据，故未满分。
安装易用性 13/20: 具备清晰的 npx 安装步骤，并提供 Claude Desktop 集成配置示例。但未提供 CI 或测试证据来验证安装路径，且需要手动配置令牌，因此未满分。

静态评测 · 未实际运行收录于 2026-08-07

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

使用 shadcn/ui 的开发者
希望 AI 助手生成符合 shadcn/ui 风格的组件代码的团队
需要跨框架（React、Svelte、Vue、React Native）一致 UI 的开发者
构建 AI 驱动的开发工具或集成

不适合谁

不使用 shadcn/ui 的用户
需要其他 UI 库（如 Tailwind UI）的用户
离线环境下的使用（需要访问 GitHub API）
需要完全本地运行、不依赖外部 API 的场景

所需权限

GitHub API 访问（用于检索组件和仓库数据）
网络访问（用于 GitHub API 和 npm 包下载）
读取环境变量（如 GITHUB_PERSONAL_ACCESS_TOKEN）
运行本地文件系统操作（如构建缓存）

风险与副作用

GitHub API 速率限制可能导致服务不可用（默认 60 次/小时，提供令牌后 5000 次/小时）。
使用 npm 包时可能存在供应链风险，建议验证包的完整性。
SSE 模式下服务器可能暴露在网络上，需配置好 CORS 和访问控制。
组件代码可能包含过时或不安全的模式，需进行审查。

安装接入

准备工作

运行环境：Node.js 18+ · Docker

GITHUB_PERSONAL_ACCESS_TOKEN 可选密钥 GitHub 个人访问令牌（无需任何 scope），在 https://github.com/settings/tokens 生成，可将速率限制从 60 提升到 5000 次/小时。

其他可选配置项（5 个）

MCP_TRANSPORT_MODE 可选传输模式（stdio|sse|dual），默认 stdio。

MCP_PORT 可选 SSE 服务器端口，默认 7423。

MCP_HOST 可选主机绑定地址，默认 0.0.0.0。

MCP_CORS_ORIGINS 可选 CORS 允许来源，逗号分隔。

UI_LIBRARY 可选 UI 原语库选择：radix（默认）或 base，仅 React 支持。

获取 GitHub 个人访问令牌（可选，但推荐，以提高速率限制）。
使用 npx 运行服务器：npx @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN。
将服务器添加到您的客户端（如 Claude Desktop）配置中。

claude_desktop_config.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "YOUR_GITHUB_TOKEN"
      ]
    }
  }
}

以 Claude Desktop 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "YOUR_GITHUB_TOKEN"
      ]
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_GITHUB_TOKEN

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在客户端工具列表中应出现 get_component、list_components 等工具；也可以直接询问“列出所有 shadcn 组件”，若返回组件列表即说明连接成功。

常见排障

检查 GitHub token 是否有效且未过期。
确认网络连接正常，能够访问 GitHub API。
查看服务器日志，确认没有输入输出错误。
尝试使用 `--framework` 参数切换到所需框架，确保获取正确版本。
对于 SSE 模式，检查端口是否被占用，并确认防火墙允许访问。

试试这样问

连接成功后，可以直接对 AI 助手这样说：

列出 shadcn/ui 中所有可用的组件
给我 button 组件的 React 源码
查看 dashboard block 的完整实现
比较 button 组件在 Svelte 和 Vue 中的实现差异

工具能力 8

get_component 只读

获取指定组件的完整源代码。

list_components 只读

列出当前框架下所有可用的 shadcn/ui 组件。

get_block 只读

获取完整模块实现（如仪表盘、日历、表单）。

list_blocks 只读

列出所有可用的模块。

get_demo 只读

获取组件的示例实现和用法。

list_demos 只读

列出所有可用的演示。

get_metadata 只读

获取组件的依赖、描述和配置信息。

browse_directory 只读

浏览仓库目录结构。

使用场景

AI 驱动的 UI 开发：让 AI 助手使用 shadcn/ui 构建用户界面。

组件发现：探索可用组件及其用法。

多框架学习：对比 React、Svelte、Vue 和 React Native 的实现。

快速原型设计：获取仪表盘、表单等完整模块实现。

代码生成：生成带有正确依赖的组件代码。

支持客户端

Claude Desktop

Claude Code

VS Code部分支持

Cursor部分支持

Continue部分支持

依据项目文档列出，未经本站实测。

详细介绍

一个模型上下文协议（MCP）服务器，为 AI 助手提供对 shadcn/ui v4 组件、模块、示例和元数据的全面访问。支持 React、Svelte、Vue 和 React Native 实现，助力 AI 驱动的开发工作流。