MCP Apps setupSizeChangedNotifications - Auto-Resize Control

MCP Apps SDK

import { App } from "@modelcontextprotocol/ext-apps";

Overview

setupSizeChangedNotifications() manually starts automatic size reporting to the host. It attaches a ResizeObserver to document.body and document.documentElement, sending ui/notifications/size-changed whenever the content dimensions change. This method is automatically called by connect() when the App is created with autoResize: true (the default). You only need to call it directly when:

You created the App with autoResize: false and want to enable it later
You previously stopped auto-resize and want to restart it

Signature

setupSizeChangedNotifications(): () => void

Returns

return

() => void

A cleanup function that disconnects the ResizeObserver and stops size reporting. Call this to disable auto-resize.

Usage

Enable auto-resize after connection

const app = new App(
  { name: "MyApp", version: "1.0.0" },
  {},
  { autoResize: false },
);
await app.connect();

// Enable auto-resize manually
const cleanup = app.setupSizeChangedNotifications();

Temporarily disable auto-resize

const cleanup = app.setupSizeChangedNotifications();

// Disable during animation to avoid excessive notifications
cleanup();
runAnimation();

// Re-enable after animation
const newCleanup = app.setupSizeChangedNotifications();

Conditional auto-resize

const app = new App(
  { name: "MyApp", version: "1.0.0" },
  {},
  { autoResize: false },
);
await app.connect();

const ctx = app.getHostContext();
if (ctx?.displayMode === "inline") {
  // Only auto-resize in inline mode where the host needs size hints
  app.setupSizeChangedNotifications();
}

How It Works

The method creates a ResizeObserver that watches:

document.documentElement catches viewport-level changes.
document.body catches content-level changes.

When either element’s size changes, the observer sends the current scrollWidth and scrollHeight of document.documentElement to the host via sendSizeChanged().

sendSizeChanged() — Manually send a one-time size update
Layout and Display — How host dimensions, auto-resize, display modes, and safe areas fit together
useAutoResize — React hook that wraps this method
Auto-Resize — How auto-resize works in the App class

​Overview

​Signature

​Returns

​Usage

​Enable auto-resize after connection

​Temporarily disable auto-resize

​Conditional auto-resize

​How It Works

​Related