Building a Simple AI Chatbot with JavaScript and Ollama

Andrew Smalley

21 Feb 2025 • 2 min read

Introduction

Want to add an AI-powered chatbot to your webpage? With JavaScript and Ollama, you can quickly integrate a Natural Language Understanding (NLU) system into your site, allowing users to chat with an AI model in real time.

This guide walks through the simplest way to set up a JavaScript-based chatbot that communicates with Ollama to provide AI-driven responses.

Step 1: Setting Up Ollama Locally

Before integrating AI into your webpage, make sure Ollama is installed and running on your system.

Install Ollama

If you haven’t already, install Ollama:

curl -fsSL https://ollama.ai/install.sh | sh

Run a Simple AI Model

To test if Ollama is working:

ollama run llama2 "Hello, how can I help you?"

Once installed, Ollama runs as a local AI server, ready to process natural language queries.

Step 2: Setting Up a Simple JavaScript Chat Interface

Next, we need a basic HTML & JavaScript frontend to send user messages to the AI and display responses.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ollama Chatbot</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        #chat-box { width: 80%; max-width: 600px; margin: 20px auto; height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; }
        #user-input { width: 80%; padding: 10px; }
    </style>
</head>
<body>
    <h1>Chat with Ollama AI</h1>
    <div id="chat-box"></div>
    <input type="text" id="user-input" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        async function sendMessage() {
            const inputField = document.getElementById("user-input");
            const chatBox = document.getElementById("chat-box");
            const userMessage = inputField.value;
            if (!userMessage) return;

            chatBox.innerHTML += `<p><strong>You:</strong> ${userMessage}</p>`;
            inputField.value = "";

            const response = await fetch("http://localhost:11434/api/generate", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ model: "llama2", prompt: userMessage })
            });
            
            const data = await response.json();
            const aiMessage = data.response || "No response received.";
            chatBox.innerHTML += `<p><strong>AI:</strong> ${aiMessage}</p>`;
            chatBox.scrollTop = chatBox.scrollHeight;
        }
    </script>
</body>
</html>

Step 3: Running the Chatbot

1️⃣ Start Ollama so it can process requests:

ollama serve

2️⃣ Open the HTML file in a browser, type a message, and click “Send.”

3️⃣ Ollama processes the request and returns an AI-generated response!

How It Works

🔹 The user types a message, which is sent via JavaScript to the Ollama API.
🔹 The API returns a response generated by the AI model (e.g., LLaMA 2).
🔹 The message and response appear in the chat window for a seamless conversation.

Expanding the Chatbot

✅ Use Different Models: Instead of llama2, experiment with other Ollama models.
✅ Add Speech-to-Text: Integrate voice input using Web Speech API.
✅ Enhance UI: Improve styling, add avatars, or implement a chat bubble design.
✅ Deploy Online: Host it on a web server and connect it to a cloud-based Ollama instance.

Conclusion

With JavaScript and Ollama, setting up an AI chatbot on a webpage is fast and easy. Whether you’re experimenting with natural language processing (NLP) or building AI-powered customer support, this simple chatbot provides a solid starting point.

🚀 Want a more advanced AI integration? AKADATA specializes in building custom AI chat solutions for websites!