Skip to main content

​
Overview

The useHostContext hook subscribes to the full host context object, which contains theme, display mode, locale, safe area insets, container dimensions, and more. It updates reactively whenever the host changes any value. Most apps should use the convenience hooks (useTheme, useDisplayMode, useLocale, etc.) instead of accessing the full context directly.

​
Import

import { useHostContext } from 'sunpeak';

​
Signature

function useHostContext(): McpUiHostContext | null

​
Returns

Returns the full McpUiHostContext object, or null before the first update. 
interface McpUiHostContext {
  theme?: 'light' | 'dark';
  displayMode?: 'inline' | 'pip' | 'fullscreen';
  locale?: string;
  safeAreaInsets?: { top: number; bottom: number; left: number; right: number };
  containerDimensions?: { width: number; height: number };
  availableDisplayModes?: ('inline' | 'pip' | 'fullscreen')[];
  // ... additional host-specific fields
}

​
Usage

import { useHostContext } from 'sunpeak';

function MyResource() {
  const context = useHostContext();

  return (
    <div>
      <p>Theme: {context?.theme}</p>
      <p>Display: {context?.displayMode}</p>
      <p>Locale: {context?.locale}</p>
    </div>
  );
}