RAG LAB Module 01: Basic RAG
Interactive Explainer

Learn RAG from the inside out.

See how documents become context, and how context becomes an answer.

Start learning Open Lab
📄 Document
→
đŸ§© Chunks
→
🌌 Embeddings
→
🔍 Search
→
📩 Context
→
đŸ€– LLM
02

The problem RAG solves

What happens when an LLM needs information it was never trained on?

Without RAG
User

“Quanto custa a consulta na DentCare?”

LLM (Knowledge Cutoff)

“I don't know.” (or presents an invented hallucinated price)

VS
With RAG
External Evidence Provided

“A consulta odontológica inicial custa R$ 250.”

User

“Quanto custa a consulta na DentCare?”

LLM (Augmented with Evidence)

“A consulta odontológica inicial custa R$ 250.”

💡

Core Takeaway: RAG (Retrieval-Augmented Generation) gives the model relevant external information before generation.

03

Documents: The External Knowledge Source

RAG starts with unstructured external information. In this interactive guide, we use a Dental Clinic sample document.

📄 Sample Document: DentCare Clinic Information Plain Text Source
A clĂ­nica DentCare funciona de segunda a sexta-feira, das 8h Ă s 18h. A consulta odontolĂłgica inicial custa R$ 250. A Dra. Ana Ă© especialista em ortodontia e atende Ă s terças e quintas. O Dr. Carlos realiza tratamentos de canal e procedimentos de endodontia. Cancelamentos devem ser feitos com pelo menos 24 horas de antecedĂȘncia. A clĂ­nica aceita pagamentos via PIX, cartĂŁo de crĂ©dito e cartĂŁo de dĂ©bito.
  • RAG starts with external information: PDFs, databases, web pages, or raw text.
  • For this educational walkthrough, we use a simple clean text sample.
Python Equivalent python 
document = """
A clĂ­nica DentCare funciona de segunda a sexta-feira, das 8h Ă s 18h.
A consulta odontolĂłgica inicial custa R$ 250.
A Dra. Ana é especialista em ortodontia e atende às terças e quintas.
O Dr. Carlos realiza tratamentos de canal e procedimentos de endodontia.
Cancelamentos devem ser feitos com pelo menos 24 horas de antecedĂȘncia.
A clínica aceita pagamentos via PIX, cartão de crédito e cartão de débito.
"""
04

Chunking: Splitting Large Documents

Large documents need smaller, manageable pieces to fit into vector search and context windows.

Quick Presets:
140
30

Generated Chunks (0)

Stable evidence identity Evidence A — Consultation price

“A consulta odontológica inicial custa R$ 250.”

Resolving current chunk and retrieval status

Python Code (Updated Live) python 
chunks = split_text(
    document,
    chunk_size=140,
    overlap=30
)
05

Embeddings: Converting Meaning into Vectors

This browser lesson uses simulated educational feature vectors to demonstrate the retrieval mechanism. It does not run a real embedding model.

“Meu cachorro está doente.” ↓ embed() ↓ [ 0.21, -0.42, 0.71, 0.15, ... ]
“Meu cão precisa de um veterinário.” ↓ embed() ↓ [ 0.19, -0.40, 0.68, 0.18, ... ]
“Como instalar Docker no Linux.” ↓ embed() ↓ [-0.85, 0.77, -0.12, 0.91, ... ]

Illustrative 2D Projection

⚠ Simulated educational feature vectors. Real embeddings normally have hundreds or thousands of dimensions; this visualization teaches the mechanism and does not reproduce a real embedding model.

Click any point above to inspect its simulated vector and illustrative placement

Real-world Python Equivalent (not executed here) python 
# Embed chunks to store in vector database
chunk_embeddings = embed(chunks)

# Example sentence embedding
vector = embed("Meu cachorro estĂĄ doente.")
06

Query Embedding: Vectorizing the Question

The user's question must be converted into the exact same vector space so we can compare it to document chunks.

Preset Questions:
Query Text “Quanto custa uma consulta?”
↓
Simulated Query Feature Vector (Normalized) [0.78, 0.12, -0.45, 0.88, ...]
07

Similarity Search: Comparing Vectors

Which chunks point in a similar direction to the query in the simulated educational vector space?

Cosine Similarity

Cosine similarity measures the cosine of the angle Ξ between two vectors:

-1.0Opposite 0.0Orthogonal 1.0Same direction
Simulated educational vector engine

Ranked Chunks by Dense Cosine Similarity

📐 Interactive Geometric Cosine Angle Visualizer

Explore cos(Ξ) = (u · v) / (||u|| ||v||)
Unit Circle Projection
Angle Ξ 24.5°
Cosine Similarity cos(Ξ) 0.910
Directional Alignment Strong Alignment
24.5°
cos(Ξ) = (q · c) / (||q|| ||c||)
Python Similarity Search python 
scores = cosine_similarity(
    query_embedding,
    chunk_embeddings
)
ranked_chunks = sort_by_score(scores)
08

Top-K Retrieval

Top-K selects the highest-ranked dense results that will enter the context.

3
Selected Chunks 3 of 4
Selected Text 0 chars
Estimated Tokens (≈ chars Ă· 4) ≈0 tokens

Retrieved Chunks Selection (Top K = 3)

Python Top-K Selection python 
# Keep the K highest cosine-similarity results
retrieved_chunks = top_k(ranked_chunks, k=3)
09

Context: Assembly of Retrieved Knowledge

Retrieved chunks become context.

📌

Crucial Distinction: The LLM does not search the vector database itself. The Retriever performs the search and places the facts into the Context buffer.

📩 Context Buffer (Evidence payload for LLM) Retriever Output
10

Augmented Prompt: Constructing the Payload

Now we augment the prompt by uniting system instructions, retrieved context, and the user's question.

1. SYSTEM INSTRUCTIONS

Answer using only the provided context below. If you don't know, state clearly that information is unavailable.

2. RETRIEVED CONTEXT
3. USER QUESTION

“Quanto custa uma consulta?”

Prompt = Instructions + Retrieved Context + User Question
Python Prompt Construction python 
prompt = f"""
Answer using only the context below.

Context:
{context}

Question:
{query}
"""
11

Simulated Generation & Grounding

Only now is a deterministic simulated answer produced. It is marked grounded only when its complete canonical evidence is present in the active context.

Prompt → LLM → Answer
Simulated LLM Output

“A consulta odontológica inicial custa R$ 250.”

Evidence Citation:
đŸ›Ąïž Waiting for complete evidence in the active context.
12

Complete Basic RAG Pipeline

Now that every concept has been learned individually, see how the Basic RAG components connect.

1. INDEXING (Offline Preparation)
📄 Document
→
đŸ§© Chunking
→
🌌 Simulated Chunk Vectors
→
đŸ—„ïž Vector Store
2. RETRIEVAL & GENERATION (Online Query Flow)
💬 User Query
→
✹ Simulated Query Vector
→
🔎 Dense Cosine Search
→
🎯 Top-K Selection
→
📩 Context Buffer
→
📝 Prompt Builder
→
đŸ€– LLM Generation
Status: Ready to run pipeline simulation.

You now know the components.

Now break them, tune them, and inspect the complete system in the interactive debugger lab.

Future modules will cover Hybrid Retrieval, Reranking, and Evaluation as separate advanced topics.

Open RAG Lab →