MCP Magic UI

MCP Magic UI

一个用于访问和浏览 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 不可用时提供模拟数据

安装

# 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 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 报告错误或建议功能
• 改进文档
• 提交包含错误修复或新功能的拉取请求

许可证

MIT