DEV Community

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

Posted on

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

#javascript #opensource #ai #webdev

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.
Enter fullscreen mode Exit fullscreen mode

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.

Moltcraft screenshot

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:

  1. 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.

  2. Size. The entire package is ~2MB. It runs on a Raspberry Pi without breaking a sweat.

  3. 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)│
                          └─────────────────┘
Enter fullscreen mode Exit fullscreen mode

The Node.js server does two things:

  1. Serves the static frontend files
  2. 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
Enter fullscreen mode Exit fullscreen mode

This:

  1. Downloads the package
  2. Reads your ~/.moltbot/moltbot.json for gateway URL + token
  3. Starts the proxy server on port 8080
  4. 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
Enter fullscreen mode Exit fullscreen mode

From Source 

git clone https://github.com/askmojo/moltcraft
cd moltcraft
node server.js
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

MIT licensed. Your agents have a world now. 🏰

Top comments (0)