---
title: Request Display Mode
sidebarTitle: "MCP: Display Mode"
description: Request a display mode change from the MCP host.
icon: maximize
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

`RequestDisplayMode` asks the host to change how the app is displayed — switching between inline, fullscreen, or picture-in-picture. The host decides whether to honor the request, so the actual mode may differ from what you asked for.

<ComponentPreview json={{"view":{"type":"Button","label":"Go Fullscreen","variant":"default","size":"default","disabled":false,"onClick":{"action":"requestDisplayMode","mode":"fullscreen"}}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQnV0dG9uCmZyb20gcHJlZmFiX3VpLmFjdGlvbnMubWNwIGltcG9ydCBSZXF1ZXN0RGlzcGxheU1vZGUKCkJ1dHRvbigiR28gRnVsbHNjcmVlbiIsIG9uX2NsaWNrPVJlcXVlc3REaXNwbGF5TW9kZSgiZnVsbHNjcmVlbiIpKQo=">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Button
from prefab_ui.actions.mcp import RequestDisplayMode

Button("Go Fullscreen", on_click=RequestDisplayMode("fullscreen"))
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Button",
    "label": "Go Fullscreen",
    "variant": "default",
    "size": "default",
    "disabled": false,
    "onClick": {"action": "requestDisplayMode", "mode": "fullscreen"}
  }
}
```
</CodeGroup>
</ComponentPreview>

## Display Mode Toggle

Use the `HOST` reactive variable to show the right button based on the current display mode. The host context is automatically available as `$host` in the renderer's state:

<ComponentPreview json={{"view":{"type":"Column","children":[{"type":"Condition","cases":[{"when":"{{ $host.displayMode == 'fullscreen' }}","children":[{"type":"Button","label":"Exit Fullscreen","variant":"outline","size":"default","disabled":false,"onClick":{"action":"requestDisplayMode","mode":"inline"}}]}],"else":[{"type":"Button","label":"Go Fullscreen","variant":"outline","size":"default","disabled":false,"onClick":{"action":"requestDisplayMode","mode":"fullscreen"}}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Button, Column, If, Else
from prefab_ui.actions.mcp import RequestDisplayMode
from prefab_ui.rx.mcp import HOST

with Column():
    with If(HOST.displayMode == "fullscreen"):
        Button("Exit Fullscreen", variant="outline",
               on_click=RequestDisplayMode("inline"))
    with Else():
        Button("Go Fullscreen", variant="outline",
               on_click=RequestDisplayMode("fullscreen"))
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Column",
    "children": [
      {
        "type": "Condition",
        "cases": [
          {
            "when": "{{ $host.displayMode == 'fullscreen' }}",
            "children": [
              {
                "type": "Button",
                "label": "Exit Fullscreen",
                "variant": "outline",
                "size": "default",
                "disabled": false,
                "onClick": {"action": "requestDisplayMode", "mode": "inline"}
              }
            ]
          }
        ],
        "else": [
          {
            "type": "Button",
            "label": "Go Fullscreen",
            "variant": "outline",
            "size": "default",
            "disabled": false,
            "onClick": {"action": "requestDisplayMode", "mode": "fullscreen"}
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="RequestDisplayMode Parameters">
<ParamField body="mode" type='"inline" | "fullscreen" | "pip"' required>
  The display mode to request. Can be passed as a positional argument. The host may not support all modes — use `onError` to handle rejection.
</ParamField>
</Card>

## Protocol Reference

```json RequestDisplayMode
{
  "action": "requestDisplayMode",
  "mode": "\"inline\" | \"fullscreen\" | \"pip\" (required)"
}
```

For the complete protocol schema, see [RequestDisplayMode](/protocol/request-display-mode).
