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

Complete "Entering / exiting fullscreen" pattern documentation

Browse source 
Add `App_onhostcontextchanged_respondToDisplayMode` example showing how to
listen for display mode changes and update UI with `classList.toggle()`.

Update `App_requestDisplayMode_fullscreen` to `App_requestDisplayMode_toggle`
to show the common toggle pattern checking `availableDisplayModes` first.

Refactor full examples (pdf-server, shadertoy-server) to use
`classList.toggle(class, condition)` instead of add/remove branches.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-19 14:22:00 -06:00
commit dce143e92e
2 changed files with 43 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

16
examples/pdf-server/src/mcp-app.ts
View file

@ -769,16 +769,12 @@ function handleHostContextChanged(ctx: McpUiHostContext) {
if (ctx.displayMode) {
const wasFullscreen = currentDisplayMode === "fullscreen";
currentDisplayMode = ctx.displayMode as "inline" | "fullscreen";
if (ctx.displayMode === "fullscreen") {
mainEl.classList.add("fullscreen");
log.info("Fullscreen mode enabled");
} else {
mainEl.classList.remove("fullscreen");
log.info("Inline mode");
// When exiting fullscreen, request resize to fit content
if (wasFullscreen && pdfDocument) {
requestFitToContent();
}
const isFullscreen = currentDisplayMode === "fullscreen";
mainEl.classList.toggle("fullscreen", isFullscreen);
log.info(isFullscreen ? "Fullscreen mode enabled" : "Inline mode");
// When exiting fullscreen, request resize to fit content
if (wasFullscreen && !isFullscreen && pdfDocument) {
requestFitToContent();
}
updateFullscreenButton();
}

19
examples/shadertoy-server/src/mcp-app.ts
View file

@ -65,21 +65,14 @@ function handleHostContextChanged(ctx: McpUiHostContext) {
// Show fullscreen button if available (only update if field is present)
if (ctx.availableDisplayModes !== undefined) {
if (ctx.availableDisplayModes.includes("fullscreen")) {
fullscreenBtn.classList.add("available");
} else {
fullscreenBtn.classList.remove("available");
}
const canFullscreen = ctx.availableDisplayModes.includes("fullscreen");
fullscreenBtn.classList.toggle("available", canFullscreen);
}
// Update display mode state and UI
if (ctx.displayMode) {
currentDisplayMode = ctx.displayMode as "inline" | "fullscreen";
if (currentDisplayMode === "fullscreen") {
mainEl.classList.add("fullscreen");
} else {
mainEl.classList.remove("fullscreen");
}
mainEl.classList.toggle("fullscreen", currentDisplayMode === "fullscreen");
}
}
@ -96,11 +89,7 @@ async function toggleFullscreen() {
try {
const result = await app.requestDisplayMode({ mode: newMode });
currentDisplayMode = result.mode as "inline" | "fullscreen";
if (currentDisplayMode === "fullscreen") {
mainEl.classList.add("fullscreen");
} else {
mainEl.classList.remove("fullscreen");
}
mainEl.classList.toggle("fullscreen", currentDisplayMode === "fullscreen");
} catch (err) {
log.error("Failed to change display mode:", err);
}