Skip to content

Conversation

@jonathanhefner
Copy link
Member

@jonathanhefner jonathanhefner commented Dec 4, 2025

This PR adds the following example MCP Apps:

  • Budget Allocator App: An interactive budget allocation tool demonstrating real-time data visualization with MCP Apps.
  • Cohort Heatmap App: A demo MCP App that displays cohort retention data as an interactive heatmap, showing customer retention over time by signup month.
  • Customer Segmentation Explorer: A demo MCP App that displays customer data as an interactive scatter/bubble chart with segment-based clustering.
  • 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.
  • Server System Monitor: A demo MCP App that displays real-time OS metrics with a stacked area chart for per-core CPU usage and a bar gauge for memory.

jonathanhefner and others added 7 commits December 4, 2025 14:32
Demo MCP App showcasing real-time OS metrics visualization with:
- Per-core CPU usage via stacked area chart (Chart.js)
- Memory usage bar gauge with color-coded thresholds
- Auto-polling at 2-second intervals
- Light/dark theme support

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

Co-Authored-By: Claude <[email protected]>
Demo MCP App for customer data visualization featuring:
- Interactive bubble chart (Chart.js) with configurable X/Y axes
- 250 customers across 4 segments (Enterprise, Mid-Market, SMB, Startup)
- 6 metrics: Revenue, Employees, Account Age, Engagement, Tickets, NPS
- Optional bubble sizing by a third metric
- Clickable legend for segment filtering
- Detail panel on hover/click
- Light/dark theme support

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

Co-Authored-By: Claude <[email protected]>
Demo MCP App visualizing cohort retention data with:
- Interactive heatmap with HSL color interpolation
- Multiple metrics: Retention %, Revenue Retention, Active Users
- Monthly/weekly period views
- Cell hover tooltips and row/column highlighting
- Light/dark theme support

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

Co-Authored-By: Claude <[email protected]>
Demo MCP App for interactive budget allocation with:
- Slider controls for 5 categories (Marketing, Engineering, etc.)
- Real-time donut chart visualization via Chart.js
- 24-month sparkline trends per category
- Industry benchmark percentile badges
- Company stage selector (Seed through Growth)
- Budget preset buttons ($50K-$500K)

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

Co-Authored-By: Claude <[email protected]>
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 <[email protected]>
Replace hardcoded workspace list with find + xargs to automatically
build all examples in parallel. New examples are picked up without
manual script updates.

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

Co-Authored-By: Claude <[email protected]>
Apply MIME type change from commit 0af1532 to all examples and docs.
The profile parameter follows RFC 6838 recommendations for custom
media types, as MCP Apps is a profile of HTML rather than a new syntax.

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

Co-Authored-By: Claude <[email protected]>
@jonathanhefner
Copy link
Member Author

I've also pushed a commit to update all examples (including previously existing examples) to use the new text/html;profile=mcp-app MIME type, per 0af1532.

@jonathanhefner
Copy link
Member Author

By the way, some screenshots:

Example 1 2 3
Budget Allocator App budget-allocator-server-01-initial budget-allocator-server-02-over-budget budget-allocator-server-03-tech-heavy
Cohort Heatmap App cohort-heatmap-server-01-initial-view cohort-heatmap-server-02-hover-state cohort-heatmap-server-03-low-retention-hover
Customer Segmentation Explorer customer-segmentation-server-01-account-age-revenue customer-segmentation-server-02-tickets-nps-engagement customer-segmentation-server-07-age-engagement-revenue
SaaS Scenario Modeler scenario-modeler-server-01-compare-to scenario-modeler-server-02-bootstrapped-growth scenario-modeler-server-03-vc-rocketship
Server System Monitor system-monitor-server-01-initial-state system-monitor-server-02-cpu-data-accumulated system-monitor-server-03-extended-cpu-history

I want to add these to the READMEs, but I don't want to shove the binaries in the main branch, so after we merge this PR, I'll make 2 follow-ups: (1) a PR to the gh-pages branch that commits the binaries there, making them hosted via GitHub Pages, and (2) a PR to main branch that adds the appropriate image tags to the READMEs.

Copy link
Collaborator

@antonpk1 antonpk1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's goo!

@antonpk1 antonpk1 merged commit 45259c5 into modelcontextprotocol:main Dec 5, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants