使用说明

项目简介

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 组件库。

安装步骤

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

配置 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'，并且网络连接正常。

重启 Cursor: 关闭并重新打开 Cursor IDE，使配置生效。
验证: 在 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 组件信息，并将结果返回给你。

Magic UI MCP Server

使用说明

项目简介

主要功能点

安装步骤

基本使用方法

服务器信息