Magic UI MCP Server

关键词

UI组件组件库代码示例设计工具前端开发

项目简介

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'），获取组件信息并返回给客户端。客户端根据返回的信息进行后续处理，例如展示组件列表或代码。

服务器信息

访问项目