Wróć do projektów
Web Development · RAG / AI
2026 W realizacji

Vaeloq

Aplikacja Next.js realizująca pełny pipeline RAG — wgrywasz PDF, system tnie go na fragmenty, indeksuje jako wektory w pgvector i odpowiada na pytania, osadzając odpowiedź w konkretnych cytatach ze źródła.

TypeScript
Język
Next.js 16
Framework
Gemini
LLM + Embeddingi
pgvector
Wyszukiwanie

Dokument,
z którym można rozmawiać

Vaeloq zamienia statyczny PDF w źródło, które można odpytywać w języku naturalnym. Zamiast przeszukiwać dokument ręcznie, użytkownik zadaje pytanie, a model generuje odpowiedź opartą wyłącznie na fragmentach faktycznie obecnych w treści.

Każda odpowiedź jest strumieniowana na żywo i osadzona w konkretnych fragmentach źródłowych wraz z numerem strony i procentowym dopasowaniem — dzięki czemu można zweryfikować, skąd pochodzi informacja.

📄
Parsowanie PDF
Ekstrakcja tekstu i podział na logiczne fragmenty (chunking)
🧠
Embeddingi Gemini
Każdy fragment zamieniany na wektor i zapisywany w Supabase
🔎
Wyszukiwanie wektorowe
pgvector znajduje fragmenty najbardziej podobne do pytania
💬
Strumieniowane odpowiedzi
Odpowiedź generowana na żywo, token po tokenie
🏷️
Cytaty źródłowe
Każda odpowiedź linkuje do fragmentów ze stroną i % dopasowania

Stack technologiczny

⚙️
TypeScript
Główny język projektu — API routes, komponenty i logika biblioteczna.
Next.js 16
App Router — split-screen layout, API routes process-document i chat.
@google/genai (Gemini)
Model do generacji odpowiedzi oraz do liczenia embeddingów fragmentów.
🗄️
Supabase + pgvector
Postgres z rozszerzeniem pgvector do przechowywania i przeszukiwania wektorów.
📑
pdf-parse
Ekstrakcja tekstu z plików PDF po stronie serwera.
🧱
shadcn/ui
Komponenty interfejsu — panel dokumentu, panel czatu, dialogi.
🎞️
Framer Motion
Animacje przejść i mikrointerakcji w interfejsie czatu.
🎯
Lucide React
Zestaw ikon używany w całym interfejsie.

Pipeline RAG krok po kroku

01
Wgranie dokumentu

document-panel.tsx wysyła plik PDF do API route app/api/process-document.

POST /api/process-document
Content-Type: multipart/form-data
02
Ekstrakcja i chunking

lib/document-processor.ts wyciąga tekst przez pdf-parse i dzieli dokument na logiczne fragmenty.

const chunks =
  chunkText(rawText, {
    maxTokens: 500
  });
03
Embeddingi

lib/embeddings.ts wysyła każdy fragment do modelu Gemini i otrzymuje wektor reprezentujący jego treść.

const vector =
  await embedChunk(chunk.text);
04
Zapis w pgvector

lib/supabase.ts zapisuje fragmenty i wektory w tabeli Postgres z rozszerzeniem pgvector.

insert into chunks
  (content, embedding, page)
values ($1, $2, $3);
05
Wyszukiwanie podobieństwa

API chat zamienia pytanie na wektor i pobiera najbardziej podobne fragmenty (cosine similarity).

order by embedding <=> $1
limit 5;
06
Generacja i streaming

Fragmenty + pytanie trafiają do Gemini, a odpowiedź jest strumieniowana do chat-panel.tsx wraz z cytatami.

for await (const part of stream)
  send(part.text);

Co warto wiedzieć

extpdf-parse, pdfjs-dist i @napi-rs/canvas są w serverExternalPackages, by Next.js ich nie bundlował
sqlWymagane rozszerzenie pgvector w projekcie Supabase
Skrypt supabase/schema.sql trzeba dodać ręcznie — nie ma go jeszcze w repo
keyService role key używany tylko po stronie serwera, nigdy w kliencie
srcKażda odpowiedź zawiera źródło — numer fragmentu, stronę i % dopasowania
WIPProjekt aktywnie rozwijany — interfejs i pipeline mogą się jeszcze zmieniać

Jak uruchomić

Wymagania
Node.js 18+ npm Projekt Supabase z pgvector Klucz Gemini API
1
Klonuj repozytorium i zainstaluj zależności
git clone https://github.com/Andrii418/vaeloq
cd vaeloq
npm install
2
Utwórz plik .env.local
GEMINI_API_KEY=your_gemini_api_key
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_publishable_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_secret_key
3
Przygotuj bazę danych Supabase
-- w SQL Editorze Supabase
-- uruchom supabase/schema.sql
-- (tworzy tabelę fragmentów + rozszerzenie pgvector)
4
Uruchom dewelopersko
npm run dev
# otwórz http://localhost:3000
Wszystkie projekty