Vibe coding со ChatGPT: Canvas, Codex и градење апликации од ChatGPT

Vibe coding со ChatGPT можете да правите на три начини. Замолете го во разговор за мала апликација и прегледајте ја во canvas; предавајте задачи на вистинска кодна база на Codex, агентот за кодирање на OpenAI; или поврзете AI градител на апликации како Mythex, па ChatGPT може да изгради, хостира и објави цела апликација со база. Првиот е најбрз за алатка од една страница, вториот е наменет за програмери, а третиот ви дава жива апликација со најави и податоци без да го напуштите ChatGPT.

Еве како работи секој, по една упатство за секој и каде престанува. Ако ви треба позадината за терминот, прочитајте што е vibe coding. Оваа страница е практичниот дел.

Опција 1: ChatGPT разговор и canvas

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

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

Добро за: калкулатори, едноставни игри, нацрти на целни страници и учење. Прашајте „објасни ми ја оваа датотека како да сум нов во кодирањето“ и брзо ќе научите.

Каде престанува: нема backend. Ништо што ќе внесете не се зачувува за други корисници, нема најава, а за да го споделите, би го копирале кодот некаде и би го хостирале сами. Во моментот кога ќе кажете „и зачувај го за да може мојот тим да го види“, сте го надминале разговорот.

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 проект во неговиот облачен sandbox, со прегледот, базата и објавувањето управувани од Mythex. Нашата објава за градење Mythex апликации од Claude, Cursor или Codex ја опишува постапката.

Опција 3: Изградете цела апликација од ChatGPT со Mythex

Ако сакате да останете во разговор со ChatGPT и на крајот да добиете вистинска, хостирана апликација, поврзете Mythex. Mythex работи во ChatGPT како апликација: ChatGPT ги користи алатките на Mythex преку MCP, отворениот протокол што им овозможува на асистентите да користат алатки хостирани на друго место (што е MCP).

Кога ќе се поврзе, ChatGPT може да создаде Mythex проект, да го напише кодот во приватен облачен sandbox, да пушти жив преглед, да додаде база и складиште за датотеки и да ја објави апликацијата на јавна URL адреса. Резултатите се враќаат со линк за да го отворите проектот во Mythex и да го гледате прегледот во живо.

Како да се поврзете

1. Во Mythex, отворете ги Поставките на сметката и копирајте ја MCP адресата.
2. Во ChatGPT, додајте го Mythex од поставките за апликации или конектори со таа адреса. Менито на ChatGPT понекогаш се менува, па следете ја страницата за помош на OpenAI за додавање апликација ако имињата се разликуваат.
3. Се отвора страница на Mythex: најавете се и изберете Дозволи пристап. Нема клуч за залепување.
4. Почнете разговор и спомнете го Mythex во барањето.

Поврзувањето работи на кој било план на Mythex. Алатките за sandbox — градење, преглед, објавување — бараат Mythex Pro ($25 месечно), а времето во sandbox и хостирањето се плаќаат со вашите кредити на 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 vs Claude vs Gemini за градење апликации.

Прашања