modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix onhostcontextchanged handler invocation in examples

Browse source 
`App.onhostcontextchanged` is a setter-only property with no getter.
TypeScript doesn't prevent reading from setter-only properties, so
`app.onhostcontextchanged?.(ctx)` compiles but silently returns
`undefined` at runtime.

Extract the handler into a named `handleHostContextChanged()` function
and call it directly after `connect()`, matching the pattern used in
`basic-server-vanillajs` and other examples.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-25 13:38:22 -06:00
commit def96b392a
No known key found for this signature in database
GPG key ID: 0DA40AFD21043691
2 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
examples/sheet-music-server/src/mcp-app.ts
View file

@ -1,7 +1,7 @@
/** /**
* @file Sheet Music App - renders ABC notation with abcjs and provides audio playback * @file Sheet Music App - renders ABC notation with abcjs and provides audio playback
*/ */
import { App } from "@modelcontextprotocol/ext-apps"; import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
import ABCJS from "abcjs"; import ABCJS from "abcjs";
import "abcjs/abcjs-audio.css"; import "abcjs/abcjs-audio.css";
import "./global.css"; import "./global.css";
@ -109,18 +109,20 @@ app.ontoolinput = (params) => {
app.onerror = console.error; app.onerror = console.error;
app.onhostcontextchanged = (params) => { function handleHostContextChanged(ctx: McpUiHostContext) {
if (params.safeAreaInsets) { if (ctx.safeAreaInsets) {
mainEl.style.paddingTop = `${params.safeAreaInsets.top}px`; mainEl.style.paddingTop = `${ctx.safeAreaInsets.top}px`;
mainEl.style.paddingRight = `${params.safeAreaInsets.right}px`; mainEl.style.paddingRight = `${ctx.safeAreaInsets.right}px`;
mainEl.style.paddingBottom = `${params.safeAreaInsets.bottom}px`; mainEl.style.paddingBottom = `${ctx.safeAreaInsets.bottom}px`;
mainEl.style.paddingLeft = `${params.safeAreaInsets.left}px`; mainEl.style.paddingLeft = `${ctx.safeAreaInsets.left}px`;
} }
}; }
app.onhostcontextchanged = handleHostContextChanged;
app.connect().then(() => { app.connect().then(() => {
const ctx = app.getHostContext(); const ctx = app.getHostContext();
if (ctx) { if (ctx) {
app.onhostcontextchanged(ctx); handleHostContextChanged(ctx);
} }
}); });

8
examples/transcript-server/src/mcp-app.ts
View file

@ -68,7 +68,7 @@ app.onteardown = async () => {
app.onerror = log.error; app.onerror = log.error;
app.onhostcontextchanged = (ctx: McpUiHostContext) => { function handleHostContextChanged(ctx: McpUiHostContext) {
if (ctx.safeAreaInsets) { if (ctx.safeAreaInsets) {
mainEl.style.paddingTop = `${ctx.safeAreaInsets.top}px`; mainEl.style.paddingTop = `${ctx.safeAreaInsets.top}px`;
mainEl.style.paddingRight = `${ctx.safeAreaInsets.right}px`; mainEl.style.paddingRight = `${ctx.safeAreaInsets.right}px`;
@ -78,7 +78,9 @@ app.onhostcontextchanged = (ctx: McpUiHostContext) => {
if (ctx.theme) { if (ctx.theme) {
applyDocumentTheme(ctx.theme); applyDocumentTheme(ctx.theme);
} }
}; }
app.onhostcontextchanged = handleHostContextChanged;
// ============================================================================ // ============================================================================
// Audio Capture // Audio Capture
@ -546,6 +548,6 @@ app.connect().then(() => {
log.info("Connected to host"); log.info("Connected to host");
const ctx = app.getHostContext(); const ctx = app.getHostContext();
if (ctx) { if (ctx) {
app.onhostcontextchanged?.(ctx); handleHostContextChanged(ctx);
} }
}); });