> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Apps useAutoResize - React Auto-Resize Hook

> React hook for manual auto-resize control in MCP Apps. Reports UI size changes to the host via ResizeObserver and size-changed notifications.

<Badge color="green">MCP Apps SDK</Badge>

```ts theme={null}
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.

<Note>
  This hook is **rarely needed**. The [`useApp`](/mcp-apps/react/use-app) 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`.
</Note>

## Signature

```ts theme={null}
function useAutoResize(app: App | null): void
```

<ResponseField name="app" type="App | null" required>
  The connected `App` instance, or `null` during initialization.
</ResponseField>

## Usage

```tsx theme={null}
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()`](/mcp-apps/app/requests/setup-size-changed-notifications) 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.