Dev Mode у ChatGPT: підʼєднуємо локальний застосунок

1. Що таке Developer Mode по суті

Про Dev Mode ви вже трохи знаєте. Тепер важливо скласти цілісну картину й спиратися на реальну практику.

Developer Mode у ChatGPT — це спеціальний режим, у якому платформа дозволяє підʼєднати ваш застосунок напряму, без публікації в Store. Ви кажете ChatGPT: «Ось URL мого MCP‑сервера», — і ChatGPT починає сприймати його як зовнішній інструмент із UI. Він може викликати його інструменти, завантажувати віджети — і все це в межах звичайного чату.

Якщо згадати архітектуру, то в Dev Mode ChatGPT виступає як MCP‑клієнт, а ваш Next.js‑шаблон — як MCP‑сервер. ChatGPT встановлює зʼєднання з /mcp і запитує: «Що ти вмієш?» (список tools і resources). Далі, під час діалогу, він може викликати ці інструменти та відображати ваші віджети в iframe.

Важливо відрізняти Dev Mode від Store:

• Dev Mode — ваш особистий маленький «гараж»: тут можна ламати, експериментувати, змінювати схему інструментів хоч кожні пʼять хвилин і не хвилюватися про користувачів.
• Store — вітрина: туди потрапляє вже стабільна версія — після ревʼю, з оформленою політикою, описами тощо. Туди ми прийдемо наприкінці курсу, а поки що «граємося в гаражі».

Станом на кінець 2025 року Dev Mode з Apps SDK доступний на всіх планах ChatGPT. Водночас у корпоративних облікових записах інколи потрібно, щоб адміністратор увімкнув його на рівні робочого простору. Якщо в налаштуваннях не зʼявляється перемикач Developer Mode, це перше, що варто перевірити.

2. Що у нас уже є на початок лекції

Перш ніж щось натискати в інтерфейсі ChatGPT, переконаймося, що локальна частина готова.

По‑перше, dev‑сервер Next.js. У корені проєкту ви вже запускали:

npm run dev

За замовчуванням Next.js 16 слухає порт 3000, тож ваш UI доступний за адресою http://localhost:3000.

По‑друге, MCP‑маршрут. У шаблоні CodeGym Labs MCP‑сервер реалізовано як обробник маршруту app/mcp/route.ts. Саме в цьому файлі реєструються інструменти та ресурси. Саме туди прийдуть перші запити ChatGPT під час підʼєднання застосунку в Dev Mode.

З погляду архітектури зараз усе виглядає так:

Ваш браузер ──> http://localhost:3000 (Next.js dev, UI)
                           │
                           └── /mcp (MCP‑сервер усередині Next.js)

Поки що з ChatGPT тут немає жодного звʼязку — він живе в хмарі, а ваш localhost для нього недоступний. Детальне налаштування тунелю — тема наступної лекції. Тут, для простоти, вважатимемо, що у вас уже є будь‑який публічний HTTPS‑URL до /mcp (наприклад, через ngrok або Cloudflare Tunnel, налаштований за README шаблону).

Якщо тунель ви ще не піднімали — нічого страшного. Зараз ви принаймні пройдете очима весь ланцюжок кроків у Dev Mode й зрозумієте, що саме потрібно буде зробити, коли зʼявиться HTTPS‑URL.

Якщо у вас уже є HTTPS‑URL до /mcp, далі можете повторювати всі кроки вручну.
Якщо поки що його немає — сприймайте лекцію як «тур інтерфейсом»: важливо зрозуміти послідовність дій, а реальний запуск зробимо в наступній лекції, коли налаштуємо тунель.

3. Вмикаємо Developer Mode в інтерфейсі ChatGPT

Перший крок — просто «навчити» ChatGPT показувати нам потрібні налаштування. Зробіть так:

Спочатку зайдіть у вебверсію ChatGPT під тим обліковим записом, з якого розроблятимете. Натисніть на значок профілю в лівому нижньому (або правому верхньому — UI постійно змінюється) куті та виберіть пункт Settings (Налаштування).

У налаштуваннях знайдіть розділ, повʼязаний із застосунками. Зазвичай він зветься Apps & Connectors або Connected apps. Відкрийте цей розділ. Унизу сторінки (або на вкладці Advanced / Додатково) має зʼявитися перемикач Developer Mode. Саме його потрібно увімкнути.

Після активації Dev Mode ChatGPT зазвичай показує сповіщення, що режим розробника увімкнено. У тому ж розділі зʼявляється кнопка на кшталт Create, Create connector або New app. Формулювання можуть трохи різнитися, але суть одна: зʼявився спосіб створити власний підʼєднаний застосунок.

Якщо у вас у налаштуваннях узагалі немає ані розділу Apps & Connectors, ані перемикача Developer Mode, перевірте:

• чи справді ви увійшли в той обліковий запис ChatGPT, який хочете використовувати;
• у корпоративному обліковому записі цей режим може вмикатися адміністратором робочого простору.

Інколи достатньо просто вийти й увійти знову (класичне «перезапустіть усе» для Dev Mode).

4. Створюємо свій застосунок / конектор і вказуємо MCP URL

Тепер, коли Dev Mode увімкнено, зареєструймо ваш GiftGenius у ChatGPT. Нижче — сценарій «як робити по‑справжньому». Якщо HTTPS‑URL ще не налаштовано, сприймайте кроки як репетицію: просто подивіться, що саме ми робитимемо, коли зʼявиться тунель.

Усе робиться через розділ налаштувань ChatGPT, де ви щойно були. Послідовність буде приблизно такою.

Знову відкрийте Settings → Apps & Connectors. Усередині ви побачите список уже підʼєднаних застосунків (найімовірніше, поки що порожній) і кнопку Create / Add connector. Натисніть її — відкриється форма створення застосунку.

Форма зазвичай складається з трьох ключових полів:

1. Імʼя (Name). Це людинозрозуміле імʼя, яке буде видно і вам, і ChatGPT. Для нашого курсу зручно назвати застосунок, наприклад, GiftGenius (dev) — так одразу видно, що це dev‑версія.
2. Опис (Description). Коротке пояснення, що робить застосунок і коли його варто використовувати. Приклад: «Підбирає ідеї подарунків за інтересами людини». Цей рядок пізніше впливає на discovery: модель використовує його, щоб вирішувати, коли пропонувати ваш App у чаті.
3. URL MCP‑сервера (іноді підписаний як Connector URL, MCP endpoint, App URL тощо). Це найважливіше поле: сюди ви вставляєте публічний HTTPS‑URL, який веде на /mcp вашого застосунку.

Наприклад:

https://my-giftgenius-dev.ngrok.app/mcp

або

https://giftgenius-dev.trycloudflare.com/mcp

Головні нюанси для цього поля:

• обовʼязково https://, інакше ChatGPT просто відмовиться підʼєднуватися;
• обовʼязково шлях /mcp наприкінці, адже саме там «живе» MCP‑сервер усередині шаблону; саме цей шлях описано в офіційній документації Apps SDK.

Звідки взяти цей URL, ми докладно розберемо в наступній лекції (тунелі, Cloudflare, ngrok). Зараз важливо зрозуміти саму ідею: ваш локальний http://localhost:3000/mcp має якось перетворитися на публічний https://…/mcp. Саме цю публічну адресу ви й вставляєте у форму.

Після заповнення полів натисніть Create / Зберегти. У цей момент ChatGPT робить «рукостискання» з вашим сервером: надсилає HTTP‑запити на вказаний URL, очікує отримати маніфест можливостей (список tools/resources, метадані) і перевіряє, що сервер відповідає протоколу MCP. Якщо все гаразд, конектор зʼявиться у списку, і ви побачите, які інструменти знайшов ChatGPT. У наступному розділі розберемо, що саме відбувається під час цього рукостискання і як це побачити в журналах.

Якщо тунель ви ще не налаштували й вставили фіктивний URL, ChatGPT чесно повідомить, що не зміг дістатися сервера. Це теж корисний досвід: ви одразу побачите, де саме й у якому вигляді показуються помилки.

5. Що відбувається «під капотом»: MCP‑handshake на пальцях

Зовні все схоже на звичайну форму «додати застосунок за URL». Усередині — трохи цікавіше. Розібратися в цьому корисно вже зараз, щоб потім легше налагоджувати.

Ви вже бачили, що під час створення конектора ChatGPT звертається до вашого /mcp і очікує маніфест. Давайте розберемо цю «розмову» трохи детальніше — це дуже допомагає під час налагодження.

Під час натискання на кнопку Create ChatGPT виконує кілька кроків.

Спочатку він звертається до вказаного URL із /mcp, виступаючи як MCP‑клієнт. За протоколом MCP він очікує, що на цьому HTTP‑ендпойнті працює сервер, який реалізує базові можливості: перелічити інструменти (list tools), надати ресурси (віджети), обробити виклики інструментів.

Сервер, своєю чергою, відповідає JSON‑структурою з описом:

• імені сервера та версії;
• списку інструментів: name, title, description, inputSchema тощо;
• списку ресурсів: де взяти HTML ваших віджетів, які MIME‑типи та як їх рендерити.

У Next.js‑шаблоні CodeGym усе це вже реалізовано в app/mcp/route.ts: там за допомогою SDK викликається щось на кшталт server.registerTool(...) і server.registerResource(...).

Якщо хочете побачити це рукостискання на власні очі, можна додати в app/mcp/route.ts простий лог. Це радше відладочний прийом: його можна пропустити й повернутися пізніше, коли захочеться зануритися глибше.

// app/mcp/route.ts
import { NextRequest, NextResponse } from "next/server";
// імпортуєте ваш уже наявний server / buildManifest

export async function GET(req: NextRequest) {
  console.log("[MCP] Handshake from ChatGPT:", req.headers.get("user-agent"));
  const manifest = buildManifestSomehow(); // це вже є в шаблоні
  return NextResponse.json(manifest);
}

Ця функція трохи умовна (у шаблоні структура може відрізнятися), але ідея проста: app/mcp/route.ts — звичайний route‑handler Next.js, і ви можете логувати вхідні запити. Під час успішного підʼєднання Dev Mode ви побачите цей лог у терміналі, де запущено npm run dev.

З погляду протоколу все можна зобразити як невеличку діаграму:

sequenceDiagram
    participant ChatGPT
    participant Tunnel as HTTPS URL (/mcp)
    participant NextDev as Next.js dev + MCP

    ChatGPT->>Tunnel: HTTP(S) запит до https://.../mcp
    Tunnel->>NextDev: Проксіює на http://localhost:3000/mcp
    NextDev-->>Tunnel: JSON з інструментами та ресурсами
    Tunnel-->>ChatGPT: Переадресовує відповідь
    ChatGPT->>ChatGPT: Кешує список tools/resources

Те, що у формі Dev Mode ви ввели «просто URL», насправді запускає цілу протокольну розмову.

6. Як ChatGPT «бачить» ваш застосунок після підʼєднання

Припустімо, рукостискання пройшло успішно. Що далі?

По‑перше, у налаштуваннях у розділі Apps & Connectors ваш GiftGenius (dev) зʼявиться у списку підʼєднаних застосунків. Усередині картки ви побачите імʼя, опис і список виявлених інструментів. Там же зазвичай є кнопки на кшталт Refresh, Delete тощо. Кнопка Refresh згодом знадобиться, коли ви змінюватимете схему інструментів.

По‑друге, застосунок стає доступним у самих чатах. Відкрийте новий чат і натисніть на кнопку «+» поруч із полем введення. Там є меню «More», «Apps», «Tools» — залежно від актуальної версії UI. Ваш GiftGenius (dev) має зʼявитися у списку, і ви можете явно вибрати його для цієї розмови.

Після вибору застосунок стає «підʼєднаним» до цього чату. Для вас це виглядає так:

• ви пишете запит природною мовою, наприклад: «Добери подарунок для фаната космосу на 50 $»;
• ChatGPT вирішує (за описом і історією діалогу), що можна використати GiftGenius, і викликає один із ваших MCP‑інструментів;
• результат цього виклику може містити HTML‑віджет; він рендериться прямо в чаті у вигляді картки/панелі.

У Dev Mode найчастіше ви спочатку викликатимете застосунок явно — через вибір у меню або пряму згадку за імʼям. Але важливо розуміти: у продакшні ChatGPT може сам «пропонувати» ваш App, орієнтуючись на його опис і метадані інструментів.

Для наочності корисно уявити ще одну таблицю:

7. Цикл розробки: змінюємо код → бачимо в ChatGPT

Підʼєднати App — це лише половина справи. Друга половина — зрозуміти, як працювати з Dev Mode щодня.

Є два великі типи змін: зміни в UI (віджет) і зміни в MCP‑логіці / інструментах.

Якщо ви змінюєте тільки UI, наприклад у app/page.tsx правите заголовок або стилі, то для Next.js це звичайний фронтенд. Dev‑сервер підхоплює зміни, і в браузері ви бачите hot reload. У ChatGPT ваш UI відкритий у iframe, але поведінка схожа: під час наступного виклику інструмента, який рендерить цей віджет, ChatGPT завантажить уже оновлений HTML. Інколи HMR доходить прямо до iframe. Інколи достатньо просто повторно викликати інструмент у чаті. Про кешування — нижче.

Спробуйте для закріплення трохи змінити віджет. Припустімо, у app/page.tsx у вас є щось на кшталт:

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius</h1>
      <p>Тут буде підбір подарунків.</p>
    </main>
  );
}

Змініть заголовок і текст:

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius (dev)</h1>
      <p>Ця версія живе в Dev Mode. Не для продакшн‑подарунків.</p>
    </main>
  );
}

Збережіть файл, поверніться в чат із підʼєднаним GiftGenius і знову викличте застосунок (наприклад, тим самим запитом про подарунок). Ви маєте побачити оновлений заголовок усередині віджета — це добрий знак, що звʼязка Next.js → тунель → ChatGPT працює.

Якщо ж ви змінюєте MCP‑частину — додаєте новий інструмент, змінюєте схему inputSchema, змінюєте назви tools, — тоді в гру вступає кешування ChatGPT. Під час першого підʼєднання в Dev Mode ChatGPT запамʼятовує список інструментів і не завжди підхоплює зміни автоматично. Тоді потрібно повернутися в розділ Apps & Connectors, вибрати ваш GiftGenius (dev) і натиснути щось на кшталт Refresh schema / Refresh. Після цього ChatGPT заново опитає ваш /mcp і оновить список tools.

Здавалося б, дрібниця, але без цього легко «зловити» ситуацію: ви вже виправили код інструмента, а ChatGPT вперто не бачить нові параметри.

8. Міні‑практика: перший повноцінний сценарій GiftGenius у Dev Mode

Давайте зберемо все в один практичний сценарій. Тут я вважатиму, що у вас є будь‑який робочий HTTPS‑URL для /mcp (через тунель або деплой). Якщо його поки що немає — просто прочитайте кроки: у наступній лекції ви повторите їх із реальним URL.

1. Переконайтеся, що npm run dev запущено й у журналах немає помилок. Особливо приємно побачити щось на кшталт «MCP server running at http://localhost:3000/mcp» у терміналі, якщо шаблон це логує.
2. Відкрийте ChatGPT і увімкніть Developer Mode через Settings → Apps & Connectors → Advanced settings.
3. Створіть новий конектор GiftGenius (dev) із коротким описом («Помічник у виборі подарунків») і URL на кшталт https://<ваш-домен>/mcp.
4. Переконайтеся, що ChatGPT зміг підʼєднатися: у списку застосунків ви побачите новий елемент. Якщо підʼєднатися не вдалося — дивіться журнали dev‑сервера й тунелю; це корисно саме по собі.
5. Відкрийте новий чат, натисніть «+», виберіть ваш GiftGenius (dev), а потім сформулюйте запит: «Добери подарунок для розробника, який любить космос і каву, бюджет 40 $».
6. Подивіться, що робить ваш поточний шаблон: у базовому вигляді він може показувати просту картку/віджет. Це поки що не «розумний підбір подарунків», але сам факт, що щось зʼявилося в чаті з вашого коду, — уже величезний крок.

Як додаткову вправу можна завести окремий тестовий інструмент у MCP‑сервері суто для перевірки Dev Mode. Приклад (не обовʼязково реалізовувати прямо зараз — просто подивіться на ідею):

// всередині app/mcp/route.ts, поруч з іншими tools
server.registerTool(
  "ping_dev",
  {
    title: "Ping GiftGenius dev",
    description: "Перевіряє, що Dev‑сервер живий.",
    inputSchema: { type: "object", properties: {} },
  },
  async () => ({
    content: [{ type: "text", text: "GiftGenius dev is alive ✅" }],
    structuredContent: {},
  })
);

Детально розбирати server.registerTool ми будемо в модулі про інструменти. Поки просто запамʼятайте: через MCP ви описуєте «що вміє ваш App», а Dev Mode — це спосіб дати ChatGPT URL, за яким ці можливості оголошено.

9. Де дивитися помилки і як відрізняти «зламалося в мене» від «зламалося у ChatGPT»

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

Якщо помилка зʼявляється під час створення конектора. Якщо під час створення конектора ChatGPT пише, що не може підʼєднати App, насамперед дивіться журнали вашого dev‑сервера й тунелю. Якщо в терміналі, де запущено npm run dev, узагалі немає вхідних запитів на /mcp, проблема на шляху ChatGPT → тунель. Якщо запити є, але сервер відповідає 500 або падає з помилкою в консолі, проблема у вашому MCP‑коді.

Якщо конектор уже створено, але ламається в чаті. Коли конектор уже створено, а в чаті періодично зʼявляється плашка «App unavailable / App broken», це майже завжди означає, що:

• dev‑сервер упав (Next.js перестав слухати порт 3000);
• тунель вимкнено або змінився URL;
• MCP‑ендпойнт повертає помилку, має таймаут або відповідає надто довго.

Окремо про UI/віджет. Якщо проблеми в UI (віджет не рендериться, порожній екран, дивні стилі), зазирайте також у DevTools браузера. Віджет завантажується в iframe, і в консолі цього iframe видно помилки JavaScript/React — так само, як у звичайному вебзастосунку.

З досвідом ви почнете розрізняти «пахне тунелем» і «пахне Next.js» буквально за виглядом помилки. Поки ж достатньо памʼятати: у вас є три потенційні точки відмови — ваш код, тунель і ChatGPT. Імовірність того, що проблема саме в ChatGPT, зазвичай найменша.

Insight

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

10. Типові помилки під час роботи з Dev Mode

Помилка №1: забули ввімкнути Developer Mode й пів години шукаєте кнопку Create.
Іноді розробники одразу заходять у ChatGPT, відкривають Apps & Connectors і не бачать там нічого цікавого. Без увімкненого Developer Mode кнопки створення конектора може просто не бути. Тож завжди починайте з перевірки, що Dev Mode увімкнено в Advanced settings — особливо на нових облікових записах або в іншому браузері.

Помилка №2: вставили URL без /mcp або взагалі не MCP‑ендпойнт.
Класика: у поле URL вставляють https://myapp-dev.ngrok.app без шляху /mcp або взагалі URL лендингу / іншого сервісу. ChatGPT ввічливо стукає туди за MCP‑протоколом, не знаходить очікуваного інтерфейсу й відповідає помилкою підʼєднання. Next.js‑стартер прямо каже: підʼєднуватися потрібно до URL, який веде на /mcp, — і саме його слід указувати в Dev Mode.

Помилка №3: спроба використовувати http://localhost:3000/mcp напряму.
Інтуїтивно хочеться вставити в поле URL той самий http://localhost:3000/mcp, який ви бачите в журналах dev‑сервера. Але ChatGPT запущено в хмарі, а не у вас на ноутбуці, і доступу до вашого localhost він не має. Окрім того, ChatGPT вимагає HTTPS. Тому без тунелю або віддаленого деплою нічого не вийде. Це не баг ChatGPT, а нормальна мережева ізоляція.

Помилка №4: забули про Refresh після зміни MCP‑схеми.
Після успішного рукостискання ChatGPT кешує список інструментів і метаданих, щоб не звертатися до сервера щоразу. Якщо ви додали новий tool або змінили його inputSchema, а ChatGPT продовжує поводитися по‑старому, майже напевно потрібен Refresh конектора в розділі Apps & Connectors. Без цього модель просто не «знає», що інструменти змінилися.

Помилка №5: намагатися налагоджувати Dev Mode, коли dev‑сервер не запущено.
Звучить очевидно, але трапляється часто: студент налаштовує Dev Mode і тунель, хоча в нього в терміналі вже давно не крутиться npm run dev або проєкт не збирається через синтаксичну помилку. Поки локальний dev‑сервер «лежить», безглуздо ганятися за помилками Dev Mode. Завжди спочатку добийтеся, щоб http://localhost:3000 відкривався у вашому браузері, і тільки потім підʼєднуйте ChatGPT.

Помилка №6: очікувати, що Dev Mode — це «інша модель, яка все розуміє».
Іноді здається, що раз ми ввімкнули Dev Mode, то тепер модель «знає» про наш застосунок усе на світі. Насправді Dev Mode не змінює саму модель — він лише дає їй доступ до вашого MCP‑сервера та інструментів. Якщо інструменти описані туманно, опис App нечіткий або логіка сервера дивна, модель плутатиметься так само, як будь‑який розробник, що відкрив погано задокументований API. Гарні метадані та інструменти — тема наступних модулів, але памʼятати про це варто вже зараз.

Помилка №7: використовувати Dev Mode як продакшн.
Є спокуса: «Ну, у нас і так усе добре працює в Dev Mode — давайте дамо посилання користувачам, щоб вони підʼєднали App за цим URL». Проблема в тому, що Dev Mode не призначений для масового використання: тунелі нестабільні, конфігурації можуть ламатися, а сам ChatGPT може змінювати поведінку Dev Mode без зворотної сумісності. Для реальних користувачів є Store і продакшн‑розгортання. Dev Mode — це виключно ваша лабораторія.