Back to Resources
Free guide
Edit videos with an AI agent, for free
My reel was edited by Claude Opus 5.5 inside HyperFrames Studio. Here’s exactly how to set it up, every command included.
Start setup
HyperFrames is free and open source (Apache 2.0). Local rendering doesn’t use HeyGen credits.
What is HyperFrames Studio?
HyperFrames is HeyGen’s open-source framework that turns HTML into video. HyperFrames Studio is the editor on top of it. You describe the video, an AI agent on your computer builds it, and then you both work on the same timeline. Change anything by typing, pointing at the picture, drawing on it, or leaving a comment.
Describe it
Type your idea or your website, and the agent builds the first cut.
Point at it
Click any element in the preview and say what to change.
Draw on it
Circle a spot, add a note, and the agent makes the edit.
What you need
A Mac or a Linux PC for the Studio app (the app doesn’t support Windows yet; Windows users can use Path B below)
Claude Code (with a Claude account) or Codex (with a ChatGPT account)
A HeyGen account to sign in to the app
For the command line: Node.js 22 or newer, and FFmpeg
Mac or Linux
Path A: Install the Studio app
Step 1. Download it
Go to hyperframes.dev/studio and download the app for your computer.
Mac: Open the disk image, double-click “Install HyperFrames”, wait about 1 to 2 minutes for the check, then choose “Open HyperFrames”.
Linux (64-bit Intel/AMD): run this in a terminal:
Terminal
chmod +x HyperFrames-x86_64.AppImage ./HyperFrames-x86_64.AppImage
Step 2. Sign in
Answer the short survey (every answer is optional), then sign in with your HeyGen account in the browser window that opens.
Step 3. Connect your agent
In the app, choose Install Claude Code, then Sign in to Claude. Wait until it says “Claude Code is connected”. If you’d rather do it in a terminal:
Terminal
curl -fsSL https://claude.ai/install.sh | bash claude auth login
Using Codex instead? Install it, then run codex to sign in with your ChatGPT account, and choose Check again in the app:
Terminal
curl -fsSL https://chatgpt.com/codex/install.sh | sh codex
Switch agents any time from the agent picker in the chat header, or Settings > Agent.
Step 4. Make your first video
Pick the four parts of your video (Hook, Proof, Turn, Call to action), use the shuffle button for new ideas, then type your website or describe your idea. A website gives the agent your fonts, colours and logo. Choose “Use this cut” and watch the agent work in the chat.
Tip
For Reels, TikTok and Shorts, ask for a vertical 9:16 video in your first message.
Mac, Windows or Linux
Path B: Use HyperFrames from Claude Code
Step 1. Install Node.js 22+
Download the LTS version from nodejs.org, install it, then check:
Terminal
node -v
Step 2. Install FFmpeg (needed for rendering)
Mac:
Terminal
brew install ffmpeg
Ubuntu or Debian:
Terminal
sudo apt install ffmpeg
Windows: download a 64-bit build from ffmpeg.org/download.html, unzip it, and add its “bin” folder to your PATH.
Then check it works:
Terminal
ffmpeg -version
Step 3. Add HyperFrames to Claude Code
Terminal
claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes
Using Cursor, Codex, Gemini CLI or another agent? Install the skills instead:
Terminal
npx skills add heygen-com/hyperframes
Step 4. Ask for a video
Open Claude Code in an empty folder and type:
Claude Code prompt
Using /hyperframes, make a 10-second product intro for https://example.com
Swap in your own website or idea.
Step 5. Open the editor and render
Terminal
npx hyperframes preview
This opens Studio in your browser on the same project files, so you and the agent edit the same thing. When you’re happy:
Terminal
npx hyperframes check npx hyperframes render --output video.mp4
How to change your video
Chat box
Type it
Write your change in “Describe a change”. Use @ to point at a moment, a file or a piece of media.
V, then A
Point at it
Select an element, choose “Prompt to edit” and say what should change.
D
Draw on it
Circle or mark the spot. Several strokes become one drawing.
C
Comment on it
Pin a comment to a spot and a moment: “What should change here?”
Your selections, drawings and comments collect in “Pending video edits” (up to 10). Send them as one request. Undo with Cmd+Z (Ctrl+Z on Linux); every agent run also has its own Undo button.
Export your video
Choose MP4 (best for sharing and uploading), WebM or MOV. Pick 1080p, Project size or 4K, and 24, 30 or 60 fps (30 is the default). The render runs on your own computer and saves to your Downloads folder. Watch the file once from start to end before you post it.
Every command in one place
Stuck?
Run npx hyperframes doctor first. It checks the runtime, browser, FFmpeg and other local requirements.
“ffmpeg not found”: install FFmpeg (Section 5, Step 2) and open a new terminal.
Agent not connecting in the app: sign in again (claude auth login), then choose Check again.
Full docs: hyperframes.heygen.com · Code: github.com/heygen-com/hyperframes
Want an AI workflow that fits how you work?
I’m Haidar Ali, a Lead Product Designer with 8+ years across SaaS, FinTech, enterprise and AI products, and I’ve mentored 250+ designers. In a 30-minute 1:1 career strategy call, we’ll look at how you work today and set up an AI workflow that actually fits it.
Describe it. Point at it. Ship it.
If this saved you an evening of editing, send it to a friend who still edits every cut by hand.