MCP Magic UI

一个 MCP (模型上下文协议) 服务器，用于访问和探索来自 magicuidesign/magicui 仓库的 Magic UI 组件。

什么是 MCP Magic UI？

MCP Magic UI 是一个实现了模型上下文协议 (MCP) 的服务器，用于提供对 Magic UI 组件的访问。它从 Magic UI GitHub 仓库获取组件数据，对其进行分类，并通过 MCP API 使其可用。这允许 AI 助手和其他 MCP 客户端在其应用程序中轻松发现和使用 Magic UI 组件。

特性

• 组件发现: 通过 MCP 工具访问所有 Magic UI 组件
• 组件分类: 组件根据其名称和依赖关系自动分类
• 缓存系统: 组件数据的本地缓存，以减少 GitHub API 调用并支持离线工作
• 多种传输选项: 支持 stdio 和 HTTP 传输方法
• 回退机制: 当 GitHub API 不可用时，提供模拟数据

安装

# 克隆仓库
git clone https://github.com/idcdev/mcp-magic-ui.git
cd mcp-magic-ui

# 安装依赖
npm install

# 构建项目
npm run build

配置

为了避免 GitHub API 速率限制，建议设置一个 GitHub 个人访问令牌：

1. 在 https://github.com/settings/tokens 创建一个令牌
2. 在项目根目录中创建一个 .env 文件（或从 .env.example 复制）
3. 将您的令牌添加到 .env 文件：

GITHUB_TOKEN=your_github_token_here

使用

启动服务器

您可以使用 stdio 或 HTTP 传输启动服务器：

# 使用 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

可用工具

服务器提供以下 MCP 工具：

• get_all_components - 获取所有可用的 Magic UI 组件及其元数据的列表
• get_component_by_path - 按文件路径获取特定组件的源代码

项目结构

• src/ - 源代码

  • index.ts - 服务器的主要入口点
  • cli.ts - 命令行界面
  • server.ts - MCP 服务器配置和工具定义
  • services/ - 服务模块
    • github.ts - GitHub API 交互和缓存
    • component-parser.ts - 组件分类和处理

• cache/ - 组件数据的本地缓存

• dist/ - 编译后的 JavaScript 代码

工作原理

1. 服务器从 Magic UI GitHub 仓库获取组件数据
2. 组件数据缓存在本地，以减少 API 调用并启用离线使用
3. 组件根据其名称和依赖关系进行分类
4. 服务器公开 MCP 工具以访问和搜索组件
5. 客户端可以使用 stdio 或 HTTP 传输连接到服务器

贡献

欢迎贡献！以下是一些您可以贡献的方式：

• 通过创建 issue 报告错误和建议功能
• 改进文档
• 提交包含错误修复或新功能的 pull request

许可证

MIT