Vibe coding z ChatGPT: canvas, Codex i budowanie aplikacji z ChatGPT

Vibe coding z ChatGPT możesz robić na trzy sposoby. Poproś w czacie o małą aplikację i zobacz podgląd w canvas; przekazuj zadania na prawdziwej bazie kodu do Codex, agenta kodującego OpenAI; albo podłącz kreator aplikacji AI, taki jak Mythex, aby ChatGPT mógł zbudować, hostować i opublikować pełną aplikację z bazą danych. Pierwszy sposób jest najszybszy przy narzędziu na jednej stronie, drugi jest dla programistów, a trzeci daje żywą aplikację z logowaniem i danymi, bez wychodzenia z ChatGPT.

Poniżej opisujemy każdy sposób, z promptem i miejscem, w którym się zatrzymuje. Jeśli szukasz kreatora stron AI w ChatGPT, zacznij od opcji 3. Jeśli sam termin vibe coding jest dla ciebie nowy, przeczytaj czym jest vibe coding.

Opcja 1: czat i canvas w ChatGPT

Do szybkiego narzędzia po prostu zapytaj. ChatGPT napisze kod, a w canvas może pokazać proste strony HTML i React, żebyś mógł po nich kliknąć i poprosić o zmiany.

Napisz kalkulator napiwków na jedną stronę z polami: kwota rachunku, procent napiwku (przyciski 10, 15, 20 i pole na własną wartość) oraz liczba osób. Pokaż napiwek i kwotę na osobę, aktualizowane w trakcie wpisywania. Niech wygląda czysto na telefonie.

Dobre do: kalkulatorów, prostych gier, szkiców stron lądowania i nauki. Zapytaj „wyjaśnij ten plik tak, jakbym był nowicjuszem w kodzie” i szybko się czegoś nauczysz.

Gdzie się zatrzymuje: nie ma tu backendu. Nic, co wpiszesz, nie jest zapisywane dla innych użytkowników, nie ma logowania, a żeby to udostępnić, musiałbyś skopiować kod gdzieś indziej i sam go hostować. Gdy powiesz „i zapisz to, żeby mój zespół mógł to zobaczyć”, wyrosłeś poza czat.

Vibe coding przez kopiuj-wklej

Wielu ludzi zaczyna od tego, że prosi ChatGPT o kod i wkleja go do plików na komputerze lub w usłudze hostingowej. Działa to przy małych stronach statycznych, ale szybko się sypie. Każda zmiana oznacza szukanie właściwego pliku, wklejenie właściwego fragmentu i nadzieję, że nic innego nie zależało od tego, co podmieniłeś. Jeśli łapiesz się na tym więcej niż kilka razy, przejdź do jednej z dwóch kolejnych opcji.

Opcja 2: Codex dla prawdziwej bazy kodu

Codex to agent OpenAI do pracy programistycznej. Dajesz mu zadanie zwykłym językiem, a on pracuje na repozytorium: czyta kod, wprowadza zmiany w wielu plikach, uruchamia polecenia i testy, a potem przedstawia wynik do przeglądu. OpenAI udostępnia go w ChatGPT, jako narzędzie wiersza poleceń i jako rozszerzenie edytora; sprawdź na stronie OpenAI, które plany go obejmują i jakie są aktualne limity.

Najlepiej sprawdza się zadanie sformułowane jak polecenie:

W tym repozytorium dodaj przycisk eksportu CSV na stronie Zamówienia. Ma eksportować aktualnie przefiltrowane zamówienia z kolumnami data, klient, suma i status. Dodaj test dla funkcji eksportu i uruchom zestaw testów.

Dobre do: programistów i technicznych założycieli z istniejącym projektem, którzy chcą, by agent przejmował całe zadania z ich listy. Pracuje z ich stosem technologii i konwencjami.

Co nadal zostaje po twojej stronie: gdzie aplikacja działa, baza danych, sekrety, wdrożenie i domeny. Codex zmienia kod; nie jest hostingiem.

Codex i Mythex razem

Codex może też łączyć się z serwerami MCP, w tym z serwerem Mythex. Dodaj https://mcp.mythex.ai/mcp jako własny serwer MCP w Codex, zatwierdź dostęp na Mythex, a Codex będzie mógł pracować nad projektem Mythex w jego chmurowej piaskownicy, przy czym podgląd, bazę danych i publikację obsługuje Mythex. Nasz wpis o budowaniu aplikacji Mythex z Claude, Cursor lub Codex przechodzi przez to krok po kroku.

Opcja 3: pełna aplikacja z ChatGPT przez Mythex

Jeśli chcesz zostać w rozmowie z ChatGPT i na końcu mieć prawdziwą, hostowaną aplikację, podłącz Mythex. Mythex działa w ChatGPT jako aplikacja: ChatGPT korzysta z narzędzi Mythex przez MCP, otwarty protokół pozwalający asystentom używać narzędzi hostowanych gdzie indziej (czym jest MCP).

Gdy połączenie działa, ChatGPT może utworzyć projekt Mythex, napisać kod w prywatnej chmurowej piaskownicy, uruchomić podgląd na żywo, dodać bazę danych i pamięć plików oraz opublikować aplikację pod publicznym adresem. Wyniki wracają z linkiem, dzięki któremu możesz otworzyć projekt w Mythex i obejrzeć podgląd.

Jak się połączyć

1. W Mythex otwórz Account settings i skopiuj adres MCP.
2. W ChatGPT dodaj Mythex z ustawień aplikacji lub konektorów, używając tego adresu. Menu ChatGPT zmieniają się od czasu do czasu, więc jeśli nazwy się różnią, skorzystaj ze strony pomocy OpenAI o dodawaniu aplikacji.
3. Otworzy się strona Mythex: zaloguj się i wybierz Allow access. Nie ma żadnego klucza do wklejenia.
4. Rozpocznij rozmowę i wspomnij o Mythex w swojej prośbie.

Połączenie działa na każdym planie Mythex. Narzędzia piaskownicy, czyli budowanie, podgląd i publikacja, wymagają planu Mythex Pro ($25 miesięcznie), a czas piaskownicy i hosting pochodzą z twoich kredytów Mythex. Użycie ChatGPT pozostaje w ramach twojego planu OpenAI.

Pierwszy prompt do wypróbowania

Użyj Mythex, żeby zbudować dla mnie tracker aplikacji o pracę. Dodaję aplikacje z firmą, stanowiskiem, linkiem, datą wysłania, statusem (wysłana, rozmowa, oferta, odrzucona) i notatkami. Pokaż tablicę według statusu, na której mogę przeciągać karty, oraz prosty wykres liczby aplikacji tygodniowo. Zapisz wszystko w bazie danych i zabezpiecz logowaniem. Uruchom podgląd i podaj mi link.

Potem jedna zmiana w wiadomości:

W projekcie Mythex dodaj do każdej aplikacji datę przypomnienia i wyróżnij karty, których przypomnienie jest dzisiaj lub minęło.

Opublikuj to i wyślij mi aktywny adres URL.

Dobre do: osób, które planują i myślą w ChatGPT i chcą mieć wynik na żywo, z trwałymi danymi, bez uczenia się hostingu. Ponieważ to zwykły projekt Mythex, w każdej chwili możesz kontynuować w czacie Mythex.

Która opcja pasuje do tego, co budujesz

Nawyki promptowania, które działają w ChatGPT

• Nazwij narzędzie, gdy chcesz, by zostało użyte. „Użyj Mythex, żeby…” pokazuje, że prośba dotyczy twojego projektu, a nie ogólnej odpowiedzi.
• Jedna zmiana w wiadomości. Długie listy poprawek dają długie listy efektów ubocznych.
• Poproś o plan przed dużymi krokami. „Zanim cokolwiek zmienisz, wypisz, co zmienisz, i poczekaj na moje OK.”
• Wklejaj dokładne błędy. Pełny tekst błędu jest wart więcej niż jakikolwiek opis.
• Pytaj, co się zmieniło. „Podsumuj trzy ostatnie zmiany prostymi słowami” pozwala ci się orientować, gdy nie czytasz kodu.

Więcej znajdziesz w naszej ściądze promptów do vibe coding.

Zadbaj o bezpieczeństwo

• Nigdy nie wklejaj prawdziwych haseł ani kluczy API do rozmowy z ChatGPT. Jeśli twoja aplikacja potrzebuje klucza, przechowuj go w sekretach projektu. Narzędzia Mythex zgłaszają tylko nazwy sekretów, nigdy ich wartości.
• Przed publikacją sprawdź, czy użytkownicy nie widzą danych nawzajem i czy żaden klucz nie trafił do kodu działającego w przeglądarce. Nasz przewodnik czy vibe coding jest bezpieczne? wymienia te sprawdzenia wraz z promptami, które możesz wkleić.

Używasz też Claude? Przewodnik towarzyszący opisuje vibe coding z Claude i Claude Code. Aby zobaczyć porównanie modeli, zajrzyj do ChatGPT vs Claude vs Gemini do budowania aplikacji.

Pytania