> ## 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.

# useViewport

> Get container dimensions.

<Badge color="yellow">sunpeak API</Badge>

## Overview

The `useViewport` hook returns the container dimensions provided by the host. This is useful for creating responsive layouts based on the actual available space.

<Tip>For most resources, use the [`<SafeArea>`](/app-framework/components/safe-area) component instead — it applies both safe area padding and viewport height constraints automatically.</Tip>

<Card horizontal title="Wraps onhostcontextchanged" icon="cube" href="/mcp-apps/app/event-handlers/onhostcontextchanged">
  MCP Apps SDK reference
</Card>

## Import

```tsx theme={null}
import { useViewport } from 'sunpeak';
```

## Signature

```tsx theme={null}
function useViewport(): Viewport | null
```

## Returns

<ResponseField name="return" type="Viewport | null">
  Container dimension constraints set by the host, or `null` if the host does not report any.

  The host sends either a fixed size or a maximum constraint for each axis:

  ```typescript theme={null}
  {
    height?: number;    // Fixed container height (px)
    maxHeight?: number; // Maximum container height (px)
    width?: number;     // Fixed container width (px)
    maxWidth?: number;  // Maximum container width (px)
  }
  ```

  For each axis, the host provides **either** a fixed value (`height`/`width`) **or** a maximum (`maxHeight`/`maxWidth`), never both.
</ResponseField>

## Usage

```tsx theme={null}
import { useViewport } from 'sunpeak';

function MyResource() {
  const viewport = useViewport();

  return (
    <div style={{
      maxHeight: viewport?.maxHeight,
      maxWidth: viewport?.maxWidth,
    }}>
      Content that respects host constraints
    </div>
  );
}
```

Container dimensions come from [`McpUiHostContext.containerDimensions`](/mcp-apps/types/core-types#mcpuihostcontext). The inspector exposes **Max Height** and **Max Width** inputs under **Container Dimensions** so you can test how your resource responds to host-enforced size constraints.