Skip to main content
Glama
MarcoValdiviesoB

mcp-dashboard

by MarcoValdiviesoB
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

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

15 Widget Types

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

This server cannot be installed

-
license - not tested
-
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/MarcoValdiviesoB/mcp-dashboard'

If you have feedback or need assistance with the MCP directory API, please join our Discord server