shadcn-vue-mcp

<div align="center"> <a href="https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp"> <img src="https://github.com/HelloGGX/tailwindcss-mcp/raw/fast-agent/docs/logo1.png" alt="shadcnVue MCP Logo" max-height="450"> </a> <br /> 一个强大的 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://github.com/HelloGGX/shadcn-vue-mcp/blob/main/LICENSE) [](https://github.com/HelloGGX/shadcn-vue-mcp/graphs/contributors) [](https://mseep.ai/app/helloggx-shadcn-vue-mcp) Shadcn-vue MCP Server 是一个强大的 AI 驱动工具，可帮助开发人员通过自然语言描述即时创建美观、现代的 UI 组件。它集成了 shadcn-vue 组件库和 tailwindcss，与主流 IDE 无缝连接，并提供简化的 UI 开发工作流程。 <div align="center"> 🌐 可用语言: <a href="../README.md"><img src="https://img.shields.io/badge/docs-English-blue" alt="English document"></a> </div> </div> ## ❌ 没有 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](https://cursor.com) IDE** 集成，实现无缝工作流。 - **[Trae](https://www.trae.ai/)** 支持，用于先进的 AI 驱动开发。 - **[VSCode](https://code.visualstudio.com/)** 支持，提供强大的编码体验。 - **[VSCode + Cline](https://cline.bot)** 集成（测试版），用于增强协作。 - **现代化的组件库**: - 基于 **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 页面](https://smithery.ai/server/@HelloGGX/shadcn-vue-mcp)。 **第 1 步：** 在页面上点击“Generate URL”（生成 URL）按钮： <img src="https://raw.githubusercontent.com/HelloGGX/shadcn-vue-mcp/fast-agent/docs/url.png" width="700" > 系统将为您生成一个唯一的 URL，其中包含用于身份验证的 API 密钥。请复制这整个 URL。 **第 2 步：** 打开 VSCode, 启动 Copilot 并选择 Agent 模型。接下来，将您刚刚获取的 URL 添加到您 IDE 的 MCP 配置文件中。 1. 在您的 IDE 项目中，找到或创建一个名为 `mcp.json` 的配置文件。 2. 将以下 JSON 对象添加或合并到该文件的 `servers` 字段中。 **第 3 步：** 对于 VSCode IDE，选择“Add Server”（添加服务器） <img src="https://raw.githubusercontent.com/HelloGGX/shadcn-vue-mcp/main/docs/add_server.png" width="600"> **第 4 步：** 选择 HTTP (HTTP or Server-Sent Events) <img src="https://raw.githubusercontent.com/HelloGGX/shadcn-vue-mcp/main/docs/choose_mcp_type.png" width="600"> **第 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: 生成代码如下:  用户: /check AI:  AI: 生成代码如下: ## 🤝 贡献指南 我们欢迎所有形式的贡献！您可以通过以下方式帮助我们改进 `@agent/shadcn-vue`： - **报告错误：** 如果您发现错误，请在我们的 [GitHub 仓库](https://github.com/HelloGGX/shadcn-vue-mcp/issues)中创建一个问题。 - **建议增强功能：** 对新功能或改进有想法吗？通过创建问题让我们知道。 - **提交拉取请求：** 我们很乐意审查和合并拉取请求。在进行重大更改之前，请先打开一个问题来讨论您的想法。 源代码在 [GitHub](https://github.com/HelloGGX/shadcn-vue-mcp) 上开源。 ## 👥 社区与支持 - [Discord Community](https://discord.gg/82Kf65ut) - 加入我们活跃的社区 ## 📝 许可证 ## 根据 [Apache 2.0 许可证](./LICENSE) 授权。