> ## 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 App Class - Client-Side Host Communication

> The App class for MCP Apps client-side communication. Connect via PostMessageTransport, access host context, capabilities, and version, and manage auto-resize behavior.

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

```ts theme={null}
import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps";
```

## Overview

The `App` class provides a framework-agnostic way to build interactive MCP Apps that run inside host applications. It extends `ProtocolWithEvents` (which itself extends the MCP SDK's `Protocol` class) and handles the connection lifecycle, [initialization handshake](/mcp-apps/lifecycle#2-initialization), and bidirectional communication with the host. The `ProtocolWithEvents` base class adds DOM-style `addEventListener`/`removeEventListener` support for composable, multi-listener event handling alongside the traditional `on*` setter properties.

## Constructor

```ts theme={null}
new App(appInfo, capabilities?, options?)
```

<ResponseField name="appInfo" type="Implementation" required>
  App identification: `{ name: string; version: string }`.
</ResponseField>

<ResponseField name="capabilities" type="McpUiAppCapabilities" default="{}">
  Features this app provides. Set `tools` to expose app-side tools to the host. Set `availableDisplayModes` to declare supported display modes.
</ResponseField>

<ResponseField name="options" type="AppOptions" default="{ autoResize: true }">
  <ResponseField name="autoResize" type="boolean" default="true">
    Automatically report size changes to the host using `ResizeObserver`.
  </ResponseField>
</ResponseField>

```ts theme={null}
const app = new App(
  { name: "MyApp", version: "1.0.0" },
  { tools: { listChanged: true } },
  { autoResize: true },
);
```

## connect()

Establishes connection with the host and performs the initialization handshake.

```ts theme={null}
async connect(transport?: Transport, options?: RequestOptions): Promise<void>
```

Steps performed:

1. Connects the transport layer
2. Sends `ui/initialize` with app info and capabilities
3. Receives host capabilities and context
4. Sends `ui/notifications/initialized` (see [Lifecycle](/mcp-apps/lifecycle))
5. Sets up auto-resize if enabled

If no transport is provided, defaults to `new PostMessageTransport(window.parent, window.parent)`.

```ts theme={null}
// Default transport (typical usage)
await app.connect();

// Custom transport
await app.connect(new PostMessageTransport(window.parent, window.parent));
```

<Warning>
  Register event handlers **before** calling `connect()` to avoid missing notifications during the handshake.
</Warning>

## [Accessors](/mcp-apps/app/accessors)

### [getHostCapabilities()](/mcp-apps/app/accessors/get-host-capabilities)

Returns the host's capabilities from the initialization handshake. `undefined` before connection.

```ts theme={null}
await app.connect();
if (app.getHostCapabilities()?.serverTools) {
  console.log("Host supports server tool calls");
}
```

### [getHostVersion()](/mcp-apps/app/accessors/get-host-version)

Returns the host's name and version. `undefined` before connection.

```ts theme={null}
const { name, version } = app.getHostVersion() ?? {};
console.log(`Connected to ${name} v${version}`);
```

### [getHostContext()](/mcp-apps/app/accessors/get-host-context)

Returns the current host context (theme, locale, display mode, etc.). Automatically updated when the host sends context change notifications.

```ts theme={null}
const ctx = app.getHostContext();
if (ctx?.theme === "dark") {
  document.body.classList.add("dark-theme");
}
```

## PostMessageTransport

The transport layer for iframe-to-parent communication using `window.postMessage`. In most cases you never need to use this directly — `App.connect()` creates one automatically when no transport is provided.

```ts theme={null}
import { PostMessageTransport } from "@modelcontextprotocol/ext-apps";

new PostMessageTransport(eventTarget?, eventSource)
```

| Method          | Description                           |
| --------------- | ------------------------------------- |
| `start()`       | Begin listening for messages          |
| `send(message)` | Send a JSON-RPC message to the target |
| `close()`       | Stop listening and clean up           |

## Auto-Resize

By default, `App` monitors `document.body` and `document.documentElement` for size changes and sends `ui/notifications/size-changed` to the host. Disable with `{ autoResize: false }`. In React, you can use the [`useAutoResize`](/mcp-apps/react/use-auto-resize) hook instead.

For the full host sizing contract, including fixed vs flexible `containerDimensions` and display mode changes, see [Layout and Display](/mcp-apps/layout).

### [setupSizeChangedNotifications()](/mcp-apps/app/requests/setup-size-changed-notifications)

Manually start auto-resize reporting. Returns a cleanup function. Automatically called by `connect()` when `autoResize: true`.

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

// Later, enable auto-resize manually
const cleanup = app.setupSizeChangedNotifications();
cleanup(); // Stop observing
```

### sendSizeChanged()

Manually notify the host of a size change:

```ts theme={null}
app.sendSizeChanged({ width: 400, height: 600 });
```

<Tip>
  In React, the SDK's [`useApp`](/mcp-apps/react/use-app) hook handles App creation and connection automatically. The [sunpeak framework](/quickstart) provides additional convenience hooks like [`useApp`](/app-framework/hooks/use-app).
</Tip>