Ten wpis to notatki z obszernej prezentacji Watch Me Build + Ship a COMPLEX Web App (Lovable + n8n) kanału The AI Automators, w której dokumentują proces budowy kompleksowej aplikacji AI przy użyciu wyłącznie narzędzi bezprogramistycznych.

TL;DR

The AI Automators zbudowali w 3 dni pełnowartościowy klon Google NotebookLM używając tylko narzędzi bezprogramistycznych
Stos technologiczny: Lovable (interfejs React), Supabase (uwierzytelnianie/przechowywanie), N8N (przepływy pracy)
Kluczowe funkcje: przesyłanie dokumentów, czat AI z cytowaniami źródeł, generowanie podcastów, system notatek
Podejście „interfejs najpierw” okazało się kluczowe – budowa UI przed integracją z zapleczem
„Vibe-coding” – iteracyjny dialog z AI zamiast idealnych poleceń
Dwa warianty wdrożenia: wersja w chmurze z OpenAI/Gemini oraz całkowicie lokalna z Ollama
Rzeczywiste wyzwania: przekroczenia limitu czasu edge functions, zarządzanie stanami, kaskadowe usuwanie
Wynik: dwa repozytoria GitHub z 200+ gwiazdek i działającymi instalacjami

Wyzwanie: kompleksowa aplikacja AI bez pisania kodu

The AI Automators rozpoczęli swój eksperyment od frustracji typowymi „vibe coding” tutorialami na YouTube. Jak zauważają autorzy, większość z nich koncentruje się na prostych aplikacjach typu „to-do list”. Postanowili sprawdzić, czy da się zbudować naprawdę złożoną aplikację full-stack.

Cel był ambitny: sklonować Google NotebookLM – narzędzie oferujące przesyłanie plików, przetwarzanie dokumentów przez AI, czat z techniką RAG, cytowania w tekście oraz generowanie podcastów. Zespół założył sobie limit trzech dni na całość projektu.

Wybór NotebookLM jako punktu odniesienia nie był przypadkowy. Aplikacja Google’a reprezentuje poziom złożoności, który zwykle wymaga miesięcy pracy zespołu programistów.

Stos technologiczny i architektura

Według The AI Automators, kluczem do sukcesu był przemyślany wybór narzędzi i podział odpowiedzialności:

Lovable służy do budowy interfejsu użytkownika w React. Jak podkreślają autorzy, pozwala na szybkie prototypowanie interfejsu bez pisania kodu, generując aplikację w JavaScript na podstawie poleceń w języku naturalnym.

Supabase pełni rolę zaplecza – obsługuje uwierzytelnianie użytkowników, bazę danych PostgreSQL oraz przechowywanie plików. Zespół wykorzystuje także edge functions do komunikacji z N8N.

N8N zarządza przepływami pracy – od przetwarzania dokumentów, przez dzielenie na fragmenty, po zapisywanie do bazy wektorowej. Autorzy wybrali to narzędzie ze względu na elastyczność w budowaniu złożonych procesów automatyzacji. Kluczowe: wszystka złożona logika i długotrwałe operacje zostały przeniesione do N8N, co znacząco odciąża front-end.

Architektura aplikacji ma jasny przepływ danych. Użytkownik loguje się przez Supabase, przesyła dokumenty do magazynu, a ich przetwarzanie odbywa się przez przepływy pracy N8N. Baza wektorowa przechowuje fragmenty dokumentów, umożliwiając kontekstowe odpowiedzi AI.

Kluczowe funkcjonalności Insights LM

The AI Automators nazwali swoją aplikację Insights LM. Oferuje ona pełen zestaw zaawansowanych funkcji:

Przetwarzanie dokumentów i RAG (Retrieval-Augmented Generation)

Wieloetapowy proces umożliwiający rozmowę z dokumentami:

Przesyłanie: użytkownik wysyła plik → Supabase Storage
Przetwarzanie: webhook N8N pobiera i analizuje dokument
Fragmentacja: plik dzielony na mniejsze części (chunki) → baza wektorowa
Cytowania: AI udziela odpowiedzi z klikalnyimi źródłami prowadzącymi do konkretnych linii

Generowanie podcastów – rozwiązanie problemu limitów czasowych

Wyzwanie: Supabase Edge Functions mają limit wykonania, a generowanie audio trwa zbyt długo.

Rozwiązanie dwuetapowe:

Kliknięcie „Generate” → N8N otrzymuje zadanie → natychmiastowa odpowiedź „processing”
W tle: N8N generuje skrypt → synteza mowy → MP3 → Supabase
Real-time subscription automatycznie aktualizuje interfejs po zakończeniu

System notatek

Zapisywanie odpowiedzi AI z zachowaniem cytowań
Własne notatki użytkownika
Edytor WYSIWYG dla nowych wpisów
Tryby widoku/edycji w zależności od typu notatki

Obsługa różnych formatów plików

PDF: ekstrakcja tekstu
MP3: OpenAI transcribe
TXT: bezpośrednie odczytanie
Unified processing: wszystkie formaty przez ten sam przepływ N8N

✅ PRAKTYCZNA LISTA KONTROLNA

Przygotowanie projektu:

Zdefiniuj jasny cel – klarowna wizja (np. klon istniejącej aplikacji)
Wybierz stos technologiczny – dopasuj narzędzia do potrzeb
Konto Lovable (kreator interfejsu)
Projekt Supabase (zaplecze + przechowywanie)
Instancja N8N (przepływy pracy)
Klucze API (OpenAI/Gemini dla wersji w chmurze)
Rozszerzenie Pgvector (w Supabase dla wyszukiwania wektorowego)

Metodologia budowy:

Zastosuj „Front-end First” – buduj UI z atrapami przed logiką
Planuj przed wdrożeniem – proś AI o plan dla większych funkcji
Pracuj iteracyjnie – dialog z AI, poprawianie, udoskonalanie
Odciążaj front-end – złożone operacje do N8N
Sprawdź licencje – szczególnie dla użytku komercyjnego

Proces budowy – „vibe-coding” w praktyce

The AI Automators zastosowali podejście „interfejs najpierw” – budowę interfejsu użytkownika przed integracją z zapleczem. Jak tłumaczą autorzy, minimalizuje to problemy z cofaniem zmian w schemacie bazy danych.

Kluczowym odkryciem był proces iteracyjny, określany jako „vibe-coding”. Polega on na ciągłym dialogu z AI, poprawianiu drobnych błędów i stopniowym udoskonalaniu aplikacji. Zamiast tworzyć idealne, rozbudowane polecenia, autorzy najpierw prosili AI o przygotowanie planu, który następnie akceptowali lub korygowali.

Etapy procesu:

Tworzenie makiet – zrzuty ekranu z NotebookLM wklejane do Lovable
Integracja z Supabase – przemyślany schemat bazy danych
Budowa przepływów N8N – oddzielne procesy dla każdej funkcji

Kluczowe wyzwania techniczne i rozwiązania

Przekroczenia limitu czasu edge functions okazały się największym problemem. W materiale dowiadujemy się, że generowanie audio może trwać do 5 minut, podczas gdy edge functions mają limit 150 sekund (plan darmowy) lub 400 sekund (plan płatny).

Rozwiązaniem było rozdzielenie długotrwałych procesów:

Edge function rozpoczyna zadanie i natychmiast zwraca status „przetwarzanie”
Przepływ pracy N8N kontynuuje przetwarzanie w tle
Subskrypcja w czasie rzeczywistym Supabase aktualizuje interfejs po zakończeniu

Zarządzanie stanami między komponentami wymagało synchronizacji między N8N a interfejsem użytkownika. The AI Automators wykorzystali webhooks oraz możliwości Supabase w czasie rzeczywistym do utrzymania spójności danych.

Cascade deletion oznaczała konieczność usuwania powiązanych rekordów z wielu tabel oraz plików z magazynu. W prezentacji widzimy implementację automatycznego czyszczenia osieroconych danych.

Spójność nazw zmiennych stała się problemem podczas iteracji z AI. Jak pokazują autorzy, Lovable czasami zmieniało nazwy zmiennych (np. file_path → filePath), co powodowało błędy w komunikacji z webhookami.

System RAG i baza wektorowa

The AI Automators zaimplementowali Retrieval Augmented Generation używając pgvector w Supabase. Dokumenty są automatycznie dzielone na fragmenty z metadanymi zawierającymi notebook_id oraz source_id.

Agent AI w N8N wykorzystuje Supabase Vector Store jako narzędzie do wyszukiwania kontekstu. W materiale podkreślane jest znaczenie filtrowania po notebook_id – uniemożliwia to dostęp do dokumentów innych użytkowników.

System cytowań wydobywa numery linii z metadanych fragmentów. Kliknięcie w cytowanie otwiera konkretny dokument i podświetla odpowiednie fragmenty tekstu.

Autorzy zauważyli różnicę w jakości względem NotebookLM. Ich system zwraca 10 fragmentów na zapytanie, podczas gdy NotebookLM może zwracać nawet 90 fragmentów dla złożonych pytań.

Wdrożenie i otwarte oprogramowanie

The AI Automators opublikowali dwa repozytoria na GitHub:

Insights LM Public Repo – wersja w chmurze wykorzystująca OpenAI, Gemini oraz inne usługi w chmurze obliczeniowej. Jak podkreślają autorzy, to najszybszy sposób na uruchomienie aplikacji.

Wersja lokalna – całkowicie autonomiczna implementacja używająca:

Ollama (lokalne LLM)
Local Whisper (transkrypcja)
Koki TTS (generowanie audio)
Konteneryzacja Docker

Zespół stworzył lokalną wersję na życzenie użytkowników dbających o prywatność danych – ukłon w stronę bezpieczeństwa, gdzie dane nigdy nie opuszczają maszyny użytkownika.

Kwestie licencjonowania

Według The AI Automators, Sustainable Use License N8N pozwala na darmowe użycie wewnątrz firmy, ale komercyjne wdrożenia SaaS mogą wymagać licencji enterprise. Alternatywą jest konwersja przepływów pracy N8N do edge functions Supabase.

💡 KLUCZOWY INSIGHT: Paradoks współpracy z AI

Standardowo myślimy, że narzędzia AI do kodowania przejmują rolę programisty. Naszym zadaniem jest napisać idealną instrukcję, a AI dostarczy gotowe rozwiązanie.

W praktyce okazuje się, że narzędzia te działają jak błyskawicznie szybki, ale czasem niedoświadczony asystent. Twoja rola zmienia się z pisania kodu na jego reżyserowanie, testowanie i korygowanie w czasie rzeczywistym.

Dlaczego to jest istotne: To zmienia postrzeganie wartości tych narzędzi. Ich siłą nie jest bezbłędne wykonywanie poleceń, lecz drastyczne skrócenie pętli informacji zwrotnej pomiędzy pomysłem a działającym prototypem.

Test na jutro: Przy następnej interakcji z narzędziem AI, zrezygnuj z tworzenia idealnej, rozbudowanej instrukcji. Zamiast tego, zacznij od prostego polecenia, a uzyskaną odpowiedź potraktuj jako szkic roboczy. Następnie, krok po kroku, koryguj i udoskonalaj go krótkimi, precyzyjnymi komendami.

Wnioski o potencjale rozwoju bezprogramistycznego

Projekt The AI Automators udowadnia, że narzędzia bezprogramistyczne mogą obsłużyć naprawdę złożone scenariusze. Insights LM oferuje zaawansowane funkcje jak wyszukiwanie wektorowe, synchronizacja w czasie rzeczywistym, czy wieloetapowe przepływy pracy.

W materiale podkreślane jest znaczenie przemyślanej architektury. Podział odpowiedzialności między Lovable, Supabase i N8N pozwolił na wykorzystanie mocnych stron każdego narzędzia.

Podejście iteracyjne okazało się kluczowe. Autorzy wielokrotnie cofali zmiany i dzielili duże zadania na mniejsze części, co minimalizowało ryzyko błędów.

Jak pokazuje prezentacja, największą wartością jest szybkość prototypowania. To, co tradycyjnie wymagałoby tygodni pracy zespołu, udało się osiągnąć w 3 dni pracy jednej osoby.

🔧 PROCES BUDOWY KROK PO KROKU

Poniżej znajduje się szczegółowa chronologia budowy aplikacji Insights LM na podstawie nagrania procesu przez The AI Automators.

DZIEŃ 1: Fundamenty i interfejs

Krok 1: Prompt początkowy i projekt podstawowy

Starter prompt: „I need a NotebookLM clone with core features… start by creating a blank project and implement login and logout screen”
Kluczowa zasada: rozpoczynanie od pustego projektu – nie pozwalanie AI „marzyć” o funkcjach
Rezultat: pusta aplikacja React z podstawową strukturą

Krok 2: Połączenie z Supabase

Utworzenie nowego projektu w Supabase (nazwany „My NotebookLM”)
Konfiguracja połączenia w Lovable przez przycisk Supabase
Generowanie hasła do bazy danych automatycznie
Problem: początkowe trudności z łączeniem – rozwiązane po kilku próbach

Krok 3: System uwierzytelniania

Implementacja logowania/wylogowania z wykorzystaniem Supabase Auth
Usunięcie opcji rejestracji – aplikacja tylko dla zaproszonych użytkowników
Utworzenie pierwszego użytkownika ręcznie w panelu Supabase
Test logowania – pierwszy sukces połączenia

Krok 4: Pulpit nawigacyjny z wykorzystaniem zrzutów ekranu

Zrzut ekranu z pulpitu NotebookLM (dwa stany: pusty i z notatnikami)
Wklejenie do Lovable – AI analizuje design i odtwarza podobny
Iteracje stylistyczne – dopracowanie układu elementów
Problem: początkowo za dużo kreatywności AI – konieczność uproszczenia

DZIEŃ 2: Funkcjonalności i baza danych

Krok 5: Interfejs notatnika

Zrzuty ekranu pustego i wypełnionego notatnika z NotebookLM
Analiza przez tryb czatu w Lovable przed implementacją
Budowa trzech sekcji: Sources (lewo), Chat (środek), Studio (prawo)
Czyszczenie interfejsu – usunięcie niepotrzebnych elementów przez tryb edycji

Krok 6: Okno dodawania źródeł

Zrzut ekranu wyskakującego okna z NotebookLM
Implementacja przeciągnij i upuść dla plików
Usunięcie niepotrzebnych opcji (Discover, inne źródła)
Problem: pierwsze podejście nie oddało designu – konieczność powtórzenia

Krok 7: Planowanie bazy danych

Wykorzystanie trybu czatu do analizy potrzeb
Schemat tabel: notebooks, sources, chat_messages, notes
Uproszczenie: usunięcie skomplikowanych funkcji (współpraca, subskrypcje)
Implementacja zasad RLS dla bezpieczeństwa

Krok 8: Tworzenie notatników

Funkcjonalność Create Notebook – przekierowanie do edycji
Edytowalne tytuły notatników bezpośrednio w interfejsie
Funkcja usuwania z oknem potwierdzenia
Problem: wielokrotne błędy w przepływie – iteracyjne naprawy

Krok 9: Przesyłanie plików do Supabase Storage

Zasobniki storage z organizacją według notebook_id
Śledzenie ścieżek plików w bazie danych
Usuwanie plików razem z rekordami bazy
Test: przesyłanie, podgląd, usuwanie

DZIEŃ 2-3: Przepływy pracy N8N

Krok 10: Pierwszy przepływ pracy – Generate Notebook Details

Webhook z uwierzytelnianiem nagłówkowym
Pobieranie pliku z Supabase Storage przez podpisany URL
Ekstrakcja tekstu z PDF (extract from file)
Wywołanie LLM do OpenAI – generowanie tytułu i opisu
Odpowiedź z JSON zawierającym tytuł i opis
Problem: webhook początkowo nie działał (POST vs GET)

Krok 11: Edge function dla komunikacji

Supabase Edge Function do wywoływania webhooków N8N
Zmienne środowiskowe dla URL i uwierzytelniania
Śledzenie statusu: pending → generating → completed/failed
Interfejs ładowania w aplikacji podczas generowania

Krok 12: Funkcjonalność czatu

Nowy przepływ pracy N8N dla obsługi czatu
Agent AI z pamięcią PostgreSQL (połączenie do Supabase)
Session ID = Notebook ID dla izolacji konwersacji
Synchronizacja: N8N zapisuje, Lovable wyświetla z tej samej tabeli
Problem: format wiadomości JSON vs tekst – naprawione parserem

Krok 13: RAG i baza wektorowa

Włączenie pgvector w Supabase
Nowy przepływ pracy „Upsert to Vector Store”
Dzielenie dokumentów (1000 znaków, 200 nakładania)
Metadane: notebook_id, source_id, numery linii
Dodanie Vector Store jako narzędzie w AI Agent
Filtrowanie po notebook_id dla bezpieczeństwa

DZIEŃ 3: Zaawansowane funkcje

Krok 14: System cytowań

Zmiana wyjścia AI Agent na strukturalny JSON
Cytowania z indeksem fragmentu, source_id, liniami
Klikalne linki prowadzące do konkretnych linii dokumentu
Podgląd dokumentu w panelu sources
Podświetlanie fragmentów na podstawie numerów linii
Problem: złożoność interfejsu – wiele iteracji z Lovable

Krok 15: Obsługa różnych formatów

MP3: OpenAI transcribe w przepływie pracy N8N
TXT: bezpośrednie odczytanie jako tekst
Switch node w N8N dla kierowania różnych typów
Ujednolicone przetwarzanie – wszystkie formaty przez ten sam przepływ

Krok 16: Sugerowane pytania

Modyfikacja Generate Notebook Details – dodanie przykładowych pytań
Nowa kolumna w tabeli sources
Przewijanie poziome z klikalnyimi pytaniami
Automatyczne wysyłanie do czatu po kliknięciu

Krok 17: System notatek

Zapisywanie odpowiedzi AI z zachowaniem cytowań
Własne notatki użytkownika
Tryby widoku/edycji w zależności od typu
Generowanie tytułów przez edge function OpenAI

Krok 18: Generowanie podcastów

Przepływ pracy wykorzystujący Google Gemini
System prompt oparty na badaniach Nicole Henning
Wieloetapowy: skrypt LLM → audio Gemini → konwersja FFMPEG
Przesyłanie do zasobnika i odpowiedź z podpisanym URL
Problem: długie przetwarzanie – rozdzielenie na przetwarzanie asynchroniczne

FINALIZACJA: Wdrożenie i otwarte oprogramowanie

Krok 19: Wdrożenie przepływów pracy

Przełączenie z testowych na produkcyjne punkty końcowe
Zarządzanie zmiennymi środowiskowymi
Subskrypcje w czasie rzeczywistym dla aktualizacji interfejsu
Obsługa błędów i logika ponawiania

Krok 20: Publikacja otwartego oprogramowania

Publiczne repozytorium – wersja w chmurze
Lokalne repozytorium – Docker + Ollama + lokalne narzędzia
Dokumentacja i instrukcje konfiguracji
Informacje zwrotne społeczności – ponad 200 gwiazdek pierwszego dnia

Kluczowe obserwacje z procesu:

„Whack-a-mole debugging” – ciągłe naprawianie pojawiających się błędów
Częste przywracanie do poprzednich wersji przy większych błędach
Rozwój oparty na zrzutach ekranu – używanie obrazów zamiast opisów
Tryb czatu w Lovable do planowania większych zmian
Podejście iteracyjne – małe kroki, częste testy
Rzeczywiste problemy – przekroczenia limitów czasu, konflikty nazw, zarządzanie stanami

Tag: Aplikacja Ai

Jak w 3 Dni Zbudować Złożoną Aplikację AI Bez Kodu? Studium Przypadku InsightsLM #EN235