Integrations
Fetches component data from the Magic UI GitHub repository, using the GitHub API to access and cache component source code. Supports authentication via personal access tokens to avoid rate limits.
Provides access to Magic UI components from the magicuidesign/magicui repository, allowing discovery, categorization, and retrieval of component source code for use in applications.
MCP 魔法用户界面
用于从magicuidesign/magicui存储库访问和探索 Magic UI 组件的 MCP(模型上下文协议)服务器。
什么是 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 不可用时提供模拟数据
安装
配置
为了避免 GitHub API 速率限制,建议设置 GitHub 个人访问令牌:
- 在https://github.com/settings/tokens创建令牌
- 在项目根目录中创建一个
.env
文件(或从.env.example
复制) - 将您的令牌添加到
.env
文件:
用法
启动服务器
您可以使用 stdio 或 HTTP 传输启动服务器:
连接到服务器
您可以使用任何 MCP 客户端连接到服务器。例如,使用 MCP Inspector:
或者,如果使用 HTTP 传输:
可用工具
该服务器提供以下 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 传输连接到服务器
贡献
欢迎贡献!以下是一些您可以贡献的方式:
- 通过创建问题来报告错误并建议功能
- 改进文档
- 提交包含错误修复或新功能的拉取请求
执照
麻省理工学院
This server cannot be installed
提供对 Magic UI 组件的访问的模型上下文协议服务器,允许 AI 助手和其他 MCP 客户端发现和使用来自 Magic UI 设计系统的 UI 组件。