AI导哈

UI组件生成工具

一个基于AI的UI组件生成工具，帮助开发者通过自然语言描述快速创建高质量的Vue组件，集成shadcn-vue和tailwindcss，支持主流IDE。

  • by HelloGGX
  • TypeScript
  • 云端部署
  • 109 星标
  • 更新于
在 GitHub 查看 HelloGGX/shadcn-vue-mcp

使用说明


强大的AI Agent工具，可帮助开发人员立即创建高质量的UI组件

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配置文件中。

  1. 在IDE项目中，找到或创建名为mcp.json的配置文件。
  2. 将以下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 通过：

  • 报告错误： 如果您发现错误，请在我们的 GitHub存储库.
  • 建议增强功能： 对新功能或改进有想法吗？通过创建问题让我们知道。
  • 提交拉取请求： 我们很乐意审查和合并拉取请求。在做出重大更改之前，请先打开一个问题来讨论您的想法。

源代码开源于 GitHub.

👥 社区与支持

📝 许可证

根据 Apache 2.0许可证.

相关 MCP