一个强大的 AI 代理工具，可以帮助开发者即时创建高质量的 UI 组件
](https://GitHub.com/HelloGGX/shadcn-vue-mcp/network/) ](https://GitHub.com/HelloGGX/shadcn-vue-mcp/stargazers/) ](https://GitHub.com/HelloGGX/shadcn-vue-mcp/commit/) ](https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp)  
](https://mseep.ai/app/helloggx-shadcn-vue-mcp)
Shadcn-vue MCP Server 是一个强大的 AI 驱动工具，可帮助开发人员通过自然语言描述即时创建美观、现代的 UI 组件。它集成了 shadcn-vue 组件库和 tailwindcss，与主流 IDE 无缝连接，并提供简化的 UI 开发工作流程。
❌ 没有 shadcn-vue MCP
开发者在构建 UI 组件时面临着多重挑战：
- ❌ 繁琐的开发流程：在 IDE、官方文档和浏览器之间不断切换，严重影响开发效率和专注度。 - ❌ 组件选择困难：面对 shadcn-vue 的海量组件，如果没有智能推荐，开发者很难快速找到最适合其需求的组件。 - ❌ 高重复性工作：涉及手动编写大量样板代码，以及处理各种组件状态和复杂的交互逻辑。 - ❌ 质量保证不足：很容易忽视可访问性（A11y）、性能优化和最佳编码实践等质量标准，导致组件质量不一致。 - ❌ 高昂的维护成本：随着项目规模的增长，手动维护所有组件的样式、行为和依赖关系变得异常困难，难以实现一致性。
✅ 拥有 shadcn-vue MCP
shadcn-vue MCP 提供了一种智能化的 UI 组件开发体验，彻底改变了传统工作流程：
- ✅ 一站式开发体验：只需通过自然语言描述您的需求，即可在编辑器内完成从组件选择、编码到预览的整个流程，无需离开编辑器。 - ✅ 智能组件推荐：components-filter 工具能够智能分析您的需求，并推荐最合适的 shadcn-vue 组件。 - ✅ 高质量代码自动生成：component-builder 可自动生成符合 shadcn-vue 和 tailwindcss 标准的高质量 Vue 组件代码，并内置了最佳实践。 - ✅ 内置质量保证：component-quality-check 会自动对生成的代码执行可访问性（A11y）和代码质量检查，确保组件达到专业水准。 - ✅ 即时文档与预览：component-usage-doc 提供实时的组件文档、API 和使用示例，帮助您快速上手。 - ✅ 确保高度的设计一致性：所有生成的组件都严格遵循统一的设计规范，确保整个应用的视觉和交互一致性，从而提升品牌价值。
🌟 功能特性
- 自然语言描述:
- AI 驱动的 UI 生成：通过用自然语言描述来创建 UI 组件。
- 多 IDE 支持:
- Cursor IDE 集成，实现无缝工作流。 - Trae 支持，用于先进的 AI 驱动开发。 - VSCode 支持，提供强大的编码体验。 - VSCode + Cline 集成（测试版），用于增强协作。
- 现代化的组件库:
- 基于 shadcn-vue 组件库和 tailwindcss 构建，用于实现现代化的响应式设计。
- TypeScript 支持:
- 完整的 TypeScript 支持，确保类型安全和可扩展的开发。
- 智能文档查询:
- 实时访问详细的 shadcn-vue 组件文档，并集成了用法和最佳实践的预览。
- 组件增强:
- 可访问性：符合 WCAG 2.1 标准，支持键盘导航，支持 ARIA。 - 性能：代码分割、摇树优化（Tree Shaking）、优化的包体。 - 一致性：统一的设计系统，一致的行为模式。 - 可维护性：清晰的代码架构，文档完善的组件。 - 开发者体验：支持 TypeScript、热重载、直观的 API。
🚀 快速上手
先决条件
在开始之前，请确保您的系统中已经安装了 Node.js。
- 推荐的 Node.js 版本：18.20.1 或更高版本。
使用其他版本可能会导致安装错误，例如 Error: spawnSync code-insiders.cmd EINVAL。降级或升级到推荐版本是最好的解决方案。快速安装：为 Copilot 进行 URL 快速安装
首先，您需要从 Smithery 服务获取一个包含您个人凭证的唯一连接 URL。请访问 Smithery 上的 shadcn-vue-mcp 页面。
第 1 步： 在页面上点击“Generate URL”（生成 URL）按钮：
系统将为您生成一个唯一的 URL，其中包含用于身份验证的 API 密钥。请复制这整个 URL。
第 2 步： 打开 VSCode, 启动 Copilot 并选择 Agent 模型。接下来，将您刚刚获取的 URL 添加到您 IDE 的 MCP 配置文件中。
- 在您的 IDE 项目中，找到或创建一个名为
mcp.json的配置文件。 - 将以下 JSON 对象添加或合并到该文件的
servers字段中。
第 3 步： 对于 VSCode IDE，选择“Add Server”（添加服务器）
第 4 步： 选择 HTTP (HTTP or Server-Sent Events)
第 5 步： 粘贴 URL
第 6 步： 在vscode中像这样配置：
{
"servers": {
"shadcn-vue-mcp": {
"url": "https://server.smithery.ai/@HelloGGX/shadcn-vue-mcp/mcp?api_key=xxxx&profile=linguistic-landfowl-TWeEt8"
}
}
}配置文件位置：
- Cursor: ~/.cursor/mcp.json - Trae: ~/.Trae/mcp.json - Cline: ~/.cline/mcp_config.json - Claude: ~/.claude/mcp_config.json
🛠️ 工具列表与核心功能
组件生成工具
requirement-structuring
- 分析自然语言需求 - 将用户需求转换为结构化的 JSON 格式 - 考虑核心功能和基本特性 - 内置用户交互和边缘情况分析
文档与分析工具
component-usage-doc
- 实时访问 shadcn-vue 组件文档 - 组件变体的交互式预览 - 浏览器内置 Markdown 渲染 - 详细的 API 和使用示例
组件筛选与管理
components-filter
- 智能组件推荐系统 - 支持多语言描述解析 - 组件关系分析 - 使用频率统计与加权
代码质量与测试
component-quality-check
- 自动化代码质量评估 - A11y (可访问性) 合规性检查 - 性能优化建议 - 最佳实践验证
智能代码生成
component-builder
- AI 驱动的组件生成 - 集成 shadcn-vue 和 Tailwind CSS - TypeScript 类型安全 - 内置最佳实践实现
效果示例
用户: /ui 创建一个航班信息展示组件
AI: 生成代码如下:
用户: /check
AI: 
AI: 生成代码如下:
🤝 贡献指南
我们欢迎所有形式的贡献！您可以通过以下方式帮助我们改进 @agent/shadcn-vue：
- 报告错误： 如果您发现错误，请在我们的 中创建一个问题。
- 建议增强功能： 对新功能或改进有想法吗？通过创建问题让我们知道。
- 提交拉取请求： 我们很乐意审查和合并拉取请求。在进行重大更改之前，请先打开一个问题来讨论您的想法。
源代码在 上开源。
👥 社区与支持
- Discord Community - 加入我们活跃的社区