MCP Dashboard

Interactive dashboard that works as an MCP server. Claude Code (or any MCP client) calls tools to create workspaces, widgets, and artifacts in real-time. The browser renders everything live via Socket.io.

Claude Code  --stdio-->  MCP Server (Node.js)  --Socket.io-->  Browser Dashboard
                              |                                    (React 19)
                         Express HTTP (0.0.0.0)
                         SQLite (better-sqlite3)

Quick Start

npm install
npm run build:all
npm start
# Dashboard at http://localhost:4800

For development:

npm run dev    # Server + Client in parallel

MCP Setup

Add to your Claude Code config (~/.claude.json or .mcp.json):

{
  "mcpServers": {
    "mcp-dashboard": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/mcp-dashboard/dist/index.js"],
      "env": { "DASHBOARD_PORT": "4800" }
    }
  }
}

18 MCP Tools

Workspaces

Tool	Description
`dashboard_create_workspace`	Create a workspace (name, description, icon)
`dashboard_list_workspaces`	List all workspaces with widget counts
`dashboard_delete_workspace`	Delete a workspace and all its widgets

Widgets

Tool	Description
`dashboard_create_widget`	Create a widget in a workspace
`dashboard_update_widget`	Update widget data, title, or config
`dashboard_push_data`	Push incremental data (append rows, points, etc.)
`dashboard_delete_widget`	Remove a widget
`dashboard_list_widgets`	List widgets in a workspace

Tasks & Reminders

Tool	Description
`dashboard_add_task`	Add a task to a workspace
`dashboard_list_tasks`	List tasks
`dashboard_complete_task`	Toggle task completion
`dashboard_add_reminder`	Add a reminder with optional due date
`dashboard_list_reminders`	List reminders
`dashboard_complete_reminder`	Toggle reminder completion

Highlights & Utilities

Tool	Description
`dashboard_pin_widget`	Pin/unpin widget as highlight
`dashboard_snapshot`	Snapshot workspace state as artifact
`dashboard_notify`	Send toast notification to dashboard
`dashboard_report_activity`	Log MCP activity from other servers

Type	Description	Streaming
`metric_card`	Single KPI with trend and sparkline	Yes
`line_chart`	Time series (Recharts)	Yes
`bar_chart`	Categorical comparison	Yes
`pie_chart`	Distribution donut chart	No
`table`	Sortable, paginated data table	Yes
`markdown`	Rich text with GFM tables	No
`json_viewer`	Collapsible JSON tree	No
`code_block`	Syntax-highlighted code	No
`terminal`	Streaming command output	Yes
`timeline`	Chronological events	Yes
`progress_tracker`	Task progress with overall bar	Yes
`geometry`	SVG art canvas for visual expression	No
`links`	Bookmark collection with auto-icons	Yes
`project`	Project hub: repos, Slack, Notion, workspace link	No
`workspace_ref`	Card referencing another workspace	No
`section`	Full-width divider/title	No

Data Formats

Each widget type has a specific data schema. The MCP tool description includes all formats. Examples:

// Metric Card
{ value: 158000, label: "Revenue", unit: "$", trend: { direction: "up", percentage: 12.5 }, sparkline: [120, 135, 155, 158] }

// Bar Chart
{ categories: ["North", "South", "East"], series: [{ name: "Q1", values: [42000, 35000, 28000], color: "#60a5fa" }] }

// Line Chart
{ series: [{ name: "Revenue", data: [{ timestamp: "2026-01", value: 45000 }], color: "#60a5fa" }] }

// Table
{ columns: [{ key: "name", label: "Name", sortable: true }], rows: [{ name: "Acme Corp" }] }

// Project
{ name: "Tables", status: "active", repos: [{ name: "tables-sdk", url: "https://...", language: "TypeScript" }], channels: [{ name: "dev", type: "slack" }], notion: [{ title: "Docs", url: "https://...", type: "database" }], workspaceId: "xxx" }

// Geometry (SVG art)
{ svg: "<circle cx='200' cy='200' r='50' fill='#60a5fa'/>", viewBox: "0 0 400 400" }

Features

Real-time: Socket.io bridge pushes updates instantly to all connected browsers
Multi-instance: Multiple Claude Code sessions share the same dashboard. First instance owns HTTP, others relay via API
Drag & resize: react-grid-layout with drag handles and resize
Highlights: Pin any widget to a featured row at the top
Tasks & Reminders: Per-workspace todo lists and reminders with due dates
Archive: Workspaces can be archived and restored
Expand: Click any widget title to view fullscreen
Markdown: Full GFM support with expand-to-page
PDF export: One-click workspace export to PDF
LAN sharing: Share workspace URLs on local network
Activity bar: Shows MCP activity stream and overdue reminders
Workspace references: Meta-dashboards that link to other workspaces
Dark theme: Futuristic AI aesthetic with neural grid, scan lines, and ambient glow

Tech Stack

Server: Node.js 20, TypeScript, @modelcontextprotocol/sdk, Express 5, Socket.io 4, better-sqlite3, Zod

Client: React 19, Vite 6, TailwindCSS 4.1, Recharts, react-grid-layout, Zustand, Lucide icons, html2canvas-pro, jsPDF

License

MIT

mcp-dashboard