Painel visual de agentes IA com escritorio isometrico estilo Habbo/RPG
Agent Hub e um aplicativo desktop (Electron) que simula um escritorio virtual isometrico onde agentes de IA vivem, trabalham e interagem. Cada agente tem personalidade, cargo, departamento e pode conversar usando modelos Claude (Haiku, Sonnet, Opus). Inspirado na estetica de jogos como Habbo Hotel e RPGs top-down.
Aviso: Este projeto esta em desenvolvimento ativo. Funcionalidades podem mudar ou estar incompletas.
- Escritorio isometrico — Mapa renderizado com Tiled (TMX/JSON), tilesets personalizados e camera com zoom/pan
- Agentes autonomos — Sprites animados estilo RPG (WorkAdventure/Pipoya) com maquina de estados: andar, trabalhar, descansar, conversar
- Chat com IA — Cada agente responde via Claude CLI com personalidade propria, memoria de conversas e contexto temporal
- Pathfinding — Agentes navegam pelo escritorio desviando de obstaculos com grid de colisao
- Criador de agentes — Interface visual para criar agentes com nome, cargo, departamento, personalidade e aparencia
- Departamentos — Organize agentes por setores (Marketing, Engenharia, etc.)
- Hierarquia — Visualizacao da estrutura organizacional
- Obsidian Bridge — Sincroniza cultura da empresa e memoria dos agentes com um vault do Obsidian
- Jukebox — Player de musica ambiente integrado ao escritorio
- Reunioes — Convoque agentes para reunioes no escritorio virtual
- Sidebar interativa — Perfil detalhado, chat individual e configuracoes por agente
Screenshots serao adicionados em breve conforme o desenvolvimento avanca.
agent-hub/
├── main.js # Electron main process + IPC handlers
├── preload.js # Context bridge (secure IPC)
├── claude-worker.js # Worker thread para chamadas Claude CLI
├── package.json
└── src/
├── index.html # UI principal
├── renderer.js # Orquestrador do game loop
├── styles.css # Estilos do app
├── engine/
│ ├── Agent.js # Entidade visual do agente (sprite, animacao)
│ ├── AgentBehavior.js # Maquina de estados + pathfinding
│ ├── IsometricEngine.js # Motor isometrico (camera, render)
│ ├── OfficeLife.js # Simulacao de vida no escritorio
│ ├── Room.js # Gerenciamento de salas
│ ├── SpriteSheet.js # Carregamento de spritesheets
│ └── TiledMapRenderer.js # Renderizador de mapas Tiled
├── ui/
│ ├── AgentCreator.js # Modal de criacao de agentes
│ ├── AgentProfile.js # Perfil detalhado do agente
│ ├── Hierarchy.js # Visualizacao de hierarquia
│ ├── Jukebox.js # Player de musica
│ ├── RoomEditor.js # Editor de salas
│ └── Sidebar.js # Barra lateral com chat
├── data/
│ ├── agents.json # Dados persistidos dos agentes
│ ├── AgentStore.js # CRUD de agentes
│ ├── departments.json # Departamentos
│ ├── roles.json # Cargos disponiveis
│ └── ObsidianBridge.js # Integracao com Obsidian
├── sprites/
│ ├── characters/ # Spritesheets dos personagens (Pipoya)
│ ├── furniture/ # Sprites de moveis e objetos
│ ├── map/ # Mapas Tiled (.json)
│ └── tilesets/ # Tilesets para o mapa
└── audio/ # Musicas do jukebox
┌──────────────────────────────────────────────────────┐
│ Electron App │
│ │
│ ┌─────────────┐ IPC ┌──────────────────────┐ │
│ │ Main Process│◄─────────►│ Renderer Process │ │
│ │ │ │ │ │
│ │ - File I/O │ │ ┌──────────────────┐ │ │
│ │ - Claude CLI│ │ │ Isometric Engine │ │ │
│ │ - Obsidian │ │ │ - Camera/Zoom │ │ │
│ │ - Instagram │ │ │ - Tiled Map │ │ │
│ │ │ │ │ - Sprite Render │ │ │
│ │ ┌─────────┐│ │ └──────────────────┘ │ │
│ │ │ Worker ││ │ ┌──────────────────┐ │ │
│ │ │ Thread ││ │ │ Agent Behavior │ │ │
│ │ │(Claude) ││ │ │ - State Machine │ │ │
│ │ └─────────┘│ │ │ - Pathfinding │ │ │
│ └─────────────┘ │ │ - Office Life │ │ │
│ │ └──────────────────┘ │ │
│ │ ┌──────────────────┐ │ │
│ │ │ UI │ │ │
│ │ │ - Sidebar/Chat │ │ │
│ │ │ - Agent Creator │ │ │
│ │ │ - Hierarchy │ │ │
│ │ │ - Jukebox │ │ │
│ │ └──────────────────┘ │ │
│ └──────────────────────┘ │
└──────────────────────────────────────────────────────┘
Cada agente opera com uma maquina de estados autonoma:
| Estado | Descricao |
|---|---|
IDLE |
Parado, esperando proximo comportamento |
WALKING |
Navegando ate um destino via pathfinding |
WORKING |
Sentado na mesa, "trabalhando" |
BREAK |
Pegando cafe ou descansando no sofa |
CHATTING |
Conversando com outro agente proximo |
MEETING |
Em reuniao na sala de conferencia |
Cada agente usa o Claude CLI para responder mensagens:
- Prompt inclui: nome, cargo, personalidade, hora atual, cultura da empresa e memoria
- Memoria persiste via Obsidian Bridge (arquivo markdown por agente)
- Modelo configuravel por agente (Haiku para rapido, Sonnet para mais inteligente)
- Worker thread dedicado para nao bloquear a UI
- Node.js 18+
- Claude CLI instalado e autenticado (
claude --version) - Obsidian (opcional) — para persistencia de memoria dos agentes
# Clone o repositorio
git clone https://github.com/Joaoparaoli/agent-hub.git
cd agent-hub
# Instale dependencias
npm install
# Inicie o app
npm start
# Modo desenvolvimento (com DevTools)
npm run dev| Tecnologia | Uso |
|---|---|
| Electron 33 | Framework desktop multiplataforma |
| Canvas 2D | Renderizacao isometrica do escritorio |
| Tiled Map Editor | Design de mapas com tilesets |
| Claude CLI | Backend de IA para conversas dos agentes |
| Worker Threads | Chamadas Claude sem bloquear UI |
| Obsidian | Persistencia de memoria e cultura |
| Lucide Icons | Icones da interface |
| Pipoya Sprites | Personagens estilo RPG top-down |
- Motor isometrico com camera e zoom
- Renderizacao de mapas Tiled
- Sprites animados dos agentes
- Maquina de estados autonoma
- Pathfinding com grid de colisao
- Chat individual com Claude
- Obsidian Bridge (memoria + cultura)
- Criador visual de agentes
- Jukebox com musicas
- Editor de salas drag-and-drop
- MCP Tools (Instagram, etc.)
- Conversas entre agentes (autonomas)
- Dashboard de metricas
- Exportacao de relatorios
Este projeto esta licenciado sob a MIT License.
Agent Hub — Seu escritorio virtual de agentes IA