MCP魔术用户界面
MCP（模型上下文协议）服务器，用于访问和探索来自 魔术设计/魔术 存储库。
什么是MCP Magic UI？
MCP Magic UI是一个实现模型上下文协议（MCP）的服务器，用于提供对Magic UI组件的访问。它从MagicUIGitHub存储库中获取组件数据，对它们进行分类，并通过MCP API使它们可用。这使得AI助手和其他MCP客户端可以在他们的应用程序中轻松发现和使用Magic UI组件。
特性
- 组件发现：通过MCP工具访问所有Magic UI组件
- 组件分类：组件会根据其名称和依赖关系自动分类
- 缓存系统：本地缓存组件数据以减少GitHub API调用并离线工作
- 多种运输方式：支持stdio和HTTP传输方法
- 回退机制：当GitHub API不可用时提供模拟数据
安装
# Clone the repository
git clone https://github.com/idcdev/mcp-magic-ui.git
cd mcp-magic-ui
# Install dependencies
npm install
# Build the project
npm run build配置
为了避免GitHub API速率限制，建议设置一个GitHub个人访问令牌：
- 在以下位置创建令牌https://github.com/settings/tokens
- 创建一个
.env项目根目录中的文件（或从中复制.env.example) - 将您的令牌添加到
.env文件：
GITHUB_TOKEN=your_github_token_here用法
启动服务器
您可以使用stdio或HTTP传输启动服务器：
# Using stdio transport (default)
npm start
# Using HTTP transport
TRANSPORT_TYPE=http npm start连接到服务器
您可以使用任何MCP客户端连接到服务器。例如，使用MCP检查器：
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代码
运作原理
- 服务器从Magic UI GitHub存储库获取组件数据
- 组件数据缓存在本地，以减少API调用并允许脱机使用
- 组件根据其名称和依赖关系进行分类
- 服务器公开MCP工具以访问和搜索组件
- 客户端可以使用stdio或HTTP传输连接到服务器
贡献
欢迎投稿！以下是您可以做出贡献的一些方式：
- 通过创建问题报告错误并建议功能
- 改进文档
- 提交带有错误修复或新功能的拉取请求
许可证
麻省理工学院