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

Merge pull request #314 from jonathanhefner/patterns-doc

Browse source 
Add Patterns guide doc
This commit is contained in:
Jonathan Hefner 2026-01-21 11:00:26 -06:00 • committed by GitHub
commit e719be3cd7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 643 additions and 85 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);
}