Skip to main content
Glama
elimyliu

TimeVerse HyperFrames MCP

by elimyliu
OverviewSchemaRelated ServersScoreDiscussions
Python
Local

TimeVerse HyperFrames MCP

将 HyperFrames CLI（HTML/CSS/JS 转视频渲染引擎）包装为 MCP 工具服务，让 AI Agent 可以直接：

  • 创建/初始化视频项目

  • 实时预览 HTML 视频（热重载）

  • 渲染为 MP4/WebM

  • 检查语法完整性

  • 文本转语音 / 音频转录

  • 检测运行环境、性能基准测试

架构概览

MCP 客户端（如 TimeVerseStudio）
        │  (stdio 协议)
        ▼
┌─────────────────────────────────────┐
│       server.py (FastMCP)           │
│  ┌─ 后台预热 npx 缓存（首次启动）   │
│  └─ 注册 13 个 MCP 工具              │
└────────────┬────────────────────────┘
             │
    ┌────────┼────────────┬──────────┐
    ▼        ▼            ▼          ▼
  init.py  render.py  media.py   system.py
  lint.py  preview.py
             │
             ▼
┌─────────────────────────────┐
│  cli_executor.py             │
│  ┌─ 优先全局 hyperframes    │
│  │  回退 npx hyperframes    │
│  ├─ 超时/错误处理           │
│  └─ 环境检测 / lint 解析    │
└────────────┬────────────────┘
             │
             ▼
    hyperframes CLI (npx)

Related MCP server: mcp-manimgl

前置依赖

依赖

要求

安装

Python

>= 3.11

brew install python@3.11

Node.js

>= 22

nodejs.org

FFmpeg

任意版本

macOS: brew install ffmpeg / Ubuntu: sudo apt install ffmpeg

HyperFrames

自动通过 npx 获取

无需手动安装

首次运行时会自动通过 npx 下载 hyperframes 包（约 30-60 秒），后续缓存到本地。

可选优化：全局安装 hyperframes 可跳过 npx 下载步骤：

npm install -g hyperframes

安装

方式一：pip 安装（推荐）

pip install -e .

安装后可直接运行：

timeverse-hyperframes-mcp

方式二：uvx 运行（无需安装）

需要先安装 uv：

# macOS / Linux
curl -LsSf https://astral.sh/uv/install.sh | sh

# 直接通过 uvx 运行（自动下载依赖并缓存）
uvx timeverse-hyperframes-mcp

方式三：python -m

python -m timeverse_hyperframes_mcp.server

注册到 MCP 客户端

TimeVerseStudio

在 MCP 设置页面点击 JSON 导入，填入以下内容：

{
  "mcpServers": {
    "hyperframes": {
      "description": "HyperFrames MCP — 将 HTML/CSS/JS 渲染为 MP4 视频。支持 init / preview / render / lint / TTS / transcribe",
      "command": "uvx",
      "args": ["timeverse-hyperframes-mcp"]
    }
  }
}

或通过 API 创建：

{
  "name": "hyperframes",
  "server_type": "local",
  "transport": "stdio",
  "command": "uvx",
  "args": "timeverse-hyperframes-mcp",
  "description": "HyperFrames MCP — 将 HTML/CSS/JS 渲染为 MP4 视频"
}

完整示例见 examples/timeverse-integration.json。

其他 MCP 客户端（如 Claude Desktop、Cline 等）

使用相同的 stdio 配置：

  • 命令: uvx timeverse-hyperframes-mcp 或 timeverse-hyperframes-mcp

  • 传输协议: stdio

可用工具（共 13 个）

项目初始化

工具

对应 CLI

参数

说明

hyperframes_init

npx hyperframes init

project_name (必填), template, video_path, audio_path, parent_dir

创建视频项目，支持 9 种模板

hyperframes_list_templates

—

无参数

列出所有模板及中文描述

支持模板：blank（空白）、warm-grain（暖色颗粒）、play-mode（Play 模式）、swiss-grid（瑞士网格）、vignelli（Vignelli 风格）、decision-tree（决策树）、kinetic-type（动态文字）、product-promo（产品宣传）、nyt-graph（纽约时报数据可视化）

视频渲染

工具

对应 CLI

参数

说明

hyperframes_render

npx hyperframes render

output, fps(24/30/60), quality(draft/standard/high), format(mp4/webm), composition, workers(1-8/auto), gpu, docker, strict, strict_all

渲染为 MP4/WebM，支持 GPU 加速和 Docker 可重现构建

  • webm 格式支持透明背景

  • 渲染超时默认 10 分钟

实时预览

工具

对应 CLI

参数

说明

hyperframes_preview

npx hyperframes preview

project_dir, port(默认 3002)

启动本地预览服务，热重载，编辑 HTML 即时更新

语法检查

工具

对应 CLI

参数

说明

hyperframes_lint

npx hyperframes lint

project_dir, verbose, json_output

检查 data-composition-id、track 重叠、timeline 注册等问题

媒体处理

工具

对应 CLI

参数

说明

hyperframes_tts

npx hyperframes tts

text (必填), voice, output, project_dir

文本转语音，生成配音文件

hyperframes_list_voices

npx hyperframes tts --list

project_dir

列出所有可用 TTS 语音角色（如 af_nova, bf_emma）

hyperframes_transcribe

npx hyperframes transcribe

input_path (必填), model(tiny/base/small/medium/large), language, output_format, project_dir

音频/视频转录为字幕

系统管理

工具

对应 CLI

参数

说明

hyperframes_doctor

npx hyperframes doctor

project_dir

检测 Node.js / npx / FFmpeg 环境，给出安装指引

hyperframes_info

npx hyperframes info

project_dir

获取 HyperFrames 版本和环境详情

hyperframes_upgrade

npx hyperframes upgrade

check_only, json_output

检查是否有新版本

hyperframes_compositions

npx hyperframes compositions

project_dir

列出项目中的 composition 文件

hyperframes_benchmark

npx hyperframes benchmark

composition, project_dir

运行渲染性能基准测试

典型工作流

flowchart LR
    A[hyperframes_init] --> B[hyperframes_lint]
    B --> C[hyperframes_preview]
    C --> D[修改 HTML/CSS/JS]
    D --> B
    B --> E[hyperframes_render]

  1. 创建项目: hyperframes_init(project_name="my-video", template="kinetic-type")

  2. 语法检查: hyperframes_lint(project_dir="my-video")

  3. 实时预览: hyperframes_preview(project_dir="my-video") → 浏览器中编辑 HTML 即改即现

  4. 迭代: 修改 HTML → lint → 预览验证

  5. 渲染: hyperframes_render(project_dir="my-video", quality="high") → 输出 MP4

环境变量

变量

说明

默认值

HYPERFRAMES_WORKSPACE_DIR

视频项目工作目录

当前工作目录

特性

  • 智能命令解析：优先使用全局安装的 hyperframes，回退到 npx hyperframes

  • 后台预热：服务器启动时自动在后台下载 hyperframes npm 缓存，首次调用更快

  • 友好错误提示：命令超时或环境缺失时给出清晰的修复指引

  • JSON 结构化输出：lint 结果支持 JSON 格式，便于 AI 解析

常见问题

Q: 首次运行很慢？ 首次运行需要 npx 下载 hyperframes 包（约 30-60 秒），后续会缓存。也可以先全局安装 npm install -g hyperframes 跳过 npx 过程。

Q: 提示"未找到 npx"？ 确认已安装 Node.js >= 22。

Q: 渲染失败？ 先运行 hyperframes_doctor 检测环境是否完整，再运行 hyperframes_lint 检查语法。

开发者

This server cannot be installed

F
license - not found
-
quality - not tested
A
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
0dRelease cycle
4Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/elimyliu/timeverse-hyperframes-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server