ChatGPT Apps: повний посібник для розробників у 2025 році

Поки ти читаєш ці рядки, OpenAI щойно відчинив двері. Учора, буквально учора, вони запустили App Directory для ChatGPT і відкрили подання заявок для ВСІХ розробників. Не для обраних партнерів. Для всіх. Для тебе в тому числі.

800 мільйонів користувачів. Практично жодних конкурентів. Вікно можливостей відкрите прямо зараз. І воно зачиниться через кілька місяців, коли туди набіжать всі інші.

Це не чергова стаття «подивись, що можна буде зробити колись». Це інструкція для тих, хто хоче встигнути зараз, поки ринок порожній.

Пам'ятаєш, як у 2008 році відкрився App Store, і всі думали «ну кому потрібні ці додатки на телефоні»? А потім Angry Birds заробив мільярд доларів, Instagram продався Facebook за мільярд, Uber виріс до 80 мільярдів. Перші розробники, які зайшли тоді, зірвали джекпот просто тому, що були першими.

Зараз грудень 2025 року. І відбувається рівно те саме. Тільки тепер це називається ChatGPT Apps.

6 жовтня OpenAI відкрив нову платформу — і знаєш, скільки там користувачів на старті? 800 мільйонів. Не 10 мільйонів, як у iPhone у 2008-му. Вісімсот мільйонів. App Store був у 80 разів менший на старті. Розумієш?

А конкурентів там зараз? На 18 грудня — менше двадцяти додатків. Spotify, Booking.com, Canva, Zillow, AllTrails, пара корпоративних інструментів. Все. Буквально все. Ринок повністю порожній. І вчора OpenAI відкрив подання заявок для всіх розробників — включно з тобою.

Я не жартую. Пишеш у ChatGPT: «Spotify, зроби плейлист для пробіжки» — і прямо в чаті відкривається віджет Spotify. З треками, кнопками, все працює. Без перемикання вкладок, без копіювання. Магія.

Або: «Booking, знайди готель у Парижі до €100» — бац, і карта з варіантами, фотками, можна одразу забронювати.

І ти можеш створити такий самий додаток.

Зараз розповім як.

Чому це не просто чергова «нова фіча»

Слухай, я розумію. У всіх уже виробився імунітет на новини типу «вау, нова технологія змінить світ». Щотижня щось нове. Crypto, NFT, метавсесвіти, AGI вже наступного тижня. Втомився від цього хайпу? Я теж.

Але тут інше. Давай на цифрах.

App Store у 2008-му:

• 10 мільйонів користувачів iPhone на старті
• Щоб розробити додаток, потрібен був Mac (мінімум $1000) і девайс для тестів
• Конкуренція почалася з нуля, але через півроку там були вже тисячі додатків
• Потрібно було вчити Objective-C (так-так, той самий кошмар із квадратними дужками)

Що вийшло з цього? Instagram продали за мільярд, Angry Birds завантажили мільярд разів, Uber зараз коштує $80+ мільярдів.

Хлопці, які зайшли першими, вони просто встигли. Були там, коли конкуренції не було.

ChatGPT Apps зараз:

• 800 мільйонів активних користувачів щотижня
• Розробка — звичайний ноутбук, будь-яка ОС, безкоштовні інструменти
• Конкурентів менше двадцяти (17 грудня відкрили подання для всіх!)
• Стек технологій — TypeScript або Python, які ти й так знаєш

Математика проста: аудиторія в 80 разів більша, конкурентів у сотні разів менше, поріг входу в рази нижчий.

Це не хайп. Це вікно можливостей, яке відкрилося ВЧОРА (17 грудня) і зачиниться через 2-3 місяці, коли туди набіжать всі інші. Перші схвалені додатки почнуть з'являтися в каталозі вже в січні 2026. Зараз там майже нікого немає.

Що взагалі таке ці ChatGPT Apps (без води)

Добре, давай без технічного жаргону спочатку. На пальцях.

Раніше було так: ти сидиш у ChatGPT, хочеш щось зробити — наприклад, забронювати готель. ChatGPT тобі радить, потім ти копіюєш назву готелю, відкриваєш Booking.com у новій вкладці, шукаєш, бронюєш. Купа перемикань між вікнами. Бісить.

Тепер так: пишеш у ChatGPT «Booking, знайди готель у Мадриді на вихідні до €80», і прямо в чаті — карта, список варіантів, фотографії, ціни, можна клікнути і забронювати. Все там само. Жодних вкладок.

Здається дрібницею? Ну ось Apple теж здавалося дрібницею — «навіщо тачскрін, якщо є кнопки?» А потім Nokia померла.

ChatGPT Apps — це НЕ:

Одразу прояснимо, щоб не було плутанини (я сам спочатку плутався).

Це НЕ Custom GPTs. Custom GPTs — це просто чат-боти з інструкціями. Ти їм скажеш «відповідай як пірат» — вони відповідають як пірат. Все. Жодних віджетів, жодного інтерактиву.

Це НЕ ChatGPT Plugins. Plugins OpenAI взагалі закрили в квітні 2024. Вони були повільні, незручні, працювали погано. Поховали їх, правильно зробили.

Це НЕ робота з ChatGPT API. API — це коли ти робиш свій додаток і всередині використовуєш ChatGPT. Зовсім інша історія.

А що тоді?

ChatGPT Apps — це повноцінні додатки всередині ChatGPT. З інтерфейсом, кнопками, картками, картами, відео — все що завгодно. Ти створюєш backend (на TypeScript або Python), робиш UI (звичайний HTML/CSS/JS), і ChatGPT рендерить це прямо в чаті.

Приклад роботи (покроково):

1. Користувач: «Zillow, покажи будинки в Нью-Йорку дешевше $500k»
2. ChatGPT розуміє: треба викликати додаток Zillow
3. Відправляє запит на твій сервер (це називається MCP server, але про це пізніше)
4. Твій сервер:

- Отримав запит

- Викликаєш Zillow API

- Зібрав список будинків

- Сформував відповідь + HTML для віджета

1. Твій сервер → ChatGPT: Ось тобі дані + UI-шаблон
2. ChatGPT: Рендерить віджет в iframe (захищена пісочниця)
3. Віджет: Отримує дані через window.openai API
4. Користувач: Бачить будинки, може переглядати деталі
5. Каже: «Прибери все дорожче $400k» → список оновлюється
6. Знайшов що треба → натискає «Open in Zillow» → відкривається сайт

Вся магія в тому, що це відбувається без перемикання контексту. Розмова з ChatGPT не переривається. Ти просто кажеш що хочеш, і все з'являється там само.

А навіщо це взагалі потрібно?

Питання справедливе. Ось реальний кейс:

Було: Хочу забронювати столик у ресторані після відвідування музею.

1. Відкриваєш сайт музею, дивишся час роботи
2. Гуглиш ресторани поруч
3. Вибираєш, відкриваєш OpenTable
4. Бронюєш
5. Додаєш нагадування в календар

Стало: «ChatGPT, забронюй ресторан поруч з Музеєм Прадо після його закриття».

• ChatGPT дізнається час закриття
• Знаходить ресторани поруч
• Пропонує варіанти (з картами, меню, відгуками)
• Бронює столик
• Додає в календар

Одна фраза замість п'яти кроків.

Ось для чого це потрібно.

Три причини, чому розробники вже біжать туди

1. Миттєвий доступ до аудиторії (це нечесно, але працює)

Звичайний шлях стартапу:

• Ідея → MVP → запуск
• Підняти сайт, налаштувати аналітику
• SEO (місяці очікування)
• Контекстна реклама (гроші, гроші, гроші)
• Холодні дзвінки, листи
• Через рік: 1000 користувачів (якщо пощастить)

З ChatGPT Apps:

Ти робиш додаток. Публікуєш в Store. Користувач пише «Знайди мені рецепт пасти карбонара» — і якщо у тебе додаток рецептів, ChatGPT сам пропонує твій додаток.

Не ти шукаєш користувачів. ChatGPT приводить їх до тебе.

Це як мати найкращого sales manager у світі, який працює 24/7 безкоштовно і знає всіх 800 мільйонів користувачів особисто.

А тепер уяви, що конкурентів у тебе — три компанії. Не три тисячі. Три. У якійсь ніші може взагалі нікого не бути.

2. Не потрібно робити UI з нуля (але гайдлайни вивчити варто)

Знаєш, скільки часу йде на нормальний UI у додатку? Місяці. Адаптивність, кросбраузерність, теми (світла/темна), accessibility. А ще iOS-версія окремо, Android окремо. Роботи по вуха.

З ChatGPT Apps — ChatGPT рендерить UI за тебе. Ти даєш HTML-шаблон, він вбудовує в інтерфейс. Теми? Автоматично. Адаптив? Автоматично. iOS/Android? Працює всюди, це ж веб.

Але є нюанс: OpenAI надає чіткі гайдлайни з дизайну. Це не «роби як хочеш». Є рекомендації щодо розмірів віджетів, колірних схем, типографіки, відступів. Все чітко і зрозуміло задокументовано.

Хороша новина: дотримуватися цих гайдлайнів простіше, ніж створювати дизайн-систему з нуля. OpenAI вже продумав консистентність, accessibility, UX-паттерни. Ти просто застосовуєш їхні стандарти.

Ти фокусуєшся на логіці, на даних, на тому, що робить твій додаток корисним. А не на тому, щоб кнопка на різних пристроях виглядала однаково.

3. First-mover advantage (вікно відкрите ПРЯМО ЗАРАЗ)

Слухай уважно, бо це найважливіше в статті.

17 грудня 2025 року — вчора — OpenAI запустив App Directory і відкрив подання заявок для всіх розробників. Не для партнерів, не для корпорацій. Для всіх. Ти можеш зайти на platform.openai.com прямо зараз і подати свій додаток на рев'ю.

Що там прямо зараз:

• Spotify, Booking.com, Expedia (подорожі)
• Canva, Figma (дизайн)
• Zillow (нерухомість)
• Coursera (навчання)
• AllTrails, Coupler, Daloopa, Coveo, Egnyte, Hex (корпоративні інструменти)

Порахуй їх. Менше двадцяти додатків на 800 мільйонів користувачів. У App Directory каталог практично порожній. Featured секції порожні. Рекомендаційні алгоритми тільки налаштовуються.

Перші схвалені додатки почнуть з'являтися в січні 2026. Це означає, що у тебе є 2-3 тижні, щоб зробити якісний додаток і подати на рев'ю. І шанс потрапити в першу хвилю.

До літа 2026 там будуть:

• Тисячі розробників
• Сотні стартапів
• Купа копій
• Жорстка конкуренція за Featured spots
• Рекомендаційний алгоритм вже навчений на тисячах додатків

Але не лякайся. Це не означає, що влітку буде пізно. ChatGPT Apps — це не хайпова фіча, яка зникне через рік. Це фундаментальна платформа, яка з нами надовго.

Аналогія: App Store з'явився в 2008, а нові успішні додатки виходять досі. TikTok підірвав ринок у 2018 — через 10 років після запуску магазину. Clubhouse коштував мільярди в 2020.

ChatGPT Apps буде рости і розвиватися роками. Просто ті, хто зайде в першій хвилі — найближчі 2-3 місяці — отримають максимальні вигоди: менше конкурентів, більше уваги, перші позиції в рейтингах, репутація піонерів, шанс потрапити в Featured.

Ти можеш зайти і через півроку. Але зараз — це вікно можливостей з мінімальним ризиком і максимальною віддачею. Каталог порожній. Подання відкрито. Конкуренції майже немає.

Через місяць там будуть сотні заявок. Через три місяці — тисячі. А прямо зараз ти можеш бути одним із перших двадцяти.

Як це працює технічно (без заумних слів)

Окей, годі маркетингу. Давай по суті — як це влаштовано під капотом.

Проста схема

Користувач 
    ↓ пише промпт
ChatGPT UI (те що бачиш)
    ↓ розуміє, який інструмент потрібен
Apps SDK Runtime (двигун)
    ↓ відправляє запит
Твій MCP Server (твій код)
    ↓ обробляє, смикає API
Твоя база даних / зовнішні сервіси
    ↓ повертає дані
Віджет (HTML/CSS/JS в iframe)
    ↓ відображається
Користувач бачить результат

У реальності один запит виглядає так:

Користувач: «Spotify, створи плейлист для ранкової пробіжки»

1. ChatGPT: Окей, це про музику, потрібен tool create_playlist від Spotify
2. ChatGPT → Твій сервер: POST запит з параметрами {theme: "morning_run", duration: 30}
3. Твій сервер:

- Отримав запит

- Викликав Spotify API

- Зібрав список треків

- Сформував відповідь + HTML для віджета

1. Твій сервер → ChatGPT: Ось тобі дані + UI-шаблон
2. ChatGPT: Рендерить віджет в iframe (захищена пісочниця)
3. Віджет: Отримує дані через window.openai API
4. Користувач: Бачить плейлист, може слухати, редагувати

Весь процес — пара секунд.

MCP Protocol — що це і навіщо

MCP = Model Context Protocol. Це відкритий стандарт для підключення AI до зовнішніх інструментів і даних.

Історія коротко:

• Листопад 2024 → Anthropic (творці Claude) анонсували MCP
• Березень 2025 → OpenAI сказав «так, ми теж так робимо»
• Грудень 2025 → MCP передали в Linux Foundation

Тепер це загальний стандарт. Зробив MCP-сервер один раз — працює з ChatGPT, з Claude, з VS Code, з будь-яким AI-клієнтом.

Аналогія: пам'ятаєш, як раніше у кожного телефону була своя зарядка? Nokia одна, Samsung інша, iPhone третя. Бісило жорстко. Потім придумали USB-C — один порт для всіх.

MCP — це USB-C для AI додатків.

Три кити MCP

MCP складається з трьох примітивів. Звучить страшно, але насправді просто:

1. Tools (Інструменти)

Це функції, які AI може викликати. Наприклад:

• search_products — знайти товари
• book_hotel — забронювати готель
• create_playlist — створити плейлист
• get_weather — дізнатися погоду

Ти реєструєш tool, описуєш параметри (що потрібно передати), і ChatGPT автоматично розуміє, коли його викликати.

2. Resources (Ресурси)

Це джерела даних або UI-шаблони. Наприклад:

• HTML файл з віджетом
• JSON з даними користувача
• Зображення, відео

Ресурси контролюєш ти, а не AI. Ти вирішуєш, що віддати і в якому вигляді.

3. Prompts (Промпти)

Багаторазові шаблони для частих задач. Якщо у тебе є стандартний сценарій, можеш описати його один раз, і користувачі будуть використовувати швидше.

Чесно? Промпти використовують рідко. Tools і Resources — ось що важливо.

А що з безпекою?

Віджети працюють у sandboxed iframe — ізольованому середовищі. Вони не можуть:

• Читати cookies інших сайтів
• Виконувати довільний JavaScript у контексті ChatGPT
• Отримати доступ до даних інших користувачів

Всі запити йдуть через HTTPS. Дані в transit шифруються TLS 1.2+. Зберігання — AES-256. OpenAI пройшли SOC 2 Type 2 audit, відповідають GDPR/CCPA.

Коротше, безпека на рівні. Не треба винаходити велосипед.

Створюємо свій перший додаток (прямо зараз)

Годі теорії. Давай зробимо реальний додаток. Зараз. За 20-30 хвилин.

Що будемо робити: Todo List. Так, я знаю, це кліше. Але зате просто і зрозуміло. Зробиш todo — зрозумієш принцип — далі хоч космічні кораблі моделюй.

Що нам знадобиться

• Node.js (уже стоїть, напевно)
• Будь-який редактор коду
• Термінал
• ngrok (для публічного URL)

Все безкоштовно, все є.

Крок 1: Створюємо проєкт

mkdir my-first-chatgpt-app
cd my-first-chatgpt-app
npm init -y
npm install @modelcontextprotocol/sdk

package.json повинен виглядати так:

{
  "type": "module",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.20.2"
  }
}

> Примітка: У прикладі ми використовуємо JSON Schema безпосередньо для валідації параметрів. Якщо хочеш потужнішу валідацію, можеш додати zod і використовувати його всередині обробника tool.

Крок 2: Пишемо MCP сервер

Створи файл server.js:

import { createServer } from "node:http";
import { readFileSync } from "node:fs";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";

// HTML з віджетом (створимо в наступному кроці)
const widgetHtml = readFileSync("widget.html", "utf8");

// Наше "сховище" задач (у реальності тут була б база)
let todos = [];
let nextId = 1;

function createTodoServer() {
  const server = new McpServer({ 
    name: "my-todo-app", 
    version: "1.0.0" 
  });

  // Реєструємо UI віджет як Resource
  server.registerResource(
    "todo-widget",
    "ui://widget/todo.html",
    {},
    async () => ({
      contents: [{
        uri: "ui://widget/todo.html",
        mimeType: "text/html+skybridge",  // Важливо! Без цього не запрацює
        text: widgetHtml,
        _meta: { 
          "openai/widgetPrefersBorder": true  // Рамка навколо віджета
        },
      }],
    })
  );

  // Реєструємо Tool для додавання задач
  server.registerTool(
    "add_todo",
    {
      title: "Додати задачу",
      description: "Додає нову задачу в список",
      inputSchema: {
        type: "object",
        properties: {
          title: {
            type: "string",
            description: "Назва задачі"
          }
        },
        required: ["title"]
      },
      _meta: {
        "openai/outputTemplate": "ui://widget/todo.html",  // Який віджет показати
        "openai/toolInvocation/invoking": "Додаю задачу...",  // Текст поки завантажується
        "openai/toolInvocation/invoked": "Задачу додано ✓",  // Текст коли готово
      },
    },
    async ({ title }) => {
      // Створюємо задачу
      const todo = { 
        id: `todo-${nextId++}`, 
        title, 
        completed: false 
      };
      todos.push(todo);

      // Повертаємо результат
      return {
        // Текст для ChatGPT (що показати в чаті)
        content: [{ 
          type: "text", 
          text: `✅ Додав: "${title}"` 
        }],
        // Дані для віджета
        structuredContent: { 
          tasks: todos 
        },
      };
    }
  );

  return server;
}

// HTTP сервер з CORS (обов'язково!)
const port = 8787;
const httpServer = createServer(async (req, res) => {
  const url = new URL(req.url, `http://${req.headers.host}`);

  // CORS preflight (ChatGPT робить OPTIONS запит спочатку)
  if (req.method === "OPTIONS" && url.pathname === "/mcp") {
    res.writeHead(204, {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
      "Access-Control-Allow-Headers": "content-type, mcp-session-id",
      "Access-Control-Expose-Headers": "Mcp-Session-Id",
    });
    res.end();
    return;
  }

  // Health check (щоб перевірити, що сервер живий)
  if (req.method === "GET" && url.pathname === "/") {
    res.writeHead(200).end("✅ MCP Server працює");
    return;
  }

  // MCP endpoint (сюди ChatGPT буде стукатися)
  if (url.pathname === "/mcp") {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Expose-Headers", "Mcp-Session-Id");

    const server = createTodoServer();
    const transport = new StreamableHTTPServerTransport({
      sessionIdGenerator: undefined,
      enableJsonResponse: true,
    });

    // Коли з'єднання закривається, прибираємо за собою
    res.on("close", () => {
      transport.close();
      server.close();
    });

    await server.connect(transport);
    await transport.handleRequest(req, res);
    return;
  }

  res.writeHead(404).end("Not Found");
});

httpServer.listen(port, () => {
  console.log(`🚀 Сервер запущено: http://localhost:${port}/mcp`);
});

Виглядає складно? Насправді тут три частини:

1. Реєстрація віджета (UI)
2. Реєстрація tool (що може робити)
3. HTTP сервер (щоб ChatGPT міг до нас достукатися)

Крок 3: Робимо віджет

Створи widget.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="utf-8" />
  <title>Todo Widget</title>
  <style>
    * { box-sizing: border-box; }
    body { 
      margin: 0; 
      padding: 20px; 
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg, #f8f9fa);
    }
    .task-list { 
      display: flex; 
      flex-direction: column; 
      gap: 10px; 
    }
    .task { 
      padding: 15px; 
      border-radius: 8px; 
      background: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .task:hover { 
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .task.completed { 
      opacity: 0.5; 
      text-decoration: line-through; 
    }
    .empty {
      text-align: center;
      padding: 40px;
      color: #999;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  
  <script type="module">
    // Отримуємо дані з ChatGPT
    const toolOutput = window.openai?.toolOutput;
    const theme = window.openai?.theme;
    
    // Якщо темна тема, міняємо фон
    if (theme === 'dark') {
      document.documentElement.style.setProperty('--bg', '#1a1a1a');
    }
    
    // Малюємо список задач
    function render(tasks) {
      const root = document.getElementById('root');
      
      if (!tasks || tasks.length === 0) {
        root.innerHTML = '<div class="empty">📝 Задач поки немає. Додай першу!</div>';
        return;
      }
      
      root.innerHTML = `
        <div class="task-list">
          ${tasks.map(task => `
            <div class="task ${task.completed ? 'completed' : ''}">
              <span>${task.title}</span>
            </div>
          `).join('')}
        </div>
      `;
    }
    
    // Перший рендер
    render(toolOutput?.tasks || []);
    
    // Слухаємо оновлення (коли ChatGPT оновить дані)
    window.addEventListener("openai:set_globals", (event) => {
      const newTasks = event.detail?.globals?.toolOutput?.tasks;
      if (newTasks) render(newTasks);
    });
  </script>
</body>
</html>

Це звичайний HTML. Магія в window.openai — через нього ChatGPT передає нам дані.

Крок 4: Запускаємо локально

Відкрий два термінали.

Термінал 1 (запуск сервера):

node server.js

Побачиш: 🚀 Сервер запущено: http://localhost:8787/mcp

Термінал 2 (публічний тунель):

ngrok http 8787

ngrok дасть тобі публічний URL типу https://abc123.ngrok.app. Копіюй його.

Крок 5: Підключаємо до ChatGPT

1. Відкрий ChatGPT
2. Settings → Apps & Connectors → Advanced settings
3. Увімкни Developer Mode (потрібен Plus або Pro)
4. Натисни Create Connector
5. Введи URL: https://твій-ngrok-url.ngrok.app/mcp
6. Save

Крок 6: Тестуємо!

Відкрий новий чат і напиши:

Додай задачу: Купити молоко

Якщо все правильно — побачиш віджет із задачею!

Спробуй ще:

Додай задачу: Піти на тренування
Додай задачу: Подзвонити мамі

Бачиш список задач прямо в чаті? Вітаю, ти щойно створив свій перший ChatGPT додаток! 🎉

Що далі?

Це найбазовіший приклад. Далі можна:

• Додати видалення задач
• Зробити checkbox для відмітки як виконаних
• Підключити реальну базу даних (PostgreSQL, MongoDB)
• Додати OAuth авторизацію
• Задеплоїти на Vercel (безкоштовно)

Але принцип ти зрозумів. Решта — деталі.

Просунуті фішки (коли базове вже нудно)

Okay, todo list зробив. Тепер хочеться чогось серйознішого. Ось що ще можна:

OAuth авторизація

Якщо твій додаток працює з особистими даними користувача (типу Spotify плейлисти або Google Drive), потрібна авторизація.

ChatGPT підтримує OAuth 2.1 з PKCE. Звучить страшно, але працює просто:

1. Користувач перший раз викликає твій додаток
2. ChatGPT показує «Підключити акаунт»
3. Перекидає на твій authorization server
4. Користувач дозволяє доступ
5. Твій сервер повертає токен
6. ChatGPT зберігає токен і відправляє з кожним запитом

У коді це виглядає так:

server.registerTool(
  "get_user_playlists",
  {
    title: "Отримати плейлисти",
    _meta: {
      "openai/auth": [{ type: "oauth2" }]  // Вимагаємо авторизацію
    }
  },
  async (args, context) => {
    // Перевіряємо токен
    const token = context.headers?.authorization?.replace('Bearer ', '');
    
    if (!token) {
      return {
        error: "Unauthorized",
        _meta: { 
          "mcp/www_authenticate": { error: "invalid_token" } 
        }
      };
    }
    
    // Отримуємо дані
    const playlists = await fetchSpotifyPlaylists(token);
    return { content: [{ type: "text", text: JSON.stringify(playlists) }] };
  }
);

Деталі налаштування auth server — окрема тема. Якщо коротко: потрібен /authorize endpoint, /token endpoint, і метадані сервера. Доку почитай, там розписано.

Віджети в fullscreen

Іноді віджет у чаті маленький. Наприклад, карта. Тут потрібен fullscreen.

// У віджеті
await window.openai.requestDisplayMode({ mode: "fullscreen" });

Є три режими:

• inline — звичайний віджет у чаті (за замовчуванням)
• fullscreen — на весь екран (для карт, графіків)
• pip (picture-in-picture) — плаваюче вікно (для відео, музики)

Перемикаєшся через window.openai.requestDisplayMode().

Agentic Commerce Protocol (ACP) — продажі прямо в ChatGPT

Хочеш продавати товари через ChatGPT? OpenAI і Stripe зробили для цього відкритий стандарт — ACP.

Як працює:

1. У тебе є товари (Product Feed в JSON/CSV/XML)
2. Користувач: «ChatGPT, замов мені кросівки Nike Air Max, 42 розмір»
3. ChatGPT знаходить товар у твоєму feed'і
4. Показує картку товару (фото, ціна, опис)
5. Користувач: «Купити»
6. Instant Checkout — оплата через твій Payment Provider (Stripe/PayPal)
7. Тобі приходить webhook про покупку
8. Відправляєш товар

Комісія: OpenAI бере невеликий відсоток з продажів (точні цифри не розкриті).

Хто вже працює: Instacart (повноцінний Instant Checkout), 1M+ Shopify merchants.

Це реально працює. Люди купують прямо в чаті, не переходячи на сайт.

Deployment: Виводимо в продакшн

Локально все працює, але користувачам потрібен стабільний сервер. ngrok відвалиться через годину — не варіант.

Варіант 1: Vercel (найпростіший)

Vercel офіційно підтримує ChatGPT Apps. Безкоштовний tier є, вистачить на старті.

npm i -g vercel
vercel login
vercel

Все. Vercel сам підніме HTTPS, налаштує CDN, дасть стабільний URL.

Готовий шаблон від Vercel:

vercel.com/templates/next.js/chatgpt-app-with-next-js

Варіант 2: Railway / Fly.io / Render

Якщо потрібно більше контролю (свій Docker, свої env variables, etc):

Railway:

railway login
railway link
railway up

Fly.io:

fly launch
fly deploy

Всі три платформи безкоштовні для старту, потім платиш за ресурси. Дешево.

Production Checklist

Перед запуском перевір:

✅ HTTPS — обов'язково, інакше ChatGPT не підключиться

✅ CORS — дозволь https://chatgpt.com

✅ Health check — / повинен повертати 200

✅ Rate limiting — щоб не вбили DDoS'ом

✅ Env variables — жодних секретів у коді

✅ Логування — щоб зрозуміти, що зламалося

✅ Моніторинг — uptime, latency, errors

Мінімальний CORS для Express:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'content-type, mcp-session-id');
  next();
});

Цього достатньо для початку.

ChatGPT App Directory: Подання заявок відкрито ПРЯМО ЗАРАЗ

Найчастіше питання було: «Коли можна буде публікувати?»

Відповідь: Уже можна. 17 грудня 2025 року OpenAI відкрив подання заявок для всіх розробників.

Статус на 18 грудня 2025:

✅ App Directory запущено — https://chatgpt.com/apps

✅ Подання заявок відкрито — через platform.openai.com

✅ Apps SDK в BETA — будь-який розробник може використовувати

✅ Перші схвалені додатки — почнуть з'являтися в січні 2026

Хто вже там:

• Spotify — плейлисти, рекомендації
• Booking.com, Expedia — подорожі
• Canva, Figma — дизайн і презентації
• Zillow — нерухомість у США
• Coursera — освітні курси
• AllTrails — треки і маршрути
• Coupler, Daloopa, Coveo, Egnyte, Hex — корпоративні інструменти

Всього менше 20 додатків. Це ВСЕ. Каталог майже порожній.

Як подати свій додаток (покроково)

Крок 1: Підготуй додаток

Перед поданням переконайся, що:

• Додаток протестовано в Developer Mode
• Сервер працює на HTTPS (обов'язково!)
• Дотримано App Submission Guidelines
• Є Privacy Policy та Terms of Service
• UI відповідає гайдлайнам OpenAI

Крок 2: Зайди на OpenAI Developer Platform

Йди на platform.openai.com → розділ "ChatGPT Apps" → "Submit App".

Крок 3: Заповни форму подання

Тобі потрібно надати:

App Information:

• Назва додатка (унікальна, зрозуміла)
• Опис (що робить, кому корисно)
• Категорія (productivity, travel, education, entertainment, etc.)
• Іконка та banner для каталогу (PNG, певні розміри)

MCP Details:

• URL твого MCP сервера (повинен бути доступний по HTTPS)
• Список tools, які надає сервер
• Налаштування authentication (якщо потрібен OAuth)
• Endpoints для віджетів

Testing Guidelines:

• Тестові сценарії для рев'юверів (як перевірити, що все працює)
• Приклади промптів, які тригерять твій додаток
• Очікувана поведінка

Screenshots / UI Previews:

• Скриншоти віджетів у ChatGPT
• Демонстрація основних фіч
• Показати, як виглядає додаток у light/dark темах

Country Availability:

• У яких країнах буде доступний додаток
• Обмеження по регіонах (якщо є)

Privacy Policy:

• Обов'язково для всіх додатків
• Які дані збираєш, як використовуєш, як зберігаєш
• Посилання на повний текст політики

Release Notes:

• Що нового в цій версії
• Відомі обмеження або баги
• Плани на майбутнє (опціонально)

Крок 4: Відправ на рев'ю

Натискаєш "Submit". OpenAI починає перевірку:

• Технічний review (чи працює сервер, чи є баги)
• Security review (чи немає вразливостей, чи правильно обробляються дані)
• Policy review (чи відповідає Usage Policies)
• UX review (чи зручно користуватися)

Timeline рев'ю: від кількох днів до кількох тижнів (залежить від складності).

Крок 5: Отримай відповідь

Або Approved — вітаю, додаток йде в каталог!

Або Changes Requested — потрібно виправити зауваження і відправити знову.

Після схвалення твій додаток з'явиться в App Directory, і 800 мільйонів користувачів зможуть його знайти.

Вимоги для схвалення

Щоб пройти рев'ю, додаток повинен:

✅ Відповідати Usage Policies OpenAI

✅ Бути appropriate для всіх аудиторій (no adult content, violence, hate speech)

✅ Запитувати тільки необхідні дані (least privilege principle)

✅ Мати робочий HTTPS endpoint (HTTP не підійде)

✅ Надавати чітку Privacy Policy

✅ Дотримуватися UI Guidelines (design consistency, accessibility)

✅ Не порушувати Terms of Service сторонніх сервісів (якщо інтегруєшся з ними)

Автоматичний реджект, якщо:

• Немає HTTPS
• Немає Privacy Policy
• Запитуєш дані, які не потрібні для роботи (наприклад, location, якщо не використовуєш)
• UI не адаптивний або зламаний
• Додаток падає з помилками

Що робити після схвалення

Твій додаток з'явиться в каталозі — користувачі зможуть знайти його через пошук або Featured секцію.

Як користувачі будуть знаходити тебе:

1. Пошук у каталозі — шукають за ключовими словами
2. @mention — пишуть у чаті @твій_додаток щось зроби
3. Recommendations — ChatGPT сам пропонує твій додаток, коли бачить релевантний запит
4. Featured — найкращі додатки потрапляють у рекомендовані

Deep links:

Ти можеш ділитися прямими посиланнями на свій додаток:

https://chatgpt.com/apps/твій-додаток

Постиш у соцмережі, на сайті, в розсилці — люди клікають і одразу потрапляють у твій додаток у ChatGPT.

Монетизація — реально заробити?

Питання на мільйон (буквально).

Варіанти доходу:

Instant Checkout вже працює. Instacart продає продукти прямо в ChatGPT, OpenAI бере комісію (розмір не розкритий, але кажуть «reasonable»).

Subscription запустять у Q1-Q2 2026. Як в App Store — користувачі платять за додаток, OpenAI бере ~30% (ймовірно).

Скільки можна заробити?

Ніхто не знає. Store не відкритий, статистики немає. Але можна орієнтуватися на App Store:

• Top 1% додатків: $10K-100K+/місяць
• Top 10%: $1K-10K/місяць
• Решта: $0-1K/місяць

У ChatGPT Apps потенціал вищий, бо:

1. AI сам рекомендує додатки (discovery безкоштовний)
2. Конверсія вища (все в чаті, без перемикань)
3. Instant Checkout знижує friction

Але поки — невідомість. Перші будуть експериментувати.

Кому це підходить (чесна розмова)

Не всім варто кидатися в ChatGPT Apps. Давай по-чесному.

✅ Тобі сюди, якщо:

• Вмієш писати на TypeScript або Python
• Розумієш REST API, HTTP, JSON
• Є ідея додатка для широкої аудиторії
• Готовий вчитися і експериментувати
• Не боїшся, що щось зміниться (SDK в preview, все еволюціонує)
• Хочеш увійти в нову індустрію на старті

❌ НЕ варто починати, якщо:

• Ти зовсім новачок у програмуванні (спочатку базу!)
• Очікуєш миттєвого прибутку без роботи
• Потрібен стабільний дохід прямо зараз (поки можна тільки link-out на свій сайт для покупок)
• Робиш вузький B2B продукт (ChatGPT для масового ринку)
• Не готовий до того, що технологія буде змінюватися

Реальні зарплати AI-розробників

Якщо не створювати свій додаток, а працювати в компанії:

США (2025):

• Junior AI Developer: $95K-$130K/рік
• Mid AI Engineer: $161K-$220K/рік
• Senior AI Engineer: $301K-$440K/рік
• AI Research Scientist: $500K-$893K/рік

Віддалена робота по регіонах:

• Західна Європа: €60K-€120K/рік
• Східна Європа: $35K-$80K/рік
• Індія: $15K-$45K/рік
• Китай: $25K-$70K/рік
• Південна Америка: $30K-$65K/рік

Freelance (глобально): $35-$116/година (в середньому $65-75)

Джерела: levels.fyi, Glassdoor, AngelList (грудень 2025)

Попит на AI-розробників росте на 10-20% щорічно. І буде рости.

У чому реальна складність створення ChatGPT Apps

Окей, я тут всю статтю розповідаю, як це круто і просто. Але давай чесно — не все так гладко.

Є реальні складнощі, з якими стикаються розробники:

1. Зміна парадигми мислення

Це найскладніше. Ти звик писати звичайні додатки: користувач клікає кнопку → код виконується → показується результат. Все передбачувано.

З ChatGPT Apps по-іншому:

• AI вирішує, коли викликати твій tool
• Користувач говорить natural language, а не клікає UI
• Твій додаток — це інструмент у руках AI, а не пряма логіка

Потрібно навчитися думати як AI-інженер, а не як класичний веб-розробник. Це як перехід від процедурного програмування до функціонального — техніка ніби знайома, але підхід інший.

2. MCP Protocol — новий стандарт

MCP тільки з'явився, документації мало, best practices ще формуються. Ти не можеш загуглити «як зробити X в MCP» — Stack Overflow порожній.

Доводиться читати офіційну документацію (яка місцями неповна), вивчати приклади від OpenAI, експериментувати.

3. Debugging складніше, ніж у звичайному веб-додатку

У звичайному додатку бачиш запит → дивишся логи → розумієш, що зламалося.

В ChatGPT Apps:

• AI може неправильно інтерпретувати промпт
• Tool може викликатися не тоді, коли очікуєш
• Віджет рендериться в sandboxed iframe — DevTools не завжди допомагає
• Помилки можуть бути на трьох рівнях: AI, MCP transport, твій код

Потрібні нові навички відлагодження.

4. OAuth і security — відповідальність висока

Якщо твій додаток працює з особистими даними, потрібен OAuth. Але це не просто «поставив бібліотеку і працює».

Потрібно:

• Налаштувати authorization server
• Реалізувати PKCE flow
• Валідувати токени на кожен запит
• Забезпечити безпечне зберігання секретів
• Пройти security review від OpenAI

Один косяк — і витік даних користувачів. Серйозно.

5. Production deployment — не просто «завантажив на хостинг»

HTTPS обов'язковий. CORS потрібен. SSE/Streaming HTTP повинні працювати. Health checks. Rate limiting. Моніторинг. Логування без витоку sensitive data.

Для junior-розробника це може бути overwhelming.

6. Конкуренція з крупняком

Коли Store відкриється, туди зайдуть не тільки інді-розробники. Spotify, Booking, Canva — це великі компанії з великими командами.

Як конкурувати з ними? Потрібна чітка стратегія, нішування, розуміння ринку.

7. Швидко змінна екосистема

Apps SDK в preview. Фічі додаються щотижня. Те, що працювало місяць тому, може зламатися після оновлення.

Потрібно бути готовим адаптуватися швидко.

Ось чому потрібен фундаментальний курс, а не просто «туторіал за 30 хвилин».

Навчання: Курс від JavaRush

Ми в JavaRush розуміємо ці складнощі. І саме тому ми створюємо не просто «основи ChatGPT Apps за півгодини», а повноцінний production-grade курс, який готує до реальної розробки.

Що ми робимо по-іншому

1. Міняємо парадигму мислення поступово

Курс починається з класичної веб-розробки, потім плавно переходить до AI-first підходу. Ти не стрибаєш у холодну воду, а йдеш по сходинках.

2. Глибоке занурення в MCP

Ми не просто «ось так працює MCP». Ми розбираємо:

• Внутрішню архітектуру протоколу
• Як AI приймає рішення про виклик tool
• Оптимізацію tool descriptions для кращого discovery
• Просунуті паттерни роботи з Resources
• Debugging на всіх рівнях стека

3. Real-world проєкти, а не hello world

40 практичних задач — це не «зроби todo list». Це:

• E-commerce додаток з Instant Checkout
• Travel planner з інтеграцією карт
• Content creation tool з AI-генерацією
• Analytics dashboard з real-time даними
• І ще 36 інших задач

4. Security first

Окремий модуль з безпеки:

• OAuth 2.1 з PKCE (покроково)
• Token validation
• Rate limiting strategies
• PII protection
• GDPR/CCPA compliance

5. Production deployment у реальних умовах

Не просто «ось команда для Vercel». А:

• Порівняння платформ (Vercel, Railway, AWS)
• CI/CD pipelines
• Моніторинг і алертинг
• Error tracking
• Performance optimization
• Scaling strategies

6. NestJS як фундамент

Весь курс побудовано на NestJS — сучасному TypeScript фреймворку для backend-розробки.

Чому NestJS?

• Ідеальний для MCP серверів (модульна архітектура)
• Production-ready з коробки
• Підтримка dependency injection
• Відмінна робота з TypeScript
• Величезне ком'юніті

Навіть якщо ти раніше не працював з NestJS — ми все пояснимо з нуля. А якщо працював — дізнаєшся, як застосовувати його для AI додатків.

7. Зміна мислення через практику

Кожен рівень включає:

• Теоретичний блок (10-15 хвилин)
• Практичну задачу (30-60 хвилин)
• Код-рев'ю від AI-ментора
• Розбір типових помилок

До кінця курсу ти думаєш як AI-інженер, а не просто знаєш синтаксис.

Програма курсу (коротко)

Модуль 1: Основи (Рівні 1-4)

• Що таке ChatGPT Apps і навіщо вони потрібні
• MCP Protocol: архітектура і принципи
• Налаштування оточення (NestJS + MCP SDK)
• Перший додаток: простий віджет

Модуль 2: MCP і Tools (Рівні 5-8)

• Реєстрація та опис Tools
• Параметри і валідація (Zod)
• Structured content і UI шаблони
• Tool discovery optimization

Модуль 3: Widgets і UI (Рівні 9-12)

• HTML/CSS/JS для віджетів
• window.openai API
• Display modes: inline, fullscreen, PiP
• Гайдлайни OpenAI з дизайну
• Темізація та адаптивність

Модуль 4: OAuth і Security (Рівні 13-15)

• OAuth 2.1 з PKCE
• Authorization server setup
• Token management
• Security best practices
• GDPR/CCPA compliance

Модуль 5: Advanced Features (Рівні 16-18)

• Agentic Commerce Protocol (ACP)
• Instant Checkout integration
• Multi-step workflows
• State management

Модуль 6: Production (Рівні 19-20)

• Deployment strategies
• Monitoring і logging
• Performance optimization
• Scaling і load balancing
• ChatGPT Store submission

Чому це працює

Не просто теорія. 80% курсу — практика. Ти пишеш код щодня.

Не просто туторіали. Задачі з наростаючою складністю. Від простого до просунутого.

Не просто код. Розуміння AI-мислення, архітектурні рішення, production best practices.

Не просто вивчення. Ти створюєш портфоліо з 5-7 реальних додатків, які можна показати роботодавцю або клієнтам.

Для кого цей курс

Підходить:

• Frontend/Backend розробникам, які хочуть увійти в AI
• Fullstack розробникам, які хочуть розширити skills
• Підприємцям, які хочуть створити свій AI-продукт
• Студентам, які хочуть опанувати затребувану технологію

Потрібні навичк