Watch your AI coding agents come to life! See Claude Code and Cursor as pixel-art characters moving through a hotel, working at desks, reading files, and writing code in real-time.
Paste this into Claude Code or Cursor in any project:
npx github:JamsusMaximus/codemapThat's it! The hotel opens automatically and your agent appears. ✨
| Feature | Description |
|---|---|
| 🎮 Live Visualization | Watch agents move between rooms as they work on your code |
| 🏢 Smart Layout | Folders become rooms, files become desks, arranged by git activity |
| 👥 Multi-Agent | See up to 10 agents working simultaneously |
| 💬 Speech Bubbles | See what tool and file each agent is working on |
| 🦘 Stuck Detection | Agents bounce when waiting for input — never waste time on a stuck agent |
| 🎨 Themed Rooms | Components (blue), Server (green), Tests (peach), and more |
| ⚡ Real-time Updates | Instant feedback as agents read, write, and think |
| 🔄 Dynamic Refresh | Hotel reorganizes on each git commit |
- ✅ Claude Code — Full support, automatic hook configuration
- ✅ Cursor — Enhanced features: model name, completion badges, operation timing
- 💻 Computer screens light up when files are accessed
- 🟡 Yellow glow = reading a file
- 🟢 Green glow = writing code
- 💭 Thinking indicator when agent is processing
- 🚶 Walking animations as agents move between rooms
- 🦘 Bouncing when agent needs your input or permission
- ☕ Coffee shop where idle agents hang out
git clone https://github.com/JamsusMaximus/codemap
cd codemap
npm install
npm run devThen open http://localhost:5173/hotel
npx github:JamsusMaximus/codemap setup🤖 AI Agent → 📡 Hooks → 🖥 Server → 🎨 Browser
(Claude/Cursor) (capture) (broadcast) (render)
- Your AI agent reads/writes files or runs commands
- Hook scripts capture these events
- Server tracks activity and broadcasts via WebSocket
- Browser renders the pixel-art hotel in real-time
Server API (Port 5174)
POST /api/activity— File read/write eventsPOST /api/thinking— Agent thinking stateGET /api/graph— File tree dataGET /api/hot-folders— Git-ranked folders- WebSocket at
/wsfor real-time updates
Client Routes (Port 5173)
/hotel— Pixel-art hotel visualization/— Force-directed graph view
Hook Scripts
file-activity-hook.sh— Captures file operationsthinking-hook.sh— Captures agent state, model, durationcursor-stop-hook.sh— Captures Cursor completion statusgit-post-commit.sh— Triggers layout refresh
Troubleshooting
Server not starting?
lsof -i :5174 # Check if port in use
curl http://localhost:5174/api/healthHooks not firing?
tail -f /tmp/codemap-hook.logNo agents appearing?
curl http://localhost:5174/api/thinking | jqDevelopment
npm install
npm run dev # Start server + client
npm test --workspaces # Run all 248 testsMIT — Built with ❤️ for the AI coding community