Je eigen chatbot

Bouw een chatvenster op je website en koppel het aan de server uit de vorige les.

Ik laat je zien: het chatvenster

Een chat is drie dingen: een lijst met berichten, een invoerveld en een knop Versturen.

<div class="chat">
  <div id="zpravy" class="chat-zpravy"></div>
  <form id="chat-form" class="chat-form">
    <input id="chat-vstup" type="text" placeholder="Type your question…" autocomplete="off" />
    <button type="submit">Send</button>
  </form>
</div>

.chat { border: 1px solid #ddd; border-radius: 12px; max-width: 420px; }
.chat-zpravy { height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.zprava { padding: 8px 12px; border-radius: 12px; max-width: 80%; }
.zprava.ja { background: #4f46e5; color: white; align-self: flex-end; }
.zprava.bot { background: #f0f0f0; align-self: flex-start; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #ddd; }
.chat-form input { flex: 1; }

Koppelen aan de server

const zpravy = document.querySelector('#zpravy');
const form = document.querySelector('#chat-form');
const vstup = document.querySelector('#chat-vstup');

function pridejZpravu(text, kdo) {
  const el = document.createElement('div');
  el.className = `zprava ${kdo}`;
  el.textContent = text;
  zpravy.appendChild(el);
  zpravy.scrollTop = zpravy.scrollHeight; // scroll down to the new message
}

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const otazka = vstup.value.trim();
  if (!otazka) return;

  pridejZpravu(otazka, 'ja');
  vstup.value = '';
  pridejZpravu('Thinking…', 'bot');

  const r = await fetch('/zeptat-se', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ otazka }),
  });
  const data = await r.json();

  zpravy.lastChild.textContent = data.text; // replace "Thinking…" with the answer
});

Alles in die code ken je al: addEventListener, createElement, fetch met POST. Het nieuwe is het idee om het samen te bouwen tot een chat.

💡

“Thinking…” is een kleine maar belangrijke truc. AI heeft een paar seconden nodig – zonder dat bericht denkt een bezoeker dat de chat kapot is. Goede programmeurs tonen altijd dat er iets gebeurt.

Nu jij 💪

Bouw de chat volgens het voorbeeld en pas de kleuren aan je website aan.
Gebruik in de system prompt op de server (les 6) de prompt die je in les 5 voor je project schreef – zo wordt een generieke AI jouw helper.
Test: stel 5 vragen die een bezoeker zou kunnen hebben. Antwoordt de bot goed? Verfijn de prompt.
Bonus: voeg een begroeting van de bot toe die direct na het laden verschijnt (“Hi! Ask me anything about our school.”).

⚠️

Chatveiligheid: voeg een zin toe aan de system prompt zoals “Only answer questions about [your website]. Politely decline to answer anything else.” – anders schrijft de bot blij alles aan bezoekers, ook dingen die niets met je website te maken hebben.

✅

Controle: Een chat draait op je website: je typt een vraag, je bubbel verschijnt, dan “Thinking…”, dan het antwoord van de bot. De bot praat als helper voor je project.

Wat neem je mee uit deze les

Een chat = een lijst met berichten + een formulier + een fetch naar je server.
Toon status (“Thinking…”) – de bezoeker moet weten dat er iets gebeurt.
Je stuurt de persoonlijkheid en grenzen van de bot via de system prompt op de server.

Deze les maakt deel uit van een betaald niveau

Ik laat je zien: het chatvenster

Koppelen aan de server

Nu jij 💪

Wat neem je mee uit deze les