阴影中文 Vue MCP

Name: 阴影中文 Vue MCP
Author: HelloGGX

作者：HelloGGX104 星标更新：2025-11-16

项目介绍

一款强大的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 集成，实现无缝工作流。
- 支持 Trae 的高级AI驱动开发。
- 支持 VSCode 的强大编码体验。
- VSCode + Cline 集成（测试版），增强协作。
现代组件库：
- 基于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。降级或升级到推荐版本是最好的解决方案。

快速安装：URL快速安装copilot

首先，您需要从Smithery服务中获取包含个人凭证的独特连接URL。访问 shadcn-vue-mcp页面。

步骤1. 点击页面上的生成URL按钮：

系统会为您生成一个独特的URL，其中包含用于身份验证的API密钥。复制这个完整的URL。

步骤2. 打开vscode，打开copilot并选择Agent模型，然后将您刚刚获得的URL添加到IDE的MCP配置文件中。

在您的IDE项目中，找到或创建名为mcp.json的配置文件。
将以下JSON对象添加或合并到该文件的servers字段中。

步骤3：对于vscode IDE，选择添加服务器

步骤4：选择HTTP（HTTP或Server-Sent Events）

步骤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: ~/.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组件示例

用户：/check

AI： alt text

AI：生成的代码如下：

🤝 贡献指南

我们欢迎任何形式的贡献！您可以帮助我们改进@agent/shadcn-vue：

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

源代码在GitHub上开源。

👥 社区和支持

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

📝 许可证

本项目根据Apache 2.0许可证授权。