As developers, understanding the real-time activity of AI agents can be challenging, often relying on abstract logs. This is the problem Claude Dungeon addresses.
Claude Dungeon is an open-source project that visualizes Claude Code sessions as pixel-art heroes in a real-time dungeon. It transforms raw agent activity into an intuitive, animated display, where each knight's movement and state within the dungeon directly reflect the AI agent's operational status.
How it works:
Each active Claude Code session spawns a pixel-art knight. The knight's location and actions within the dungeon correspond to what the Claude Code agent is doing:
•
Boss Arena: When your agent is actively using tools (like Bash or Write ) or performing web/search operations, its knight is in the Boss Arena, engaging the Lord Wizard or casting spells. This visually represents the agent's active problem-solving or external interaction.
•
Holy Sanctuary: If the agent is reading files, its knight is in the Holy Sanctuary, symbolizing a period of information gathering or reflection.
•
Merchant Shop: When the agent is in a planning or thinking state, its knight is in the Merchant Shop, suggesting strategic contemplation.
•
Tavern Rest: Once an agent completes its task or enters a resting state, its knight retreats to the Tavern for a well-deserved break.
This real-time, visual feedback loop helps in quickly grasping the overall status of multiple agents, identifying bottlenecks, or simply enjoying a more engaging interaction with your AI workflows.
Under the Hood:
The project is built using a modern web stack:
•
Frontend: React 19, Tailwind CSS 4, and the Canvas API for rendering the pixel-art dungeon and animations.
•
Backend: Express 4 and tRPC 11 on Node.js.
•
Database: MySQL / TiDB, managed with Drizzle ORM.
•
Real-time communication: WebSockets (ws) to keep the visualization in sync with agent activities.
It monitors ~/.claude/projects/*/.jsonl files for active Claude Code sessions, parses their transcripts to determine the agent's state, and broadcasts these updates to connected browsers. It also includes a UI for managing Claude Code skills, allowing you to view and edit global and per-project skills.
Why build this?
Beyond the novelty, Claude Dungeon provides a tangible, relatable metaphor for abstract computational processes. It makes observing AI agent behavior less about parsing text and more about understanding a narrative. For anyone running multiple Claude Code instances, it offers an immediate, at-a-glance overview that raw logs can't provide.
I believe in open-source development, and this project is available on GitHub. I welcome contributions, whether it's for new enemy types, pathfinding for heroes, sound effects, or mobile responsiveness.
Check out the repository, give it a star if you find it interesting, and let me know your thoughts!
GitHub Repo: https://github.com/thousandsky2024/claude-pixel-agent-web
Top comments (0)