Dynamic Dashboard Plugin for Hermes Agent

This plugin transforms the Hermes Agent into a fully autonomous, data-driven workspace. It provides a dynamic dashboard tab within the Hermes Web UI where the AI can design, spawn, and monitor real-time widgets, charts, and metrics using Tremor React components.

Features

• Fully Autonomous UI Generation: The AI can understand high-level prompts (e.g., "Market Report for AI", "DeFi Portfolio Management") and independently orchestrate a complex dashboard layout without micromanagement.
• Universal JSON-to-React Renderer: The frontend dynamically renders any Tremor component (e.g., LineChart, DonutChart, Table, Card) from a generic JSON tree generated by the AI. No build steps are required.
• Automated Cron Jobs: The AI can write python scripts on-the-fly and bind them to specific widgets. The plugin securely registers these scripts with the Hermes cron scheduler to run in the background.
• Dynamic Updates: Background scripts use the bundled dynamic_dashboard_sdk to push new data directly into the dashboard. The UI polls and updates live.
• Bento Grid Layout: Widgets are styled beautifully using TailwindCSS Flexbox, supporting dynamic column spanning (col_span 1 through 4) for modular design.

Installation & Setup

1. Install and Enable the Plugin: Use the Hermes CLI to install and enable the plugin directly from your repository:

   hermes plugins install autonomousEnterprises/nujinPlugin --enable

   (Note: You can also manage your plugins interactively by running hermes plugins or use hermes plugins list to check status)

2. Access the Dashboard: Run the following command to start the Hermes Web UI:

   hermes dashboard

   Then navigate to http://localhost:9119 in your browser.

3. Open the Workspace: Click on the new Workspace tab located next to your chat.

Usage Example

Simply chat with your Hermes Agent:

User: "Create a crypto portfolio dashboard."

Hermes: (Autonomously creates a Bento grid with a Hero metric for Total Balance, a LineChart for historical portfolio value, and a DonutChart for asset allocation. It then writes background Python scripts using dynamic_dashboard_sdk.py to fetch live prices from APIs and schedules them to run every minute.)

Architecture

• plugin.yaml: The plugin manifest defining the metadata and hooks.
• dashboard/dist/index.js: The frontend React app that recursively maps JSON trees into Tremor components.
• tools.py & schemas.py: The backend logic defining the create_widget, remove_widget, and schedule_monitoring_job LLM tools.
• dynamic_dashboard_sdk.py: A helper library utilized by the AI's generated background cron scripts to seamlessly push JSON updates back to the UI.
• skills/tremor-dashboard/SKILL.md: The AI instructions that empower Hermes to orchestrate the entire workflow autonomously.

Technologies Used

• Tremor for beautiful, data-rich components.
• TailwindCSS for rapid styling.
• Hermes Agent Python plugin system and background cron scheduler.