How an AI Chatbot Works

An AI chatbot is a chat window, a server and an AI model working together, passing messages back and forth.

The Three Parts

The flow for one message:

1. The user types "What time do you close?" in the chat window.
2. The browser sends it to your server, for example POST /api/chat.
3. Your server builds a list of messages and sends it to the AI API with your secret key.
4. The model returns a reply.
5. Your server sends the reply back to the browser, which shows it.

The Messages Array

Most AI chat APIs take a list of messages, each with a role:

• system: your hidden instructions (who the bot is, rules, tone)
• user: what the person typed
• assistant: what the bot replied earlier

const messages = [
  { role: "system", content: "You are Zara, the assistant for Karachi Book House. Be brief." },
  { role: "user", content: "Do you have O Level Physics books?" },
  { role: "assistant", content: "Yes, we have them. Which publisher do you need?" },
  { role: "user", content: "The latest edition please" },
];

for (const m of messages) console.log(`${m.role}: ${m.content}`);

system: You are Zara, the assistant for Karachi Book House. Be brief.
user: Do you have O Level Physics books?
assistant: Yes, we have them. Which publisher do you need?
user: The latest edition please

The Model Has No Memory

This surprises many beginners: the AI model does not remember earlier messages by itself. Each request is separate. The chatbot "remembers" only because your code sends the whole history every time.

That is why "The latest edition please" makes sense to the model: the earlier messages about O Level Physics are included in the same request.

Keeping History in Code

Here is a small history manager. It adds each message and keeps only the most recent ones, so requests do not grow forever (long history costs more tokens):

function createChat(systemPrompt, maxMessages = 6) {
  let history = [];
  return {
    add(role, content) {
      history.push({ role, content });
      history = history.slice(-maxMessages);
    },
    build() {
      return [{ role: "system", content: systemPrompt }, ...history];
    },
  };
}

const chat = createChat("You are a helpful tutor.", 2);
chat.add("user", "What is HTML?");
chat.add("assistant", "HTML is the structure of a web page.");
chat.add("user", "And CSS?");
console.log(chat.build().map((m) => m.role).join(", "));

system, assistant, user

With a limit of 2, the oldest user message was dropped, but the system prompt is always kept.

Important Settings

Exercise