强大的AI Agent工具，可帮助开发人员立即创建高质量的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开发工作流程。
🌐 Available Languages:
❌ 无shadcn vue MCP
开发人员在构建UI组件时面临多重挑战：
- ❌ 繁琐的开发工作流程：IDE、官方文档和浏览器之间的不断切换严重影响了开发效率和重点。
- ❌ 组件选择困难：面对来自
shadcn-vue在没有智能推荐的情况下，开发人员很难快速找到最适合他们需求的产品。 - ❌ 高重复工作量：涉及手动编写大量的样板代码，处理各种组件状态和复杂的交互逻辑。
- ❌ 质量保证不足：很容易忽视可访问性（A11y）、性能优化和最佳编码实践等质量标准，导致组件质量不一致。
- ❌ 维护成本高：随着项目的发展，手动维护所有组件的样式、行为和依赖关系变得异常困难，难以实现一致性。
✅ 使用shadcn-vue MCP
shadcn-vue-MCP提供了一种智能UI组件开发体验，彻底改变了传统的工作流程：
- ✅ 一站式开发体验：无需离开编辑器，只需用自然语言描述您的需求，即可完成整个过程——从组件选择和编码到预览。
- ✅ 智能组件推荐：The
components-filter该工具智能地分析您的需求，并推荐最合适的shadcn-vue组件。 - ✅ 高质量代码自动生成:
component-builder自动生成符合以下要求的高质量Vue组件代码shadcn-vue和tailwindcss标准，内置最佳实践。 - ✅ 内置质量保证:
component-quality-check自动对生成的代码执行可访问性（A11y）和代码质量检查，确保专业级组件。 - ✅ 即时文档和预览:
component-usage-doc提供实时组件文档、API和使用示例，让您立即开始使用。 - ✅ 确保高设计一致性：所有生成的组件都严格遵守统一的设计规范，确保整个应用程序的视觉和交互一致性，并提升品牌价值。
🌟 特性
- 自然语言描述:
- AI驱动的UI生成：通过自然语言描述创建UI组件
- 多IDE支持:
- 光标 IDE集成，实现无缝工作流。 - 崔 支持先进的人工智能驱动开发。 - VSCode 支持强大的编码体验。 - VSCode+Cline 集成（Beta）以增强协作。
- 现代组件库:
- 基于shadcn-vue组件库和tailwindcss构建，实现现代、响应式设计。
- TypeScript支持:
- 完全的TypeScript支持确保了类型安全和可扩展的开发。
- 智能文档查询:
- 实时访问详细的shadcn-vue组件文档，并集成使用预览和最佳实践。
- 组件增强:
- 可访问性：符合WCAG 2.1标准，键盘导航，ARIA支持 - 性能：代码拆分、树抖动、优化包 - 一致性：统一的设计体系，一致的行为模式 - 可维护性：干净的代码架构，记录良好的组件 - 开发者体验：支持TypeScript、热重载、直观的API
🚀 入门指南
先决条件
在开始之前，请确保您的系统上安装了Node.js。
- 推荐的Node.js版本:
18.20.1或稍后。
使用不同的版本可能会导致安装错误，例如 Error: spawnSync code-insiders.cmd EINVAL。降级或升级到推荐版本是最好的解决方案。Qucik安装：副驾驶的URL快速安装
首先，您需要从Smithery服务获取一个包含您个人凭据的唯一连接URL。访问 Smithery上的shadcn vue mcp页面.
步骤1。单击页面上的生成URL按钮。:
系统将为您生成一个唯一的URL，其中包括用于身份验证的API密钥。复制整个URL。
步骤2。打开vscode，打开copilot并选择Agent model，接下来，将刚刚获得的URL添加到IDE的MCP配置文件中。
- 在IDE项目中，找到或创建名为mcp.json的配置文件。
- 将以下JSON对象添加或合并到该文件的服务器字段中。
步骤3：对于vscode IDE，选择添加服务器
步骤4：选择HTTP（HTTP或服务器发送事件）
步骤5：粘贴URL
步骤6：配置如下：
{
"servers": {
"shadcn-vue-mcp": {
"url": "https://server.smithery.ai/@HelloGGX/shadcn-vue-mcp/mcp?api_key=xxxx&profile=linguistic-landfowl-TWeEt8"
}
}
}配置文件位置：
- 光标：
~/.cursor/mcp.json - 带来：
~/.Trae/mcp.json - 克莱恩：
~/.cline/mcp_config.json - 克劳德：
~/.claude/mcp_config.json
🛠️ 工具列表和核心功能
组件生成工具
requirement-structuring
- 分析自然语言要求 - 将用户需求转换为结构化JSON格式 - 考虑核心功能和基本特性 - 内置用户交互和边缘案例分析
文档和分析工具
component-usage-doc
- 实时访问shadcn-vue组件文档 - 组件变体的交互式预览 - 浏览器内置markdown渲染 - 详细的API和使用示例
组件过滤和管理
components-filter
- 智能组件推荐系统 - 支持多语言描述解析 - 组件关系分析 - 使用频率统计和加权
代码质量与测试
component-quality-check
- 自动代码质量评估 - A11y（无障碍）合规性检查 - 性能优化建议 - 最佳实践验证
智能代码生成
component-builder
- 人工智能驱动的组件生成 - shadcn-vue与顺风CSS集成 - TypeScript类型安全 - 内置最佳实践实施
结果示例
用户：/ui创建航班显示组件
AI：生成的代码如下：
用户：/检查
人工智能： 
AI：生成的代码如下：
🤝 贡献指南
我们欢迎各种形式的捐款！您可以帮助我们改进 @agent/shadcn-vue 通过：
- 报告错误： 如果您发现错误，请在我们的 .
- 建议增强功能： 对新功能或改进有想法吗？通过创建问题让我们知道。
- 提交拉取请求： 我们很乐意审查和合并拉取请求。在做出重大更改之前，请先打开一个问题来讨论您的想法。
源代码开源于 .
👥 社区与支持
- 不和谐社区 -加入我们活跃的社区