Groot finale: een AI-helper voor je project

Breng alles samen – een widget, een kaart en een slimme chatbot die je website kent.

Het laatste stuk: een bot die je website kent

Je chatbot weet tot nu toe alleen wat in de system prompt staat. De laatste truc: geef hem de data van je website in de prompt. Dat heet AI context geven:

const informace = `
You are the helper for the FK Sokol Nebovidy website. Here is the information:
- Practice: Tuesday and Thursday at 5:00 PM, field behind the school
- Next match: Saturday at 10:00 AM, home game against Lipová
- Coach: Mr. Novák, contact info is on the Contacts page
- Membership fee: $60 per semester

Answer in English, briefly and in a friendly tone. When the
answer isn't in the information above, say: "I don't know that,
check the Contacts page or ask the coach."
`;

// ...in the endpoint:
messages: [
  { role: 'system', content: informace },
  { role: 'user', content: otazka },
],

Nu beantwoordt de bot echte vragen over je project – en zegt beleefd “I don’t know” tegen de rest. Zo bouwen echte web-AI-assistenten.

Laatste uitdaging 💪

Rond de Uitvinder-toolkit van je project af – alle drie onderdelen samen:

Een widget met API-data (weer uit les 3) waar het past.
Een kaart met pinnen (les 4).
Een chatbot met context – schrijf 5–10 echte feiten over je website in zijn prompt.

🏫 Schoolwebsite – eindopdracht

De bot weet: het schooladres, de naam van de directeur, naschoolse opvang, de kantine, inschrijvingsdata en 3 clubs. De kaart toont de school, en de weerwidget de voorspelling voor het volgende evenement. Testvraag: “Until what time is after-school care?”

🙋 Persoonlijke website – eindopdracht

De bot weet: je hobby’s, favoriete games/boeken, wat je kunt en wat je leert. Een kaart met 3 favoriete plekken, een weerwidget voor je stad. Testvraag: “What does he/she enjoy besides programming?”

🌍 Reisdagboek – eindopdracht

De bot weet: je laatste 3 reizen (waar, wanneer, wat gebeurde) en je volgende plan. Een kaart van al je reizen, een weerwidget voor de volgende bestemming. Testvraag: “Where did they go last and how was it?”

⚽ Clubwebsite – eindopdracht

De bot weet: trainingsschema, volgende wedstrijd, selectie, contributie, contact coach. Een kaart van het thuisveld, een weerwidget voor de wedstrijd. Testvraag: “When and where is the next match?”

Eindcontrole

✅

Je bent klaar als:

Je website live data van minstens één API laadt (weer).
De kaart pinnen met popups heeft.
De chatbot 5 testvragen over je project goed beantwoordt.
De bot beleefd afwijst bij vragen buiten het onderwerp.
De geheime sleutel niet in de browser of op GitHub staat.

Gefeliciteerd – je bent een Uitvinder! Je website is niet meer alleen een pagina: hij kan met de wereld praten. Vergeet niet je certificaat op te halen.

Wat neem je mee uit deze les

Context in een prompt = een bot die je website kent en niet verzint.
API + kaart + AI samen maken van een website een dienst die mensen echt gebruiken.
Volgende stop: Level 6 – Projectbaas. Je website verdient een eigen adres op internet.