I Built a Minecraft-Inspired Dashboard for AI Agents — Zero Dependencies, Pure Vanilla JS

Rwan — Thu, 29 Jan 2026 16:30:40 +0000

TL;DR

I built an isometric pixel-art dashboard where AI agents become characters in a living world. Zero npm dependencies, pure HTML/CSS/JS, one command to run. It connects to Moltbot and turns boring terminal monitoring into something you actually want to look at.

Try it: npx @ask-mojo/moltcraft
Code: github.com/askmojo/moltcraft
Demo: youtu.be/Kz5efD4eZjU
Website: https://moltcraft.xyz/

The Problem: AI Agent Monitoring Sucks

I run multiple AI agents using Moltbot — an agent orchestration framework. These agents handle Telegram messages, Discord chats, scheduled cron tasks, web browsing, and more. Some run Claude, some run GPT, some use local models.

My monitoring setup was:

# Terminal 1
tail -f ~/.moltbot/logs/agent-main.log

# Terminal 2  
watch -n 5 'curl -s localhost:4444/api/sessions | jq .'

# Terminal 3
moltbot status

# Terminal 4-6
More logs. Always more logs.

This worked. Technically. But it was miserable. I couldn't tell at a glance which agents were active, what they were doing, or how many tokens they'd burned. And forget about chatting with an agent — that meant switching to Telegram or opening another terminal.

The Idea: What If Agents Lived in a World?

Games figured out multi-entity monitoring decades ago. In an RTS, you can see dozens of units at once — their positions, states, and actions — all in a single glance. Why? Because spatial interfaces are superior for multi-entity awareness.

So I built Moltcraft: an isometric pixel world where each AI agent session becomes a character.

The Stack (or Lack Thereof)

Here's what Moltcraft is built with:

Layer	Tech
Frontend	Vanilla HTML, CSS, JavaScript
Backend	Node.js (single `server.js`)
Build tool	None
Framework	None
npm dependencies	Zero
Audio	Web Audio API (procedural)
TTS	ElevenLabs API (optional)
STT	Browser Speech Recognition API (optional)

Yes, really. Zero dependencies. The package.json has no dependencies field. The frontend is hand-written DOM manipulation and CSS transforms for the isometric projection.

Why No Framework?

Three reasons:

Simplicity. Anyone can read the code, modify it, and understand what's happening. No virtual DOM, no state management library, no build pipeline to debug.
Size. The entire package is ~2MB. It runs on a Raspberry Pi without breaking a sweat.
Longevity. React 18, 19, 20... frameworks churn. Vanilla JS doesn't. This code will work in 10 years without a migration.

How It Works

Architecture

┌──────────────────┐     ┌──────────────────┐
│   Browser         │────▶│  Moltcraft       │
│   (Pixel World)   │◀────│  server.js       │
└──────────────────┘     └────────┬─────────┘
                                  │ proxy
                          ┌───────▼─────────┐
                          │  Moltbot Gateway │
                          │  (localhost:4444)│
                          └─────────────────┘

The Node.js server does two things:

Serves the static frontend files
Proxies API requests to the Moltbot gateway (same-origin policy workaround)

That's it. It auto-detects your Moltbot config by reading ~/.moltbot/moltbot.json.

The Isometric World

The world uses CSS transforms for the isometric projection — no Canvas, no WebGL. Each tile is a positioned div with a transform: rotateX(60deg) rotateZ(-45deg) (simplified). This makes the rendering incredibly simple and debuggable.

Agents are sprites layered on top. Their positions update in real-time based on session state from the Moltbot API.

Buildings as Data Panels

Each building in the world maps to real operational data:

Building	Data
🕐 Clock Tower	Cron jobs — schedules, last run, next run
⛏️ Mine	Token usage — consumption per session, totals
🏰 Barracks	Installed skills — APIs, tools, status
📡 Command Center	Gateway config — channels, models, settings
🏛️ Agent Hall	Active sessions — who's doing what

Click a building, get real data. No dashboarding framework needed.

Procedural Audio

All sound effects are generated at runtime using the Web Audio API. No .mp3 or .wav files shipped. Oscillators, gain nodes, and filters create:

Footstep sounds when agents walk
Click/UI feedback
Ambient background audio
Notification sounds for new messages

This keeps the package tiny and the audio surprisingly satisfying.

Voice I/O

If you have ElevenLabs configured as a Moltbot skill, agents auto-speak their responses. The browser's Speech Recognition API lets you talk to agents by voice (Chrome/Edge only, needs HTTPS or localhost).

Running It

60-Second Setup

# That's it. Seriously.
npx @ask-mojo/moltcraft

This:

Downloads the package
Reads your ~/.moltbot/moltbot.json for gateway URL + token
Starts the proxy server on port 8080
Opens your browser

CLI Options

npx @ask-mojo/moltcraft --port 3000    # Custom port
npx @ask-mojo/moltcraft --tunnel        # Cloudflare tunnel for remote access
npx @ask-mojo/moltcraft --no-open       # Don't auto-open browser

From Source

git clone https://github.com/askmojo/moltcraft
cd moltcraft
node server.js

What I Learned

1. Vanilla JS Is Underrated

The developer experience of writing vanilla JS in 2026 is actually great. Modern browsers have querySelector, fetch, IntersectionObserver, Web Animations API, CSS Grid, CSS Custom Properties... You don't need a framework for a single-page dashboard.

The tradeoff is real: no component model, no reactivity system, more manual DOM work. But for a project like this, the simplicity wins.

2. Spatial Beats Textual for Monitoring

This isn't just aesthetic. When I switched from terminal logs to the pixel world, I genuinely caught issues faster. "Why is that agent standing still?" is a more natural question than parsing timestamps in a log file. Spatial anomalies are intuitively obvious.

3. Fun Is a Feature

I added the day/night cycle, weather, and ambient sound on a whim. They turned out to be the features people comment on most. Making developer tools enjoyable isn't frivolous — it's what makes people actually use them.

What's Next

Plugin system — custom data panels as buildings
Mobile support — responsive isometric view
Community buildings — shared worlds across teams
More agent animations — state-based behaviors (thinking, coding, browsing)

Try It

npx @ask-mojo/moltcraft

⭐ Star the repo: github.com/askmojo/moltcraft
💬 Join Discord: discord.gg/vZbu5pePNY
🌐 Website: moltcraft.xyz

MIT licensed. Your agents have a world now. 🏰

DEV Community: Rwan