Dev Mode w ChatGPT: podłączamy lokalną aplikację

1. Czym jest Developer Mode „na poważnie”

O Dev Mode już coś wiesz, ale teraz ważne jest złożyć całościowy obraz, opierając się na realnej praktyce.

Developer Mode w ChatGPT to specjalny tryb, w którym platforma pozwala podłączyć twoją aplikację bezpośrednio, bez publikacji w Store. Mówisz ChatGPT: „Oto URL mojego serwera MCP”, a ChatGPT zaczyna traktować go jak zewnętrzne narzędzie z UI — może wywoływać jego narzędzia, ładować widżety i robi to wszystko w ramach zwykłego czatu.

Jeśli przypomnieć sobie architekturę, to w Dev Mode ChatGPT działa jako klient MCP, a twój szablon Next.js — jako serwer MCP. ChatGPT nawiązuje połączenie z /mcp, pyta: „Co umiesz?” (lista tools i resources), a dalej w toku dialogu może wywoływać te narzędzia i wyświetlać twoje widżety w iframe.

Ważne oddzielić Dev Mode od Store:

• Dev Mode — twój prywatny mały „garaż”: możesz psuć, eksperymentować, zmieniać schemat narzędzi co pięć minut, nie martwiąc się o użytkowników.
• Store — witryna: tam trafia już stabilna wersja, po review i z dopracowaną polityką, opisami itp. Do tego dojdziemy pod koniec kursu, a na razie bawimy się w garażu.

Na koniec 2025 roku Dev Mode z Apps SDK jest dostępny we wszystkich planach ChatGPT, ale w kontach korporacyjnych czasem trzeba, aby administrator włączył go na poziomie przestrzeni roboczej. Jeśli w ustawieniach nie pojawia się przełącznik Developer Mode, to pierwszy kandydat do sprawdzenia.

2. Co już mamy na start lekcji

Zanim klikniesz cokolwiek w interfejsie ChatGPT, upewnij się, że część lokalna jest gotowa.

Po pierwsze, serwer deweloperski Next.js. W katalogu głównym projektu uruchamiałeś już:

npm run dev

Domyślnie Next.js 16 nasłuchuje na porcie 3000, więc twój UI jest dostępny pod adresem http://localhost:3000.

Po drugie, trasa MCP. W szablonie CodeGym Labs serwer MCP jest zaimplementowany jako route‑handler app/mcp/route.ts. Właśnie w tym pliku rejestrowane są narzędzia i zasoby; to tam trafią pierwsze żądania ChatGPT przy podłączaniu aplikacji w Dev Mode.

Z punktu widzenia architektury teraz wygląda to tak:

Twoja przeglądarka ──> http://localhost:3000 (Next.js dev, UI)
                           │
                           └── /mcp (serwer MCP wewnątrz Next.js)

Na razie nie ma tu żadnego połączenia z ChatGPT — on żyje w chmurze, a twój localhost jest dla niego niewidoczny. Szczegółowa konfiguracja tunelu — to temat następnej lekcji. Tutaj dla prostoty załóżmy, że masz już jakiś publiczny HTTPS‑URL do /mcp (np. przez ngrok lub Cloudflare Tunnel skonfigurowany wg README szablonu).

Jeśli tunelu jeszcze nie stawiałeś — nic straconego. Teraz przynajmniej przejdziesz wzrokiem cały łańcuch kroków w Dev Mode i zobaczysz, co dokładnie trzeba zrobić, gdy pojawi się HTTPS‑URL.

Jeśli masz już HTTPS‑URL do /mcp, dalej możesz powtarzać wszystkie kroki ręcznie.
Jeśli jeszcze nie — przejdź tę lekcję jako „tour po interfejsie”: ważne jest zrozumieć sekwencję kroków, a realny start zrobimy w następnej lekcji, kiedy skonfigurujemy tunel.

3. Włączamy Developer Mode w interfejsie ChatGPT

Pierwszy krok — po prostu nauczyć ChatGPT pokazywać nam potrzebne ustawienia. Zrób tak:

Najpierw wejdź do wersji webowej ChatGPT na koncie, z którego będziesz rozwijać. Kliknij ikonę profilu w lewym dolnym (albo prawym górnym — UI ciągle ewoluuje) rogu i wybierz Settings (Ustawienia).

W ustawieniach znajdź sekcję związaną z aplikacjami: zwykle nazywa się Apps & Connectors albo Connected apps. Otwórz tę sekcję. Na dole strony (albo na karcie Advanced / Zaawansowane) pojawi się przełącznik Developer Mode. Właśnie jego musisz włączyć.

Po aktywacji Dev Mode ChatGPT zwykle pokazuje powiadomienie, że tryb dewelopera jest włączony. W tej samej sekcji pojawia się przycisk w stylu Create, Create connector, New app — sformułowania mogą się trochę różnić, ale idea jest jedna: pojawił się sposób, by stworzyć własną podłączoną aplikację.

Jeśli w ustawieniach w ogóle nie ma ani sekcji Apps & Connectors, ani przełącznika Developer Mode, sprawdź:

• czy na pewno jesteś zalogowany na to konto ChatGPT, którego chcesz używać;
• w koncie firmowym ten tryb może być włączany przez administratora przestrzeni roboczej.

Czasem wystarczy po prostu wylogować i zalogować się ponownie (klasyczne „wyloguj i zaloguj się ponownie” dla Dev Mode).

4. Tworzymy własną aplikację / konektor i podajemy MCP URL

Teraz, gdy Dev Mode jest włączony, zarejestrujmy twojego GiftGenius w ChatGPT. Poniżej — scenariusz „jak to zrobić naprawdę”. Jeśli HTTPS‑URL nie jest jeszcze skonfigurowany, potraktuj kroki jako próbę na sucho: po prostu zobacz, co dokładnie zrobimy, gdy tunel będzie gotowy.

Wszystko dzieje się w sekcji ustawień ChatGPT, w której przed chwilą byłeś. Kolejność będzie mniej więcej taka.

Ponownie otwórz Settings → Apps & Connectors. W środku zobaczysz listę już podłączonych aplikacji (najpewniej na razie pustą) i przycisk Create / Add connector. Kliknij go — otworzy się formularz tworzenia aplikacji.

Formularz zwykle składa się z trzech kluczowych pól:

1. Nazwa (Name). To czytelna nazwa widoczna dla ciebie i dla ChatGPT. Na potrzeby naszego kursu wygodnie nazwać aplikację np. GiftGenius (dev) — od razu widać, że to lokalna wersja deweloperska.
2. Opis (Description). Krótkie wyjaśnienie, co robi aplikacja i kiedy warto jej używać. Przykład: „Dobiera pomysły na prezenty według zainteresowań osoby”. Ten wiersz później wpływa na discovery — model używa go, by decydować, kiedy proponować twój App na czacie.
3. URL serwera MCP (czasem podpisany jako Connector URL, MCP endpoint, App URL itd.). To najważniejsze pole: tutaj wklejasz publiczny HTTPS‑URL prowadzący do /mcp twojej aplikacji.

Na przykład:

https://my-giftgenius-dev.ngrok.app/mcp

albo

https://giftgenius-dev.trycloudflare.com/mcp

Główne niuanse dla tego pola:

• koniecznie https://, inaczej ChatGPT po prostu odmówi połączenia;
• koniecznie ścieżka /mcp na końcu, ponieważ właśnie tam żyje serwer MCP w szablonie; ten endpoint jest opisany w oficjalnej dokumentacji Apps SDK.

Skąd wziąć ten URL, omówimy szczegółowo w następnej lekcji (tunele, Cloudflare, ngrok). Teraz ważna jest sama idea: twój lokalny http://localhost:3000/mcp musi w jakiś sposób zamienić się w publiczny https://…/mcp, a ten publiczny adres wklejasz do formularza.

Po wypełnieniu pól kliknij Create / Zapisz. W tym momencie ChatGPT wykonuje „handshake” z twoim serwerem: wysyła żądania HTTP na podany URL, oczekuje otrzymać manifest możliwości (listę tools/resources, metadane) i sprawdza, czy serwer odpowiada zgodnie z protokołem MCP. Jeśli wszystko jest OK, konektor pojawi się na liście, a ty zobaczysz, jakie narzędzia znalazł ChatGPT. W kolejnym rozdziale rozbierzemy, co dokładnie dzieje się w tym handshake i jak to zobaczyć w logach.

Jeśli tunel nie jest jeszcze skonfigurowany i wkleisz fikcyjny URL, ChatGPT uczciwie powie, że nie udało się dotrzeć do serwera. To też wartościowe doświadczenie: od razu zobaczysz, gdzie i jak wyświetlane są błędy.

5. Co dzieje się „pod maską”: MCP‑handshake w prostych słowach

Z zewnątrz wszystko przypomina zwykły formularz „dodaj aplikację przez URL”. W środku jest nieco ciekawiej, i warto to teraz zrozumieć, aby później łatwiej debugować.

Widziałeś już, że przy tworzeniu konektora ChatGPT łączy się z twoim /mcp i oczekuje manifestu. Rozbierzmy teraz tę rozmowę trochę dokładniej — bardzo pomaga to przy debugowaniu.

Po kliknięciu przycisku Create ChatGPT wykonuje kilka kroków.

Najpierw odwołuje się do wskazanego URL z /mcp, występując jako klient MCP. Według protokołu MCP oczekuje, że pod tym HTTP‑endpointem działa serwer implementujący podstawowe możliwości: wypisanie narzędzi (list tools), dostarczenie zasobów (widżety), obsługę wywołań narzędzi.

Serwer z kolei odpowiada strukturą JSON z opisem:

• nazwy serwera i wersji;
• listy narzędzi: name, title, description, inputSchema itd.;
• listy zasobów: skąd pobrać HTML twoich widżetów, jakie typy MIME, jak je renderować.

W szablonie CodeGym dla Next.js wszystko to jest już zaimplementowane w app/mcp/route.ts: tam przy pomocy SDK wywoływane jest coś w rodzaju server.registerTool(...) i server.registerResource(...).

Jeśli chcesz zobaczyć ten handshake na własne oczy, możesz dodać do app/mcp/route.ts prosty log. To raczej trik debugowy dla deweloperów, można go pominąć i wrócić później, gdy zechcesz wejść głębiej:

// app/mcp/route.ts
import { NextRequest, NextResponse } from "next/server";
// zaimportuj swój już istniejący server / buildManifest

export async function GET(req: NextRequest) {
  console.log("[MCP] Handshake from ChatGPT:", req.headers.get("user-agent"));
  const manifest = buildManifestSomehow(); // to już jest w szablonie
  return NextResponse.json(manifest);
}

Ta funkcja jest nieco umowna (w szablonie struktura może się różnić), ale idea jest prosta: app/mcp/route.ts to zwykły route‑handler Next.js i możesz logować przychodzące żądania. Przy udanym podłączeniu Dev Mode zobaczysz ten log w terminalu, gdzie uruchomione jest npm run dev.

Z punktu widzenia protokołu można to narysować jako mały diagram:

sequenceDiagram
    participant ChatGPT
    participant Tunnel as HTTPS URL (/mcp)
    participant NextDev as Next.js dev + MCP

    ChatGPT->>Tunnel: Żądanie HTTP(S) do https://.../mcp
    Tunnel->>NextDev: Proxy do http://localhost:3000/mcp
    NextDev-->>Tunnel: JSON z narzędziami i zasobami
    Tunnel-->>ChatGPT: Przekazuje odpowiedź
    ChatGPT->>ChatGPT: Buforuje listę tools/resources

To, że w formularzu Dev Mode wpisałeś „po prostu URL”, w rzeczywistości uruchamia cały protokół rozmowy.

6. Jak ChatGPT „widzi” twoją aplikację po podłączeniu

Załóżmy, że handshake przeszedł pomyślnie. I co dalej?

Po pierwsze, w ustawieniach w sekcji Apps & Connectors twój GiftGenius (dev) pojawi się na liście podłączonych aplikacji. W środku karty zobaczysz nazwę, opis i listę wykrytych narzędzi. Tam zwykle są też przyciski w rodzaju Refresh, Delete itp. Przycisk Refresh przyda się później, gdy będziesz zmieniać schemat narzędzi.

Po drugie, aplikacja staje się dostępna w samych czatach. Otwórz nowy czat, kliknij „+” obok pola wprowadzania. Tam jest menu „More”, „Apps”, „Tools” — w zależności od aktualnej wersji UI. Twój GiftGenius (dev) powinien pojawić się na liście i możesz wybrać go explicite dla tej rozmowy.

Po wyborze aplikacja staje się „podłączona” do tego czatu. Dla ciebie wygląda to tak:

• piszesz naturalne zapytanie, na przykład: „Dobierz prezent dla fana kosmosu za 50$”;
• ChatGPT decyduje (na podstawie opisu i historii dialogu), że można użyć GiftGenius, i wywołuje jedno z twoich narzędzi MCP;
• wynik tego wywołania może zawierać widżet HTML; ten renderuje się bezpośrednio na czacie w formie karty/panelu.

W Dev Mode najczęściej najpierw będziesz wywoływać aplikację wprost — przez wybór w menu lub jawne wspomnienie po nazwie. Ale ważne: na produkcji ChatGPT może sam „proponować” twój App, kierując się jego opisem i metadanymi narzędzi.

Dla przejrzystości warto wyobrazić sobie jeszcze jedną tabelkę:

7. Cykl deweloperski: zmieniamy kod → widzimy w ChatGPT

Podłączyć App — to połowa sukcesu. Druga połowa — zrozumieć, jak teraz żyć z Dev Mode w codziennej pracy.

Są dwa duże typy zmian: zmiany w UI (widżet) i zmiany w logice/narzędziach MCP.

Jeśli zmieniasz tylko UI, na przykład w app/page.tsx poprawiasz nagłówek lub style, to dla Next.js to zwykły frontend. Serwer dev przeładowuje moduł i w przeglądarce widzisz hot reload. W ChatGPT twój UI jest otwarty w iframe, ale zachowanie jest podobne: przy kolejnym wywołaniu narzędzia, które renderuje ten widżet, ChatGPT załaduje już zaktualizowany HTML. Czasem HMR dociera bezpośrednio do iframe, czasem wystarczy ponownie wywołać narzędzie na czacie. KESZOWANIE

Dla utrwalenia spróbuj lekko zmienić widżet. Załóżmy, że w app/page.tsx masz coś takiego:

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius</h1>
      <p>Tutaj będzie dobór prezentów.</p>
    </main>
  );
}

Zmień nagłówek i tekst:

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius (dev)</h1>
      <p>Ta wersja działa w Dev Mode. Nie do produkcyjnych prezentów.</p>
    </main>
  );
}

Zapisz plik, wróć do czatu z podłączonym GiftGenius i ponownie wywołaj aplikację (np. tym samym zapytaniem o prezent). Powinieneś zobaczyć zaktualizowany nagłówek wewnątrz widżetu — to dobry znak, że łańcuch Next.js → tunel → ChatGPT działa.

Jeśli natomiast zmieniasz część MCP — dodajesz nowe narzędzie, zmieniasz schemat inputSchema, zmieniasz nazwy tools — wchodzi do gry keszowanie ChatGPT. Przy pierwszym podłączeniu w Dev Mode ChatGPT zapamiętuje listę narzędzi i nie zawsze łapie zmiany automatycznie. Wtedy trzeba wrócić do sekcji Apps & Connectors, wybrać swój GiftGenius (dev) i kliknąć coś w rodzaju Refresh schema / Refresh. Po tym ChatGPT ponownie odpyta twój /mcp i zaktualizuje listę tools.

N niby drobiazg, ale bez tego łatwo „złapać” sytuację: już poprawiłeś kod narzędzia, a ChatGPT uparcie nie widzi nowych parametrów.

8. Mini‑praktyka: pierwszy pełny scenariusz GiftGenius w Dev Mode

Zbierzmy wszystko w jeden praktyczny scenariusz. Załóżmy tutaj, że masz jakiś działający HTTPS‑URL dla /mcp (przez tunel lub deploy). Jeśli jeszcze go nie masz — po prostu przeczytaj kroki, w następnej lekcji powtórzysz je z realnym URL.

1. Upewnij się, że npm run dev jest uruchomione i w logach nie ma błędów. Szczególnie miło zobaczyć coś w rodzaju „MCP server running at http://localhost:3000/mcp” w terminalu, jeśli szablon to loguje.
2. Otwórz ChatGPT, włącz Developer Mode przez Settings → Apps & Connectors → Advanced settings.
3. Utwórz nowy konektor GiftGenius (dev) z krótkim opisem („Helper for choosing gifts”) i URL w rodzaju https://<twoja-domena>/mcp.
4. Upewnij się, że ChatGPT zdołał się połączyć: na liście aplikacji zobaczysz nową pozycję. Jeśli połączenia nie ma — sprawdź logi serwera dev i tunelu, to samo w sobie jest pouczające.
5. Otwórz nowy czat, kliknij „+”, wybierz swój GiftGenius (dev), następnie sformułuj zapytanie: „Dobierz prezent dla dewelopera, który lubi kosmos i kawę, budżet 40$”.
6. Zobacz, co robi twój obecny szablon: w podstawowej formie może pokazać prostą kartę/widżet. To jeszcze nie „inteligentny dobór prezentów”, ale sam fakt, że coś pojawiło się na czacie z twojego kodu — to już ogromny krok.

Jako dodatkowe ćwiczenie możesz dodać osobne narzędzie testowe w serwerze MCP wyłącznie do sprawdzenia Dev Mode. Przykład (nie musisz implementować od razu, po prostu spójrz na ideę):

// wewnątrz app/mcp/route.ts, obok innych tools
server.registerTool(
  "ping_dev",
  {
    title: "Ping GiftGenius dev",
    description: "Sprawdza, czy serwer deweloperski działa.",
    inputSchema: { type: "object", properties: {} },
  },
  async () => ({
    content: [{ type: "text", text: "GiftGenius dev is alive ✅" }],
    structuredContent: {},
  })
);

Szczegółowo omawiać server.registerTool będziemy w module o narzędziach, na razie zapamiętaj: przez MCP opisujesz „co potrafi twój App”, a Dev Mode — to sposób, by dać ChatGPT URL, pod którym te możliwości są zadeklarowane.

9. Gdzie szukać błędów i jak odróżnić „psuje się u mnie” od „psuje się u ChatGPT”

Nikt nie lubi pół godziny szukać bugów „po złej stronie systemu”, więc warto od razu wyrobić nawyk patrzenia we właściwe miejsce.

Jeśli błąd pojawia się przy tworzeniu konektora. Jeżeli przy tworzeniu konektora ChatGPT pisze, że nie może podłączyć App, w pierwszej kolejności sprawdź logi twojego serwera dev i tunelu. Jeśli w terminalu, gdzie działa npm run dev, w ogóle nie ma przychodzących żądań do /mcp — problem jest na ścieżce ChatGPT → tunel. Jeśli żądania są, ale serwer zwraca 500 albo sypie błędem w konsoli — problem jest w twoim kodzie MCP.

Jeśli konektor jest już utworzony, ale psuje się na czacie. Kiedy konektor już istnieje, a na czacie okresowo pojawia się belka „App unavailable / App broken”, to niemal zawsze oznacza, że:

• serwer dev padł (Next.js przestał nasłuchiwać portu 3000);
• tunel jest wyłączony albo zmienił się URL;
• endpoint MCP zwraca błąd, timeout lub odpowiada bardzo długo.

Osobno o UI/widżecie. Przy problemach z UI (widżet się nie renderuje, pusty ekran, dziwne style) zajrzyj także do DevTools przeglądarki. Widżet ładuje się w iframe i w konsoli tego iframe widać błędy JavaScript/React — dokładnie tak jak w zwykłej aplikacji webowej.

Z czasem zaczniesz rozróżniać „pachnie tunelem” od „pachnie Next.js” po samym typie błędu, ale na razie wystarczy pamiętać: masz trzy potencjalne punkty awarii — twój kod, tunel i ChatGPT, i najrzadziej problem leży po stronie ChatGPT.

Insight

Jeśli czytasz ten tekst i nie masz płatnego tunelu, to możesz go kupić od razu. I tak zrobisz to w ciągu najbliższych kilku dni. Oszczędzisz sobie nerwów.

10. Typowe błędy przy pracy z Dev Mode

Błąd nr 1: zapomniano włączyć Developer Mode, pół godziny szukasz przycisku Create.
Czasem deweloperzy od razu wchodzą do ChatGPT, klikają w ustawienia Apps & Connectors i nie widzą tam nic ciekawego. Bez włączonego Developer Mode przycisku tworzenia konektora może po prostu nie być. Zawsze zaczynaj od sprawdzenia, czy Dev Mode jest włączony w Advanced settings, zwłaszcza na nowych kontach lub w innej przeglądarce.

Błąd nr 2: wklejono URL bez /mcp lub w ogóle nie MCP‑endpoint.
Klasyk: do pola URL wkleja się https://myapp-dev.ngrok.app bez ścieżki /mcp, albo wręcz URL landing page/określonej innej usługi. ChatGPT grzecznie puka tam protokołem MCP, nie znajduje oczekiwanego interfejsu i odpowiada błędem połączenia. Szablon‑starter Next.js jasno mówi: podłączać się trzeba do URL, który prowadzi na /mcp — i właśnie jego należy wskazać w Dev Mode.

Błąd nr 3: próba użycia http://localhost:3000/mcp bezpośrednio.
Intuicyjnie chce się wkleić do pola URL ten http://localhost:3000/mcp, który widzisz w logach serwera dev. Ale ChatGPT działa w chmurze, a nie na twoim laptopie, i do twojego localhost nie ma dostępu. Ponadto ChatGPT wymaga HTTPS. Dlatego bez tunelu lub zdalnego deploya nic z tego nie wyjdzie. To nie bug ChatGPT, tylko normalna izolacja sieciowa.

Błąd nr 4: zapomniano o Refresh po zmianie schematu MCP.
Po udanym handshake ChatGPT keszuje listę narzędzi i metadanych, aby nie odpytywać serwera za każdym razem. Jeśli dodałeś nowy tool albo zmieniłeś jego inputSchema, a ChatGPT nadal zachowuje się po staremu, niemal na pewno potrzebny jest Refresh konektora w sekcji Apps & Connectors. Bez tego model po prostu nie wie, że narzędzia się zmieniły.

Błąd nr 5: próba debugowania Dev Mode, gdy serwer dev nie działa.
Brzmi oczywiście, ale zdarza się często: student zdalnie ustawia Dev Mode i tunel, chociaż w terminalu już dawno nie kręci się npm run dev albo projekt się nie buduje z powodu błędu składni. Dopóki lokalny serwer dev leży, bez sensu gonić błędy Dev Mode. Zawsze najpierw doprowadź do tego, by http://localhost:3000 działał w twojej przeglądarce, i dopiero potem podłączaj ChatGPT.

Błąd nr 6: oczekiwanie, że Dev Mode to „inna, wszystko rozumiejąca” model.
Czasem wydaje się, że skoro włączyliśmy Dev Mode, to teraz model „wie” o naszej aplikacji wszystko. W rzeczywistości Dev Mode nie zmienia samego modelu, tylko daje mu dostęp do twojego serwera MCP i narzędzi. Jeśli narzędzia są opisane mętnie, opis App nieprecyzyjny albo logika serwera dziwna, model będzie się gubił tak samo, jak każdy deweloper, który otworzył słabo udokumentowane API. Dobre metadane i narzędzia — to temat kolejnych modułów, ale warto o tym pamiętać już teraz.

Błąd nr 7: używanie Dev Mode jako produkcji.
Kusi: „Skoro wszystko nam działa w Dev Mode, dajmy link użytkownikom, niech podłączą App pod ten URL”. Problem w tym, że Dev Mode nie jest przeznaczony do masowego użycia: tunele są niestabilne, konfiguracje mogą się psuć, a sam ChatGPT może zmieniać zachowanie Dev Mode bez kompatybilności wstecznej. Dla realnych użytkowników jest Store i deploy produkcyjny. Dev Mode — to wyłącznie twoje laboratorium.