Launch a live NotebookLM-style dashboard for managing sources and generating outputs. Use when the user wants a visual interface, dashboard, or UI for their notebook.
Live interactive dashboard server that mirrors NotebookLM's interface with real-time updates via SSE.
skills/ui/
├── SKILL.md # This file
├── dashboard/
│ ├── index.html # SPA markup + client JS ({{CSS}} placeholder)
│ └── index.css # All styles and design tokens
└── scripts/
└── dashboard.mjs # HTTP server, SSE, generation pipeline
The server reads index.html and index.css at runtime, injects CSS via the {{CSS}} placeholder, and serves the composed page. Zero npm dependencies — Node.js builtins only.
node "${CLAUDE_SKILL_DIR}/scripts/dashboard.mjs" -o output [--name notebook] [--port 3456]
This starts a local HTTP server and auto-opens the browser.
| Flag | Default | Description |
|---|---|---|
-o <dir> | ./output | Output directory for generated files |
--name <name> | notebook | Project name |
--port <port> | 3456 | Server port |
~/.notebook-plugin/stores/<hash>/meta.json--resume into it so source material stays in context_<type>_input.json files are removed after generation| Endpoint | Method | Description |
|---|---|---|
/ | GET | Serves the dashboard HTML |
/api/state | GET | Current sources, outputs, chunks |
/api/events | GET | SSE stream for real-time updates |
/api/generate/<type> | POST | Enqueue generation (body: { topic }) |
/api/jobs | GET | Current job statuses |
/outputs/<file> | GET | Serve generated output files |
| Type | Script | Description |
|---|---|---|
flashcards | flashcards.mjs | 15-30 study cards |
quiz | quiz.mjs | 50-question assessment |
report | report.mjs | Executive report (DOCX + HTML) |
slide-deck | slide-deck.mjs | 8-15 slide presentation |
mind-map | mind-map.mjs | Mermaid mindmap diagram |
infographic | infographic.mjs | Visual stats infographic |
data-table | data-table.mjs | Structured data extraction |
audio-overview | audio-overview.sh | Conversational audio summary |
scripts/dashboard.mjs (~454 lines)Server logic only: CLI args, data gathering from vector store metadata, SSE broadcasting, file watcher, generation pipeline (session management, claude invocation, queue processing), HTTP routing, MIME handling.
dashboard/index.htmlFull single-page app: HTML structure (header, 3-column layout, sources sidebar, center panel, studio sidebar, toast container), Google Fonts (Outfit + JetBrains Mono), Lucide icons CDN, and all client-side JavaScript (output type definitions, icon helpers, inline preview system, render functions, SSE connection, toast system, tile click handlers).
dashboard/index.cssAll styles: CSS custom properties (design tokens for colors, fonts, radii), base resets, layout grid, component styles (cards, tiles, panels, badges, toasts), inline preview overlay, scrollbar theming, animations, and responsive breakpoints.
~/.notebook-plugin/stores/<md5(cwd)>/meta.json — run ingest first.claude binary path defaults to /opt/homebrew/bin/claude. Override with CLAUDE_BIN env var.skills/generate/ scripts and skills/ingest/scripts/query.mjs to be present.report, slide-deck, data-table, and ingest/query scripts require Bun (deps auto-installed). Override path with BUN_BIN env var.$ARGUMENTS