bug: app.onhostcontextchanged handlers silently overwrite each other

[antonpk1]

Summary

Setting app.onhostcontextchanged multiple times silently overwrites previous handlers. This breaks real-time theme updates and any custom host context handling.

Root Cause

The setter calls setNotificationHandler() which replaces the previous handler:

// app.ts line 510-521
set onhostcontextchanged(callback) {
 this.setNotificationHandler(
 McpUiHostContextChangedNotificationSchema,
 (n) => {
 this._hostContext = { ...this._hostContext, ...n.params };
 callback(n.params); // Only ONE callback ever runs
 },
 );
}

Breaking Examples

Example 1: useHostStyles internal conflict

// User writes this simple code:
function MyWidget() {
 const { app } = useApp({ ... });
 useHostStyles(app, hostContext); // Expects theme updates to work
 return <div>...</div>;
}

// BREAKS because inside useHostStyles:
useHostStyleVariables(app, ...); // Sets handler A (theme + variables)
useHostFonts(app, ...); // Sets handler B (fonts only) - OVERWRITES A!

// Result: Theme changes → only fonts handler runs → theme never updates

Example 2: User handler + SDK hook

function MyWidget() {
 const { app } = useApp({ ... });
 const [ctx, setCtx] = useState(null);

 useEffect(() => {
 if (!app) return;
 // User sets their own handler
 app.onhostcontextchanged = (params) => {
 setCtx(prev => ({ ...prev, ...params })); // Update React state
 trackAnalytics("theme_changed", params); // Custom logic
 };
 }, [app]);

 // Later, user adds SDK hook for convenience
 useHostStyles(app, ctx); // OVERWRITES user handler!

 // Result: setCtx() never called, trackAnalytics() never called
}

Example 3: Two SDK hooks

function MyWidget() {
 const { app } = useApp({ ... });

 // User wants variables but not fonts
 useHostStyleVariables(app, ctx);

 // User also wants to track theme changes
 useEffect(() => {
 app.onhostcontextchanged = (params) => {
 console.log("Theme changed to:", params.theme); // OVERWRITES SDK hook!
 };
 }, [app]);

 // Result: Variables never applied, only console.log runs
}

Example 4: Multiple custom handlers (impossible today)

function MyWidget() {
 const { app } = useApp({ ... });

 // Component A wants to know about theme
 useEffect(() => {
 app.onhostcontextchanged = (params) => {
 updateComponentA(params);
 };
 }, [app]);

 // Component B also wants to know about theme 
 useEffect(() => {
 app.onhostcontextchanged = (params) => {
 updateComponentB(params); // OVERWRITES Component A!
 };
 }, [app]);

 // Result: Only Component B gets updates
}

Symptoms

• Dark/light mode toggle does not update widget in real-time
• Custom onhostcontextchanged handlers stop working after adding SDK hooks
• No errors in console (silent failure)
• Requires page refresh to see changes

Proposed Fix

Change the setter to chain handlers instead of replacing:

private _hostContextChangedHandlers: Array<(params) => void> = [];

set onhostcontextchanged(callback) {
 this._hostContextChangedHandlers.push(callback);
 
 // Only register the notification handler once
 if (this._hostContextChangedHandlers.length === 1) {
 this.setNotificationHandler(
 McpUiHostContextChangedNotificationSchema,
 (n) => {
 this._hostContext = { ...this._hostContext, ...n.params };
 for (const handler of this._hostContextChangedHandlers) {
 handler(n.params);
 }
 },
 );
 }
}

Workaround

Until fixed, use a single combined handler instead of SDK hooks:

useEffect(() => {
 if (!app) return;
 
 const ctx = app.getHostContext();
 if (ctx?.theme) applyDocumentTheme(ctx.theme);
 if (ctx?.styles?.variables) applyHostStyleVariables(ctx.styles.variables);
 if (ctx?.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts);

 app.onhostcontextchanged = (params) => {
 if (params.theme) applyDocumentTheme(params.theme);
 if (params.styles?.variables) applyHostStyleVariables(params.styles.variables);
 if (params.styles?.css?.fonts) applyHostFonts(params.styles.css.fonts);
 // Add any custom logic here too
 };
}, [app]);