金大哥 - mcp-magic-ui MCP 详情

article

README

🚀 MCP 魔法 UI 服务器

MCP 魔法 UI 服务器实现了模型上下文协议 (MCP)，可用于访问和探索 magicuidesign/magicui 仓库中的 Magic UI 组件，为 AI 助手和其他 MCP 客户端提供便利。

🚀 快速开始

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

在 https://github.com/settings/tokens 创建一个令牌。
在项目根目录中创建一个 .env 文件（或复制自 .env.example）。
将你的令牌添加到 .env 文件中：

GITHUB_TOKEN=your_github_token_here

使用方法

启动服务器

你可以使用 stdio 或 HTTP 传输启动服务器：

# 使用默认的 stdio 传输
npm start

# 使用 HTTP 传输
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 - 根据文件路径获取特定组件的源代码。

mcp-magic-ui