Add scenario-modeler-server example
Demo MCP App for SaaS financial planning with: - Interactive sliders for MRR, growth, churn, margin, and costs - 12-month projection charts (MRR, Gross Profit, Net Profit) - 5 pre-built scenario templates (Bootstrapped, VC Rocketship, etc.) - Template comparison overlay for strategy analysis - Light/dark theme support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
f81d17f385
commit
79fa10097b
1 changed files with 1743 additions and 0 deletions
50
examples/scenario-modeler-server/README.md
Normal file
50
examples/scenario-modeler-server/README.md
Normal file
|
|
@ -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
|
||||
Loading…
Reference in a new issue