useViewport

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.

For most resources, use the <SafeArea> component instead — it applies both safe area padding and viewport height constraints automatically.

Wraps onhostcontextchanged

MCP Apps SDK reference

Returns

return

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:

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

Usage

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

Overview

Wraps onhostcontextchanged

Import

Signature

Returns

Usage

​Overview

Wraps onhostcontextchanged

​Import

​Signature

​Returns

​Usage

Overview

Import

Signature

Returns

Usage