EngineeringBeginner
How to Build an AI Chatbot Using an API: Full-Stack JavaScript and Python Guide
Direct Answer & Overview
A complete end-to-end tutorial showing how to build an interactive AI conversational chatbot using chat completions APIs, managing multi-turn conversation memory arrays, streaming responses, and rendering clean markdown in a user interface.
1.How Chatbots 'Remember': Multi-Turn Message Arrays
Because AI APIs are stateless, the model does not remember what you asked two seconds ago. To build a conversational bot, your application must maintain a `messages` history array in memory or a database. On every user turn, append the user's new message, pass the full array to the API, and append the assistant's reply back into the array.
2.Sliding Window Context & Memory Management
In long conversations, appending every message indefinitely will eventually exhaust the context window and inflate token costs. Production bots enforce sliding windows (e.g. keeping only the last 10 messages) or summarize older history into a concise memory block.
3.Live Word-by-Word Streaming UI
Rather than making users stare at a loading spinner for 3 seconds, enable `stream: true`. The API emits tokens as they are generated, creating an engaging, responsive interface that feels alive.
Interactive CLI Chatbot with Multi-Turn Memory in Pythonpython
from openai import OpenAI
client = OpenAI(base_url="https://api.apihundred.com/v1", api_key="your_key")
messages = [
{"role": "system", "content": "You are a concise, helpful customer support assistant."}
]
print("=== AI Chatbot Initialized (Type 'exit' to quit) ===")
while True:
user_input = input("\nYou: ")
if user_input.lower() in ("exit", "quit"):
break
# 1. Append user input to history
messages.append({"role": "user", "content": user_input})
# 2. Stream assistant reply
print("AI: ", end="", flush=True)
stream = client.chat.completions.create(
model="gemini-3.8-flash",
messages=messages,
stream=True
)
full_reply = ""
for chunk in stream:
delta = chunk.choices[0].delta.content or ""
print(delta, end="", flush=True)
full_reply += delta
# 3. Append assistant reply to retain context for next turn
messages.append({"role": "assistant", "content": full_reply})Frequently Asked Questions
Does the chatbot retain context across different browser tabs?
Only if you persist the conversation array in a database (like Supabase, PostgreSQL, or Redis) keyed by conversation_id.
What is the best economical model for a customer chatbot?
Gemini 3.8 Flash, GPT-6 Luna, and Claude Haiku 4.5 provide fast sub-second responses at under $0.50 per million tokens.
How do I prevent the chatbot from answering off-topic questions?
Set strict boundary rules in the system prompt instructions, e.g., 'You only answer questions regarding shipping and returns. Politely decline other topics.'
A100
API100 Engineering Team
Infrastructure & Latency Research