modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ext-apps/examples/scenario-modeler-server
History
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Anton Pidkuiko 8550545ccb
 fix: add mimeType to resource declarations in examples (#149) 
According to spec, mimeType should be present in both the resource
declaration and the resource content. This adds the missing mimeType
to the registerResource() declaration (third parameter) in all example
servers and the quickstart documentation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: ochafik <olivier.chafik@gmail.com>
2025-12-15 12:09:47 +00:00
..
src Fix widget layout to use full available width 2025-12-08 14:01:28 +00:00
mcp-app.html Add scenario-modeler-server example 2025-12-04 14:33:07 -06:00
package.json Implement BYO zod v3 or v4 2025-12-12 11:29:02 +01:00
README.md Smoothen the process of getting started (#103) 2025-12-09 16:15:32 +01:00
server.ts fix: add mimeType to resource declarations in examples (#149) 2025-12-15 12:09:47 +00:00
tsconfig.json Add scenario-modeler-server example 2025-12-04 14:33:07 -06:00
vite.config.ts Add scenario-modeler-server example 2025-12-04 14:33:07 -06:00

README.md

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.

Compare to Bootstrapped growth VC rocketship

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:

    npm install

  2. Build and start the server:

    npm run start:http  # for Streamable HTTP transport
# OR
npm run start:stdio  # for stdio transport

  3. View using the 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