DailyRNG
Login
Basic

A simple chat interface

A chat needs somewhere for people to type. Learn to build a basic web page with an input box and a message area, connect it to your backend, and show replies as they arrive.

What you will see

Shown: Here is reply 1 Shown: Here is reply 2 Total messages: 2

About 2 min of reading

Try It

A chat needs somewhere for people to type. I build a basic page with an input box and a message area, connect the input to the backend, then show each reply as it arrives.

1

A chat page needs an input box to type into and an empty message area to show replies. I print the input label and how many messages are shown at the start to set up the layout.

input_box = "Type your message..." message_area = [] print(f"UI: {input_box}") print(f"Messages shown: {len(message_area)}")

Before you run it, say out loud what it will print. Then open the answer.

What it prints
UI: Type your message... Messages shown: 0
The layout is plain. Everything fancy comes later from connecting this box to your backend.
2

The input connects to a backend that turns a message into a reply. I send one message through the backend and print what it would show in the chat.

def send_to_backend(user_msg): return f"Bot reply to: {user_msg}" user_msg = "Tell me a joke" print(send_to_backend(user_msg))

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Bot reply to: Tell me a joke
The backend, not the browser, should call the model. Sending your API key from the page would expose it to everyone.
3

Replies arrive one at a time, so each gets added to the message area as it comes. I loop over two replies and print each as it appears, then count the total shown.

messages = [] replies = ["Here is reply 1", "Here is reply 2"] for r in replies: messages.append(r) print(f"Shown: {r}") print(f"Total messages: {len(messages)}")

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Shown: Here is reply 1 Shown: Here is reply 2 Total messages: 2
Add each reply to the list as it arrives instead of replacing it. Overwriting the area would hide everything the user already saw.

Put it in order

Before you write anything, put these lines back in the right order. Click a line to move it up one step. This support step is easier than writing code from scratch, and it is here to make the last example stick.

Data Flow

The browser posts to the backend, the backend adds history and calls the model, then the reply travels back to be displayed.
1 User types a message and sends it
↓
2 Browser POSTs to /chat on your server
↓
3 Your server appends history and calls the model
↓
4 The model returns a reply
↓
5 Your server sends the reply JSON back
↓
6 The browser appends it to the chat
Line by line

Read the first example one line at a time. A line that prints shows what appears on screen; the rest set things up quietly.

input_box = "Type your message..." sets nothing on screen
message_area = [] sets nothing on screen
print(f"UI: {input_box}") UI: Type your message...
print(f"Messages shown: {len(message_area)}") Messages shown: 0
Why this works
Why the backend is required

You must never call the AI API directly from the browser. If you do, every visitor sees your secret key, and they can spend your money.

The safe pattern always routes through your server:

Browser --> Your Server --> AI API

Your server:

  • Holds the secret key (safe from pruned eyes).
  • Can enforce limits, like one message per second.
  • Can log conversations for debugging.

This architecture scales from a hobby project to a real product with no changes.

Examples

The HTML layout

A chat screen is just a list of messages and an input bar:

<div id="messages"></div>
<input id="userInput" placeholder="Type a message">
<button onclick="sendMessage()">Send</button>

The #messages div grows as replies arrive. The input box collects what the user types. Two tiny pieces of JavaScript glue it all together.

Sending a message

When the user submits, send it to your backend and display the reply:

async function sendMessage() {
  const input = document.getElementById('userInput');
  const reply = await fetch('/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text: input.value })
  });
  const data = await reply.json();
  addMessage('bot', data.reply);
  input.value = '';
}

The browser talks to your server (/chat), not the AI directly. Your server holds the secret key and talks to the model. This keeps your key off the page where anyone can steal it.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Understanding prompts
Previous Lesson
Understanding prompts
Next Lesson
Conversation memory
Conversation memory →