Getting started

Get a working AI Operations Dashboard running locally in 60 seconds. No database. No API keys. No services to provision.

> Brand-new and want the full, beginner walkthrough (install on a Mac, > clear the demo data, connect your repos, and wire Claude to feed the dashboard > live)? See `SETUP-GUIDE.md`. This page is the fast tour.

Install

git clone <your-ai-ops-dashboard-repo> my-dashboard
cd my-dashboard
npm install
npm run dev

Open http://localhost:3000. You should see a populated dashboard rendered from the sample data in data/ and docs/. When you're ready to use it for real, run npm run reset to clear the sample data to a clean slate (your data only), then npm run setup to brand it.

Requirements: Node 20+, npm (or pnpm/yarn — package.json is plain npm).

What you see on first run

The default config ships twelve panels, plus a guided Start Here onboarding tab (a live setup checklist). Click through the tab strip:

Overview — Synthesis tab. Top priorities, last log entry, recent commits, AI spend at a glance.
Plan — Roadmap, sub-task ledger, and decision log parsed from plans/execution-status.md.
Sprints — Sprint-progress board parsed from plans/execution-status.md.
Activity — 90-day commit heat map plus a chronological commit list, grouped by day.
Pending — Open work items from data/pending.json, sorted by priority with optional step-by-step instructions.
Log — Operator log entries from docs/operator-log.md, newest first.
Postmortems — Incident records from knowledge/postmortems/*.md, severity-tinted, with cross-cutting prevention.
Usage — AI spend rolled up by day, month, quarter, and model from data/usage.json.
Scheduled Jobs — Recurring jobs catalogue from data/scheduled-jobs.json.
Repos — Aggregated signals across connected repos (multi-repo roll-up).
Docs — In-app viewer for your own operator docs/ (operator-log.md excluded). The dashboard's product guides live separately at /help.
Skills — Inventory of Skills, agents, MCPs, and plugins (Claude Code).
Token Savings — How much context (tokens / $) claude-mem + Graphify save vs. loading everything every time.

Token Savings and Skills are hidden by default (they need extra setup — the claude-mem database and a ~/.claude folder). Turn them on anytime from ⚙ Tabs in the header, or at /admin/tabs. You can show/hide *any* tab there — nothing is deleted.

Above the tabs you'll see a hero stat strip — each panel can contribute up to two stats. The top banner is the AI spend watchdog.

Where to edit

One file. ai-ops-dashboard.config.ts is the only thing most users touch:

export const config: AiOpsDashboardConfig = {
  product: {
    title: "AI Operations Dashboard Dashboard",
    tagline: "Live operator view — work, plans, spend, postmortems.",
    description: "AI Operations Dashboard — one page for everything happening in your project.",
    eyebrow: "Operator dashboard",
  },
  theme: "dark",
  defaultTab: "overview",
  refreshSeconds: 120,
  panels: [overview, plan, sprints, activity, pending, log, postmortems, usage, scheduled, repos, docs, skills],
  banner: spendBanner,
  branding: { showPoweredBy: true },
}

Save the file and the dev server reloads. Full schema reference: configuration.md.

Three things to do next

1. Change the branding

Edit product.title, product.tagline, and product.eyebrow in ai-ops-dashboard.config.ts. They render in the header on every tab.

product: {
  title: "Acme HQ",
  tagline: "Everything shipping this week.",
  eyebrow: "Internal",
  description: "Acme operator dashboard.",
},

2. Swap the theme

Eight themes ship in app/globals.css — four dark, four light:

theme: "noir"      // default — neutral dark
theme: "aurora"    // dark, cool accent
theme: "ember"     // dark, warm accent
theme: "terminal"  // dark, monospace, terminal-native
theme: "paper"     // light, minimal, print-feel
theme: "linen"     // light, warm
theme: "nordic"    // light, cool
theme: "meridian"  // light, balanced

Or define your own preset in app/globals.css — see configuration.md.

3. Drop panels you don't need

Each panel is an import. Remove it from panels[] and it disappears from the tab strip — no other config changes needed:

panels: [
  overview,
  activity,
  usage,
  // pending, log, postmortems, scheduled — removed
],

Need a panel that isn't built in? Run npm run new:panel -- <slug> to scaffold one. See panels.md.

configuration.md — Full config schema.
panels.md — Panel API, built-in catalogue, and how to write your own.
deployment.md — Vercel, static export, Docker, auth.

For commercial use, see the LICENSE. Free for personal projects; $49 Starter / $149 Pro / $499 Agency for commercial.

AI Ops Dashboard