Вайб-кодинг з ChatGPT: canvas, Codex і створення застосунків з ChatGPT

Вайб-кодити з ChatGPT можна трьома способами. Попросіть у чаті невеликий застосунок і перегляньте його в canvas; передайте завдання на справжній кодовій базі Codex, агенту для програмування від OpenAI; або підключіть конструктор застосунків на основі ШІ, як-от Mythex, щоб ChatGPT міг збудувати, захостити й опублікувати повний застосунок з базою даних. Перший варіант найшвидший для односторінкового інструменту, другий підходить розробникам, а третій дає готовий застосунок із входом і даними, не виходячи з ChatGPT.

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

Варіант 1: чат ChatGPT і canvas

Для швидкого інструменту просто попросіть. ChatGPT напише код, а в canvas може показати прості HTML- і React-сторінки, щоб ви могли клацати й просити змін.

Напиши односторінковий калькулятор чайових з полями для суми рахунку, відсотка чайових (кнопки 10, 15, 20 і поле для власного значення) і кількості людей. Показуй чайові та суму на людину, що оновлюється під час введення. Зроби добре виглядаючим на телефоні.

Добре підходить для: калькуляторів, простих ігор, чернеток лендингів і навчання. Попросіть «поясни цей файл, ніби я новачок у програмуванні» — і швидко навчитеся.

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

Копіювати-вставляти вайб-кодинг

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

Варіант 2: Codex для справжньої кодової бази

Codex — це агент OpenAI для програмного забезпечення. Ви ставите завдання звичайною мовою, і він працює з репозиторієм: читає код, вносить зміни в багатьох файлах, запускає команди й тести та дає результат на перевірку. OpenAI пропонує його в ChatGPT, як інструмент командного рядка та як розширення для редактора; які плани його включають і які зараз ліміти, перевірте на сайті OpenAI.

Найкраще йому підходить промпт у форматі завдання:

У цьому репозиторії додай кнопку експорту в CSV на сторінці Замовлень. Вона має експортувати поточно відфільтровані замовлення зі стовпцями дата, клієнт, сума і статус. Додай тест для функції експорту та запусти набір тестів.

Добре підходить для: розробників і технічних засновників з наявним проєктом, які хочуть, щоб агент брав на себе цілі завдання зі списку. Він працює з вашим стеком і вашими домовленостями.

Що ви все ще беретеся самі: де запускається застосунок, база даних, секрети, розгортання й домени. Codex змінює код; він не хост.

Codex і Mythex разом

Codex також може підключатися до серверів MCP, зокрема до сервера Mythex. Додайте https://mcp.mythex.ai/mcp як власний сервер MCP у Codex, підтвердьте доступ у Mythex, і Codex може працювати з проєктом Mythex у його хмарній пісочниці, а перегляд, базу даних і публікацію веде Mythex. Наша публікація про створення застосунків Mythex із Claude, Cursor або Codex проводить через це крок за кроком.

Варіант 3: створити повний застосунок з ChatGPT через Mythex

Якщо хочете залишатися в розмові з ChatGPT і отримати справжній захостений застосунок, підключіть Mythex. Mythex працює всередині ChatGPT як застосунок: ChatGPT спілкується з інструментами Mythex через MCP, відкритий протокол, що дозволяє асистентам використовувати інструменти, розміщені деінде (що таке MCP).

Після підключення ChatGPT може створити проєкт Mythex, написати код у приватній хмарній пісочниці, запустити живий перегляд, додати базу даних і сховище файлів та опублікувати застосунок на публічну URL-адресу. Результати повертаються з посиланням, щоб відкрити проєкт у Mythex і подивитися перегляд.

Як підключити

1. У Mythex відкрийте Account settings і скопіюйте MCP-адресу.
2. У ChatGPT додайте Mythex з налаштувань застосунків або конекторів, використовуючи цю адресу. Меню ChatGPT час від часу змінюються, тож якщо назви відрізняються, скористайтеся довідкою OpenAI щодо додавання застосунку.
3. Відкриється сторінка Mythex: увійдіть і виберіть Allow access. Ключ вставляти не потрібно.
4. Почніть розмову і згадайте Mythex у запиті.

Підключення працює на будь-якому плані Mythex. Інструменти пісочниці — збудувати, переглянути, опублікувати — потребують Mythex Pro ($25 на місяць), а час пісочниці та хостинг надходять з ваших кредитів Mythex. Використання ChatGPT лишається у вашому плані OpenAI.

Перший промпт для спроби

Використай Mythex, щоб створити для мене трекер заявок на роботу. Я додаю заявки з компанією, посадою, посиланням, датою подання, статусом (подано, співбесіда, пропозиція, відмова) і нотатками. Покажи дошку за статусами, де можна перетягувати картки, і простий графік заявок за тиждень. Зберігай усе в базі даних і захисти входом. Запусти перегляд і дай мені посилання.

Потім по одній зміні в повідомленні:

У проєкті Mythex додай до кожної заявки дату нагадування і підсвічуй картки, де нагадування сьогодні або прострочене.

Опублікуй його і надішли мені живу URL-адресу.

Добре підходить для: людей, які вже планують і думають у ChatGPT і хочуть отримати результат наживо з даними, що зберігаються, без вивчення хостингу. Оскільки це звичайний проєкт Mythex, ви можете в будь-який момент продовжити в чаті Mythex.

Який варіант підходить для вашого завдання

Звички в промптах, які добре працюють у ChatGPT

• Називайте інструмент, коли хочете, щоб він був використаний. «Використай Mythex, щоб…» дає зрозуміти, що запит стосується вашого проєкту, а не загальної відповіді.
• Одна зміна в повідомленні. Довгі списки правок дають довгі списки побічних ефектів.
• Просіть план перед великими кроками. «Перш ніж щось змінювати, перелічи, що зміниш, і зачекай на моє ОК».
• Вставляйте точні помилки. Повний текст помилки важливіший за будь-який опис.
• Питайте, що змінилося. «Підсумуй свої останні три зміни простими словами» допомагає орієнтуватися, коли ви не читаєте код.

Більше — у нашій шпаргалці з промптів для вайб-кодингу.

Тримайте безпеку

• Ніколи не вставляйте справжні паролі чи API-ключі в розмову з ChatGPT. Якщо вашому застосунку потрібен ключ, зберігайте його в секретах проєкту. Інструменти Mythex показують лише назви секретів, ніколи не значення.
• Перш ніж публікувати, перевірте, що користувачі не бачать даних один одного і що жоден ключ не потрапив у код, який виконується в браузері. Наш посібник чи безпечний вайб-кодинг? перелічує перевірки з промптами, які можна вставити.

Використовуєте також Claude? Супутній посібник розповідає про вайб-кодинг з Claude і Claude Code. Для огляду за моделями дивіться ChatGPT vs Claude vs Gemini для створення застосунків.

Запитання