Shadcn Ui MCP Server

Shadcn UI MCP Server 是一个专为 AI 开发工作流设计的协议服务器，它为开发者提供对 shadcn/ui 组件库的完整访问能力。该工具支持 React、Svelte 和 Vue 三大主流前端框架，允许开发者通过 AI 助手快速获取组件源代码、示例实现和元数据，从而提升 UI 开发效率。

核心功能

Shadcn UI MCP Server 提供了多种核心功能，帮助开发者在 AI 驱动的开发流程中快速集成和使用 shadcn/ui 组件：

• 多框架支持：支持 React、Svelte 和 Vue 三种主流前端框架，开发者可根据项目需求选择合适的框架。
• 组件源代码访问：提供 shadcn/ui 最新版本的 TypeScript 源代码，确保开发者获取的是最新、最准确的组件实现。
• 组件示例：提供现成的组件使用示例和最佳实践代码，帮助开发者快速上手。
• 模块支持：提供完整的 UI 模块实现，如仪表盘、日历、表单等，加速原型开发。
• 元数据访问：支持查询组件的依赖关系、配置参数和详细说明，便于开发者理解组件结构。
• 智能缓存机制：通过缓存机制优化 GitHub API 请求，提高响应速度，减少请求延迟。

安装方法

Shadcn UI MCP Server 可通过 npm 或 npx 安装，支持全局安装或直接运行。以下是安装和配置的详细步骤：

npx @jpisnice/shadcn-ui-mcp-server

如果希望全局安装，可以使用以下命令：

npm install -g @jpisnice/shadcn-ui-mcp-server

此外，还可以通过命令行参数指定使用的前端框架，例如：

npx @jpisnice/shadcn-ui-mcp-server --framework svelte

为了提升 API 请求的频率限制，建议使用 GitHub 个人访问令牌，命令如下：

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

使用方法

Shadcn UI MCP Server 提供了多种使用方式，开发者可以通过命令行启动服务器，并根据需求配置框架和 GitHub 令牌。

npx @jpisnice/shadcn-ui-mcp-server --framework vue --github-api-key ghp_your_token_here

以下是几个常见的使用场景和示例：

• AI 辅助组件生成：让 AI 助手根据需求生成符合 shadcn/ui 风格的组件代码。
• 多框架比较学习：同时查看同一组件在不同框架中的实现方式，便于学习和比较。
• 快速原型开发：获取完整的 UI 模块代码，如仪表盘、表单等，加速项目开发。

以下是几个具体的命令示例：

npx @jpisnice/shadcn-ui-mcp-server --framework svelte

npx @jpisnice/shadcn-ui-mcp-server --framework vue

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

使用场景

Shadcn UI MCP Server 适用于多种开发场景，包括：

• AI 驱动的开发：通过 AI 助手快速生成和集成 UI 组件。
• 组件发现：探索可用组件及其使用方法，提升开发效率。
• 多框架学习：比较 React、Svelte 和 Vue 的组件实现，便于学习和选择。
• 快速原型开发：获取完整的 UI 模块代码，如仪表盘、表单等，加速项目开发。
• 代码生成：生成带有正确依赖项的组件代码，减少手动配置。

注意事项

在使用 Shadcn UI MCP Server 时，需要注意以下几点：

• GitHub 令牌：免费版本有 API 调用次数限制（60 次/小时），建议使用 GitHub 令牌以提高请求频率。
• 框架选择：通过命令行参数指定使用的前端框架，确保生成的代码符合项目需求。
• 缓存机制：服务器内置智能缓存机制，可有效减少 GitHub API 请求，提高响应速度。
• 版本同步：服务器会自动跟踪官方仓库更新，开发者只需重启服务器即可获取最新组件版本。

Shadcn UI MCP Server 通过提供完整的组件访问能力，帮助开发者在 AI 驱动的开发流程中快速构建高质量用户界面。