Пошаговое руководство по созданию первого ChatGPT-приложения
👋 Привет! Я Ленни. Каждую неделю я разбираю вопросы читателей о разработке продукта, росте и карьере. Подробнее: Lennybot | Подкаст Ленни | How I AI | Lenny's Reads | Лучшие курсы по AI и PM | Лучший курс по коммуникациям
Подписчики получают 19 премиальных продуктов бесплатно на год: Lovable, Replit, Gamma, n8n, Bolt, Devin, Wispr Flow, Descript, Linear, PostHog, Superhuman, Granola, Warp, Perplexity, Raycast, Magic Patterns, Mobbin, ChatPRD и Stripe Atlas (условия). Подписаться сейчас.
Мой давний соавтор — и автор моих 2-го и 12-го самых популярных постов за всё время — снова здесь, и это настоящий удар. Если ты ищешь преимущество в росте своего продукта, этот пост для тебя. Не буду затягивать вступление и сразу перейду к делу.
Больше материалов от Колина — на его странице в LinkedIn, а также на его отличном курсе (получи скидку 15% по этой ссылке!). Также присоединяйся к бесплатному Lightning Lesson 30 января, чтобы вживую увидеть процесс создания первого ChatGPT-приложения.
P.S. Ты можешь послушать этот пост в формате подкаста: Spotify / Apple / YouTube.
Ещё несколько месяцев назад, если бы ты попросил ChatGPT помочь с бронированием рейса в Париж, ты получил бы полезный список рекомендаций: разбивку по авиакомпаниям, диапазоны цен, возможно, советы по срокам. А потом ты закрывал ChatGPT, открывал сайт для поиска билетов и начинал всё заново.
Теперь можно сказать: «Помоги найти хороший рейс из Торонто в Париж» — и прямо внутри разговора появится интерактивный виджет. Ты просматриваешь варианты, сравниваешь цены и бронируешь, не покидая чат.
Стратегия проста: вместо того чтобы ChatGPT отвечал текстом и отправлял пользователя в другое место, он теперь будет показывать интерактивные виджеты сторонних приложений прямо в разговоре, позволяя пользователям совершать транзакции внутри ChatGPT (а со временем OpenAI, вероятно, будет брать небольшой процент от транзакции).
Запущенные в октябре на Dev Day, партнёрами ChatGPT-приложений уже стали крупные компании: Adobe, DoorDash, Canva, Figma, Booking.com, Coursera, Expedia, Spotify и Zillow. Одни из самых больших компаний в мире делают ставку на то, что чат станет основным интерфейсом для их продуктов.
Приложения ChatGPT представляют редкую возможность для дистрибуции — такую, которая случается раз или два в десятилетие. Последние сопоставимые моменты — App Store в 2008 году, расцвет SEO в начале 2000-х и, пожалуй, экосистема приложений Shopify. Когда открывается новый канал дистрибуции в масштабе, компании, которые приходят первыми, формируют привычки, которые потом сложно сломать. Это создаёт возможности на обоих полюсах. Для крупного бизнеса ChatGPT-приложения — это новый канал дистрибуции в дополнение к существующим. Для соло-предпринимателей — шанс создать микроприложение и получить охват без маркетингового бюджета. Порог входа невысок (несколько недель на создание простого приложения), зато охват огромен.
В этом посте я разберу, как пользователи находят и используют твои приложения, как они работают «под капотом», и как создать своё первое ChatGPT-приложение. Давай строить.
ChatGPT-приложения вводят паттерны взаимодействия, которые отличаются от традиционных магазинов приложений. В большинстве магазинов нужно найти приложение, установить его — и только потом использовать. ChatGPT тоже поддерживает этот паттерн, но более интересен другой — контекстный показ. В ближайшем будущем (и это то, чего большинство пока не осознаёт) ChatGPT будет автоматически предлагать приложения на основе разговора пользователя. Спросишь о путешествии — появится Expedia. Упомянешь дизайн — всплывёт Canva. Напишешь о доставке продуктов — появится корзина Instacart. Пользователю не нужно знать, какие приложения доступны: модель сама сопоставляет его намерение с подходящими инструментами. Это потенциально новый и огромный канал роста для продуктов.
Приложения ChatGPT могут отображаться в трёх форматах, и как разработчику тебе важно понимать, какой формат соответствует тому опыту взаимодействия, который ты хочешь создать для пользователя. Подробнее об этом чуть позже, но каждый тип использует Model Context Protocol (MCP) для доставки приложения в ChatGPT.
Встроенный режим (Inline mode) встраивает карточки и списки прямо в поток разговора. Это режим по умолчанию; он хорошо подходит для списков товаров, результатов поиска или любого контента, который органично вписывается рядом с ответами ChatGPT. Вот быстрый пример с отелями от Expedia:
Полноэкранный режим (Fullscreen mode) занимает весь экран. Он лучше всего подходит для карт, дашбордов или сложных рабочих процессов, которым нужно больше пространства. Когда пользователь изучает маршруты на карте AllTrails или редактирует дизайн в Canva, полный экран даёт ему место для работы.
Режим «картинка в картинке» (Picture-in-picture mode) держит небольшое плавающее окно видимым, пока пользователь общается в чате. Это идеально для музыкальных плееров, таймеров или всего, что пользователь может захотеть оставить работающим в фоне, пока занимается чем-то другим. Здесь Coursera воспроизводит видео, пока я продолжаю общаться.
Есть одно важное ограничение: один виджет на сообщение. Если пользователь пишет «Забронируй ресторан и вызови Uber», ChatGPT может показать только одно приложение за раз. Это означает, что пользователи выполняют многошаговые задачи последовательно, а не параллельно.
Перед тем как начать создавать ChatGPT-приложение, важно разобраться в его архитектуре.
Каждое 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(), чтобы сохранить бронирование. Разговор продолжается — виджет и ИИ работают вместе.
Это создаёт цикл: пользователь говорит что-то ChatGPT → ChatGPT вызывает инструмент → виджет рендерится → пользователь взаимодействует с виджетом → ChatGPT вызывает другой инструмент. Ключевое понимание: ChatGPT оркестрирует всё это. Он решает, когда вызывать инструменты, какие параметры передавать и как реагировать на действия пользователя. Твоё приложение лишь предоставляет возможности и рендерит интерфейс.
MCP — это инфраструктура, соединяющая всё это воедино. MCP очень похож на API (я разбирал их здесь), но переработан для ИИ-агентов. Он предоставляет универсальный способ подключения приложений к ИИ-ассистентам. Anthropic создала MCP в ноябре 2024 года, а OpenAI внедрила его в ChatGPT и свои инструменты для разработчиков в марте 2025-го. В ноябре обе компании объявили о сотрудничестве над MCP Apps — стандартизированным способом добавления интерактивных интерфейсов в протокол.
Если ты слышал об ИИ-агентах, это может звучать знакомо. ChatGPT-приложения и ИИ-агенты разделяют один базовый паттерн: модель ИИ, которая может вызывать внешние инструменты для выполнения задач. Разница в том, кто управляет процессом. Когда ты создаёшь собственного ИИ-агента, ты контролируешь всё — модель, промпты, логику оркестрации, обработку ошибок. Ты решаешь, когда вызываются инструменты и как обрабатываются результаты.
По мере чтения ты, возможно, уже подумал: инструменты — это новая форма SEO (или AEO?). Основываясь на имени и описании твоего инструмента, ChatGPT может предлагать твоё приложение пользователям для решения их задач — например, создания презентации или финансовой модели. Точные описания инструментов, однозначно идентифицирующие твоё приложение, помогут пользователям ChatGPT находить и использовать его в нужных контекстах.
Теперь, когда ты понимаешь базовую структуру, следуя этому руководству, ты можешь создать приложение за 30 минут или даже быстрее.
Агент Replit не является экспертом в ChatGPT-приложениях, поэтому самый простой способ начать в 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 - The project uses Vite to build React components into standalone widget bundles. Run pnpm run build with BASE_URL set to the full Replit domain URL. Each widget (in src/*/index.tsx) gets bundled into HTML/JS/CSS files in the /assets folder. The absolute URLs are critical because ChatGPT loads widgets in a sandbox that needs to fetch assets from my Replit server.Static asset server on port 5000 - Serve the /assets folder with CORS enabled. Map to external port 80.MCP server on port 8000 - Bind to 0.0.0.0:8000 for external access. Forward as port 8000.Allow all hosts - Both servers must accept connections from any origin.Give me the MCP endpoint URL for 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 сначала нужно включить Режим разработчика в своём аккаунте ChatGPT. После этого перейди в Settings -> Apps & Connectors -> New App. Вставь свой URL в это модальное окно с названием (например, Replit App).
После подключения ты должен иметь возможность вызвать приложение по имени:
Большинство инструментов для «вайб-кодинга» не предназначены для работы с MCP и ChatGPT-приложениями. Они отлично создают веб-приложения, но не умеют создавать MCP-сервер, предпросматривать инструменты или помогать подключиться к ChatGPT.
Именно поэтому я решил создать собственный инструмент — Chippy. Chippy — это ИИ-агент, специализирующийся на прототипировании ChatGPT-приложений. Ты можешь тестировать приложение во встроенном чате, подключаться к ChatGPT без беспокойства о деплое и даже генерировать спецификацию прямо из прототипа. А своё первое приложение можно запустить совершенно бесплатно.
В этом примере я создам приложение, которое позволяет искать Maven Lightning Lessons — бесплатные 30-минутные доклады от экспертов по ИИ, продукту и дизайну.
Основные функции:
Для начала я перехожу на Chippy.build и прошу Chippy помочь спланировать проект. Chippy предлагает единственный инструмент — find_lightning_lesson, который принимает тему в качестве входных данных. Сначала он показывает встроенную карточку с возможностью переключиться в режим «картинка в картинке».
Отсюда нам нужно лишь попросить Chippy приступить к реализации. Затем мы получаем предпросмотр приложения и можем протестировать, как оно будет работать в среде чата.
Теперь у нас есть функциональное ChatGPT-приложение, готовое к тестированию. Прежде чем продолжить, возьми ссылку на своё приложение с помощью кнопки «Test» в правом верхнем углу.
Для подключения к ChatGPT сначала нужно включить Режим разработчика в своём аккаунте ChatGPT. После этого перейди в Settings -> Apps & Connectors -> New App.
Укажи название, URL MCP-сервера и установи аутентификацию на «No auth». После нажатия «Create» ты успешно создал своё первое ChatGPT-приложение!
Самый надёжный способ протестировать приложение — упомянуть его по имени или тегнуть в своём чате. Ниже видно, что ChatGPT автоматически тегает твоё приложение, когда ты упоминаешь его по имени.
Когда у тебя есть работающее приложение, можно продолжать итерировать и постепенно создавать золотой набор промптов для его активации. Возможно, ты захочешь добавить аутентификацию, получить реальные данные из своего продукта или создать приложения, использующие несколько инструментов вместе.
ChatGPT-приложения не обязаны быть такими простыми, как показ видео или отображение карточки. Ты можешь встраивать в ChatGPT полноценные сложные приложения. Вот быстрый пример игры-dungeon explorer, которую я создал с помощью Chippy. Видно, что ChatGPT знает о моём текущем уровне, информацию об игре и может давать советы по улучшению счёта.
Механика ChatGPT-приложений параллельна SEO и обладает не меньшим потенциалом изменить то, как работает экосистема потребительских технологий. Пользователи приходят с намерением. Они не листают магазин приложений в надежде, что что-то привлечёт их взгляд. Они пишут: «Мне нужно забронировать рейс» или «Найди мне квартиру». Приложения появляются контекстно — именно в тот момент, когда пользователь готов действовать. Это делает каждый показ ценнее, чем традиционное обнаружение в магазине приложений. И, как с SEO, первопроходцы накапливают преимущество: чем больше пользователей связывают «поиск квартиры в ChatGPT» с Zillow, тем сложнее конкурентам сломать эту привычку.
С ChatGPT Apps SDK OpenAI берёт на себя оркестрацию. Ты просто предоставляешь инструменты и интерфейс. Создание собственного агента даёт тебе больше контроля, но требует больше инфраструктуры. ChatGPT-приложения дают мгновенный доступ к 800 миллионам пользователей, но меньше контроля над тем, как вызываются твои инструменты. Для большинства сценариев использования, особенно потребительских, преимущество дистрибуции побеждает. Но если тебе нужна кастомная оркестрация, дообученные модели или сложные многошаговые рабочие процессы — возможно, тебе всё же понадобится собственная агентная инфраструктура.
Если ты в продуктовой команде, начни исследовать, как твой продукт выглядит в виде ChatGPT-приложения. Какие действия пользователи могут совершать через разговор? Какие части твоего опыта подходят для виджета? Ограничение «один виджет на ход» заставляет думать об атомарных, завершаемых действиях.
Если ты в команде роста, оцени ChatGPT как канал дистрибуции. Где намерение твоего пользователя естественным образом проявляется в разговоре? Какие запросы должны активировать твоё приложение? Победители здесь — компании, которые наиболее эффективно сопоставят намерения пользователей со своим продуктом.
Если ты в технической команде, изучи документацию Apps SDK и MCP. Порог для разработки ниже, чем ты думаешь. Если ты создавал веб-приложение, ты можешь создать ChatGPT-приложение. Архитектура знакома: бэкенд, который предоставляет инструменты, и фронтенд, который рендерит интерфейс.
Ты также можешь присоединиться к этому Lightning Lesson 30 января, чтобы вживую посмотреть на создание ChatGPT-приложения с нуля.
Если хочешь понять в точности, что происходит под капотом, вот более глубокая архитектура.
MCP (Model Context Protocol) определяет, как ИИ-ассистенты взаимодействуют с внешними инструментами. Твоё приложение запускает MCP-сервер, который предоставляет три вещи: инструменты (функции, которые может вызвать ИИ), ресурсы (данные, которые ИИ может читать) и промпты (шаблоны, которые ИИ может использовать). Когда ChatGPT подключается к твоему приложению, он получает манифест с описанием этих возможностей.
Вот как выглядит определение инструмента в реальности:
import { z } from "zod";const searchRestaurantsInputSchema = {location: z.string().min(1),cuisine: z.string().optional(),price_range: z.number().min(1).max(4).optional(),};server.registerTool("search_restaurants",{title: "Search restaurants",description: "Search for restaurants by location and cuisine type",inputSchema: searchRestaurantsInputSchema,},async (args) => {const { location, cuisine, price_range } = args;const results = await db.query("SELECT * FROM restaurants WHERE ...");return {content: [{ type: "text", text: \Found ${results.length} restaurants in ${location}\}],structuredContent: { restaurants: results },};});
Описание важнее, чем кажется. ChatGPT использует его, чтобы решить, когда вызывать твой инструмент. Расплывчатое описание означает, что ChatGPT может не вызвать твой инструмент там, где должен, или вызвать там, где не нужно.
Виджеты работают в изолированных iframe с жёсткими ограничениями безопасности. Они не могут получить доступ к родительскому DOM, не могут выполнять произвольные скрипты и взаимодействуют только через структурированный API window.openai. Это похоже на то, как работают расширения браузера, но с более строгими ограничениями.
Когда твой инструмент возвращает результат, ты можешь включить ссылку на UI-шаблон, которая сообщает ChatGPT, какой виджет рендерить:
const getRestaurantDetailsInputSchema = {id: z.string().min(1),};server.registerTool("get_restaurant_details",{title: "Get restaurant details",description: "Retrieves detailed information about a specific restaurant.",inputSchema: getRestaurantDetailsInputSchema,_meta: {"openai/outputTemplate": "ui://widget/restaurant-details.html","openai/toolInvocation/invoking": "Loading restaurant details","openai/toolInvocation/invoked": "Loaded restaurant details",},},async (args) => {const id = args?.id;if (!id) {return {content: [{ type: "text", text: "Missing restaurant id." }],structuredContent: { restaurant: null },};}const restaurant = await db.findById(id);return {content: [{ type: "text", text: \Details for ${restaurant.name}\}],structuredContent: { restaurant },};});
При наличии этой ссылки ChatGPT после вызова инструмента получает ресурс UI-виджета и затем передаёт твои структурированные данные в UI-компонент. Именно так можно отображать результаты поиска внутри карточки.
Когда пользователь взаимодействует с виджетом (нажимает кнопку, выбирает элемент), виджет также может напрямую вызывать инструменты через window.openai.callTool(). Это означает, что виджет может вызывать бэкенд-инструменты и обновлять интерфейс без участия модели.
Вот реальная последовательность действий, когда пользователь пишет «Найди итальянские рестораны в Бруклине»:
Когда пользователь взаимодействует с виджетом — например, нажимает на ресторан:
Ключевое отличие от традиционных интеграций с чат-ботами: виджеты могут вызывать инструменты напрямую, не проходя через модель. Это делает взаимодействия быстрее и даёт тебе больше контроля над пользовательским опытом.
MCP Apps поддерживает OAuth 2.0 для аутентификации пользователей. Когда пользователь впервые взаимодействует с твоим приложением, ChatGPT может запустить OAuth-поток: открывает страницу авторизации, позволяет пользователю войти и возвращает токены на твой MCP-сервер. После этого твой сервер включает токен доступа пользователя в каждый вызов инструмента, чтобы бэкенд знал, кто делает запрос.
Для создания ChatGPT-приложения тебе понадобится:
MCP SDK берёт на себя детали протокола. Ты определяешь инструменты как функции, а SDK управляет JSON-RPC-слоем, аутентификацией и коммуникацией с ChatGPT.
Типичное время разработки простого приложения (поиск плюс отображение результатов) составляет один-два дня при знании стека. Более сложные приложения с несколькими инструментами, управлением состоянием и отточенным интерфейсом занимают несколько недель.
Спасибо, Колин! Больше материалов от Колина — на его странице в LinkedIn, а также на его курсе (получи скидку 15% по этой ссылке!). Присоединяйся к бесплатному Lightning Lesson 30 января, чтобы вживую посмотреть на создание первого ChatGPT-приложения.
Продуктивной и наполненной недели тебе 🙏
Если этот newsletter тебе полезен, поделись им с другом и подпишись, если ещё не сделал этого. Доступны групповые скидки, подарочные подписки и бонусы за рефералы.
С уважением,
Ленни 👋