Commit graph ext-apps/examples
Author SHA1 Message Date
Jonathan Hefner
79fa10097b 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>
2025-12-04 14:33:07 -06:00
Jonathan Hefner
f81d17f385 Add budget-allocator-server example
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 <noreply@anthropic.com>
2025-12-04 14:33:01 -06:00
Jonathan Hefner
c711b1aac4 Add cohort-heatmap-server example
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 <noreply@anthropic.com>
2025-12-04 14:32:53 -06:00
Jonathan Hefner
98d8fcddff Add customer-segmentation-server example
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 <noreply@anthropic.com>
2025-12-04 14:32:47 -06:00
Jonathan Hefner
fa2d413f1d Add system-monitor-server example
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 <noreply@anthropic.com>
2025-12-04 14:32:41 -06:00
Jonathan Hefner
308537daac Remove simple-host and simple-server examples
These legacy examples have been replaced by basic-host,
basic-server-react, and basic-server-vanillajs.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 14:28:55 -06:00
Jonathan Hefner
4b5b0c7d79 Add basic-server-vanillajs example
Demonstrates MCP App SDK usage with vanilla JavaScript (no framework),
providing parity with the existing basic-server-react example.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 14:28:27 -06:00
Jonathan Hefner
97310d50c5 Add basic-host and basic-server-react examples
Introduce new example implementations to replace simple-host and
simple-server:

- basic-host: Reference host implementation with double-iframe sandbox
  pattern for secure UI isolation (outer iframe validates and relays
  messages, inner iframe renders untrusted tool UI via srcdoc)

- basic-server-react: MCP server example demonstrating tool registration
  with linked UI resources and React UI using the useApp() hook

Build infrastructure updates:
- Add build:all script and simplify CI/pre-commit to use it
- Add examples:dev for watch-mode development workflow

Also change PostMessageTransport logging from info to debug level.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 14:28:27 -06:00
Anton Pidkuiko
0af15322af
fix: use profile parameter for MIME type instead of suffix (#75)
Change MIME type from `text/html+mcp` to `text/html;profile=mcp-app`
to follow RFC 6838 recommendations for custom media types.

The `+suffix` format (like `text/html+mcp`) is intended for structured
syntax suffixes (e.g., `+json`, `+xml`) that describe the underlying
format. Since MCP Apps doesn't define a new syntax but rather a profile
of HTML, using a profile parameter is more semantically correct.

Fixes #59

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

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-04 20:28:58 +02:00
Jan Olaf Martin
a7d73c72e0
Make vite work out-of-the-box for simple-host (#33) 2025-12-01 21:57:46 +00:00
Jonathan Hefner
484768c3d1
Fix sandbox proxy ready detection in simple-host example (#47)
Replace Zod schema's internal _def.value access with a direct string
literal. The previous approach failed due to multiple Zod instances
being bundled, causing schema.shape.method._def.value to return
undefined.

The fix uses a typed string constant that provides compile-time safety
via McpUiSandboxProxyReadyNotification["method"] while avoiding runtime
dependency on Zod internals.

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

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-01 20:07:40 +00:00
Matthew Wang
40e0fdf685
docs: fix React UI tool call example 2025-12-01 02:04:40 +02:00
Olivier Chafik
3e5ec1ae0b
build: use workspaces for example subfolders (#23)
* use npm workspaces

* Update package.json
2025-11-25 03:14:14 +00:00
Olivier Chafik
b4c6019d47
example-host: fix sandboxing setup (#21)
* example-host: prevent accidental non-iframing of sandbox (or iframing in prod)

* fix sandbox isolation + "test in prod"

* Update package.json

* Update sandbox.ts
2025-11-25 02:45:55 +00:00
Olivier Chafik
3df49c38dc
fix iframe resizing (#19)
* reshuffle build / start scripts

* fix resize logic

* prettier

* extract RESOURCE_URI_META_KEY constant

* Update message-transport.ts

* Update package.json
2025-11-25 02:39:33 +00:00
Olivier Chafik
c800b34635
format 2025-11-24 17:27:06 +00:00
Olivier Chafik
e4e7edf284
reshuffle, use -vanilla consistently 2025-11-24 16:59:41 +00:00
Olivier Chafik
24dd9691de
fix mcp sdk refs 2025-11-24 16:53:55 +00:00
Olivier Chafik
eab25b6821
serve.py -> server.ts 2025-11-24 16:52:05 +00:00
Olivier Chafik
3c438c29c4
Update example-host.ts 2025-11-24 16:26:57 +00:00
Olivier Chafik
1a4c0180eb
nit: rm unused type 2025-11-24 16:21:22 +00:00
Olivier Chafik
54a48a4a13
rename: AppRenderer 2025-11-24 16:20:45 +00:00
Olivier Chafik
d32e43aaf5
tweaks 2025-11-24 16:14:17 +00:00
Olivier Chafik
bc6458d3fb
tweaks 2025-11-24 16:12:55 +00:00
Olivier Chafik
14740aacea
fix build 2025-11-24 16:07:10 +00:00
Olivier Chafik
b738294458
fix build 2025-11-24 16:03:24 +00:00
Olivier Chafik
85816d80ce
Merge branch 'main' into ochafik/simple-host-example 2025-11-24 16:01:24 +00:00
Olivier Chafik
1f3bc52142
add simple-host example 2025-11-24 16:01:10 +00:00
Olivier Chafik
ac3863092a
setup notification handlers in App & AppBridge 2025-11-24 14:59:58 +00:00
ochafik
b6da14cefd update examples 2025-11-23 03:58:51 +00:00
ochafik
adc73e4fa6 simplify ui build 2025-11-23 03:27:46 +00:00
ochafik
00023ba3e9 npm run prettier:fix 2025-11-23 03:15:06 +00:00
ochafik
ec306a8698 add a raw (no sdk) UI 2025-11-23 03:14:19 +00:00
ochafik
5aa7f93a79 reference parent package in simple server 2025-11-23 02:38:55 +00:00
ochafik
d0a7c9b86a fix package lock of example, bump mcp sdk version 2025-11-23 02:36:24 +00:00
Anton Pidkuiko MacBook
c65006acb4
fix: use text/html+mcp mimeType format
Change from text/vnd.mcp.ui+html to text/html+mcp.

Rationale:
- It's an unregistered subtype, allowed for private use
- The +suffix form indicates MCP-specific semantics (postMessage protocol)
- Content is still valid HTML and can be rendered as-such
- Following RFC 6838, +mcp could be registered as an official suffix

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 21:38:19 +00:00
Olivier Chafik
ff7c2107e2
Merge branch 'main' of https://github.com/modelcontextprotocol/ext-apps 2025-11-21 20:24:26 +00:00
Olivier Chafik
6ea36fe5f3
use remote dep from example 2025-11-21 20:24:22 +00:00
Anton Pidkuiko MacBook
bd5a34ba07
fix: use consistent text/vnd.mcp.ui+html mimeType throughout
Replace all occurrences of text/html with text/vnd.mcp.ui+html
in the specification and example code for consistency.

The spec already defined text/vnd.mcp.ui+html in the capability
negotiation section but used text/html in other places.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 19:32:46 +00:00
Olivier Chafik
b20313a655
rm old examples 2025-11-21 14:12:45 +00:00
Olivier Chafik
60cf8ce176
update simple-server example 2025-11-21 13:33:57 +00:00
Olivier Chafik
697a7ac658
Add standalone Vite build for simple-react example
Replace custom build.ts dependency with standard Vite setup:
- package.json with Vite scripts (dev, build, preview)
- Use @modelcontextprotocol/ext-apps package imports
- Standard Vite project structure (index.html at root)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 12:59:41 +00:00
Olivier Chafik
92f42cf533
Initial commit 2025-11-21 11:56:27 +00:00