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

# useDisplayMode

> Get the current display mode.

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

## Overview

The `useDisplayMode` hook returns the current display mode of the app. It is a convenience wrapper around `useHostContext`.

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

## Import

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

## Signature

```tsx theme={null}
function useDisplayMode(): McpUiDisplayMode
```

The return type is [`McpUiDisplayMode`](/mcp-apps/types/core-types#mcpuidisplaymode).

## Returns

<ResponseField name="return" type="'inline' | 'pip' | 'fullscreen'">
  The current display mode. Defaults to `'inline'` when unavailable.
</ResponseField>

## Usage

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

function MyResource() {
  const displayMode = useDisplayMode();

  return (
    <div className={displayMode === 'fullscreen' ? 'h-screen' : 'max-h-96'}>
      Current mode: {displayMode}
    </div>
  );
}
```