Uiverse MCP 工具

<p align="center">English | <a href="README_zh.md">中文</a>

基于FastMCP的代码提取工具，用于Uiverse.io，支持从Uiverse网站提取多种前端框架的组件代码。

特性

• 🎨 支持多种前端框架的代码提取
• 🚀 基于FastMCP，支持stdio和SSE传输方法
• 🔧 易于集成到AI工作流程中
• 📦 使用Playwright进行网页内容提取

支持的框架

• HTML/CSS
• React
• Vue
• Svelte
• Lit

系统要求

• Python >= 3.12
• uv 包管理器

安装

1. 克隆或下载项目

git clone https://github.com/YBMecho/Uiverse_MCP.git
cd Uiverse_MPC

2. 安装依赖

使用uv安装依赖：

uv sync

3. 安装Playwright浏览器

uv run playwright install

配置

此工具支持两种MCP配置方法：stdio 和 SSE。请在您的MCP配置文件（如Cursor的mcp.json）中添加以下配置之一。

方法1：stdio配置（推荐）

{
  "mcpServers": {
    "uiverse-MCP-tool-stdio": {
      "name": "Uiverse MCP Tool",
      "type": "stdio",
      "description": "Uiverse MCP Tool",
      "isActive": true,
      "command": "uv",
      "args": [
        "--directory",
        "D:\\YBMecho\\Desktop\\Uiverse_MPC",
        "run",
        "app.py"
      ]
    }
  }
}

注意：请将D:\\YBMecho\\Desktop\\Uiverse_MPC替换为您实际的项目路径。

方法2：SSE配置

{
  "mcpServers": {
    "uiverse-MPC-tool-SSE": {
      "name": "Uiverse MCP Tool",
      "type": "sse",
      "description": "Uiverse MCP Tool",
      "isActive": true,
      "url": "http://127.0.0.1:8000/sse"
    }
  }
}

注意：在使用SSE方法之前，必须启动HTTP服务器。

使用

可用工具

1. parse_and_extract

从Uiverse链接中提取组件代码。

输入格式：<框架> <链接>

示例：

HTML https://uiverse.io/Na3ar-17/evil-dragon-24
React https://uiverse.io/username/component-name
Vue https://uiverse.io/username/component-name
Svelte https://uiverse.io/username/component-name
Lit https://uiverse.io/username/component-name

使用规则：

• 链接必须以https://uiverse.io/开头
• 链接必须包含特定的组件路径（不仅仅是域名）
• 框架名称不区分大小写

2. list_supported_frameworks

列出所有当前支持的框架。

返回值：支持的框架列表（Markdown格式）

与AI助手一起使用

配置完成后，您可以在支持MCP的AI助手（如Cursor）中直接使用它：

请从https://uiverse.io/Na3ar-17/evil-dragon-24提取HTML代码

或者

使用React框架从https://uiverse.io/username/component-name提取代码

AI助手会自动调用parse_and_extract工具来获取代码。

项目结构

Uiverse_MPC/
├── app.py                  # FastMCP主应用程序
├── browser.py              # HTML/CSS提取器
├── browser_React.py        # React提取器
├── browser_Vue.py          # Vue提取器
├── browser_Svelte.py       # Svelte提取器
├── browser_Lit.py          # Lit提取器
├── pyproject.toml          # 项目配置
├── build_exe.spec          # PyInstaller配置
├── dist/                   # 可执行文件输出目录
│   └── UiverseExtractor.exe
└── README.md

构建可执行文件

项目包括PyInstaller配置，用于构建独立的Windows可执行文件：

pyinstaller build_exe.spec

生成的UiverseExtractor.exe将位于dist/目录下。

依赖项

• mcp[cli] >= 1.16.0 - MCP协议支持
• fastmcp >= 2.0.0 - FastMCP框架
• playwright >= 1.55.0 - 浏览器自动化

开发说明

本地运行

在stdio模式下运行：

uv run app.py

添加对新框架的支持

1. 创建一个新的browser_<Framework>.py文件
2. 实现extract_<framework>_code(url: str) -> str异步函数
3. 在app.py中的_dispatch_extract函数中导入并添加它
4. 更新SUPPORTED_FRAMEWORKS列表

许可证

请根据需要添加适当的许可证信息。

贡献

欢迎提交问题和拉取请求！

联系方式

如有疑问或建议，请通过Issues提供反馈。