ChatGPT App Display Mode Reference

[Updated 2026-02-05] The MCP Apps documentation doesn’t offer a comprehensive breakdown of ChatGPT App display behavior across all Display Modes & screen widths, so I figured I’d document it here for ChatGPT App developers.

TL;DR: See below for exact HTML & CSS layout. Inline and fullscreen modes ignore maxHeight; only PiP uses it. PiP falls back to fullscreen on mobile. Resources can be arbitrarily tall.

Inline Display Mode

Inline display mode inserts your ChatGPT App resource in the flow of the conversation. Your app iframe is inserted in a div that looks like the following:

<div class="no-scrollbar relative mb-2 @w-sm/main:w-full mx-0 max-sm:-mx-(--thread-content-margin) max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible">
    <div class="relative overflow-hidden h-full" style="height: 270px;">
     <iframe class="h-full w-full max-w-full">
         <!-- Your App -->
     </iframe>
    </div>
</div>

The height of the div is fixed to the height of your Resource, and your Resource can be as tall as you want (I tested up to 20k px). The maxHeight value from the host context is undefined in inline mode and is unused for this display mode.

Fullscreen Display Mode

Fullscreen display mode takes up the full conversation space, below the ChatGPT header/nav. This nav converts to the title of your application centered with the X button to exit fullscreen aligned left. Your App iframe is inserted in a div that looks like the following:

<div class="no-scrollbar fixed start-0 end-0 top-0 bottom-0 z-50 mx-auto flex w-auto flex-col overflow-hidden">
    <div class="border-token-border-secondary bg-token-bg-primary sm:bg-token-bg-primary z-10 grid h-(--header-height) grid-cols-[1fr_auto_1fr] border-b px-2">
        <!-- ChatGPT header / nav -->
    </div>
    <div class="relative overflow-hidden flex-1">
        <iframe class="h-full w-full max-w-full">
         <!-- Your App -->
        </iframe>
    </div>
</div>

As with inline mode, your Resource can be as tall as you want (I tested up to 20k px). The maxHeight value from the host context is undefined in fullscreen mode and is unused for this display mode as well.

Picture-in-Picture (PiP) Display Mode

PiP display mode inserts your ChatGPT App resource absolutely, above the conversation. Your app iframe is inserted in a div that looks like the following:

<div class="no-scrollbar @w-xl/main:top-4 fixed start-4 end-4 top-4 z-50 mx-auto max-w-(--thread-content-max-width) sm:start-0 sm:end-0 sm:top-(--header-height) sm:w-full overflow-visible" style="max-height: 480.5px;">
    <div class="relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_var(--border-heavy),0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4" style="height: 270px;">
     <iframe class="h-full w-full max-w-full">
         <!-- Your App -->
     </iframe>
    </div>
</div>

This is the only display mode that uses the maxHeight constraint from the host context. Your iframe can assume any height it likes, but content will be scrollable past the maxHeight setting, and the PiP window will not expand beyond that height.

Further, note that PiP is not supported on mobile screen widths and instead coerces to the fullscreen display mode.

Wrapping Up

Practically speaking, each display mode acts like a different client, and your ChatGPT App will have to respond accordingly. The good news is that the only required display mode is inline, which makes our lives easier.

For interactive visuals of each display mode, check out the sunpeak ChatGPT App simulator!

To get started building ChatGPT Apps with the ChatGPT App framework, check out the sunpeak documentation.

If you found this helpful, please star us on GitHub!