项目简介

Magic UI MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在为 LLM 客户端（如 Cursor 等代码编辑器）提供关于 Magic UI 组件的上下文信息。通过此服务器，AI 助手可以理解 Magic UI 组件库，并帮助开发者更有效地使用 Magic UI 组件。

主要功能点

组件列表查询: 提供 Magic UI 组件的完整列表，方便 LLM 了解可用的 UI 组件。
组件详情获取: 检索特定 Magic UI 组件的实现细节和代码示例，帮助 LLM 理解组件的使用方法和属性。
多类别组件支持: 支持多种组件类别，包括核心组件、特效组件、动画组件、文本组件、按钮组件和背景组件。
与 MCP 客户端集成: 通过标准的 MCP 协议与客户端通信，例如 Cursor 代码编辑器，实现无缝集成。

安装步骤

安装 Cursor (或其他 MCP 客户端): 确保您已安装 Cursor 代码编辑器或任何支持 MCP 协议的客户端。

配置 MCP 服务器: 配置您的 MCP 客户端以连接到 Magic UI MCP Server。对于 Cursor，您需要编辑 'mcp.json' 配置文件。

找到 'mcp.json' 文件: 在 macOS/Linux 上，通常位于 '~/.cursor/mcp.json'。在 Windows 上，可能位于 '%USERPROFILE%.cursor\mcp.json'。如果文件不存在，请创建它。

编辑 'mcp.json' 文件: 根据文件内容进行编辑。

如果文件不存在或为空: 添加以下 JSON 内容：

{
  "mcpServers": {
    "magicui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp"
      ]
    }
  }
}

如果文件已存在且包含其他服务器: 将 'magicui-mcp' 块添加到现有的 'mcpServers' 对象中：

{
  "mcpServers": {
    // ... 其他服务器可能已存在 ...
    "magicui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp"
      ]
    }
  }
}

重启 Cursor: 关闭并重新打开 Cursor 以应用配置更改。

服务器配置

要将 Magic UI MCP Server 集成到 MCP 客户端，您需要配置客户端以启动和连接到此服务器。以下是配置信息示例 (JSON 格式)，通常在客户端的 MCP 配置文件中设置 (例如 Cursor 的 'mcp.json')：

{
  "server name": "magicui-mcp", //  服务器名称，用于在客户端中标识和引用
  "command": "npx",          //  启动服务器的命令，这里使用 npx 运行 npm 包
  "args": [                   //  传递给命令的参数列表
    "-y",                    //  npx 的参数，表示自动安装包而无需确认
    "@magicuidesign/mcp"     //  要运行的 npm 包名称，即 Magic UI MCP Server
  ]
}

基本使用方法

配置完成后，您可以在 MCP 客户端中使用预定义的工具来查询 Magic UI 组件信息。例如，在 Cursor 的 AI 聊天界面中，您可以提问：

"使用 'getUIComponents' 工具列出所有 Magic UI 组件。"
"使用 'getComponents' 工具展示 Magic UI Marquee 组件的实现细节。"
"获取 Magic UI 中 Neon Gradient Card 特效的代码。"

您可以使用提供的各种工具（如 'getUIComponents', 'getComponents', 'getDeviceMocks' 等）来探索和获取不同类别的 Magic UI 组件信息。工具的具体名称和功能请参考仓库的 README 文档或服务器提供的能力声明。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息