How to Add a Floating Chat Bubble to Your Hermes Agent Dashboard

Today we introduce the floating chat bubble, a modular plugin that you can install into your Hermes agent dashboard. So, without further ado, let's build.

What is a Floating Chat Bubble?

If you're not familiar with what a chat bubble is, it's a floating chat interface that lives on top of an existing website, dashboard, web app, or mobile app. Most of us have used one without even noticing. It's that little persistent chat window that follows you around the screen.

This plugin brings that same idea to the Hermes agent dashboard, so your chat session is always one click away no matter where you are.

Why I Built It

This started as a personal pain point. While navigating my Hermes agent dashboard, I didn't like having to tap back over to the chat app just to prompt. I wanted the ability to look at my Kanban board and prompt in that same session in real time.

So I thought, why not create this modular plugin? And so far it's been a fun experience. As with anything I build here, I build it selfishly for me, then realize you might find it useful, so I share it with the public.

Core Behaviors

I've been testing this across many different systems over the past 7 to 10 days while Hermes itself was updating, and it's been consistently working throughout. There have been minor tweaks along the way, but the core behaviors have held up.

It follows you in the dashboard. The chat bubble stays available even when you inspect different tabs like sessions, cron, skills, or Kanban. The only time it disappears is when you go to the main chat tab, because that would be redundant. We don't want a floating chat bubble when we're already in the chat interface, right?

It keeps your session. Click the bubble and it pulls up the same session you had open, retaining your conversation context as you move between pages. You can type something like "hey, testing chat," navigate to another page, reopen the bubble, and your session and message are still there.

It's resizable and repositionable. It starts anchored in the bottom right, but you can resize it from any of the four corners and drag it to stay static wherever you want it.

It's skin aware. Regardless of which Hermes skin you're using, the floating chat bubble adapts its corner accents and top menu bar to match. The goal is to make the experience more enjoyable rather than feel bolted on.

How to Install It

There are a couple of ways to install this.

You can install it manually, or you can install it with your agent. We prepped an agent install markdown file that gives the step-by-step instructions, plus a ready to copy agent install prompt.

The reason we prepped that prompt comes down to prerequisites. Over the past few weeks I've made a series of Hermes agent videos covering how to enable the Hermes dashboard and how to use the chat feature. Both of those need to be enabled before this plugin will work.

If you copy the agent install prompt, it will enable and install those prerequisites, configure everything properly, and then install the plugin. Pretty nifty, right?

### Recovering a Session After a Hard Refresh

One honest limitation: a hard refresh resets your session. It's not fully automated yet. If that happens, go to Sessions in the top right, hit play to restore the session to the default chat tab, then reopen the floating chat bubble. That's just the current state of the plugin.

Customizing the Skin

The bubble follows whatever Hermes skin you've applied. To change yours, open your config and type "skin" to find it under Display. The options:

• default (yellow)
• slate (blue)
• aries (reddish-orange)
• mono (black and white, I believe, but don't quote me)

A shout out to a community member, Mr. Baker, who built a clean modern light mode theme with blue accents. You can grab it at github.com/MrBakerSlop, and it pairs nicely with the slate skin to show off the skin-aware behavior.

Where to Get It

The repository download link points to our GitHub. It was private at the time of recording, but by the time this video went live it is public, so you can copy, fork, and customize it freely.

You can also access everything for free at clearmode.ai. Click the Resources tab up top, go to the Hermes category, and you'll find this video prop completely free to use.

One More Thing: Agent Atlas

I also work with a custom multi-agent team called the Agent Atlas plugin, up to 29 profiles, which I drive through this floating bubble. It's not fully automated yet, but if there's interest I might release it publicly too. Let me know in the comments.

Wrapping Up

So, yeah, listen. That's the gist of it. This whole thing was built in public over several weeks on the live streams, so if you want to see how it came together you can follow along there weekly.

Grab the download link in the comments, let me know if you discover any bugs, and comment if you're interested in the Agent Atlas plugin.

Watch the full walkthrough here: https://www.youtube.com/watch?v=qMRmVScGeok