HyperFrames by HeyGen
What it does
Official HyperFrames by HeyGen: the best AI video editor in chat. Captions, motion graphics, MP4.
- Connects クラウドで動く
- Account or key Sign in to the service when you connect (OAuth)
- Category チャット・メール
インストール
使っているAIアプリを選んで、設定をコピーしてください。
チェック 5/5 合格 · 質問内容は提供元のサーバー（mcp.heygen.com）を通ります · ✓ コマンド確認済み 2026年11月14日
まず：どの AI を使っていますか？
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげます · 約 2 分
キー不要、インストール不要 · claude.ai かデスクトップアプリで一度設定すれば、チャットで使えます · 無料アカウントは 1 つまで · Team/Enterprise はオーナー（Owner）が追加
Claude の Connectors ページを開く
CustomizeConnectors
「Add」→「Custom」→「Web」を押し、この 2 つを入力
ここからコピーして Claude の同じ名前の欄に貼り付け、Continue を押します
Name · 名前HyperFrames by HeyGenRemote MCP server URL · アドレスhttps://mcp.heygen.com/mcp/hyperframes/Claude が検出したサインイン設定の画面で Continue を押す · Authentication は作者の説明どおり（Sign in now・Sign in when needed・No sign in）を選び Add を押します
チャットで有効にする
+ConnectorsHyperFrames by HeyGen
試してみる
HyperFrames by HeyGen を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が HyperFrames by HeyGen を使っていると言うか、回答に HyperFrames by HeyGen のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT との接続はプランしだい
フル MCP：Web 版 ChatGPT の Business・Enterprise・Edu · Pro：読み取り/取得の権限で接続、データを変えるツールは使えないことがあります · Plus：公式ドキュメントで未確認。プラグイン画面にカスタム MCP を追加する項目があれば試せます · Web のみ
Web 版 ChatGPT で MCP の追加ページを開く
Plugins+Add custom MCP server
名前とアドレスを入力
名前を入れ、Connection にアドレスを貼り付け、注意事項にチェックして Create as a plugin を押します
Name · 名前HyperFrames by HeyGenConnection · アドレスhttps://mcp.heygen.com/mcp/hyperframes/チャットで HyperFrames by HeyGen を選ぶ
新しいチャットを開き、入力前にプラグインの一覧から HyperFrames by HeyGen を選びます
試してみる
HyperFrames by HeyGen を使って、私に何ができるか教えて、1 つやってみせて✓ ChatGPT が HyperFrames by HeyGen を使っていると言うか、回答に HyperFrames by HeyGen のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に OpenAI のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Claude Code につなげます · 約 2 分
キー不要、インストール不要
ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
このコマンドを貼り付けて Enter
claude mcp add --transport http --scope user hyperframes https://mcp.heygen.com/mcp/hyperframes/Claude Code で /mcp と入力
HyperFrames by HeyGen が一覧にあり、接続済みと表示されれば OK です
試してみる
HyperFrames by HeyGen を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が HyperFrames by HeyGen を使っていると言うか、回答に HyperFrames by HeyGen のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげます · 約 2 分
キー不要、インストール不要
Cursor の AI チャットを Agent モードで開く
試してみる
HyperFrames by HeyGen を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が HyperFrames by HeyGen を使っていると言うか、回答に HyperFrames by HeyGen のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげます · 約 2 分
キー不要、インストール不要
VS Code の AI チャットを Agent モードで開く
試してみる
HyperFrames by HeyGen を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が HyperFrames by HeyGen を使っていると言うか、回答に HyperFrames by HeyGen のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください
Web 経由でつなぐアプリ用のアドレス
https://mcp.heygen.com/mcp/hyperframes/JSON 設定は下の「開発者向け」にあります
開発者向け：ターミナルのコマンドと JSON 設定
Web 経由
Claude Code
claude mcp add --transport http --scope user hyperframes https://mcp.heygen.com/mcp/hyperframes/Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"hyperframes": {
"url": "https://mcp.heygen.com/mcp/hyperframes/"
}
}
}VS Code (mcp.json)
{
"servers": {
"hyperframes": {
"type": "http",
"url": "https://mcp.heygen.com/mcp/hyperframes/"
}
}
}この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
ひと目でわかる
使えるアプリ
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
インターネット経由でつなげるアプリ
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
できること
このサーバーは、ツール一覧を表示する前にサインインを求めます。
基本チェックi
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月14日にチェック
- ✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント heygen-com で確認済みです
- ✓ 合格
今もメンテナンスされている
コードの最終更新：今日
- ✓ 合格
ライセンスがある
Apache-2.0を使用
- ✓ 合格
エンドポイントが応答する
120ミリ秒で応答（HTTP 401）
- ✓ 合格
OAuthでサインイン
OAuthでのサインインに対応しているため、AIアプリがログイン画面へ案内してくれます
- … 未チェック
ツールの説明に隠れた指示がない
まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります
話し合い
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
ユーザーレビュー
まだレビューはありません
チャット・メールのほかのサーバーとの比較i
- このカテゴリのほかの2028件のうち100%よりスターが多い
- このカテゴリのほかの2028件のうち100%より最近レジストリに公開
- 基本チェックの結果が、このカテゴリのほかの2028件のうち100%と同じかそれ以上
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
よくある質問
HyperFrames by HeyGenは安全ですか？
当てはまる基本チェック5項目のうち5項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
どんなキーやコードが必要ですか？
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
パソコンで動きますか、それともクラウドですか？
作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。
今もメンテナンスされていますか？
GitHubリポジトリの最終更新は今日、最新バージョン（1.0.0）がレジストリに届いたのは今日です。
どのアプリで使えますか？
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URL で接続するので、リモート MCP を受け付けるアプリでも使えます。例：Web 版 ChatGPT（Business 以上はフル MCP、Pro は読み取りのみ）。
代わりに使えるものは？
同じカテゴリには：Inbox Zero, draw.io, TradingMCP
同じカテゴリのほかの候補
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i
draw.io
Create draw.io diagrams in chat from Mermaid or XML, shown live and interactive. 10,000+ shapes.
TradingMCP
Market analysis for AI assistants: screeners, multi-timeframe analysis, backtests, in-chat charts.
作者のREADME
READMEを開く
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Write HTML. Render video. Built for agents.
Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord
Download the desktop app: macOS · Windows · Linux (.deb)
HyperFrames is a free, open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
The HyperFrames Studio app is free to use as well; its Pro plan adds HeyGen's top video, image, voice and music models.
Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video.
Quick Start
With an AI coding agent
For Claude Code, install the versioned plugin:
claude plugin marketplace add heygen-com/hyperframesclaude plugin install hyperframes@hyperframes
To enable auto-update for the hyperframes marketplace, run claude in a terminal in your project. In Claude Code's terminal UI, run /plugin, then select Marketplaces → hyperframes → Enable auto-update. Afterward, use /hyperframes:hyperframes. See the plugin guide for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.
For standalone skills (including OpenCode), use:
npx skills add heygen-com/hyperframesThe picker opens with nothing pre-selected — the Core Skills group is all you need;
/slideshow,/remotion-to-hyperframesand/figmainstall on demand. Without the picker (a script or a CI job),npx hyperframes skills updateinstalls exactly the core set, whereasskills add --allinstalls all 9 published skills. The six repo-internal skills under.claude/skills/.agents/skillsare excluded by default. For the full published set usenpx hyperframes skills.
skills addresolves the skills.sh registry blob, which can lagmainby hours.npx hyperframes skills updateinstalls the skills from the release tag that matches your CLI version, so they match the CLI that runs them.
Run project-local installs from your video project's directory. From a HyperFrames checkout, use npx hyperframes skills update for a global install instead: a project-local installer target can overlap the tracked skills/ source and overwrite uncommitted edits. See contributor setup.
Try a prompt like:
Using
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that support skills.
Skills
HyperFrames ships 9 skills. Make any video by asking for it; the /hyperframes skill carries the contract and the references (film, captions, overlays, motion, look). Read it first.
For standalone installation, default to the core set (/hyperframes, /hyperframes-cli, /hyperframes-registry, /media-use, /reverse-any-video, /style-sampling). npx hyperframes skills update installs exactly that from anywhere; the interactive picker (npx skills add heygen-com/hyperframes) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without --skill installs all 9. Use npx skills add heygen-com/hyperframes --all to install the complete published set deliberately (skips the picker), or npx skills add heygen-com/hyperframes --skill for just one (bare name, no leading /).
Standalone installs stay lean after that: npx hyperframes init installs the core set only when it is missing and never touches a skill you already have (npx hyperframes skills update refreshes them, and never removes one); /figma, /slideshow and /remotion-to-hyperframes install on demand with npx hyperframes skills update . Nothing re-pulls the full set behind your back.
Plugin packages
Plugins bundle the full skill catalog and use their agent's update manager. bun run package:agent-plugin builds the committed portable ZIP, source metadata, and SHA-256 checksum. See the maintainer checklist.
Upload to Codex
Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:
bun run package:codex-pluginThis writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit.
Core set
| Skill | Use when |
|---|---|
/hyperframes | Read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays with HyperFrames (HTML rendered to video). Holds the render contract and the work loop, and points to the references for format, motion, look, captions, whole films and storyboards. |
/hyperframes-cli | The HyperFrames CLI by job — scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, share, project history — plus reading its JSON and recovering from build or render failures. |
/hyperframes-registry | About 450 ready-made blocks and components installed as editable source — transitions, overlays, titles, kinetic type, captions, charts, maps, 3D, camera moves. Use before hand-building any named visual; also for hyperframes add and catalog. |
/media-use | Get or make any media for a video — music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks — with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull. |
/reverse-any-video | Rebuilding any video file as an editable HyperFrames project (motion graphics, talking heads, live action, AI-generated footage), checked frame by frame against the original. HyperFrames Pro. |
/style-sampling | Making a new episode on your topic in one of five proven styles: Collage Explainer, Finance Explainer, Animated Science Explainer, 3D Brand Explainer, 3D True Crime. HyperFrames Pro. |
On demand
| Skill | Use when |
|---|---|
/figma | Bring Figma into a video — rendered assets, brand tokens, components, storyboard frames as reconstructed motion, shaders and connector-assisted motion. Use when you paste a figma.com link. |
/slideshow | A presentation, pitch deck or interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode with speaker notes. Output is a navigable deck, not a rendered MP4. |
/remotion-to-hyperframes | Bringing existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, other tools' renders), verified frame by frame. |
For visual design handoff workflows, see the Claude Design guide and Open Design guide.
Manually with the CLI
npx hyperframes init my-videocd my-video npx hyperframes preview # preview in browser with live reload npx hyperframes render # render to MP4
Requirements: Node.js 22+, FFmpeg
What You Can Build
Need ideas? Browse the [Showcase](https://