LOCAL AI / RAG STEP BY STEP
Local RAG Lab
Build a working RAG pipeline entirely in your browser. Run each stage separately and inspect the code, operation log, and output passed to the next stage.
GUIDED WORKFLOW
From browser setup to an answer with source citations
The panel on the right shows the workflow and the status of every stage. The workspace displays completed stages and one active stage; future stages open when you select Next.
Step 1. Choose a model and configure the execution environment
First choose where the generative model will run. WebGPU mode uses WebLLM and GPU acceleration and offers several compact models. When WebGPU is unavailable, the lesson switches to Transformers.js and WebAssembly. CPU mode offers two models: multilingual Qwen2.5 0.5B and the smaller, English-oriented SmolLM2 360M. CPU generation is considerably slower, but it lets the complete RAG workflow run without a compatible GPU. The lab then checks the browser, reports every library and model download, starts a Worker, and performs a real generation smoke test.
Parameters
Current stageCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Step 2. Load the source documents
Create the external knowledge base. RAG does not retrain the model on these texts: the documents remain separate, are normalized, and keep their source metadata. The output is a document list with names, origins, and character counts.
Parameters
LockedCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Step 3. Split documents into chunks
Long documents are divided into smaller passages that can be searched and inserted into a prompt. Chunk size controls how much context each passage contains; overlap repeats text at the boundaries so related facts are less likely to be separated.
Parameters
LockedCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Step 4. Build the retrieval index
Create two searchable representations for every chunk: BM25 term statistics and a simplified 256-dimensional hash vector. k1 controls how quickly repeated occurrences stop increasing the score, while b controls length normalization. The hash vector is used here for an understandable demonstration; a production RAG system would normally use a trained embedding model.
Parameters
LockedCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Step 5. Retrieve relevant chunks
Process the question with the same methods used for the documents. Score every chunk with BM25 and the hash vector, then keep the Top K results. The BM25 weight controls the balance between exact term matching and vector similarity. Only these passages enter the prompt; information missed here is unavailable to the generator.
Parameters
LockedCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Step 6. Build the augmented prompt
Combine the system instruction, the retrieved passages labelled [S1], [S2], and the user question. The result is the exact text sent to the local model. This stage also shows the prompt size and verifies that every source has a citation label.
Parameters
LockedCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Step 7. Generate the answer locally
Send the augmented prompt to the configured WebGPU engine. The answer appears as it is generated. The instruction requires a citation [S#] after each checkable statement and an explicit note when the supplied context is insufficient.
Parameters
LockedCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Step 8. Check source support and summarize
Split the answer into claims and run a simple lexical support check using the cited [S#] labels and term overlap with retrieved passages. Higher thresholds require stronger overlap before a claim is marked as supported. This is an educational heuristic, not proof of factual correctness. The final report summarizes the model, documents, index, retrieval, prompt, answer, and source coverage.
Parameters
LockedCode being executed
Operation log
This stage has not run yet.- This stage has not run yet.
Stage result
This stage has not run yet.This stage has not run yet.
Overall lab summary
The summary will appear after stage 8 completes successfully.