ChatGPT App Display Mode Reference

Source: Dev.to

Inline

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

<div>
    <!-- app iframe goes here -->
</div>

The height of the outer div is fixed to the height of your resource, and the resource can be as tall as you want (tested up to 20 kpx). The window.openai.maxHeight global (aka useMaxHeight hook) is undefined in all of my tests and appears unused for this mode.

Fullscreen

Fullscreen display mode occupies the full conversation space below the ChatGPT header/nav. The navigation bar converts to the title of your application centered, with an X button on the left to exit fullscreen. Your app iframe is inserted in a div that looks like this:

<div class="fullscreen-container">
    <!-- app iframe goes here -->
</div>

As with inline mode, the resource can be arbitrarily tall (tested up to 20 kpx). The window.openai.maxHeight global is also undefined for this mode.

Picture‑in‑Picture (PiP)

PiP display mode inserts your resource absolutely, above the conversation. The iframe is placed inside a div like this:

<div class="pip-container">
    <!-- app iframe goes here -->
</div>

This is the only display mode that utilizes the window.openai.maxHeight global (or useMaxHeight hook). Your iframe can request any height, but content will be scrollable beyond the maxHeight setting, and the PiP window will not expand past that limit.

Note: PiP is not supported on mobile screen widths; on such devices it falls back to fullscreen mode.

Wrapping Up

Practically speaking, each display mode behaves like a different client, so your app must handle them accordingly. The good news is that only the inline mode is required, simplifying development.

• For interactive visuals of each display mode, check out the sunpeak ChatGPT simulator.
• To get started building ChatGPT Apps with the Sunpeak framework, see the Sunpeak documentation.
• If you found this helpful, please star us on GitHub.