Лекції

Розглянемо, як улаштована пісочниця віджета в ChatGPT Apps: чому це не «звичайний сайт у iframe», які обмеження накладають origin, sandbox і CSP, як безпечно взаємодіяти з хостом через window . openai і чому в UI‑шарі краще використовувати React‑хуки ( useWidgetProps, useWidgetState, useOpenAIGlobal), а не звертатися до глобального обʼєкта безпосередньо. Також обговоримо межі відповідальності «віджет ↔ ChatGPT ↔ MCP/сервер», зберігання стану та типові помилки.

У цій лекції розглянемо, як «вписати» інтерфейс (UI) вашого застосунку для ChatGPT в обмеження чату: як читати й перемикати displayMode (inline/fullscreen/PiP), дотримуватися ліміту maxHeight без «подвійної прокрутки», синхронізувати висоту через notifyIntrinsicHeight (), адаптувати вигляд під theme і будувати стійкий layout для десктопа та мобільних пристроїв.

У цій лекції розглянемо карту станів у ChatGPT Apps і практичні підходи: де зберігати авторитетні (authoritative) бізнес-дані (через MCP і toolOutput), де тримати ефемерний UI (локальний React useState), а де потрібен тривалий стан на рівні повідомлення ( widgetState через useWidgetState). Окремо обговоримо вхідні дані інструмента ( toolInput), метадані ( toolResponseMetadata / _meta), шаблони «loading / empty / error», кроки майстра та типові помилки.

Розберемося, що таке follow‑up у ChatGPT App, як натискання у віджеті перетворюється на нове повідомлення користувача, і чому найчастіше краще надсилати текст через useSendMessage/ sendFollowUpMessage, а не викликати інструмент напряму. Також поговоримо про «conversational sandwich» (pre‑text → віджет → post‑interaction), синхронізацію widgetState з історією чату та принципи проєктування вдалих follow‑up-ів. Наприкінці розберемо типові помилки.

Розбираємося, як «віджет у пісочниці» спілкується із зовнішнім світом у ChatGPT Apps: безпечна навігація через openExternal (і хук useOpenExternal замість window. open), обмеження та підводні камені window. fetch, чому відносні шляхи на кшталт "/api/..." ламаються всередині хоста та як із цього випливає архітектура «тонкий UI — товстий бекенд» з акцентом на MCP/ callTool.