Skip to main content
sunpeak API

​
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

​
Import

import { useViewport } from 'sunpeak';

​
Signature

function useViewport(): Viewport | null

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