Add safeAreaInsets support to all example apps

[jonathanhefner]

Apply host-provided safe area insets as padding on main containers across all examples. This ensures content doesn't render under system UI elements like phone notches.

React apps use useState + onhostcontextchanged handler with initial fetch via getHostContext() in useEffect. Vanilla JS apps apply padding in the handler and invoke it after connect().

🤖 Generated with Claude Code

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@202

commit: 2453b0c

[liady]

Shouldn't this behavior (triggerring the onhostcontextchanged with the initial host context) be part of the connect flow?

[jonathanhefner]

If I understand the code correctly, it merely sets this._hostContext (does not trigger onhostcontextchanged):

ext-apps/src/app.ts

Lines 1029 to 1069 in 38126f7

	override async connect(
	transport: Transport = new PostMessageTransport(window.parent),
	options?: RequestOptions,
	): Promise<void> {
	await super.connect(transport);
	try {
	const result = await this.request(
	<McpUiInitializeRequest>{
	method: "ui/initialize",
	params: {
	appCapabilities: this._capabilities,
	appInfo: this._appInfo,
	protocolVersion: LATEST_PROTOCOL_VERSION,
	},
	},
	McpUiInitializeResultSchema,
	options,
	);
	if (result === undefined) {
	throw new Error(`Server sent invalid initialize result: ${result}`);
	}
	this._hostCapabilities = result.hostCapabilities;
	this._hostInfo = result.hostInfo;
	this._hostContext = result.hostContext;
	await this.notification(<McpUiInitializedNotification>{
	method: "ui/notifications/initialized",
	});
	if (this.options?.autoResize) {
	this.setupSizeChangedNotifications();
	}
	} catch (error) {
	// Disconnect if initialization fails.
	void this.close();
	throw error;
	}
	}

[liady]

@jonathanhefner yes, that’s what I meant - I see in the examples that onhostcontextchanged is explicitly triggered from within the connect callback. Do we want this to be part of the connect logic itself in the SDK, rather than requiring developers to remember to call it manually?

[jonathanhefner]

I'm not opposed to that, but my interpretation was that this behavior was intentional — onhostcontextchanged would only be called in response to ui/notifications/host-context-changed.

[ochafik]

Yeah I'd keep its current behaviour to mean explicitly ui/notifications/host-context-changed happened for now.

[ochafik]

there is no such getter actually

[jonathanhefner]

Wow, good catch! TIL this is a known limitation of TypeScript: microsoft/TypeScript#295.

I've updated the commit to use an explicit handler function instead.