ChatGPT App Display Mode Reference

The ChatGPT Apps SDK doesn’t offer a comprehensive breakdown of app display behavior on all Display Modes & screen widths, so I figured I’d do so here.

Inline

Inline display mode inserts your 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 window.openai.maxHeight global (aka useMaxHeight hook) has been undefined by ChatGPT in all of my tests, and seems to be unused for this display mode.

Fullscreen

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 window.openai.maxHeight global (aka useMaxHeight hook) has been undefined by ChatGPT in all of my tests, and seems to be unused for this display mode as well.

Picture-in-Picture (PiP)

PiP display mode inserts your 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 window.openai.maxHeight global (aka useMaxHeight hook). 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 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 simulator!

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

If you found this helpful, please star us on GitHub!The ChatGPT Apps SDK doesn’t offer a comprehensive breakdown of app display behavior on all Display Modes & screen widths, so I figured I’d do so here.