# Realtime Sales Dashboard — MCP Apps + WebSocket

A live, auto-refreshing sales dashboard built as an [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) 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](https://dev.to/ashita/how-i-added-websocket-powered-realtime-streaming-to-mcp-apps-3oh6)

## Demo

<img width="800" height="557" alt="realtime-dashboard" src="https://github.com/user-attachments/assets/af098aee-bf4e-4fd0-ac92-fdefd3bf1d4f" />

### 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

```bash
# Node.js dependencies
npm install

# Python dependencies
pip install -r requirements.txt
```

### 2. Start the WebSocket server

```bash
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:

```bash
# 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](LICENSE).