Realtime Sales Dashboard — MCP Apps + WebSocket

A live, auto-refreshing sales dashboard built as an MCP (Model Context Protocol) server with an embedded rich UI. The dashboard streams simulated sales data for Indian states via WebSocket, rendering KPI cards, state-level rankings, sparkline charts, and a live activity feed — all inside an MCP App iframe.

Article

Read the full article for more details on how this functionality is added -

How I Added WebSocket-Powered Realtime Streaming to MCP Apps

Related MCP server: akapal-mcp-portfolio

Demo

Key Features

• Live KPI Cards — Revenue, Orders, Conversion Rate, AOV, and New Customers with delta indicators and sparkline micro-charts

• State Rankings Chart — Horizontal bar chart (Chart.js) ranking all states by the selected metric, with toggleable state chips

• Activity Feed — Real-time stream of simulated order, conversion, and customer events across Indian cities

• WebSocket Push — Sub-2-second data refresh via a Python WebSocket server

Prerequisites

• Node.js ≥ 18

• Python ≥ 3.10

• npm (comes with Node.js)

Quick Start

1. Install dependencies

# Node.js dependencies
npm install

# Python dependencies
pip install -r requirements.txt

2. Start the WebSocket server

python ws_server.py

You should see:

🚀 WebSocket server starting on ws://localhost:8765
📡 Dashboard clients connect to: ws://localhost:8765
⏱️  Push interval: 1.8s
✅ Server listening on ws://localhost:8765

3. Start the MCP server

In a separate terminal:

# Development (with hot-reload via tsx)
npm run dev

# — or — Production
npm run build
npm start

You should see:

🚀 MCP Apps Realtime Sales Dashboard server running at http://localhost:3000
📡 MCP endpoint: http://localhost:3000/mcp

License

This project is licensed under the Apache License 2.0.