I built a working AI chatbot in 50 lines of HTML.

#ai #api #llm #programming

No backend. No build step. No framework.

One HTML file. One API key. Open it in your browser.
It works.

Here's the code:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Minimal Chat</title></head>
<body>
  <div id="chat"></div>
  <input id="msg" placeholder="Ask anything..."
         style="width:300px;padding:8px">
  <button onclick="send()">Send</button>

  <script>
    const KEY = "mb-your-api-key-here";

    function append(role, text) {
      const div = document.createElement("div");
      div.innerHTML = `<b>${role}:</b> ${text}`;
      document.getElementById("chat").appendChild(div);
    }

    async function send() {
      const input = document.getElementById("msg");
      const prompt = input.value; input.value = "";
      append("You", prompt);

      const res = await fetch(
        "https://aibridge-api.com/v1/chat/completions",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${KEY}`,
          },
          body: JSON.stringify({
            model: "deepseek-chat",
            messages: [{ role: "user", content: prompt }],
          }),
        }
      );
      const data = await res.json();
      append("AI", data.choices[0].message.content);
    }
  </script>
</body>
</html>