MCP Magic UI

这是一个基于Model Context Protocol (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传输连接到服务器

贡献

欢迎贡献！这里有一些你可以贡献的方式：

• 创建问题报告错误或提出功能建议
• 改进文档
• 提交包含错误修复或新功能的拉取请求

许可证

MIT