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

31
src/app.examples.ts
View file

@ -206,6 +206,20 @@ function App_onhostcontextchanged_respondToTheme(app: App) {
//#endregion App_onhostcontextchanged_respondToTheme
}
/**
* Example: Respond to display mode changes using onhostcontextchanged.
*/
function App_onhostcontextchanged_respondToDisplayMode(app: App) {
//#region App_onhostcontextchanged_respondToDisplayMode
app.onhostcontextchanged = (params) => {
if (params.displayMode) {
const isFullscreen = params.displayMode === "fullscreen";
document.body.classList.toggle("fullscreen", isFullscreen);
}
};
//#endregion App_onhostcontextchanged_respondToDisplayMode
}
/**
* Example: Perform cleanup before teardown.
*/
@ -344,16 +358,17 @@ async function App_openLink_documentation(app: App) {
}
/**
* Example: Request fullscreen mode.
* Example: Toggle between inline and fullscreen display modes.
*/
async function App_requestDisplayMode_fullscreen(app: App) {
//#region App_requestDisplayMode_fullscreen
const context = app.getHostContext();
if (context?.availableDisplayModes?.includes("fullscreen")) {
const result = await app.requestDisplayMode({ mode: "fullscreen" });
console.log("Display mode set to:", result.mode);
async function App_requestDisplayMode_toggle(app: App) {
//#region App_requestDisplayMode_toggle
const ctx = app.getHostContext();
if (ctx?.availableDisplayModes?.includes("fullscreen")) {
const target = ctx.displayMode === "fullscreen" ? "inline" : "fullscreen";
const result = await app.requestDisplayMode({ mode: target });
console.log("Now in:", result.mode);
}
//#endregion App_requestDisplayMode_fullscreen
//#endregion App_requestDisplayMode_toggle
}
/**

4
src/app.ts
View file

@ -729,8 +729,8 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
* @param options - Request options (timeout, etc.)
* @returns Result containing the actual display mode that was set
*
* @example Request fullscreen mode
* {@includeCode ./app.examples.ts#App_requestDisplayMode_fullscreen}
* @example Toggle display mode
* {@includeCode ./app.examples.ts#App_requestDisplayMode_toggle}
*
* @see {@link McpUiRequestDisplayModeRequest} for request structure
* @see {@link McpUiHostContext} for checking availableDisplayModes