// 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.
Generate rich outputs from ingested sources — flashcards, quizzes, reports, slide decks, mind maps, infographics, data tables, or audio overviews. Use when the user wants to create any output from their documents.
Ingest and vectorize PDFs or text files for RAG retrieval. Use when the user provides a PDF, document, or text file they want to analyze, study, or generate content from.
| name | dashboard |
| description | 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. |
| argument-hint | [--port 3456] |
| compatibility | Requires Node.js 18+ and Bun 1.0+. |
| allowed-tools | Bash(bash *) Bash(bun *) Bash(node *) Write Read |
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