O czym jest ten film
- ChatGPT Sites to funkcja pozwalająca zbudować i od razu wystawić w internecie działającą aplikację — bez pisania kodu.
- Sites ma wbudowaną bazę danych, hosting, uwierzytelnianie, magazyn plików i możliwość podpięcia własnej domeny.
- Autor pokazuje, jak w kilku promptach odtworzył aplikację „Social Scrape”, która zastąpiła mu trzy płatne narzędzia SaaS.
- Funkcję uruchamia się przez wzmiankę
@sitesw ChatGPT Work — na desktopie lub w telefonie. - ChatGPT Work jest opisany jako punkt pośredni między zwykłym ChatGPT a Codex — „agent w chmurze z własnym komputerem”.
- Pełny prompt startowy zawiera opis wyglądu, sposobu logowania, storage’u wideo, bazy danych i integracji z zewnętrznym agentem.
- Pierwsze wygenerowanie aplikacji zajęło ponad 25 minut i dało działający, choć niedopracowany efekt.
- Poprawki wprowadza się przez adnotacje klikane bezpośrednio na podglądzie strony — jak komentarze na makiecie.
- Dane do aplikacji trafiają przez skilla korzystającego z zewnętrznego API (Scrape Creators), a nie przez logikę wbudowaną w samą stronę.
- Na końcu autor wspomina o Web MCP — sposobie, by strona wystawiała narzędzia, z których korzystają ChatGPT i Codex — oraz o konkursie z pulą 35 000 dolarów.
Redakcyjne tłumaczenie
Aplikacja, która zastąpiła trzy narzędzia SaaS
Dzisiaj pokażę wam, jak łatwo zbudować dowolną aplikację wewnątrz ChatGPT. Wczoraj zbudowałem aplikację, która zastąpiła trzy narzędzia SaaS, na które wydawałem tysiące dolarów — i zrobiłem to w trzech promptach.
Aplikacja nazywa się Social Scrape i dziś zbudujemy ją jeszcze raz, od zera. Analizuje wszystkie platformy z krótkimi formami wideo. Potrafi pobrać całe filmy z Instagrama czy TikToka wraz ze statystykami i transkrypcją, a wszystkie te informacje przechowuje w witrynie, z której korzysta cały mój zespół przy tworzeniu treści i reklam.
I dosłownie każdy może zbudować taką aplikację w kilka minut, korzystając z ChatGPT Sites. Wielu z was może o tym nie wiedzieć, ale Sites ma wbudowaną bazę danych, hosting, uwierzytelnianie, magazyn plików i obsługę własnej domeny. Nawet jeśli nie macie żadnego doświadczenia z programowaniem, po tym materiale będziecie w stanie otworzyć ChatGPT, stworzyć dowolną aplikację i używać jej razem z zespołem.
Czym jest ChatGPT Work i jak uruchomić Sites
To jest ChatGPT. Jeśli włączycie zakładkę „work”, zobaczycie ChatGPT Work. Jedną z najfajniejszych rzeczy w tym trybie jest to, że można napisać po prostu: „Zbuduj @sites, które robi to a to”. W efekcie powstaje hostowana witryna — czyli dostępna w internecie — z bazą danych (dane są przechowywane w aplikacji), uwierzytelnianiem (ludzie mogą się logować) i magazynem plików (można wgrywać zdjęcia i filmy, jak w każdej normalnej aplikacji). Można ją też udostępnić innym.
Dla tych, którzy nie wiedzą, czym jest GPT Work: można o nim myśleć jako o punkcie pośrednim między ChatGPT a Codex. Codex to platforma agentowa OpenAI dla programistów — do intensywnych zadań kodowych. Do zwykłych rozmów jest ChatGPT. A pośrodku jest GPT Work. Jeśli to nie do końca trafia, można też myśleć o ChatGPT Work jako o agencie w chmurze, który ma własny komputer.
(Informacja dodatkowa: „skill” w nomenklaturze OpenAI to zestaw instrukcji i narzędzi, który agent może wywołać — odpowiednik wtyczki dodającej mu konkretną umiejętność.)
Niezależnie od tego, czy używamy ChatGPT Work w aplikacji desktopowej, czy na telefonie, Sites uruchamiamy tak samo — wzmiankując @sites. Moim ulubionym miejscem do budowania jest aplikacja desktopowa. Jak pamiętacie, jakiś miesiąc temu OpenAI połączyło aplikacje ChatGPT i Codex w jedną platformę, więc do GPT Work można się dostać bezpośrednio z desktopa.
Jak wygląda gotowa aplikacja
Wczoraj stworzyłem narzędzie do scrapowania krótkich form. Mogę pobrać materiały z dowolnej platformy społecznościowej i filmy pojawiają się tutaj. Mogę przescrapować wszystkie własne treści i odtworzyć film. Widzicie też, że pobrałem filmy Rowana Cheunga. Mogę kliknąć „transcript” i skopiować transkrypcję. Czyli: scrapuję wszystkie platformy z krótkim wideo i mogę ten film dosłownie pobrać na dysk. Film jest hostowany w tej witrynie ChatGPT Sites.
Prompt, od którego wszystko się zaczyna
Teraz zbudujmy naszą własną aplikację. Oto prompt, którego użyjemy:
Budujemy GPT Sites z ładnym frontendem — całość biała, na środku duża ramka telefonu. To będzie aplikacja, którą dzielę z zespołem. Witryna pozwala każdemu z zespołu zalogować się i uwierzytelnić, a potem obejrzeć prezentację, którą przygotowałem. Chcę móc wgrywać krótkie filmy ręcznie albo skopiować prompt spod ramki telefonu jednym kliknięciem ikony i przekazać go dowolnemu agentowi, żeby to on wrzucał filmy do aplikacji. Aplikacja ma więc mieć magazyn wideo i bazę danych, żeby statystyki każdego filmu były na miejscu.
Dalej piszę: ta aplikacja będzie używana ze skillem Scrape Creators, który korzysta z API Scrape Creators. Zamiast wbudowywać to w samą aplikację, po prostu poproszę agenta, żeby przescrapował twórców — a on utworzy playlistę zatytułowaną nazwą twórcy i będę mógł odtwarzać pobrane filmy w hostowanej aplikacji.
Dorzucam jeszcze: zacznij od najlepszych filmów Rileya Browna z 2025 roku, które nie są sponsorowane. Wrzuć je do aplikacji, a przy każdym ma być przycisk pobierania, żeby każdy użytkownik mógł ściągnąć film.
(Informacja dodatkowa: Scrape Creators to zewnętrzny, płatny serwis API do pobierania danych z platform społecznościowych — nie jest częścią ChatGPT.)
Wklejam to do ChatGPT Work w aplikacji desktopowej, z nową funkcją Sites, i uruchamiam.
Pierwszy rezultat: 25 minut pracy agenta
Gotowe. Agent pracował 25 minut i 8 sekund. Klikamy „open in browser” — i proszę. To jest aplikacja, którą stworzył. Zwróćcie uwagę: witryna korzysta z zabezpieczeń ChatGPT, żeby bezpiecznie zalogować użytkownika. Klikam „continue with ChatGPT”, loguję się swoim kontem, zatwierdzam — i ładują się rolki.
Popatrzcie na to. Aplikacja jest trochę toporna, ale nic nie szkodzi, zaraz to poprawimy. Widać, że przescrapowała sześć moich filmów — znalazła je i umieściła tutaj. Wygląda bardzo podobnie do tej, którą zbudowałem wczoraj. Ma parę błędów, ale to bardzo łatwo zmienić.
Poprawki przez adnotacje
Wchodzę do przeglądarki i klikam przycisk „annotate”. Klikam na element i piszę: film powinien być na pełnym ekranie, a polubienia i komentarze mają być nakładką, jak na TikToku czy w Reelsach. Adnotacja została dodana jako komentarz.
Co jeszcze trzeba poprawić? Górny pasek ma być niższy. I przycisk pobierania — trzeba go poprawić, wygląda dziwnie. Wysyłam to wszystko z poleceniem: wprowadź te zmiany. Te trzy adnotacje, czyli w praktyce komentarze, zostaną naniesione na projekt.
Gotowe. Otwieramy w przeglądarce jeszcze raz — a właściwie odświeżmy stronę. I proszę: teraz mamy pełny ekran. Przechodzimy do następnego filmu. Ten ma 10 tysięcy polubień, widzę wszystkie statystyki.
Zauważam jeszcze jedną rzecz, która się nie zgadza: zdjęcie profilowe. Awatar konta jest niepoprawny — zamiast Rileya Browna wyświetla się skrót „RB”. Chcę, żeby zdjęcie profilowe zgadzało się z tym z Instagrama. I jeszcze: sprawdź proszę konto Callawaya na Instagramie i pobierz dziesięć jego filmów.
Jak widzicie, dowolną zmianę można po prostu zgłosić, a ona wchodzi na witrynę, która realnie działa w internecie. I nie działa to tylko w przeglądarce wbudowanej w aplikację ChatGPT. Można otworzyć stronę w Chrome — tu muszę zalogować się ponownie, tym samym kontem co w ChatGPT — i mam dostęp do witryny, która naprawdę jest w sieci.
Jak to działa pod spodem: skille i zewnętrzne API
Nasza witryna wygląda już całkiem nieźle, więc wyjaśnię, jak to wszystko działa.
Kiedy używacie Codex albo GPT Work, macie do dyspozycji pluginy i skille. Skill to na przykład Scrape Creators, z którego korzystałem intensywnie jeszcze zanim w ogóle dowiedziałem się o GPT Sites. Pozwala mi dokładnie na to, co widzicie tutaj: pobieranie danych z dowolnego konta w mediach społecznościowych.
Działa to na zewnętrznym API. Jeśli wpiszecie w Google „scrape creators API”, trafi cie na zewnętrzny serwis. Zakładacie konto, pobieracie klucz API, wracacie do ChatGPT Work albo Codex i mówicie: chcę stworzyć skilla, który korzysta ze Scrape Creators, oto mój klucz API. Tyle wystarczy — wklejacie klucz w tym miejscu. Technicznie rzecz biorąc, to nie jest dobra praktyka, ale ja tak właśnie tworzę swoje skille.
(Informacja dodatkowa: wklejanie klucza API bezpośrednio w rozmowę oznacza, że trafia on do treści konwersacji i do plików skilla. Bezpieczniejszym wariantem — pokazanym zresztą dalej w materiale — są zmienne środowiskowe w ustawieniach witryny.)
Potem po prostu prosicie agenta, żeby wyciągnął dane z dowolnej platformy — i to jest niesamowicie użyteczne. Problemem było natomiast prezentowanie tych danych. Właśnie dlatego umieściłem je w witrynie. Teraz mogę przez to API scrapować media społecznościowe, a agent wrzuca wynik prosto do aplikacji. Dokładnie to się tutaj wydarzyło: pobrał film, polubienia, komentarze, a także transkrypcję, którą mogę bardzo łatwo skopiować do schowka. Mam więc lepszy sposób na wyświetlenie danych pobranych skillem Scrape Creators, który korzysta z API Scrape Creators. Wszystkie informacje o używanych przeze mnie skillach wrzucę do opisu, ale to w istocie tak właśnie działa. Ta witryna jest żywa i można ją udostępnić komukolwiek.
Ustawienia witryny: domena, zmienne środowiskowe, baza, analityka
Zanim skończymy, chcę omówić jeszcze jedną rzecz — ustawienia witryny. Żeby zobaczyć wszystkie swoje strony, klikamy „sites” w lewym panelu. Widać tu wszystko, co stworzyłem. Przy naszej nowej aplikacji klikam trzy kropki i wybieram „settings”.
Tutaj mogę zmienić domenę. Mogę też dodać własne domeny. Mogę zmienić nazwę — nazwijmy to „Social Scrape”.
Można też dodać zmienne środowiskowe. Jeśli chcielibyście dołożyć do aplikacji jeden z tych kluczy API, o których mówiłem wcześniej, dodajecie go właśnie tutaj. Macie też dostęp do analityki. W tej chwili jedyną osobą, która korzystała z mojej witryny, jestem ja, więc ruch dzienny jest znikomy. Nie wysłałem jej jeszcze nikomu z zespołu, bo dopiero ją zbudowaliśmy.
W sekcji bazy danych widzimy wszystkie dane aplikacji. Sites ma wbudowaną bazę i można ją tu przeglądać. Widać „Real Riley Brown” i „Callaway verified” wraz z ich kluczami awatarów oraz datami utworzenia. Tu są też filmy — podpis do filmu, nazwa pliku, typ zawartości. To tutaj przechowywane są wszystkie dane waszej aplikacji.
Wniosek i Web MCP
Taka jest ta aplikacja, którą zbudowaliśmy. To idealny interfejs do tego konkretnego zastosowania — pobierania danych z mediów społecznościowych — który mogę wysłać dowolnej osobie w zespole. I do tego samego was zachęcam. Kiedy musicie przekazać komuś w zespole jakiekolwiek informacje, zastanówcie się: jaki jest najlepszy możliwy interfejs, w jakim mogę mu to podać? Najprawdopodobniej będziecie chcieli w pełni dostosować tę małą aplikację, którą im wyślecie. Moim zdaniem najprościej zrobić to właśnie przez Sites.
Ostatnia rzecz. Jeśli chcecie pójść z tą witryną — albo dowolną inną — o krok dalej, zaktualizujcie aplikację desktopową ChatGPT do najnowszej wersji i poproście Codex, żeby włączył w niej Web MCP i wdrożył ją na Sites. Web MCP pozwala waszej stronie wystawić narzędzia, które ChatGPT i Codex mogą odkryć i wykorzystać bezpośrednio na żywej stronie, podczas gdy wy obserwujecie i kierujecie pracą.
Trwa właśnie dziesięciodniowe wyzwanie Web MCP z pulą nagród 35 000 dolarów. Możecie zbudować coś nowego albo po prostu dodać Web MCP do witryny, którą już macie. Link jest w opisie. I jeszcze raz wielkie dzięki dla OpenAI za sponsorowanie tego materiału.
(Informacja dodatkowa: autor sam deklaruje, że materiał jest sponsorowany przez OpenAI — warto to uwzględnić przy ocenie entuzjastycznego tonu.)
10 najważniejszych takeaways — z kontekstem zastosowania
1.Sites to nie prototyp, tylko cała infrastruktura w komplecie
Na czym polega: Jedna funkcja daje hosting, bazę danych, logowanie, magazyn plików i własną domenę. Nie trzeba składać stosu z osobnych usług ani niczego konfigurować ręcznie.
Jak stosować: Zacznij od zadań, które dziś załatwiasz arkuszem i kilkoma narzędziami naraz. Jeśli potrzebujesz „trwałych danych + logowania + prostego interfejsu”, to jest dokładnie ten profil zastosowania.
Na co uważać: Wszystko żyje w ekosystemie OpenAI. Nie masz tu przenośności ani kontroli nad tym, gdzie fizycznie leżą dane — to zła podstawa dla czegokolwiek objętego umową powierzenia czy wymogami compliance.
2.Prompt startowy pisz jako specyfikację, nie jako życzenie
Na czym polega: Prompt autora opisuje osobno wygląd, model logowania, dwa sposoby wprowadzania danych (ręcznie i przez agenta), storage, bazę oraz konkretne dane początkowe.
Jak stosować: Przed uruchomieniem wypisz cztery rzeczy: kto się loguje, co się przechowuje, jak dane wchodzą do systemu, jak wygląda ekran. Dorzuć konkretny zestaw danych startowych — inaczej dostaniesz puste ramki.
Na co uważać: Im dłuższy prompt, tym więcej rzeczy agent może zinterpretować po swojemu. W materiale kilka detali — awatar, wysokość paska, przycisk pobierania — wyszło źle mimo szczegółowego opisu.
3.Licz się z długim czasem generowania
Na czym polega: Pierwsze zbudowanie aplikacji zajęło agentowi 25 minut i 8 sekund.
Jak stosować: Traktuj to jak zadanie wsadowe, nie jak rozmowę. Odpal budowę i zajmij się czymś innym; nie planuj demonstracji „na żywo” bez wcześniejszego przygotowania.
Na co uważać: Kolejne iteracje w materiale są szybsze, ale autor nie podaje ich czasów. Nie zakładaj, że każda poprawka to kwestia sekund.
4.Poprawki nanoś przez adnotacje na żywym podglądzie
Na czym polega: Zamiast opisywać zmiany słowami, klikasz „annotate”, wskazujesz element na stronie i piszesz komentarz. Kilka adnotacji wysyła się razem jednym poleceniem.
Jak stosować: Przejdź całą aplikację i zbierz wszystkie zastrzeżenia, potem wyślij je hurtem. Odnoszenie się do konkretnego elementu usuwa najczęstsze źródło nieporozumień — „który dokładnie przycisk masz na myśli”.
Na co uważać: Adnotacja opisuje objaw wizualny („wygląda dziwnie”), a nie oczekiwany rezultat. Warto dopisać, jak ma być, a nie tylko że jest źle.
5.Rozdziel pozyskiwanie danych od ich prezentacji
Na czym polega: Kluczowa decyzja architektoniczna w materiale: scrapowanie zostaje po stronie skilla i zewnętrznego API, a witryna jest wyłącznie warstwą wyświetlania i przechowywania.
Jak stosować: Gdy budujesz podobne narzędzie, nie każ aplikacji „samej pobierać danych”. Niech agent wykona pobranie i wstawi wynik do bazy. Łatwiej to debugować i wymieniać źródło danych.
Na co uważać: Konsekwencją jest to, że aplikacja nie aktualizuje się sama — ktoś musi poprosić agenta o kolejne zaciągnięcie danych. To narzędzie kuratorskie, nie automat.
6.Skill z zewnętrznym API rozszerza zasięg agenta
Na czym polega: Autor stworzył skilla opartego na Scrape Creators, prosząc agenta o jego zbudowanie i podając klucz API.
Jak stosować: Jeśli jakieś dane są dostępne przez publiczne API, prawdopodobnie zbudujesz do nich skilla jednym poleceniem. To najtańsza droga do rozszerzenia agenta o dziedzinę, której sam nie zna.
Na co uważać: Autor sam zaznacza, że wklejanie klucza w rozmowę „technicznie nie jest dobrą praktyką”. Klucz trafia wtedy do historii konwersacji. Do produkcyjnych zastosowań użyj zmiennych środowiskowych w ustawieniach witryny.
7.Zmienne środowiskowe to właściwe miejsce na sekrety
Na czym polega: W ustawieniach każdej witryny jest sekcja zmiennych środowiskowych, przeznaczona m.in. na klucze API.
Jak stosować: Ustal to jako domyślną ścieżkę od pierwszej aplikacji. Klucze w zmiennych, nie w promptach — nawyk kosztuje minutę, a rotacja skompromitowanego klucza kosztuje znacznie więcej.
Na co uważać: Materiał nie pokazuje, jak dokładnie aplikacja odczytuje te zmienne ani jakie są ograniczenia. To trzeba sprawdzić samodzielnie przed wdrożeniem czegokolwiek wrażliwego.
8.Uwierzytelnianie jest oparte na kontach ChatGPT
Na czym polega: Logowanie do witryny odbywa się przez „continue with ChatGPT” — także wtedy, gdy stronę otworzysz w zwykłym Chrome.
Jak stosować: Sprawdza się świetnie w zespole, który i tak korzysta z ChatGPT. Zero pracy nad rejestracją, hasłami i resetami.
Na co uważać: Każdy odbiorca musi mieć konto ChatGPT. Do udostępniania czegokolwiek klientom zewnętrznym albo osobom spoza ekosystemu to bariera, którą trzeba rozważyć zawczasu.
9.Wbudowana baza jest przeglądalna — korzystaj z niej przy diagnozie
Na czym polega: Panel bazy pokazuje realne rekordy: twórców z kluczami awatarów i datami utworzenia oraz filmy z podpisami, nazwami plików i typami zawartości.
Jak stosować: Gdy coś nie wyświetla się poprawnie, najpierw zajrzyj do bazy. Odróżnisz błąd pobierania danych od błędu prezentacji — a to zupełnie inne poprawki.
Na co uważać: Podgląd bazy nie zastępuje kopii zapasowej. Materiał nie wspomina o eksporcie danych; nie zakładaj, że łatwo je stamtąd wyjmiesz.
10.Prawdziwa zmiana to pytanie „jaki interfejs im wysłać”
Na czym polega: Główna teza autora: kiedy masz przekazać komuś informacje, zastanów się nad najlepszym możliwym interfejsem dla tej konkretnej sytuacji, zamiast domyślnie wysyłać dokument czy arkusz.
Jak stosować: Wybierz jedno powtarzalne przekazanie danych w swojej pracy i zbuduj do niego dedykowaną mini-aplikację. Kosztem jednego promptu odbiorca dostaje narzędzie zamiast surowego pliku.
Na co uważać: Namnażanie mikroaplikacji ma swoją cenę — utrzymanie, dostępy, rozproszenie danych. Rób tak tam, gdzie interfejs realnie coś zmienia, a nie wszędzie.