mcp-server

hyperframes: Render Video

Name: hyperframes: Render Video
Author: heygen-com

Get HTML and video rendering with hyperframes, built for agents, ideal.

48,203 stars4,420 forksTypeScriptGuide quality 9/10Updated 9/9/2026100% free · open source

What it does

Hyperframes is a tool that allows you to write HTML and render it as video, specifically designed for use with agents

When to use it

•Creating interactive video content for customer support
•Generating video explanations for complex technical topics
•Building immersive video experiences for marketing campaigns

Ready-to-paste prompt

hyperframes --input src/index.html --output dist/video.mp4

Heads up: Ensure you have Node.js and npm installed on your system, as Hyperframes is built with TypeScript and relies on these dependencies to function

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

⚡ Runs out of the box

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/hyperframes && curl -fsSL https://workflowstacks.com/api/skills/hyperframes/claude-skill -o ~/.claude/skills/hyperframes/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How hyperframes: Render Video works

Codeflow

Free to inspect

Hyperframes: Render Video is a very large TypeScript project (~695k lines across 2926 code files, plus 20 test files). You install it into your AI tool with one command; there is nothing to run yourself. Last commit this month, Apache-2.0 license, has a test suite.

Size

Very large codebase

~695k lines · 2926 code files · days to read — use, don't read

Setup

Install as a skill / plugin

Add it to Claude Code (or your AI tool) with one command — 32 skills inside. Nothing to run yourself.

Runs on

Inside your AI tool

Helper scripts use Node.js · needs API keys

TypeScript 89%JavaScript 10%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
AGENTS.md
The instructions the AI actually follows
3
.env.example
The API keys and settings you must provide
4
skills/embedded-captions/SKILL.md
Inside skills/ — an example of what the AI is told to do
5
examples/aws-lambda/.gitignore
A worked example — copy this to get going

What's in each folder

skills/Prompts, skills & agent definitions903 files

packages/Sub-packages / plugins3256 files

docs/Documentation1034 files

examples/Examples you can copy34 files

registry/Folder1343 files

releases/Folder171 files

scripts/Helper scripts79 files

plans/Folder8 files

READMEHas testsDocumentedCI checksExamples includedApache-2.0 licenseUpdated this month

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

⚡ Runs out of the box

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/hyperframes && curl -fsSL https://workflowstacks.com/api/skills/hyperframes/claude-skill -o ~/.claude/skills/hyperframes/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

heygen-com

Language

TypeScript