JuniorXcoder/hermes-virtual-office

The project is a pure Next.js application written in TypeScript that boots a three.js WebGL scene as the office floor. Server‑side API routes expose Hermes task data and act as a thin proxy for the LLM service. A singleton Socket.io server pushes state changes to every connected client, ensuring the 3D view stays consistent without polling.

Each AI agent registers itself as a virtual employee and is assigned a desk object in the scene. The client subscribes to a Hermes channel that streams Kanban cards; those cards are rendered on a wall‑mounted board inside the office. When an agent changes status or moves desks, the front‑end emits a socket event that updates Hermes via its REST endpoint, achieving bidirectional synchronization in a type‑safe manner.

Meeting rooms are distinct three.js zones. When two or more agents occupy the same room, the UI spawns a transcript component that streams their interaction to an LLM (OpenAI) for summarization. The generated minutes are written back to Hermes as a task comment and instantly appear on the Kanban board, giving a live, searchable record of AI collaboration.

The architecture favors visual fidelity over raw bandwidth; a full‑screen 3D office at 60 fps consumes roughly 2 MB/s per client, which can cause frame drops on low‑end devices. Dependence on the Hermes API also limits deployment to environments where that service is reachable. Nonetheless, the stack demonstrates a cohesive pipeline, typed front‑end, real‑time transport, and LLM summarization, that has earned it 32 stars on GitHub.

TakeawayThree.js rendering coupled with Hermes‑driven websockets provides a live, type‑safe UI for AI agent coordination.