Vibe coding с ChatGPT: Canvas, Codex и приложения от ChatGPT

Можеш да правиш vibe coding с ChatGPT по три начина. Попитай го в чата за малко приложение и го прегледай в canvas; задавай задачи върху истинска кодова база на Codex, агентът за програмиране на OpenAI; или свържи AI конструктор на приложения, като Mythex, за да може ChatGPT да строи, хостира и публикува цяло приложение с база данни. Първият е най-бърз за инструмент на една страница, вторият е за разработчици, а третият ти дава жив работещ продукт с вход и данни, без да напускаш ChatGPT.

Ето как работи всеки, по един промпт за всеки и къде спира. Ако искаш фона за термина, прочети какво е vibe coding.

Вариант 1: Чат и canvas в ChatGPT

За бърз инструмент просто попитай. ChatGPT пише кода, а в canvas може да показва прости HTML и React страници, за да кликаш и да поискаш промени.

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

Добро за: калкулатори, прости игри, чернови на целеви страници и учене. Питай „обясни този файл така, сякаш съм нов в програмирането“ и бързо ще научиш.

Къде спира: няма бекенд. Нищо, което въвеждаш, не се запазва за други потребители, няма вход и за да го споделиш, трябва да копираш кода някъде и сам да го хостваш. В момента, в който кажеш „и го запази, за да може екипът ми да го вижда“, си надраснал чата.

Vibe coding с копиране и поставяне

Много хора започват, като питат 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 отвори Настройки на акаунта и копирай MCP адреса.
2. В ChatGPT добави Mythex от настройките за приложения или конектори, като използваш този адрес. Менютата на ChatGPT се променят от време на време, затова следвай помощната страница на OpenAI за добавяне на приложение, ако имената са различни.
3. Отваря се страница на Mythex: влез и избери Разреши достъп. Няма ключ за поставяне.
4. Започни разговор и спомени Mythex в заявката си.

Свързването работи във всеки план на Mythex. Инструментите за среда — строене, преглед, публикуване — изискват Mythex Pro ($25 месечно), а времето в средата и хостингът идват от кредитите ти в Mythex. Използването на ChatGPT остава в плана ти в OpenAI.

Първи промпт за опит

Използвай Mythex, за да построиш за мен проследяване на кандидатствания за работа. Добавям кандидатствания с компания, позиция, линк, дата на кандидатстване, статус (кандидатствах, интервю, оферта, отказ) и бележки. Покажи табло по статус, където мога да местя картите, и проста диаграма на кандидатстванията по седмици. Запази всичко в база данни и го защити с вход. Пусни прегледа и ми дай линка.

После, по една промяна на съобщение:

В проекта в Mythex добави дата за напомняне към всяко кандидатстване и маркирай картите, чието напомняне е днес или е просрочено.

Публикувай го и ми изпрати живия URL.

Добро за: хора, които вече планират и мислят в ChatGPT и искат резултатът да е жив, с данни, които се пазят, без да учат хостинг. Тъй като това е обикновен проект в Mythex, можеш по всяко време да продължиш в чата на Mythex.

Кой вариант отговаря на това, което строиш

Навици при писане на промптове в ChatGPT

• Назови инструмента, когато искаш да се използва. „Използвай Mythex, за да…“ показва ясно, че заявката е за твоя проект, а не общ отговор.
• Една промяна на съобщение. Дълги списъци с редакции дават дълги списъци със странични ефекти.
• Поискай план преди големите стъпки. „Преди да променяш нещо, изброй какво ще промениш и изчакай моето ОК.“
• Постави точните грешки. Пълният текст на грешката струва повече от всяко описание.
• Питай какво се е променило. „Обобщи последните си три промени с прости думи“ те държи в течение, когато не четеш кода.

Още са в нашата шпаргала с промпти за vibe coding.

Пази се

• Никога не поставяй истински пароли или API ключове в разговор с ChatGPT. Ако приложението ти има нужда от ключ, съхрани го в секретите на проекта. Инструментите на Mythex докладват само имената на секретите, никога стойностите.
• Преди да публикуваш, провери, че потребителите не могат да виждат данните си един на друг и че никой ключ не се е озовал в код, който се изпълнява в браузъра. Нашето ръководство безопасен ли е vibe coding? изброява проверките с промпти, които можеш да поставиш.

Използваш и Claude? Съпътстващото ръководство разглежда vibe coding с Claude и Claude Code. За поглед по модел виж ChatGPT срещу Claude срещу Gemini за строене на приложения.

Въпроси