Hermes Agent Chat Bubble Plugin: Copy, Fork, and Customize
Build a floating chat bubble plugin for your Hermes agent dashboard! Learn to copy, fork, and customize this modular tool for real-time prompting.
A new modular plugin, the floating chat bubble, has been introduced for the Hermes agent dashboard. This plugin allows users to interact with the chat interface without leaving their current view within the dashboard.
The chat bubble is designed as a floating interface that can be integrated into websites, dashboards, web applications, and mobile applications. Its development was motivated by a user pain point: the need to switch back to the main chat tab to prompt the agent while simultaneously viewing other dashboard elements, such as a Kanban board.
The plugin has undergone testing over a 7 to 10-day period during Hermes updates and has demonstrated consistent functionality. Key features include:
- Persistence: The chat bubble remains accessible as users navigate different tabs within the dashboard. It only disappears when the user accesses the main chat tab, as this would be redundant.
- Resizable and Repositionable: The bubble, which defaults to the bottom right corner, can be resized from any of its four corners and repositioned to a static location of the user's preference.
- Skin Awareness: The plugin adapts to the visual theme or "skin" applied to the Hermes dashboard.
Access and Installation
The plugin's code is available via a GitHub repository. While initially private at the time of recording, it was intended to be made public upon the video's release. Users can install the plugin in two ways: manually or through an agent installation process. A pre-prepared agent install markdown file and a corresponding agent install prompt are provided to guide users through the setup.
Prerequisites
Before installing the chat bubble plugin, two prerequisites must be met:
- Hermes Dashboard Enabled: The Hermes dashboard functionality must be active.
- Chat Feature Enabled: The chat feature within Hermes must be enabled, along with any associated tips and tricks.
The provided agent install prompt is designed to enable and configure these prerequisites automatically before installing the chat bubble plugin.
Functionality Demonstration
The plugin's functionality is demonstrated within the Hermes agent dashboard. When navigating away from the main chat tab to other sections like "session," "cron," "skills," or "Kanban," the chat bubble remains visible. Users can click this bubble to reopen the existing chat session.
The chat bubble maintains persistent memory of the ongoing session. However, a hard refresh of the dashboard may reset the session. In such cases, users can restore the session by navigating to "sessions" in the top right corner of the dashboard and clicking "play." This action returns the user to the default chat tab and restores the session.
The plugin is also "skin friendly." For example, when using a "slate" skin with blue accents, the chat bubble's corners and top menu bar adapt to reflect these colors, enhancing the user experience. Other available skins include "default" (yellow accents), "Aries" (reddish-orange), and "mono" (believed to be black and white).
Future Development and Community Engagement
The developer, Marcelo of Clear Mod, plans to release an "Agent Atlas" plugin, a multi-agent team system with up to 29 profiles, to the public. He invites interested individuals to express their interest in this plugin.
The developer also highlights a custom light mode theme built by a community member named Mr. Baker, accessible via GitHub at github.com/Mr.BakerSlop.
Information regarding the plugin's development process, including live streams where it was built, is available. These streams occur every Monday, Wednesday, and Friday at 9:00 a.m. Pacific time.
The developer encourages users to report any bugs discovered and to provide feedback or requests for future video topics. Users are asked to specify their identity, profession, target audience, and specific questions when making requests.
Introduction to the Hermes Agent Chat Bubble Plugin
Introduction to the floating chat bubble plugin for Hermes agent dashboards, highlighting its modularity and ease of installation. The presenter mentions a visual aid and a free resource available on clearmode.ai.
- The video introduces a modular, floating chat bubble plugin for Hermes agent dashboards.
- The plugin can be installed into the Hermes agent dashboard.
- A visual aid is available for viewers to follow along.
- Resources, including this video prop, are available for free on clearmode.ai under the Hermes category.
The Problem and the Solution: Why Build the Chat Bubble?
Explanation of what a chat bubble is and the motivation behind creating this plugin: to avoid switching tabs in the Hermes agent dashboard for prompting while multitasking.
- A chat bubble is a floating chat interface on websites, dashboards, or apps.
- The plugin was developed to solve the pain point of having to switch back to the chat tab to prompt.
- The goal was to allow users to view their Kanban board and prompt in real-time within the same session.
- The plugin has been tested across various systems and consistently worked during Hermes updates over 7-10 days.
Plugin Features: Persistence, Resizability, and Repositioning
Details on the plugin's core behaviors: it stays with the user across different tabs but disappears when the main chat tab is open to avoid redundancy. It's also resizable and repositionable.
- The chat bubble follows the user across different tabs in the dashboard.
- It disappears only when the user navigates to the main chat tab, as it would be redundant.
- The chat bubble is resizable from any of the four corners.
- Users can reposition the floating chat bubble to stay static wherever they prefer.
Accessing and Installing the Plugin
Information on accessing the plugin's code via GitHub (currently private, but will be public) and the two installation methods: manual or via an agent install file. Prerequisites for the plugin are also discussed.
- The plugin's repository link is provided, leading to GitHub.
- The GitHub repository is private at the time of recording but will be public upon video release.
- Installation can be done manually or using a prepped agent install markdown file.
- Prerequisites include enabling the Hermes dashboard and the chat feature, with a specific prompt provided to configure these before plugin installation.
Live Demonstration: Using the Chat Bubble
Demonstration of the chat bubble in action within the Hermes agent dashboard, showing how it resolves the issue of the chat disappearing when navigating other sections. It maintains session persistence.
- The video demonstrates a TY chat session within the Hermes agent dashboard.
- The chat bubble allows users to prompt without returning to the main chat tab.
- The chat bubble maintains persistent memory with the open session.
- A hard refresh of the dashboard currently resets the session.
Troubleshooting and Skin Awareness
A workaround for session resets after a hard refresh is shown. The presenter also touches upon the plugin's skin awareness, showing how it adapts to different UI themes like light mode with blue accents.
- To restore a session after a hard refresh, navigate to 'Sessions' on the top right and hit 'Play'.
- The chat bubble is skin-aware and adapts to the applied Hermes styling.
- A custom light mode theme by 'Mr. Baker' with blue accents is showcased.
- Different skins (default, slate, Aries, mono) affect the chat bubble's accent colors.
Advanced Features and Community Contributions
The presenter discusses future plans for the 'Agent Atlas' plugin and encourages community interest. They also explain the skin configuration options within Hermes and how the chat bubble integrates with them.
- The presenter plans to release the 'Agent Atlas' multi-agent plugin to the public.
- Skin configuration is found under 'config' by searching for 'skin'.
- Available skins include default (yellow), slate (blue accents), Aries (reddish-orange), and mono (black and white).
- The chat bubble's corner colors and top menu bar adapt to the selected Hermes skin.