项目简介

Magic UI MCP Server 是一个基于 Model Context Protocol (MCP) 的服务器实现，专为 Magic UI 组件库设计。它允许 LLM 客户端通过标准化的 MCP 协议，获取 Magic UI 组件库的各种组件信息和示例代码，从而辅助 LLM 理解和使用 Magic UI 组件。

主要功能点

• 提供 Magic UI 组件库的组件信息，包括组件名称、描述和实现代码。
• 支持按组件类别（如 Components, DeviceMocks, SpecialEffects 等）获取组件信息。
• 提供详细的组件示例代码，帮助理解组件的使用方法。
• 通过 MCP 协议与客户端通信，支持 JSON-RPC 和 Stdio 传输协议。

安装步骤

1. 确保已安装 Node.js 和 npm。
2. 克隆或下载此仓库的代码。
3. 在仓库根目录下，运行 'npm install' 安装依赖。

服务器配置

为了让 MCP 客户端连接到 Magic UI MCP Server，需要在客户端的 MCP 配置中添加以下 server 配置信息。请注意将 "MagicUI_MCP" 替换为你自定义的服务器名称。

{
  "mcpServers": {
    "MagicUI_MCP": { //  server name:  可以自定义，用于在客户端中标识该服务器
      "command": "npx", //  启动服务器的命令，这里使用 npx
      "args": ["@magicuidesign/mcp"] //  启动服务器的参数，这里运行 @magicuidesign/mcp 包
    }
  }
}

基本使用方法

配置完成后，在支持 MCP 协议的 LLM 客户端中，你可以使用自然语言指令，例如 “获取所有 Magic UI 组件列表” 或 “查询 marquee 组件的实现代码”。客户端会将这些指令转换为 MCP 请求发送到 Magic UI MCP Server。服务器会调用相应的工具（如 'getUIComponents' 或 'getComponents'），获取组件信息并返回给客户端。客户端根据返回的信息进行后续处理，例如展示组件列表或代码。