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

# useRequestDisplayMode

> Request display mode changes.

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

## Overview

Returns a function to request display mode changes and the list of available modes. The host may accept or deny the request.

<Card horizontal title="Wraps requestDisplayMode" icon="cube" href="/mcp-apps/app/requests/request-display-mode">
  MCP Apps SDK reference
</Card>

## Import

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

## Signature

```tsx theme={null}
function useRequestDisplayMode(): {
  requestDisplayMode: (mode: AppDisplayMode) => Promise<void>;
  availableModes: AppDisplayMode[] | undefined;
}
```

### AppDisplayMode

<ResponseField name="mode" type="'inline' | 'pip' | 'fullscreen'">
  Available display modes.
</ResponseField>

## Returns

<ResponseField name="requestDisplayMode" type="(mode: AppDisplayMode) => Promise<void>">
  Function to request a display mode change.
</ResponseField>

<ResponseField name="availableModes" type="AppDisplayMode[] | undefined">
  List of display modes supported by the host.
</ResponseField>

## Usage

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

function MyResource() {
  const { requestDisplayMode, availableModes } = useRequestDisplayMode();

  return (
    <div>
      {availableModes?.includes('fullscreen') && (
        <button onClick={() => requestDisplayMode('fullscreen')}>
          Go Fullscreen
        </button>
      )}
    </div>
  );
}
```