MCP Magic UI
2025.03.07
7
TypeScriptUI 组件管理开发工具开发效率
MCP Magic UI 是一个基于 Model Context Protocol (MCP) 的服务器，用于访问和探索 Magic UI 组件库。它从 Magic UI 的 GitHub 仓库中获取组件数据，进行分类，并通过 MCP API 提供访问。这使得 AI 助手和其他 MCP 客户端能够轻松发现和使用 Magic UI 组件。
View on GitHub
Overview
基本能力
产品定位
MCP Magic UI 是一个用于访问和管理 Magic UI 组件的 MCP 服务器，旨在提高开发效率和组件复用性。
核心功能
- 组件发现：通过 MCP 工具访问所有 Magic UI 组件
- 组件分类：基于组件名称和依赖关系自动分类
- 缓存系统：本地缓存组件数据以减少 GitHub API 调用并支持离线使用
- 多种传输选项：支持 stdio 和 HTTP 传输方法
- 回退机制：当 GitHub API 不可用时提供模拟数据
适用场景
- 开发人员需要快速查找和使用 Magic UI 组件
- AI 助手需要集成 Magic UI 组件以增强功能
- 团队需要集中管理和复用 UI 组件
工具列表
get_all_components：获取所有可用的 Magic UI 组件及其元数据get_component_by_path：通过文件路径获取特定组件的源代码
常见问题解答
- 如何避免 GitHub API 速率限制？：设置 GitHub 个人访问令牌并配置在
.env文件中 - 如何离线使用？：服务器会缓存组件数据，支持离线访问
- 如何切换传输方式？：通过
TRANSPORT_TYPE环境变量切换 stdio 或 HTTP 传输
使用教程
使用依赖
确保已安装 Node.js 和 npm。
安装教程
# 克隆仓库
git clone https://github.com/idcdev/mcp-magic-ui.git
cd mcp-magic-ui
# 安装依赖
npm install
# 构建项目
npm run build
配置
- 在 https://github.com/settings/tokens 创建 GitHub 个人访问令牌
- 在项目根目录创建
.env文件（或从.env.example复制） - 在
.env文件中添加令牌：
GITHUB_TOKEN=your_github_token_here
启动服务器
# 使用 stdio 传输（默认）
npm start
# 使用 HTTP 传输
TRANSPORT_TYPE=http npm start
连接服务器
使用 MCP 客户端连接服务器，例如使用 MCP Inspector：
npx @modelcontextprotocol/inspector mcp-magic-ui
或使用 HTTP 传输：
npx @modelcontextprotocol/inspector http://localhost:3000