Deploying a Website Chatbot

my-chatbot/
  server.js          Express server with /api/chat
  ai.js              the askAI function
  package.json
  .env               secrets for local testing (never commit)
  .gitignore         contains: node_modules and .env
  public/
    index.html       the page with the chat widget
    chat.js          the widget's browser code

<div id="chat">
  <div id="log"></div>
  <form id="form">
    <input id="text" placeholder="Type your question..." autocomplete="off">
    <button>Send</button>
  </form>
</div>
<script src="chat.js"></script>

const history = [];
const log = document.getElementById("log");

function show(role, text) {
  const p = document.createElement("p");
  p.className = role;
  p.textContent = text;            // plain text, safe from HTML injection
  log.appendChild(p);
  log.scrollTop = log.scrollHeight;
  return p;
}

document.getElementById("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const input = document.getElementById("text");
  const text = input.value.trim();
  if (!text) return;
  input.value = "";
  show("user", text);
  history.push({ role: "user", content: text });

  const bubble = show("assistant", "Typing...");
  try {
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ messages: history }),
    });
    const data = await res.json();
    bubble.textContent = data.reply;
    history.push({ role: "assistant", content: data.reply });
  } catch {
    bubble.textContent = "Connection problem. Please try again.";
  }
});

AI_API_KEY   = your real key
AI_BASE_URL  = the provider's base URL
AI_MODEL     = the model name

const PORT = process.env.PORT || 3000;
console.log(`Server will listen on port ${PORT}`);