Uiverse MCP

Uiverse MCP 工具

English | 中文

一个基于FastMCP的代码提取工具 Uiverse.io（注：此名称可能为特定项目或平台的名称，直接翻译为“宇宙.io”并不具有实际意义，因此保持原样）支持从Uiverse网站提取适用于各种前端框架的组件代码。

特点/特性

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

支持的框架

• HTML/CSS（超文本标记语言/层叠样式表）
• React
• Vue
• Svelte（斯维尔特，或根据语境可译为“灵巧框架”等，但通常直接使用原名）
• 床

系统要求

• 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（在中文中通常不直接翻译，但可理解为“标准输入输出”相关库或函数的简写） 和 上海证券交易所请在您的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）中使用它：

Please extract HTML code from https://uiverse.io/Na3ar-17/evil-dragon-24

或者

Use React framework to extract code from https://uiverse.io/username/component-name

人工智能助手将自动呼叫 parse_and_extract 用于检索代码的工具。

项目结构

Uiverse_MPC/
├── app.py                  # FastMCP main application
├── browser.py              # HTML/CSS extractor
├── browser_React.py        # React extractor
├── browser_Vue.py          # Vue extractor
├── browser_Svelte.py       # Svelte extractor
├── browser_Lit.py          # Lit extractor
├── pyproject.toml          # Project configuration
├── build_exe.spec          # PyInstaller configuration
├── dist/                   # Executable output directory
│   └── 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 - 浏览器自动化

开发说明

本地运行

在标准I/O模式下运行：

uv run app.py

添加对新框架的支持

1. 创建一个新的 browser_.py 文件
2. 实施 extract__code(url: str) -> str 异步函数
3. 导入并添加到 _dispatch_extract 函数在 app.py
4. 更新 SUPPORTED_FRAMEWORKS 列表

许可证

请根据您的需求添加相应的许可信息。

贡献

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

联系

如有问题或建议，请通过“问题”板块提供反馈。