Published: 2026-06-05

Build Your First Claude Code AI Agent with Dashboard and HyperFrames Video Engine

Chapters / key moments (click to jump — plays here on the page)

Julian Goldie shows how to wrap Claude Code in a custom agent dashboard that also runs Hermes Agent, then adds HyperFrames — an open-source command-line tool by HeyGen that converts plain HTML into MP4 video — as a Claude Code skill. The result is an autonomous content pipeline where agents draft scripts, choose avatars and voices, and render finished videos without manual editing. The video includes significant promotion of a paid community; for a step-by-step Hermes setup guide see Hermes Setup or OpenClaw Setup.

Watch on YouTube → · ← Back to News

What you can actually set up from this

Extracted from the video's own transcript — the specifics the original summary left out.

Reproducible steps

Prerequisites for Claude Code
A recent Node.js and a Claude account. Install once, open it in the project folder, and describe what to build.
Install Hyperframes as a skill
Hyperframes is HeyGen's open-source (Apache-2.0) tool that renders HTML into MP4. Per the official README: npx skills add heygen-com/hyperframes (agents: npx hyperframes skills update). The skill teaches the agent to plan, write HTML, preview and render.
Let Claude Code build the dashboard
Describe the tabs you want (chat, workspace, video) and let it write them. It keeps a CLAUDE.md in the project so it remembers how the setup works next session.
His five-step video path
Idea → pick avatar and voice once → Hyperframes renders → assembled automatically → saved to a searchable workspace.

Gotchas

Where people get stuck, in his experience: goal mode not firing, render failures, and dashboard tabs not talking to each other.