MCP Apps sendSizeChanged - Notify Host of Size Change

MCP Apps SDK

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

Overview

sendSizeChanged manually notifies the host that the View’s dimensions have changed. The host uses this information to resize the iframe containing the MCP App. In most cases, you do not need to call this method directly. The App class enables auto-resize by default, which automatically detects DOM changes and sends size updates to the host. Use sendSizeChanged only when you need explicit control over sizing — for example, after an animation completes, when rendering canvas-based content, or when auto-resize is disabled.

Signature

sendSizeChanged(
  params: { width?: number; height?: number },
): Promise<void>

Parameters

params

object

required

width

number

The new width in pixels. If omitted, the host retains the current width.

height

number

The new height in pixels. If omitted, the host retains the current height.

Returns

Returns Promise<void>. The method resolves when the size notification has been sent to the host.

Usage

Setting explicit dimensions

app.sendSizeChanged({ width: 400, height: 600 });

Updating only the height

// Useful when content height changes but width should remain fluid
app.sendSizeChanged({ height: 450 });

After an animation or transition

element.addEventListener("transitionend", () => {
  const rect = container.getBoundingClientRect();
  app.sendSizeChanged({ width: rect.width, height: rect.height });
});

With canvas-based content

function resizeCanvas(width: number, height: number) {
  canvas.width = width;
  canvas.height = height;
  render();
  app.sendSizeChanged({ width, height });
}

When autoResize is enabled (the default), calling sendSizeChanged is unnecessary for standard DOM changes. The auto-resize observer handles this automatically. Disable auto-resize only when you need precise manual control over reported dimensions.

For guidance on when the host expects size updates, see Layout and Display.

Auto-Resize — How automatic size detection works in the App class.
Layout and Display — How host dimensions, auto-resize, display modes, and safe areas fit together.
useAutoResize — React hook for auto-resize behavior.
Requests — Overview of all View-to-host request methods.

​Overview

​Signature

​Parameters

​Returns

​Usage

​Setting explicit dimensions

​Updating only the height

​After an animation or transition

​With canvas-based content

​Related

Overview

Signature

Parameters

Returns

Usage

Setting explicit dimensions

Updating only the height

After an animation or transition

With canvas-based content

Related