Din egen chatbot

Byg et chatvindue på din hjemmeside og forbind det til serveren fra sidste lektion.

Vis mig: chatvinduet

En chat er tre ting: en liste over beskeder, et inputfelt og en Send-knap.

<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; }

Forbindelse til serveren

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
});

Alt i den kode kender du allerede: addEventListener, createElement, fetch med POST. Det eneste nye er idéen om at sætte det hele sammen til en chat.

💡

“Thinking…” er et lille, men vigtigt trick. AI tager et par sekunder at svare – uden den besked kan en besøgende tro, chatten er i stykker. Gode programmører viser altid, at noget sker.

Nu er det din tur 💪

Byg chatten efter eksemplet og match farverne til din hjemmeside.
I systemprompten på serveren (lektion 6), brug prompten, du skrev til dit projekt i lektion 5 – det forvandler en generisk AI til din egen hjælper.
Test den: stil 5 spørgsmål, en besøgende måske har. Svarer botten korrekt? Finpuds prompten.
Bonus: tilføj en hilsen fra botten, der vises lige efter siden indlæses (“Hi! Ask me anything about our school.”).

⚠️

Chatsikkerhed: tilføj en sætning til systemprompten som “Only answer questions about [your website]. Politely decline to answer anything else.” – ellers skriver botten gerne hvad som helst til besøgende, også ting, der ikke har med din hjemmeside at gøre.

✅

Tjek: En chat kører på din hjemmeside: du skriver et spørgsmål, din boble vises, så “Thinking…”, så bottens svar. Botten taler som en hjælper til dit projekt.

Det tager du med fra denne lektion

En chat = en liste over beskeder + en formular + et fetch til din server.
Vis status (“Thinking…”) – besøgende skal vide, at noget sker.
Du styrer bottens personlighed og grænser gennem systemprompten på serveren.

Denne lektion er en del af et betalt niveau

Vis mig: chatvinduet

Forbindelse til serveren

Nu er det din tur 💪

Det tager du med fra denne lektion