# Les 15 — Huiswerk
## Eigen PDF + simpele chat-UI + RAG.md

**Vak:** AI-Assisted Development
**Opleiding:** NOVI Hogeschool Utrecht
**Deadline:** Voor Les 16 — MCP servers
**Inleveren:** GitHub repo + `RAG.md` in root

---

## Doel

Bouwt voort op de **lesopdracht** (werkende PDF Q&A app met 1 PDF). In dit huiswerk:

- Index een echte PDF van minimaal 20 pagina's
- Maak een simpele upload + chat-UI
- Documenteer 5 vragen + 1 fail-case in `RAG.md`

---

## Onderdeel A — Echte PDF + UI (verplicht)

### Stap 1 — Kies een PDF

Kies een PDF van minimaal 20 pagina's, iets dat jou interesseert:
- Studieboek-hoofdstuk
- Open-source whitepaper (LLaMA, RAG-papers)
- Bedrijfsjaarverslag
- Wikipedia-artikel als PDF geprint
- Game manual

Moet text-based zijn (geen scan).

### Stap 2 — Upload-UI

`app/page.tsx` — file upload + lijst van geïndexeerde docs:

```tsx
"use client";
import { useState } from "react";

export default function Page() {
  const [file, setFile] = useState<File | null>(null);
  const [indexing, setIndexing] = useState(false);
  const [result, setResult] = useState<string>("");

  async function handleUpload() {
    if (!file) return;
    setIndexing(true);
    const fd = new FormData();
    fd.append("file", file);
    const res = await fetch("/api/index", { method: "POST", body: fd });
    const data = await res.json();
    setResult(`${data.chunks} chunks geïndexeerd`);
    setIndexing(false);
  }

  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">PDF Q&A</h1>
      <input type="file" accept=".pdf"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
      <button onClick={handleUpload} disabled={indexing}
        className="ml-3 bg-blue-600 text-white px-4 py-2 rounded">
        {indexing ? "..." : "Index"}
      </button>
      {result && <p className="mt-4 text-green-600">{result}</p>}

      <ChatBox />
    </main>
  );
}
```

### Stap 3 — Chat-interface (simpel)

Geen useChat / streaming nodig — gewoon een form + lijst van vragen+antwoorden:

```tsx
"use client";
import { useState } from "react";

export function ChatBox() {
  const [q, setQ] = useState("");
  const [history, setHistory] = useState<{q: string; a: string}[]>([]);
  const [loading, setLoading] = useState(false);

  async function ask() {
    if (!q.trim()) return;
    setLoading(true);
    const res = await fetch("/api/ask", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ question: q }),
    });
    const data = await res.json();
    setHistory((h) => [...h, { q, a: data.answer }]);
    setQ("");
    setLoading(false);
  }

  return (
    <div className="mt-8">
      <div className="flex gap-2 mb-4">
        <input value={q} onChange={(e) => setQ(e.target.value)}
          placeholder="Stel een vraag..."
          className="flex-1 border p-2 rounded" />
        <button onClick={ask} disabled={loading}
          className="bg-blue-600 text-white px-4 py-2 rounded">
          {loading ? "..." : "Vraag"}
        </button>
      </div>
      <ul className="space-y-3">
        {history.map((item, i) => (
          <li key={i} className="border rounded p-3">
            <p className="font-semibold">Q: {item.q}</p>
            <p className="text-gray-700 mt-1">{item.a}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

### Eisen

- [ ] Upload werkt — file input + index endpoint call
- [ ] Geïndexeerde docs zichtbaar (chunks count)
- [ ] Chat-interface werkt (vraag/antwoord)
- [ ] Antwoorden zijn duidelijk gebaseerd op PDF-inhoud

---

## Onderdeel B — `RAG.md` documentatie (verplicht)

Schrijf in repo-root.

### Sectie 1 — Document info

- Bestandsnaam + onderwerp
- Aantal pagina's
- Aantal chunks na indexing
- Chunk-size + overlap die je gebruikt hebt

### Sectie 2 — 5 succesvolle vragen

Voor elk:

```markdown
**Vraag 1:** "Wat zijn de drie hoofdkenmerken van X?"

**Antwoord (samenvatting):** ...

**Top chunks (top 2-3):**
- Source page 12 — "X heeft drie kenmerken..."
- Source page 14 — "Het derde kenmerk..."
```

### Sectie 3 — 1 fail-case

Een vraag waar RAG het **niet goed deed**:

```markdown
**Vraag:** "Wat staat er over Y?"

**Antwoord (incorrect):** "Y wordt niet besproken in het document."

**Wat ging mis:** Y wordt wel besproken op pagina 8, maar onder een ander
woord (Z). Embedding van "Y" was te ver van embedding van paragraaf over "Z".

**Wat zou helpen:** Synoniem-expansion in de query, of hybrid search met keyword.
```

### Sectie 4 — Eén observatie

Iets wat opviel:
- Welke vragen werken het best?
- Hoe lang duurt index van een PDF van X pagina's?
- Verschil tussen vage en specifieke vragen?

### Vorm

- Max 500 woorden totaal
- Concrete cijfers + voorbeelden
- Mag wat informeel

---

## Bonus (optioneel)

### Bonus 1 — Streaming antwoorden

Gebruik `streamText` in plaats van `generateText` voor word-by-word output.

### Bonus 2 — Source-citations in UI

Toon naast elk antwoord de source-page-nummers van de top chunks.

### Bonus 3 — Multi-document

Index 2-3 verschillende PDFs. Documenteer hoe AI ermee omgaat.

---

## Inleveren

1. **GitHub repo URL** in Brightspace
2. **`RAG.md`** in repo-root (4 secties)
3. **Working app** lokaal demonstreerbaar (`pnpm dev`)

---

## Beoordeling

| Criterium | Punten |
|-----------|--------|
| A — UI + indexing + chat werkend | 5 |
| B — RAG.md compleet (4 secties) | 3 |
| Fail-case analyse is concreet | 1 |
| Antwoorden zijn echt gebaseerd op PDF | 1 |
| **Totaal** | **10** |

Voldoende = 6+. Bonus telt mee bij twijfelgevallen.

---

## Tijd-indicatie

| Onderdeel | Tijd |
|-----------|------|
| A — UI + chat | 45 min |
| B — RAG.md schrijven (incl. testen) | 30 min |
| **Totaal** | **~1,5 uur** |

---

## Veelvoorkomende valkuilen

| Probleem | Oplossing |
|----------|-----------|
| Scan-PDF — geen text | unpdf werkt niet op image-PDFs. Kies andere PDF |
| Vector dimension mismatch | Index én query moeten zelfde model gebruiken |
| Top-1 is altijd irrelevant | Chunks te klein, of vraag te abstract — experimenteer |
| Cost-pieken bij grote PDF | Indexing per chunk-batch van 100 ipv all-at-once |
| RAG hallucineert | Prompt strikter: "Als info niet in context staat, zeg dat" |

---

## Tips

- **Test met simpele vragen eerst** — zorg dat basis werkt voor complexer wordt
- **Log similarity scores** — onder 0.4 is meestal niet relevant
- **Eén goede fail-case is meer waard dan 10 succesvolle**
- **Houd het simpel** — geen agents, geen multi-step. Just RAG.

Volgende les: MCP — Model Context Protocol. Tot dan!