AI导哈

Magic UI组件访问服务

MCP Magic UI是一个实现模型上下文协议（MCP）的服务器，用于访问和探索Magic UI组件库中的组件，支持组件发现、分类和缓存功能。

  • by idcdev
  • TypeScript
  • 本地部署
  • 14 星标
  • 更新于
在 GitHub 查看 idcdev/mcp-magic-ui

使用说明

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个人访问令牌：

  1. 在以下位置创建令牌https://github.com/settings/tokens
  2. 创建一个 .env 项目根目录中的文件（或从中复制 .env.example)
  3. 将您的令牌添加到 .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代码

运作原理

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

贡献

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

  • 通过创建问题报告错误并建议功能
  • 改进文档
  • 提交带有错误修复或新功能的拉取请求

许可证

麻省理工学院

相关 MCP