modelcontextprotocol
diff --git a/‎examples/scenario-modeler-server/README.md‎
Lines changed: 50 additions & 0 deletions b/‎examples/scenario-modeler-server/README.md‎
Lines changed: 50 additions & 0 deletions
diff --git a/‎examples/scenario-modeler-server/mcp-app.html‎
Lines changed: 12 additions & 0 deletions b/‎examples/scenario-modeler-server/mcp-app.html‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎examples/scenario-modeler-server/package.json‎
Lines changed: 35 additions & 0 deletions b/‎examples/scenario-modeler-server/package.json‎
Lines changed: 35 additions & 0 deletions
@@ -0,0 +1,50 @@
+# Example: SaaS Scenario Modeler
+
+A React-based demo MCP App that lets users adjust SaaS business parameters and see real-time 12-month projections of revenue, costs, and profitability with comparison against pre-built scenario templates.
+
+## Features
+
+- **Interactive Parameters**: 5 sliders for Starting MRR, Growth Rate, Churn Rate, Gross Margin, and Fixed Costs
+- **12-Month Projections**: Line chart showing MRR, Gross Profit, and Net Profit over time
+- **Scenario Templates**: 5 pre-built business strategies (Bootstrapped, VC Rocketship, Cash Cow, Turnaround, Efficient Growth)
+- **Template Comparison**: Overlay dashed lines to compare your scenario against any template
+- **Summary Metrics**: Key metrics including Ending MRR, Total Revenue, Total Profit, and break-even month
+- **Theme Support**: Adapts to light/dark mode preferences
+
+## Running
+
+1. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+2. Build and start the server:
+
+   ```bash
+   npm start
+   ```
+
+   The server will listen on `http://localhost:3001/mcp`.
+
+3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
+
+## Architecture
+
+### Server (`server.ts`)
+
+Exposes a single `get-scenario-data` tool that returns:
+
+- 5 pre-built scenario templates with parameters, projections, and summaries
+- Default input values for the sliders
+- Optionally computes custom projections when `customInputs` are provided
+
+The tool is linked to a UI resource via `_meta[RESOURCE_URI_META_KEY]`.
+
+### App (`src/`)
+
+- Built with React for reactive slider updates and derived state management
+- Uses Chart.js for the line chart visualization
+- All projection calculations run client-side for instant slider feedback
+- Components: `SliderRow`, `MetricCard`, `ProjectionChart`
+- Template comparison shown as dashed overlay lines on the chart
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SaaS Scenario Modeler</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/mcp-app.tsx"></script>
+</body>
+</html>
@@ -0,0 +1,35 @@
+{
+  "name": "scenario-modeler-server",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "INPUT=mcp-app.html vite build",
+    "watch": "INPUT=mcp-app.html vite build --watch",
+    "serve": "bun server.ts",
+    "start": "NODE_ENV=development npm run build && npm run serve",
+    "dev": "NODE_ENV=development concurrently 'npm run watch' 'npm run serve'"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/ext-apps": "../..",
+    "@modelcontextprotocol/sdk": "^1.22.0",
+    "chart.js": "^4.4.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^3.25.0"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.2.1",
+    "cors": "^2.8.5",
+    "express": "^5.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}