关键词

UI组件库组件信息代码示例CursorMagic UI

使用说明

项目简介

Magic UI MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，专为 Magic UI 组件库设计。它旨在为支持 MCP 协议的 AI 助手（如 Cursor）提供关于 Magic UI 组件的上下文信息，包括组件列表、详细信息、代码示例等。通过这个服务器，AI 助手可以更好地理解和操作 Magic UI 组件，从而辅助开发者更高效地使用该组件库。

主要功能点

  • 组件信息查询: 提供 Magic UI 组件的全面列表，方便 AI 助手了解所有可用组件。
  • 组件细节获取: 可以获取特定 Magic UI 组件的实现细节和代码示例，包括核心组件、特效组件、动画组件、文本组件、按钮组件和背景组件等多个类别。
  • AI 助手集成: 无缝集成到支持 MCP 协议的 AI 助手（如 Cursor），让 AI 助手能够理解和利用 Magic UI 组件库。

安装步骤

  1. 安装 Cursor (或 Claude Desktop): 确保你的开发环境中安装了 Cursor IDE 或 Claude Desktop，这些工具支持 MCP 协议，可以与 MCP 服务器交互。

  2. 配置 MCP 服务器: 你需要告诉 Cursor 如何运行 Magic UI MCP Server。

    • 找到 MCP 配置文件。通常位于：
      • macOS/Linux: '~/.cursor/mcp.json'
      • Windows: '%USERPROFILE%.cursor\mcp.json'
    • 编辑 'mcp.json' 文件。
      • 如果文件不存在或为空: 创建文件并添加以下内容： 
        {
  "mcpServers": {
    "magicui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp"
      ]
    }
  }
}
      • 如果文件已存在且包含其他服务器配置: 在 'mcpServers' 对象中添加 'magicui-mcp' 配置块： 
        {
  "mcpServers": {
    // ... 其他服务器配置 ...
    "magicui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp"
      ]
    }
  }
}
        配置参数说明:
        • 'server name': 'magicui-mcp' - 服务器名称，用于在 MCP 客户端中标识和引用。
        • 'command': 'npx' - 用于执行 Node.js 包的命令，这里用于运行 npm 包。
        • 'args': '["-y", "@magicuidesign/mcp"]' - 传递给 'npx' 的参数：
          • '-y': 自动确认执行 'npx' 安装包的提示。
          • '@magicuidesign/mcp': 要执行的 npm 包名称，即 Magic UI MCP Server。
        • 注意: 此配置依赖 'npx' 能够成功获取并运行最新发布的 '@magicuidesign/mcp' 包。请确保你的环境中已安装 'npx'，并且网络连接正常。

  3. 重启 Cursor: 关闭并重新打开 Cursor IDE，使配置生效。

  4. 验证: 在 Cursor 的 AI 聊天界面或 MCP 状态指示器中，查找 Magic UI 相关的工具，例如 'getUIComponents'、'getComponents' 等。如果这些工具可用，则表示 Magic UI MCP Server 已成功集成。

基本使用方法

配置完成后，你可以在 Cursor 中通过自然语言指令调用 Magic UI MCP Server 提供的工具，例如：

  • 列出所有 Magic UI 组件: 在 Cursor 中提问：'List all Magic UI components using the getUIComponents tool.'
  • 获取 Marquee 组件的实现细节: 在 Cursor 中提问：'Show me the implementation details for the Magic UI Marquee component using the getComponents tool.'
  • 获取 Neon Gradient Card 特效的代码: 在 Cursor 中提问：'Get the code for the Neon Gradient Card effect from Magic UI.'

AI 助手会解析你的问题，并调用相应的 MCP 工具来获取 Magic UI 组件信息，并将结果返回给你。

信息

分类

开发者工具

访问项目