Commit graph

184 commits

Author SHA1 Message Date
Olivier Chafik
6b9bedaa5b
release: 0.0.5 (fix release config again) (#110) v0.0.5
* release: fix NPM_SECRET reference

* release: 0.0.5
2025-12-09 20:07:26 +01:00
Olivier Chafik
c8e8b4f10a
Update README.md (#107) 2025-12-09 19:20:37 +01:00
Anton Pidkuiko
546f507e49
Add QR code Python MCP server example (#105)
* Add QR code Python MCP server example

A minimal Python MCP server that generates customizable QR codes with an
interactive widget UI. Features:

- Generate QR codes from any text or URL
- Customizable colors, size, border, and error correction
- Interactive widget using MCP Apps SDK protocol
- Supports both HTTP (for web clients) and stdio (for Claude Desktop)

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

Co-Authored-By: Claude <noreply@anthropic.com>

* Potential fix for code scanning alert no. 10: Client-side cross-site scripting

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Add semicolon

* Bind to 0.0.0.0 for Docker compatibility

* Use SDK from unpkg + add CSP resourceDomains for external scripts

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
2025-12-09 19:20:08 +01:00
Olivier Chafik
3ac7c7935b
Add RESOURCE_MIME_TYPE constant (#108)
* Add RESOURCE_MIME_TYPE constant

* Update app-bridge.ts

* update syntax
2025-12-09 19:10:56 +01:00
Jonathan Hefner
f712008be4
Deploy docs to GitHub Pages on release (#104)
Automatically publish documentation when a new release is created,
ensuring docs stay in sync with published package versions.

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

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-09 16:18:19 +01:00
Jonathan Hefner
038b702497
Add checkpoints and callouts to quickstart guide (#93)
- Add top-level note linking to complete example project
- Convert "Full files:" references to [!NOTE] callouts
- Add verification checkpoint after server creation (tsc --noEmit)
- Add verification checkpoint after UI build (ls dist/)

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

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-09 16:16:28 +01:00
Jonathan Hefner
4ca20f21c4
Smoothen the process of getting started (#103)
* Restructure threejs-server README to match marketing examples

- Update title format to "Example: Three.js App"
- Constrain screenshot width using table layout
- Add Features section with key capabilities
- Reorganize Running section with Tool Input subsection
- Add Architecture section describing server and app components
- Remove implementation-focused sections (WidgetProps, Creating a New Widget)

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add bun as devDependency to example packages

npm install now automatically installs bun, eliminating the need for
separate installation instructions. Removed manual bun install step
from customer-segmentation-server README.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add start:http and start:stdio npm scripts to examples

For the 6 examples supporting --stdio transport, add explicit scripts:
- serve:http / serve:stdio for running the server
- start:http / start:stdio for build + serve
- start now aliases to start:http for backward compatibility

Update READMEs to document both transport options.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Default basic-host SERVERS to localhost:3001/mcp

- Change threejs-server default port from 3109 to 3001 for consistency
- Add default SERVERS value in basic-host serve.ts
- Document SERVERS env var in basic-host README

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Improve Examples section in README

Frame the three basic examples as foundational starting points and
add a link to the examples directory for additional demo apps.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-09 16:15:32 +01:00
Olivier Chafik
c03e99df59
release: v0.0.4 (try using node token again) (#102) v0.0.4
* release: reinstate NODE_AUTH_TOKEN

* v0.0.4
2025-12-09 01:29:06 +01:00
Olivier Chafik
5c9665325d
release: 0.0.3, switched to npm trusted publishing (#101) v0.0.3
* version: 0.0.2

* Switch to npm trusted publishing (OIDC)

- Remove NPM_TOKEN secret requirement from npm-publish workflow
- Uses OIDC for authentication (more secure, no long-lived tokens)
- Update CONTRIBUTING.md with trusted publisher setup instructions

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

Co-Authored-By: Claude <noreply@anthropic.com>

* 0.0.3

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-09 00:52:52 +01:00
Anton Pidkuiko
fd29038351
Merge pull request #100 from modelcontextprotocol/docs/add-bun-install-step
docs: add Bun installation step to customer-segmentation-server README
2025-12-08 23:48:31 +00:00
Anton Pidkuiko MacBook
2194acea5f
docs: add Bun installation step to customer-segmentation-server README
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 23:39:01 +00:00
Anton Pidkuiko
4736621512
Merge pull request #97 from jonathanhefner/running-all-examples
Add `examples/run-all.ts` script
2025-12-08 23:37:44 +00:00
Olivier Chafik
94d45a1f60
version: 0.0.2 (#98) v0.0.2 2025-12-08 23:40:31 +01:00
Jonathan Hefner
d11b656d8e Refactor basic-host to use ServerSelect component
Extract server dropdown into ServerSelect component and simplify
ToolCallInfoPanel to read server name from toolCallInfo.serverInfo.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-08 16:34:52 -06:00
Jonathan Hefner
8bff1dff68 Add dynamic example orchestration script
Replace hardcoded port assignments and npm scripts with run-all.ts that:
- Auto-discovers example directories and assigns ports
- Passes server URLs to basic-host via SERVERS env var
- Supports start, dev, and build commands

Update basic-host to fetch server list from /api/servers endpoint
and display server names from MCP server metadata.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-08 16:34:52 -06:00
Anton Pidkuiko
2b53efda5a
Merge pull request #94 from modelcontextprotocol/add-threejs-server
Add Three.js example server
2025-12-08 21:40:33 +00:00
Olivier Chafik
2d842a31fa
Add npm publish workflow (#89)
* Add npm publish workflow

- Add .github/workflows/npm-publish.yml triggered on GitHub releases
  - Runs build and test jobs before publishing
  - Uses NPM_TOKEN secret with OIDC provenance
  - Smart npm tagging: latest, beta, or release-X.Y
- Add prepack hook to package.json for automatic builds
- Move bun from dependencies to devDependencies
- Add npm test step to CI workflow

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

Co-Authored-By: Claude <noreply@anthropic.com>

* Add CONTRIBUTING.md with maintainer publishing guide

- Getting started and development process for contributors
- Pull request guidelines
- Maintainer section with:
  - Repository setup (NPM_TOKEN, release environment)
  - Step-by-step release publishing instructions
  - npm tag documentation (latest, beta, release-X.Y)
  - Maintenance release workflow
  - Pre-release testing via pkg-pr-new

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

Co-Authored-By: Claude <noreply@anthropic.com>

* ...

* Potential fix for code scanning alert no. 9: Workflow does not contain permissions

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
2025-12-08 22:23:57 +01:00
Anton Pidkuiko MacBook
2755438dba
Add Three.js marketing example server
New example demonstrating interactive 3D scene rendering with:
- show_threejs_scene tool with streaming code preview
- learn_threejs documentation tool
- Full WidgetProps interface for MCP App integration
- Reusable mcp-app-wrapper.tsx pattern

Also adds bun.lockb to .gitignore.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 21:19:42 +00:00
Olivier Chafik
42265d85a3
add license (#96)
* add license

* Update LICENSE
2025-12-08 21:51:19 +01:00
Olivier Chafik
f6ebefe238
Add server selector to basic-host example (#95)
* Add server selector to basic-host example

- Add ServerSelector component to switch between MCP servers
- Run all example servers concurrently on ports 3101-3107
- Update examples:start to launch all servers with assigned ports

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

Co-Authored-By: Claude <noreply@anthropic.com>

* Move server selector into tool call panel

- Server selector now in same component as tool selector
- Tool call results persist across server switches
- Connection caching avoids reconnects when switching servers
- Display server name with tool name in results (ServerName:ToolName)

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

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-08 18:45:50 +01:00
Olivier Chafik
3dde360dc9
handle server errors (#91) 2025-12-08 18:45:31 +01:00
Jonathan Hefner
4200a46fc2
Merge pull request #92 from jonathanhefner/responsive-basic-host
Enable responsive width growing in `basic-host`
2025-12-08 10:47:29 -06:00
Jonathan Hefner
5e96fcc87f Enable responsive width growing in basic-host
Change onsizechange handler to use min-width instead of width,
treating the app's reported size as a floor rather than exact.
Use min(Xpx, 100%) to allow shrinking with container.

Also remove outmost max-width constraint and simplify iframe CSS to
allow apps to demonstrate responsive growing.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-08 10:33:37 -06:00
Anton Pidkuiko
d97ae07849
Merge pull request #88 from modelcontextprotocol/ochafik/theme-layout-enums
types: add McpUiTheme, McpUiDisplayMode
2025-12-08 15:33:06 +00:00
Anton Pidkuiko
5ae292106c
Remove temporary JSON-RPC envelope unwrapping hack (#90)
The host implementation has been fixed to return the correct result
format, so this workaround is no longer needed.

Reverts the hack added in #82.

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

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-08 16:32:15 +01:00
Olivier Chafik
cb571bf0e5
add McpUiTheme, McpUiDisplayMode 2025-12-08 15:37:28 +01:00
Olivier Chafik
3aa93db3c3
Add AppBridge.sendHostContextChange + reexport RESOURCE_URI_META_KEY (#87)
* Export  RESOURCE_URI_META_KEY from app-bridge

* add sendHostContextChange

* nit
2025-12-08 15:28:21 +01:00
Anton Pidkuiko
43214f922c
Merge pull request #86 from modelcontextprotocol/fix-widget-layout
Fix widget layout to use full available width
2025-12-08 14:04:27 +00:00
Anton Pidkuiko MacBook
8ef9142f00
Fix widget layout to use full available width
- Change marketing widget containers from fixed 600px to width: 100%
- Update basic-host iframe to use flex: 1 for proper expansion
- Widgets now fill their parent container instead of fixed size

Files changed:
- examples/budget-allocator-server/src/mcp-app.css
- examples/customer-segmentation-server/src/mcp-app.css
- examples/scenario-modeler-server/src/mcp-app.css
- examples/system-monitor-server/src/mcp-app.css
- examples/basic-host/src/index.module.css

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 14:01:28 +00:00
Anton Pidkuiko
8f4a0c7d47
Merge pull request #85 from modelcontextprotocol/add-stdio-transport
Add optional stdio transport to marketing example servers
2025-12-08 13:59:40 +00:00
Anton Pidkuiko MacBook
d6ff3d9271
fix: format cohort-heatmap-server console.log line
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 13:37:17 +00:00
Anton Pidkuiko MacBook
e516b28d2e
Add optional stdio transport to marketing example servers
When launched with --stdio flag, servers use StdioServerTransport
instead of starting an HTTP server. This enables direct integration
with Claude Desktop and other MCP clients that use stdio transport.

Usage:
  bun examples/budget-allocator-server/server.ts --stdio

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 13:20:07 +00:00
Liad Yosef
ba1a27e465
fix: change size-changed to be in correct tense (#83)
* fix: change size-changed to be in correct tense

* sdk changes
2025-12-08 12:14:56 +01:00
Jerome
a09354bdf2
Fix compatibility with @modelcontextprotocol/sdk 1.23+ (#84)
* Fix compatibility with @modelcontextprotocol/sdk 1.23+

Implement required abstract methods `assertTaskCapability` and
`assertTaskHandlerCapability` in App and AppBridge classes. These
were added to the Protocol base class in SDK 1.23+.

Also regenerates package-lock.json with valid npm registry versions
(previously had non-existent vite@6.4.1).

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

Co-Authored-By: Claude <noreply@anthropic.com>

* Add pkg-pr-new workflow for PR/commit publishing

Enables automatic publishing of any commit or PR to pkg.pr.new,
allowing consumers to install directly from git commits:

npm install https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@<commit-or-pr>

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

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-08 12:13:07 +01:00
Anton Pidkuiko
47d1b37ba3
fix: remove 'system' from theme type (#79)
Remove 'system' option from theme, leaving only 'light' | 'dark'.

This aligns the SDK with:
- The spec (which already only has light/dark)
- OpenAI Apps SDK compatibility

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

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-08 03:14:33 +02:00
Anton Pidkuiko
c587e076a0
fix: correct host-context-changed notification name in spec (#78)
Update `ui/host-context-change` to `ui/notifications/host-context-changed`
to match the SDK implementation and follow the notifications naming convention.

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

Co-authored-by: Claude <noreply@anthropic.com>
2025-12-08 03:12:24 +02:00
Anton Pidkuiko
19b9360f40
Merge pull request #82 from modelcontextprotocol/fix-callservertool-unwrap
Temporal fix: Handle wrapped JSON-RPC responses in callServerTool
2025-12-05 23:15:14 +00:00
Jonathan Hefner
3d0a39b9b0
Merge pull request #74 from modelcontextprotocol/docs/safe-area-insets-comment
docs: remove "Mobile" from safeAreaInsets comment
2025-12-05 17:13:11 -06:00
Anton Pidkuiko MacBook
9743051f06
Fix callServerTool to handle wrapped JSON-RPC responses
Some host implementations incorrectly return the full JSON-RPC envelope
(with result, jsonrpc, id fields) instead of just the unwrapped result.
This causes apps using callServerTool() to fail when accessing result.content.

This fix detects wrapped responses and unwraps them automatically.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 23:12:26 +00:00
Jonathan Hefner
437b9185cc
Merge pull request #81 from jonathanhefner/examples-use-content-for-now
Use `content` instead of `structuredContent` in examples
2025-12-05 16:36:32 -06:00
Jonathan Hefner
61cd4ed219 Use content instead of structuredContent in examples
Not all MCP clients support structuredContent in MCP tool results, so
examples now return data as JSON in content and parse it client-side.

Pattern used:
- Server: content: [{ type: "text", text: JSON.stringify(data) }]
- Client: JSON.parse(result.content!.filter(...).map(...).join(""))

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 16:35:20 -06:00
Anton Pidkuiko
d5b13b7c1c
Merge pull request #80 from jonathanhefner/marketing-examples-screenshots
Add screenshots to marketing example READMEs
2025-12-05 22:08:16 +00:00
Jonathan Hefner
6b9f6327a6 Add screenshots to marketing example READMEs
Insert thumbnail galleries linking to full-size images hosted on
GitHub Pages for budget-allocator, cohort-heatmap, customer-segmentation,
scenario-modeler, and system-monitor server examples.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 15:37:25 -06:00
Anton Pidkuiko
45259c584b
Merge pull request #76 from jonathanhefner/marketing-examples
Add marketing examples
2025-12-05 20:55:14 +00:00
Jonathan Hefner
8bb58f332a Update MIME type to text/html;profile=mcp-app
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 <noreply@anthropic.com>
2025-12-04 14:50:30 -06:00
Jonathan Hefner
a9d6ecd20c Make examples:build dynamically discover all examples
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 <noreply@anthropic.com>
2025-12-04 14:33:14 -06:00
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