关键词

UI生成ShadcnVueTailwind CSSAI辅助开发前端组件

项目简介

ShadcnVue MCP 服务器是一个强大的 AI 驱动工具，旨在帮助开发者通过自然语言描述快速创建美观、现代的 UI 组件。它深度集成 shadcn-vue 组件库和 tailwindcss，并通过 Model Context Protocol (MCP) 标准与主流 IDE 或 AI 客户端无缝连接，提供简化的 UI 开发流程。

主要功能点

  • AI 驱动的 UI 生成： 只需用自然语言描述你想要的 UI 组件，服务器即可调用 AI 模型生成符合 ShadcnVue 和 Tailwind CSS 标准的代码。
  • 智能文档查询： 提供工具查询特定 ShadcnVue 组件的使用方法或完整文档。
  • 组件代码优化： 允许用户通过自然语言描述对现有代码进行增强、优化，例如改进响应式布局或可访问性。
  • 多 IDE 支持： 设计上支持与多种兼容 MCP 协议的 IDE 或 AI 客户端集成（如 Cursor, Trae, VSCode + Cline 等）。
  • 利用外部 LLM 能力： 通过 OpenRouter 等服务连接大型语言模型，实现代码生成和优化的智能功能。

安装步骤

  1. 安装 Node.js： 确保你的系统安装了 Node.js 22 或以上版本。
  2. 获取 API 密钥： 访问 OpenRouter 注册账号，获取 'OPENROUTER_API_KEY'，并选择一个可用的模型获取其 'OPENROUTER_MODEL_ID'。这些是服务器连接 AI 模型所必需的。
  3. 安装并配置：
    • 方法一：使用 Smithery CLI (推荐) 打开终端，运行以下命令（根据你使用的客户端替换 '--client' 参数）： 
      npx -y @smithery/cli@latest install @HelloGGX/shadcn-vue-mcp --client vscode
      支持的客户端包括：'cursor', 'windsurf', 'cline', 'claude', 'vscode', 'vscode-insiders'。
    • 方法二：手动配置 AI 客户端 大多数支持 MCP 的 AI 客户端都需要一个配置文件（通常是 JSON 格式），你需要在该文件中添加 ShadcnVue MCP 服务器的配置信息。配置文件的位置因客户端而异，常见的有：
      • Cursor: '~/.cursor/mcp.json'
      • Trae: '~/.Trae/mcp.json'
      • Cline: '~/.cline/mcp_config.json'
      • Claude: '~/.claude/mcp_config.json' 请参考下一节“服务器配置”来了解需要添加到配置文件中的信息。

服务器配置

作为 MCP 服务器，'shadcn-vue-mcp' 是一个独立的进程，由 MCP 客户端（如你的 IDE 或 AI 应用）根据需要启动和管理。客户端需要知道如何启动这个服务器进程。通常，这需要你在客户端的 MCP 配置文件中添加一个条目，指定服务器的名称、启动命令及其参数。

你需要添加到客户端配置中的信息通常如下所示：

  • 服务器名称 (server name): 用于在客户端中唯一标识此服务器，例如 '"shadcn-vue"'。
  • 启动命令 (command): 启动服务器的可执行命令，通常是 '"npx"'。
  • 命令参数 (args): 传递给启动命令的参数列表，用于指定运行哪个包及其选项，例如 '["-y", "@agent/shadcn-vue"]'。
  • 环境变量 (env): 服务器运行时需要的环境变量，特别是连接 OpenRouter 的密钥和模型 ID。你需要在此处设置：
    • 'OPENROUTER_MODEL_ID': 你选择的 OpenRouter 模型 ID。
    • 'OPENROUTER_API_KEY': 你的 OpenRouter API Key。

具体的配置格式和位置请查阅你使用的 MCP 客户端的文档。手动配置的示例展示了这些关键信息及其结构。

基本使用方法

安装并配置好 MCP 服务器与你的 AI 客户端连接后，你可以在客户端中通过与 MCP 服务器交互来使用其功能。

  1. 启动服务器： 通常由 MCP 客户端根据配置信息自动启动。
  2. 发送命令/消息： 在客户端的对话界面或特定功能入口，输入与服务器工具对应的指令。例如：
    • 创建 UI 组件： 使用 '/ui' 前缀加上你对组件的描述。示例：'/ui create a navigation bar component'
    • 优化现有代码： 使用 '/refine' 前缀加上你的优化需求，并提供需要优化的文件路径和上下文。示例：'/refine optimize the navbar's responsiveness and accessibility'
    • 查询文档： 使用 '/usedoc' 或 '/doc' 前缀加上组件名称。示例：'/usedoc button'
  3. 接收结果： 服务器会处理你的请求，调用 AI 模型生成或优化代码，然后将结果（通常是代码片段或文档文本）通过 MCP 协议返回给客户端，并在客户端界面展示。

信息

分类

AI与计算

访问项目