newsmode
search
Меню
arrow_back Назад

ChatGPT apps are about to be the next big distribution channel: Here’s how to build one

auto_awesomeКраткое саммари

Колин Мэтьюз рассказывает, как создавать приложения для ChatGPT — новый канал дистрибуции, запущенный OpenAI в октябре на Dev Day с такими партнёрами, как Adobe, DoorDash, Canva, Figma, Booking.com, Coursera, Expedia, Spotify и Zillow. Вместо текстового ответа ChatGPT теперь показывает интерактивные виджеты сторонних приложений прямо в чате, что автор сравнивает с появлением App Store в 2008 году. Приложения работают через Model Context Protocol (MCP) от Anthropic (ноябрь 2024) и поддерживаются OpenAI с марта 2025; они отображаются в трёх форматах — inline, fullscreen и picture-in-picture — но только по одному виджету на сообщение. Архитектура состоит из трёх частей: разговор в ChatGPT, инструменты (функции на backend-сервере) и виджет на React в безопасной песочнице. Автор показывает два способа сборки первого приложения за 30 минут — через Replit с импортом официальных примеров OpenAI и через собственный инструмент Chippy, специально созданный для прототипирования ChatGPT apps.

ChatGPT apps вот-вот станут следующим крупным каналом дистрибуции: вот как создать своё

Пошаговое руководство, как включиться в тему и собрать своё первое ChatGPT-приложение

👋 Привет, я Lenny. Каждую неделю я разбираю вопросы читателей о создании продуктов, росте и карьере. Больше материалов: Lennybot | Lenny's Podcast | How I AI | Любимые курсы по AI и PM | Любимый курс по коммуникации


Мой постоянный соавтор — автор моего 2-го и 12-го самых популярных постов за всё время — снова с нами, и это огонь. Если вы ищете альфу в росте своего продукта, этот пост для вас. Не буду затягивать вступление и сразу передаю слово.

Больше от Colin — на LinkedIn, его крутой курс (скидка 15% по этой ссылке!), и присоединяйтесь к бесплатному Lightning Lesson 30 января — там в живом формате покажут, как собрать своё первое ChatGPT-приложение.


Несколько месяцев назад, если бы вы попросили ChatGPT помочь забронировать рейс в Париж, вы получили бы полезный список рекомендаций: разбор авиакомпаний, ценовые диапазоны, возможно, советы по выбору времени. Затем вы бы вышли из ChatGPT, открыли тревел-сайт и начали поиск с нуля.

Теперь вы можете сказать: «Помоги найти хороший рейс из Торонто в Париж», — и прямо внутри диалога появится интерактивный виджет. Вы просматриваете варианты рейсов, сравниваете цены и бронируете — всё это, не выходя из чата.

Стратегия проста: вместо того чтобы ChatGPT отвечал текстом и отправлял пользователя куда-то ещё, теперь он показывает интерактивные виджеты сторонних приложений прямо в диалоге, позволяя пользователям совершать транзакции внутри ChatGPT (а со временем OpenAI, вероятно, будет брать небольшой процент с транзакции).

Запущенные в октябре на Dev Day, ChatGPT apps уже имеют среди партнёров такие крупные компании, как Adobe, DoorDash, Canva, Figma, Booking.com, Coursera, Expedia, Spotify и Zillow. Одни из крупнейших компаний мира делают ставку на то, что чат станет основным интерфейсом для их продуктов.

ChatGPT apps — это редкая возможность для дистрибуции, такая, которая случается раз или два за десятилетие. Последние сравнимые моменты — App Store в 2008 году, рост SEO в начале 2000-х и, возможно, экосистема приложений Shopify. Когда открывается новый канал дистрибуции в больших масштабах, компании, которые пришли первыми, захватывают привычки, которые потом сложно сломать. Это создаёт возможности на обоих концах спектра. Для крупного бизнеса ChatGPT apps — новый канал дистрибуции наряду с существующими. Для соло-предпринимателей это шанс собирать микроприложения и получать дистрибуцию без маркетингового бюджета. Порог входа низкий (несколько недель на простое приложение), но охват огромный.

В этом посте я разберу, как пользователи находят и используют ваши приложения, как они устроены «под капотом» и как создать своё первое ChatGPT-приложение. Поехали.

Как пользователи находят и используют ChatGPT apps

ChatGPT apps вводят паттерны взаимодействия, отличающиеся от традиционных магазинов приложений. В большинстве app store вам нужно найти приложение, установить его, и только потом его можно использовать. ChatGPT поддерживает этот паттерн, но более интересный паттерн — контекстное появление. В ближайшем будущем (и это то, что большинство людей не до конца понимают) ChatGPT будет автоматически предлагать приложения на основе разговора пользователя. Спросите о планах на путешествие — появится Expedia. Упомяните, что вам нужен дизайн — всплывёт Canva. Спросите о заказе продуктов — покажется корзина Instacart. Пользователю не нужно знать, какие приложения доступны; модель сопоставляет его намерение с релевантными инструментами. Потенциально это новый и огромный канал роста для продуктов.

ChatGPT apps могут отображаться в трёх форматах, и как разработчику вам важно подумать, какой формат соответствует тому опыту, который вы хотите создать для пользователя. Подробнее об этом чуть позже, но каждый тип использует Model Context Protocol (MCP) для доставки вашего приложения в ChatGPT.

Inline-режим встраивает карточки и списки прямо в поток диалога. Это формат по умолчанию, и он хорошо работает для списков товаров, результатов поиска или любого контента, который естественно вписывается в ответы ChatGPT. Вот быстрый пример со списком отелей от Expedia:

Fullscreen-режим занимает весь экран. Он лучше всего подходит для карт, дашбордов или сложных рабочих процессов, которым нужно больше пространства. Когда пользователь просматривает AllTrails на карте или редактирует дизайн в Canva, полный экран даёт ему пространство для работы.

Picture-in-picture-режим оставляет небольшое плавающее окно видимым, пока пользователь продолжает чатиться. Это идеально для музыкальных плееров, таймеров или всего, что пользователь хочет держать в фоне, занимаясь чем-то ещё. Здесь Coursera проигрывает видео, пока я продолжаю общаться.

Есть одно важное ограничение: один виджет на одно сообщение. Если пользователь скажет: «Забронируй ресторан и закажи Uber», — ChatGPT сможет показать только одно приложение за раз. Это значит, что пользователи проходят многошаговые задачи последовательно, а не параллельно.

Как это работает «под капотом»

Когда вы готовитесь собирать ChatGPT-приложение, важно сначала разобраться в архитектуре.

У каждого ChatGPT-приложения три части:

Диалог внутри ChatGPT: модель интерпретирует запрос пользователя и решает, будет ли полезно приложение.«Инструменты» приложения: backend-сервер и API сообщают ChatGPT, что может делать приложение.Виджет для пользователя: появляется в чате, собран на веб-технологиях (обычно React) и работает в безопасной песочнице внутри ChatGPT.

Давайте копнём пункт №2 — инструменты приложения, потому что это ядро всей механики. Инструмент — это просто функция, которую может вызвать ChatGPT. Когда вы строите приложение, вы определяете инструменты, например search_restaurants, book_ticket или create_playlist. У каждого инструмента есть имя и описание, которые помогают ChatGPT понять, когда его использовать и какие параметры он принимает. Когда пользователь говорит что-то релевантное, ChatGPT читает эти описания и решает, какой инструмент вызвать.

Вот как это происходит: пользователь говорит: «Найди мне итальянские рестораны в Бруклине». ChatGPT смотрит на доступные инструменты, видит один под названием search_restaurants с описанием вроде «Поиск ресторанов по локации и кухне» и вызывает его с {location: «Brooklyn», cuisine: «Italian»}. Ваш сервер выполняет поиск, возвращает результаты и может опционально включить виджет для их отображения. ChatGPT рендерит виджет в чате.

Пользователь взаимодействует с виджетом — скажем, кликает по ресторану, чтобы его забронировать. Этот клик может запустить следующий вызов инструмента. Ваш виджет отправляет сообщение обратно в ChatGPT: «Пользователь выбрал restaurant_id: 1241», — и ChatGPT может вызвать другой инструмент, например book_reservation(), чтобы сохранить бронирование. Разговор продолжается — виджет и AI работают вместе.

Так получается цикл: пользователь говорит что-то ChatGPT → ChatGPT вызывает инструмент → виджет рендерится → пользователь взаимодействует с виджетом → ChatGPT вызывает следующий инструмент. Ключевая мысль в том, что ChatGPT оркестрирует всё это. Он решает, когда вызывать инструменты, какие параметры передавать и как реагировать на действия пользователя. Ваше приложение лишь предоставляет возможности и рендерит UI.

MCP — это инфраструктура, связывающая всё это. MCP очень похож на API (я рассказывал о них здесь), но переосмысленный под AI-агентов. Это универсальный способ подключать приложения к AI-ассистентам. Anthropic создали MCP в ноябре 2024 года, а OpenAI внедрили его в ChatGPT и инструменты для разработчиков в марте 2025 года. В ноябре обе компании анонсировали, что работают вместе над MCP Apps — стандартизированным способом добавлять интерактивные UI в протокол.

Если вы слышали про AI-агентов, это может звучать знакомо. ChatGPT apps и AI-агенты разделяют один и тот же базовый паттерн: AI-модель, которая может вызывать внешние инструменты для выполнения задач. Разница — в том, кто рулит процессом. Когда вы строите своего AI-агента, вы контролируете всё: модель, промпты, логику оркестрации, обработку ошибок. Вы решаете, когда вызывать инструменты и как обрабатывать результаты.

Как вы, возможно, уже подумали, читая это, инструменты — это также новая форма SEO (или это уже AEO?). На основе имени и описания вашего инструмента ChatGPT может предложить ваше приложение пользователям для решения их задач — например, для создания слайдов или построения финансовой модели. Точные описания инструментов, уникально идентифицирующие ваше приложение, помогут пользователям ChatGPT находить и использовать его в нужных контекстах.

Сборка вашего первого ChatGPT-приложения

Теперь, когда вы понимаете базовую структуру, можно собрать приложение за 30 минут или меньше, следуя этому руководству.

Вариант 1: Replit

Агент Replit — не эксперт по ChatGPT apps, поэтому самый простой способ начать в Replit — импортировать готовое приложение. Я бы порекомендовал официальные примеры от OpenAI. Чтобы сэкономить время, я создал Replit-проект, который можно продублировать со всеми уже выполненными шагами — здесь. Очень рекомендую использовать мой проект, он сэкономит вам как минимум 30 минут.

Если предпочитаете начать с нуля — заходите в Replit, выбирайте «Import from GitHub» и вставляйте URL: https://github.com/openai/openai-apps-sdk-examples

Агент Replit поработает над настройкой проекта — это займёт 5–10 минут.

Когда проект запустится, отправьте такой промпт:

I want to connect ChatGPT to my MCP server. Please set this up:Bundle the React UI widgets — проект использует Vite для сборки React-компонентов в отдельные бандлы виджетов. Запусти pnpm run build с BASE_URL, установленным в полный URL домена Replit. Каждый виджет (в src/*/index.tsx) собирается в HTML/JS/CSS-файлы в папке /assets. Абсолютные URL критически важны, потому что ChatGPT загружает виджеты в песочнице, которой нужно получать ассеты с моего Replit-сервера.Сервер статических ассетов на порту 5000 — раздаёт папку /assets с включённым CORS. Маппится на внешний порт 80.MCP-сервер на порту 8000 — привязан к 0.0.0.0:8000 для внешнего доступа. Пробрасывается как порт 8000.Разрешить все хосты — оба сервера должны принимать соединения с любого origin.Дай мне MCP endpoint URL для ChatGPT Settings > Connectors.

Возможно, вы увидите экран, похожий на ошибку, как на скриншоте ниже. Replit не предназначен для предпросмотра MCP-инструментов, поэтому UI-компоненты вы увидите только после подключения к ChatGPT. Дайте Replit продолжить работу, пока он корректно не настроит MCP-сервер.

В какой-то момент агент Replit должен сообщить, что всё готово. Частые проблемы — неправильная конфигурация портов и невозможность раздавать статические ассеты, так что следите за этим. Когда всё готово (или если вы скопировали мой проект), вы должны увидеть экран вроде такого:

Теперь мы готовы подключиться к ChatGPT. Спросите агента: «Какой внешний MCP URL у этого приложения?» Это должно выдать URL вроде https://b3c4d0a4-6bdc-4926-b55e-5f94c6246e1e-00-1uvko22a6cltw.spock.replit.dev:8000/mcp.

Чтобы подключиться к ChatGPT, сначала нужно включить Developer Mode в своём аккаунте ChatGPT. Затем перейдите в Settings -> Apps & Connectors -> New App. Вставьте URL в это окно вместе с именем (например, Replit App).

После подключения вы сможете вызывать приложение по имени:

Вариант 2: Chippy

Большинство vibe-coding инструментов не созданы для того, чтобы помочь вам разобраться с MCP и ChatGPT apps. Они отлично справляются со сборкой веб-приложений, но не могут создать MCP-сервер, показать предпросмотр ваших инструментов или помочь подключиться к ChatGPT.

Поэтому я решил собрать такой инструмент сам — Chippy. Chippy — это AI-агент, специализирующийся на прототипировании ChatGPT apps. Вы можете тестировать своё приложение через встроенный чат, подключаться к ChatGPT без головной боли с деплоем и даже сгенерировать спецификацию прямо из вашего прототипа. Запустить своё первое приложение можно совершенно бесплатно.

В этом примере я соберу приложение, которое позволяет пользователям искать Maven Lightning Lessons (бесплатные 30-минутные доклады экспертов по AI, продукту и дизайну).

Основные функции:

Найти релевантный Lightning Lesson по теме.Показать запись урока inline в моём ChatGPT-треде.Перевести отображение в picture-in-picture, чтобы продолжать общаться с ChatGPT, пока играет видео с Maven.

Для начала я зайду на Chippy.build и попрошу Chippy помочь спланировать этот проект. Chippy предлагает один инструмент под названием find_lightning_lesson, который принимает на вход тему. Сначала он покажет inline-карточку с опцией переключения в picture-in-picture.

Дальше нужно просто сказать Chippy: «реализуй». Затем мы получим предпросмотр приложения и сможем протестировать, как оно будет работать в чат-окружении.

Теперь у нас есть функциональное ChatGPT-приложение, готовое к тестам. Прежде чем продолжить, возьмите ссылку на приложение через «Test» в правом верхнем углу.

Чтобы подключиться к ChatGPT, сначала нужно включить Developer Mode в своём аккаунте ChatGPT. Затем перейдите в Settings -> Apps & Connectors -> New App.

Добавьте Name, MCP Server URL и установите Authentication в No auth. После клика на Create вы успешно создали своё первое ChatGPT-приложение!

Самый надёжный способ протестировать приложение — упомянуть его по имени или тегнуть в собственном чате. Ниже видно, что ChatGPT автоматически тегает ваше приложение, если упомянуть его по имени.

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

ChatGPT apps не обязаны быть простыми — вроде показа видео или карточки. Можно встраивать в ChatGPT полноценные сложные приложения. Вот быстрый пример игры-исследования подземелий, которую я собрал с Chippy. Видно, что ChatGPT знает мой текущий уровень, информацию об игре и может давать советы по улучшению результата.

Возможность для роста, которая стоит прямо перед вами

Этот пост — для платных подписчиков