Lectures

We dissect OpenAI’s UX approach for ChatGPT Apps: why it’s important to think chat-first, in which scenarios an App truly helps (structure, multi-entity tasks, wizards), how to correctly launch UI via auto‑launch and humble handoff, and how to avoid the “surprise widget” anti-pattern. Plus: a mini “intent classifier” example in TypeScript, rules for the system‑prompt, and a small React intro-screen component.

We break down the inline mode as the “default” for ChatGPT Apps: when it beats fullscreen, how to choose among cards, lists, and carousels, and how to design CTA so the widget stays lightweight. Using GiftGenius as an example, we look at the data type GiftSuggestion, components GiftCard/ GiftGrid/ GiftList/ GiftCarousel, tool calls via window . openai . actions . call, and common mistakes that turn inline into a “mini-site.”

We will cover when and why to switch in ChatGPT Apps from inline to fullscreen, how the basic displayMode mechanism works, how to safely ask the host to switch modes via requestDisplayMode, and why PiP is a “picky” mode that requires mandatory fallbacks. We will design a fullscreen wizard, move state into a reliable layer, and discuss “video + chat” media scenarios, mobile specifics, and common UX and development mistakes.

In this lecture we break down how to design a visual style for a ChatGPT App so it looks “native” inside ChatGPT: theme inheritance (light/dark), working with tokens and CSS variables, tasteful brand accents, basic typography, and a spacing grid. We will look at practical examples with Tailwind and shadcn/ui, discuss responsiveness (inline/fullscreen), height limits ( maxHeight) and safe area, as well as accessibility requirements WCAG AA and why correct semantics matter for a screen reader and voice mode.

We examine how UX and architectural thinking change when the ChatGPT App is used in voice mode: how voice scenarios differ from text, the role of “glanceable UI” in the widget, how to synchronise what the model says aloud with what the interface shows, how to design tools for conversational commands, and how to deal with latency via tool_calls, "pending" statuses, and background jobId. We also discuss safe confirmation flows and common mistakes.