MCP Apps useAutoResize - React Auto-Resize Hook

MCP Apps SDK

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

Overview

useAutoResize enables automatic size reporting to the host via ResizeObserver. It watches document.body and document.documentElement for size changes and sends ui/notifications/size-changed notifications.

This hook is rarely needed. The useApp hook creates the App with autoResize: true by default, which handles this automatically. Only use useAutoResize if you create the App manually with autoResize: false.

Signature

function useAutoResize(app: App | null): void

app

App | null

required

The connected App instance, or null during initialization.

Usage

function MyComponent() {
  const [app, setApp] = useState<App | null>(null);

  useEffect(() => {
    const myApp = new App(
      { name: "MyApp", version: "1.0.0" },
      {},
      { autoResize: false }, // Disable default auto-resize
    );

    const transport = new PostMessageTransport(window.parent, window.parent);
    myApp.connect(transport).then(() => setApp(myApp));
  }, []);

  // Add manual auto-resize control
  useAutoResize(app);

  return <div>My content</div>;
}

How It Works

The hook calls app.setupSizeChangedNotifications() when app becomes non-null, and disconnects the ResizeObserver when the component unmounts. The observer monitors both document.documentElement and document.body to catch all size changes.

useDocumentThemeReact hook for reactive light/dark theme detection in MCP Apps. Uses MutationObserver to watch data-theme attribute changes and re-render components on theme switches.

​Overview

​Signature

​Usage

​How It Works

Overview

Signature

Usage

How It Works