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 реализован как route‑handler 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) — так сразу видно, что это локальная дев‑версия.
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‑endpoint‑е живёт сервер, реализующий базовые способности: перечислить инструменты (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) с кратким описанием («Helper for choosing gifts») и 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‑endpoint выдаёт ошибку, таймаут или очень долго отвечает.

Отдельно про 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‑endpoint.
Классика: в поле 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 — это исключительно ваша лаборатория.