基于shdcn的高质量vue组件生成工具

gavinAI/shadcn-vue-mcp

1 Stars 320 次浏览 gavinCat 更新于 2026-08-23

Shadcn-vue MCP 服务器是一个强大的AI驱动工具，它通过自然语言描述帮助开发者即时创建美观、现代的UI组件。它集成了shadcn-vue组件库和tailwindcss，并无缝连接主流IDE，提供简化的UI开发工作流程。

开发者工具

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

{
  "mcpServers": {
    "shadcn-vue-mcp": {
      "args": [
        "-y",
        "@smithery/cli@latest",
        "run",
        "@HelloGGX/shadcn-vue-mcp",
        "--key",
        "your api key",
        "--profile",
        "parental-gayal-aplQPT"
      ],
      "command": "npx"
    }
  }
}

服务介绍

一个强大的 AI 代理工具，可以帮助开发者即时创建高质量的 UI 组件

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中像这样配置：

json
{
"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: 生成代码如下:

UI Component Example

用户: /check

AI: alt text

AI: 生成代码如下:

🤝 贡献指南

我们欢迎所有形式的贡献！您可以通过以下方式帮助我们改进 @agent/shadcn-vue：

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

源代码在 GitHub 上开源。

👥 社区与支持

Discord Community - 加入我们活跃的社区

📝 许可证

根据 Apache 2.0 许可证授权。

查看源码项目主页