Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Add NanoClaw Dashboard

Wires a local monitoring dashboard into a NanoClaw project to visualize agents, sessions, tokens and live logs.

Dev & CodingIntermediate★ 30,471⑂ 12,865AI score 7/10Last updated: Aug 9, 2026

What it does

Installs the @nanoco/nanoclaw-dashboard npm package and adds a pusher module (src/dashboard-pusher.ts) that collects NanoClaw DB data and tails the log file, posting JSON snapshots every 60s and log lines every 2s. Integration is a single colocated block inside main() in src/index.ts (dynamic import plus an awaited startDashboard() call).

Two shipped tests make the change verifiable: a behavior test posts a real snapshot to a fake dashboard, and a wiring test walks the TypeScript AST to assert the edit sits in the right place — after DB init, before the boot-complete log. Without DASHBOARD_SECRET the pusher no-ops, so core behavior is unchanged.

Who it's for

  • Self-hosters of NanoClaw who want visibility into agent groups and sessions
  • Operators tracking token usage, cache hit rate and context-window pressure
  • Debugging sessions that need real-time log streaming with level filters
  • Developers studying a minimal, easily reversible integration pattern

Examples

  1. Ask "add the dashboard" → package installed, pusher copied, one block wired into index.ts, secret generated in .env, then open http://localhost:3100/dashboard.
  2. Investigate sessions that keep hitting context limits → read the Sessions context-usage bars plus the Overview token chart.
  3. Roll it back → delete the three files, uninstall the package, strip the dashboard block and env vars, rebuild.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .claude/skills/add-dashboard folder from the GitHub repo nanocoai/nanoclaw into my ~/.claude/skills/add-dashboard/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/nanocoai/nanoclaw.git && mkdir -p ~/.claude/skills && cp -r nanoclaw/.claude/skills/add-dashboard ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and clone the repo: git clone https://github.com/nanocoai/nanoclaw.git
  2. Copy the skill into your Claude Code skills folder: mkdir -p ~/.claude/skills && cp -r nanoclaw/.claude/skills/add-dashboard ~/.claude/skills/ (skip if you already work inside the NanoClaw project).
  3. Start Claude Code from the NanoClaw project root.
  4. Run /add-dashboard or simply ask for a monitoring dashboard.
  5. Confirm pnpm install @nanoco/nanoclaw-dashboard ran and the three pusher files landed in src/.
  6. Check that .env now has a random DASHBOARD_SECRET and DASHBOARD_PORT=3100.
  7. Run pnpm run build first, then pnpm exec vitest run src/dashboard-pusher.test.ts src/dashboard-wiring.test.ts (order matters — the build is what verifies the dependency).
  8. Restart the service, then open http://localhost:3100/dashboard in your browser.
View source on GitHub ↗License: MIT