Videos about using Hermes Agent
Curated by: Tonbi's AI Garage (35 videos)
I built Hermes Canvas — a v0 / Claude-Design-style front-end studio that lives inside the dashboard itself. Chat panel on the left, live iframe preview on the right, click an element in selection mode to scope the edit, and your Hermes agent does the actual code change. And the whole plugin was built inside Hermes itself using Kimi K2.6, in one day, for under $10 in API spend. Sign up for my FREE weekly newsletter, where I spill my unfiltered thoughts on the latest AI news, cool research, and projects I'm building: https://www.onchainaigarage.com/ 🐦 Follow Tonbi on X for real-time AI x blockchain updates! https://x.com/tonbistudio The pitch is straightforward: most "AI builds your front-end" tools (v0, Claude Design, Lovable) are great but they're cloud products with their own model, their own context, and their own scaffolding opinions. If you already run a local Hermes agent that knows your projects, your skills, your memories, and your voice, the obvious move is to give it a canvas inside the same dashboard you already manage everything else from. So that's what Hermes Canvas does — it's a dashboard plugin that spawns a dev server (Vite for package.json projects, plain HTML if not), renders the live preview in an iframe, and routes prompts and click-to-select interactions straight to a scoped Hermes chat session. Whole build was meta in a fun way: Hermes plugin built by Hermes, with Kimi K2.6 driving via OpenRouter, with the existing plugin SDK docs pasted into the spec so the agent knew exactly what surface to target. Two real bugs to debug — directory scoping (fixed with git init + work tree) and work-tree branch isolation reverting earlier edits (fixed by committing sync changes back to main after each job). Everything else basically one-shotted from the spec. ✅ The product — split-pane dashboard plugin with chat on the left, live iframe preview on the right, selection mode that lets you click any element and scope a prompt to it, hot reload on every edit, support for both Vite/package.json projects and plain HTML, and an "open in browser" pop-out for full-screen review. ✅ Building it inside Hermes — used Hermes agent itself instead of Claude Code or Codex, ran Kimi K2.6 via OpenRouter (~$4 for the initial build, $7 by end of session including iteration), planning + research + implementation + testing all in one session, and the meta loop of an agent building its own UI extension worked cleanly. ✅ Real-site test plus open-source — dropped my actual tonbistudio.com site into Hermes Canvas, edited it via prompts and selection mode, gold-bordered cards on demand, and hardened the git work-tree state issue so changes persist across edits. Submitting it to the creative hackathon and open-sourcing the whole thing. 💻 Tonbi's GitHub: https://github.com/tonbistudio 🌐 Portfolio: https://www.tonbistudio.com Resources: 🔗 Hermes Canvas (open-sourced): https://github.com/tonbistudio/hermes-canvas Timestamps: 0:00 - Intro: what Hermes Canvas is 3:00 - Spec, plan, and why we're building this in Hermes with Kimi K2.6 8:00 - First working version: split-pane and iframe preview 11:30 - Selection mode and prompt-driven edits 15:30 - Git work-tree state bug and the fix 17:30 - Real-site test: editing tonbistudio.com inside Canvas 20:00 - Hackathon submission, cost recap, open-sourcing 21:00 - Wrap up Coming Next: More live builds! 👀 Are you running Hermes Agent or another local agent runtime? Would you actually use a v0/Claude-Design-style canvas if it ran locally and used your own agent? Drop your thoughts in the comments — and if you've already built or are building dashboard plugins, link them, I want to see what people are shipping. If this was useful, please like, subscribe, and hit the bell for more agent tooling builds! 🦐✨ #HermesAgent #HermesCanvas #FrontEndStudio #PluginSDK #ClaudeDesign #KimiK2 #VibeCoding #OpenSource #Hackathon #LocalLLM #AITools #AIAgents