The creator introduces Hermes Canvas, a dashboard plugin built with Hermes agent and Kim K 2.6 that enables interactive, chat-driven front-end development with live preview directly within the Hermes dashboard. Despite some initial bugs, the project successfully demonstrates a seamless integration of coding, visual editing, and live updates, and will be open-sourced for community use and hackathon submission.
In this video, the creator introduces a new project called Hermes Canvas (also referred to as Hermes Front End), a dashboard plugin designed to transform the existing Hermes dashboard into a live front-end creation studio. The goal is to integrate a chat interface alongside a live preview of the front-end project, enabling users to interactively build and modify front-end code within the Hermes agent environment. This approach aims to replicate the local development experience, where changes to code are immediately reflected in a browser preview, but all within the Hermes dashboard itself.
The creator explains the motivation behind using Hermes agent and the Kim K 2.6 model for this project, highlighting Kim K 2.6’s strong front-end coding and visual analysis capabilities. The project involves building a dashboard plugin that can spawn a local development server, render an iframe preview of the front end, and allow chat-based commands to modify the project files. The creator also mentions using an internal brainstorming agent named Scampy to help research and plan the project, confirming that the dashboard plugin system is mature and suitable for this use case.
During the development process, the creator demonstrates how Hermes Canvas successfully launches a dev server, renders the front-end preview, and responds to chat commands to modify UI elements such as button colors and text. Some initial bugs are encountered, such as Hermes editing the wrong directory and changes reverting due to isolated git work trees. These issues are addressed by implementing proper git commit synchronization to ensure changes persist across edits. The creator shows how selection mode allows users to click on UI elements and instruct Hermes to modify them directly, enhancing the interactive editing experience.
The video also showcases the integration of an existing website into Hermes Canvas, allowing live editing of real projects within the dashboard. The creator tweaks the UI layout to allocate more space for the preview pane and confirms that the core functionality—chat-driven front-end editing with live preview—is working well. Despite some minor debugging and improvements still needed, the project has reached a stable and usable state, demonstrating the feasibility of building a front-end design tool fully integrated into Hermes agent.
In conclusion, the creator reflects on the success of building Hermes Canvas using Hermes agent and Kim K 2.6, noting that the project went smoother and faster than expected. The tool will be open-sourced on GitHub and submitted to a hackathon, with hopes that the community will find it useful. The video ends with an invitation for viewers to share their thoughts and projects, emphasizing the potential of combining chat-based AI agents with live front-end development workflows inside a unified dashboard environment.