Лекції

Розглядаємо UX‑підхід OpenAI для ChatGPT Apps: чому важливо мислити chat-first, у яких сценаріях App справді допомагає (структура, завдання з багатьма обʼєктами, покрокові майстри), як коректно запускати UI через auto‑launch і humble handoff та як уникнути антипатерна «сюрприз‑віджет». Плюс: міні‑приклад «класифікатора намірів» на TypeScript, правила для system‑prompt і невеликий React‑компонент інтроекрана.

Розбираємо inline‑режим як «режим за замовчуванням» для ChatGPT Apps: коли він кращий за fullscreen, як обирати між картками, списками й каруселями та як проєктувати CTA так, щоб віджет залишався легким. На прикладі GiftGenius розглядаємо тип даних GiftSuggestion, компоненти GiftCard/ GiftGrid/ GiftList/ GiftCarousel, виклики інструментів через window . openai . actions . call і типові помилки, через які inline перетворюється на «мінісайт».

Розбираємо, коли й навіщо в ChatGPT Apps переходити з inline у fullscreen, як улаштований базовий механізм displayMode, як безпечно просити хост перемкнути режим через requestDisplayMode і чому PiP — «примхливий» режим, для якого обовʼязково потрібні запасні (fallback) варіанти. Спроєктуємо fullscreen‑майстер (wizard), винесемо стан у надійний шар і обговоримо медіасценарії «video + chat», мобільні особливості, а також типові UX‑ і розробницькі помилки.

У цій лекції розглянемо, як спроєктувати візуальний стиль застосунку для ChatGPT так, щоб він виглядав «рідним» усередині ChatGPT: наслідування теми (light/dark), роботу з токенами та CSS‑змінними, акуратні брендові акценти, базову типографіку й сітку відступів. На практиці подивимося приклади на Tailwind і shadcn/ui, обговоримо адаптивність (inline/fullscreen), обмеження висоти ( maxHeight) і safe area, а також вимоги доступності WCAG AA — і те, чому коректна семантика важлива для screen reader та голосового режиму.

Розглянемо, як змінюються UX і архітектурне мислення, коли ChatGPT App використовують у голосовому режимі. Зʼясуємо, чим голосові сценарії відрізняються від текстових, яку роль відіграє «glanceable UI» у віджеті, як синхронізувати те, що модель промовляє, із тим, що показує інтерфейс, як проєктувати інструменти під розмовні команди та як працювати із затримками через tool_calls, статуси "pending" і фонові jobId. Окремо обговоримо безпечні сценарії підтвердження й типові помилки.