Artificial Intelligence chatbots are no longer limited to paid platforms or enterprise solutions. With the availability of free AI models and open APIs, developers and learners can now build their own AI-powered chatbots using simple frontend technologies like Angular or plain HTML/JavaScript.

In this article, we’ll explore how to create a free AI chatbot using:

This setup is ideal for learning, prototyping, and demos without any backend complexity.

Why DeepSeek R1 and OpenRouter?

The R1 0528 free version is sufficient for learning and experimentation.

You can easily switch models (DeepSeek, Gemini, etc.) without changing your frontend logic.

Getting a Free API Key

Follow these steps to generate your API key:

You will use this key in the Authorization header.

Chatbot UI Overview

The chatbot UI is simple and lightweight:

This demo can be:

Demo Code Snippet (Free AI Chatbot)

Below is a working demo using HTML + JavaScript, compatible with Angular integration:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WSP ChatBot</title>

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
    />

    <!-- Markdown Parser -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <style>
      #response {
        margin-top: 20px;
        padding: 10px;
        min-height: 50px;
      }
      #response h3 {
        color: #333;
        font-size: 1.2em;
      }
      #response strong {
        color: #d9534f;
      }
      #response ul {
        padding-left: 20px;
      }
      #response li {
        margin-bottom: 5px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h2>Free ChatBot</h2>

      <div class="form-group">
        <input
          type="text"
          class="form-control"
          id="userInput"
          placeholder="Enter your question"
        />
      </div>

      <button class="btn btn-success" onclick="sendMessage()">Ask!</button>
      <div id="response"></div>
    </div>

    <script>
      async function sendMessage() {
        const input = document.getElementById("userInput").value;
        const responseDiv = document.getElementById("response");

        if (!input) {
          responseDiv.innerHTML = "Please enter a message.";
          return;
        }

        responseDiv.innerHTML = "Loading...";

        try {
          const response = await fetch(
            "https://openrouter.ai/api/v1/chat/completions",
            {
              method: "POST",
              headers: {
                Authorization: "Bearer <YOUR_API_KEY>",
                "HTTP-Referer": "<YOUR_SITE_URL>",
                "X-Title": "<YOUR_SITE_NAME>",
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                model: "deepseek/deepseek-r1-0528:free",
                messages: [{ role: "user", content: input }],
              }),
            }
          );

          const data = await response.json();
          const markdownText =
            data.choices?.[0]?.message?.content || "No response received.";

          responseDiv.innerHTML = marked.parse(markdownText);
        } catch (error) {
          responseDiv.innerHTML = "Error: " + error.message;
        }
      }
    </script>
  </body>
</html>

UI Screenshot Showing Code Execution

Chatbot_Response_New

How This Fits into Angular

You can easily adapt this demo for Angular by:

The API request structure remains exactly the same.

Key Benefits of This Approach

Conclusion

Building an AI chatbot no longer requires expensive subscriptions or complex infrastructure. By combining DeepSeek R1 (free) with the OpenRouter API, you can quickly create a powerful AI chatbot using just frontend code.

This setup is perfect for:

As a next step, you can enhance this chatbot by adding: