fix: lessons

Les17-Production-Polish/Les17-Lesopdracht.md

@@ -0,0 +1,160 @@
+# Les 17 — Lesopdracht
+## Langfuse setup + eerste traces
+
+**Vak:** AI-Assisted Development
+**Duur:** 30 min in-class
+
+---
+
+## Doel
+
+Aan het einde: Langfuse hangt aan je Polderfest-chat (of een willekeurige AI-app). Je ziet elke chat-call in het Langfuse-dashboard met prompt, response, tokens, cost, latency.
+
+---
+
+## Stap 1 — Langfuse account
+
+1. Ga naar https://cloud.langfuse.com — sign up (mag met Google/GitHub)
+2. New project — naam: `polderfest-chat`
+3. Settings → API Keys → kopieer **Public Key** + **Secret Key**
+
+---
+
+## Stap 2 — Install
+
+In je polderfest-chat repo (uit Les 12):
+
+```bash
+pnpm add langfuse-vercel langfuse
+```
+
+`.env.local`:
+```
+LANGFUSE_PUBLIC_KEY=pk-lf-...
+LANGFUSE_SECRET_KEY=sk-lf-...
+LANGFUSE_BASE_URL=https://cloud.langfuse.com
+```
+
+---
+
+## Stap 3 — Wrap je chat-route
+
+`app/api/chat/route.ts` — voeg `experimental_telemetry` toe aan je `streamText` of `generateText`:
+
+```typescript
+import { streamText, convertToModelMessages } from "ai";
+import { openai } from "@ai-sdk/openai";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-4o-mini"),
+    messages: convertToModelMessages(messages),
+    tools: { /* je bestaande tools */ },
+    stopWhen: stepCountIs(5),
+    experimental_telemetry: {
+      isEnabled: true,
+      functionId: "polderfest-chat",
+      metadata: {
+        userId: "anonymous",
+      },
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+---
+
+## Stap 4 — Telemetry exporter
+
+`instrumentation.ts` in project-root:
+
+```typescript
+import { registerOTel } from "@vercel/otel";
+import { LangfuseExporter } from "langfuse-vercel";
+
+export function register() {
+  registerOTel({
+    serviceName: "polderfest-chat",
+    traceExporter: new LangfuseExporter(),
+  });
+}
+```
+
+`pnpm add @vercel/otel @opentelemetry/api`
+
+`next.config.ts` — enable instrumentation:
+```typescript
+export default {
+  experimental: {
+    instrumentationHook: true,
+  },
+};
+```
+
+---
+
+## Stap 5 — Test
+
+```bash
+pnpm dev
+```
+
+Open http://localhost:3000/chat — stel 3 vragen.
+
+Open https://cloud.langfuse.com → jouw project → **Traces** tab.
+
+Je ziet:
+- 3 traces (één per vraag)
+- Per trace: prompt, response, tool-calls, model, tokens, cost
+- Latency in ms
+
+Klik op een trace → zie de volledige conversation tree.
+
+---
+
+## Eisen
+
+- [ ] Langfuse account + project aangemaakt
+- [ ] API keys in `.env.local`
+- [ ] `experimental_telemetry` actief in chat-route
+- [ ] OpenTelemetry exporter geconfigureerd
+- [ ] Min 3 traces zichtbaar in dashboard
+- [ ] Per trace: tokens + cost + latency zichtbaar
+
+---
+
+## Tijdsindeling (30 min)
+
+| Stap | Tijd |
+|------|------|
+| 1-2 — Setup + install | 8 min |
+| 3-4 — Code-changes | 12 min |
+| 5 — Test + debug | 10 min |
+
+---
+
+## Veelvoorkomende problemen
+
+| Symptoom | Oplossing |
+|----------|-----------|
+| Geen traces in dashboard | Wacht 30s — flush is async. Of `await langfuse.flushAsync()` toevoegen |
+| "instrumentationHook is required" | `next.config.ts` aanpassen + restart `pnpm dev` |
+| Cost = $0 | Klopt vaak voor mini-calls — check `tokens` is wel goed |
+| Tool-calls niet zichtbaar | Update naar laatste AI SDK + langfuse-vercel versies |
+| 401 Unauthorized | Public + secret key check, regio (US vs EU) klopt |
+
+---
+
+## Klaar?
+
+Verder met huiswerk:
+- Eval-suite (10 cases voor je app)
+- Prompt-injection bescherming
+- Per-user rate limiting + cost-strategie
+- `POLISH.md` met screenshots + cijfers
+
+Zie `Les17-Huiswerk.pdf`.