How to Build an AI Chatbot for Your Website Using API

📅 2026-06-11 · 5 min read

How to Build an AI Chatbot for Your Website Using API

Adding a smart, responsive chatbot to your website is no longer a luxury—it's a necessity. Users expect instant answers, 24/7 support, and a conversational experience that feels human. The good news? You don't need a PhD in machine learning or a massive budget. With modern chatbot APIs like DeepSeek, Qwen, and MiniMax, you can build an AI chatbot for your site in under an hour. In this API chatbot tutorial, I'll walk you through the entire process—from choosing the right API to deploying a live website chatbot.

Why Use an API to Build a Chatbot?

Instead of training your own model (expensive and time-consuming), you can plug into existing large language models via a simple REST API. This gives you:

State-of-the-art natural language understanding
Scalability – your chatbot handles 1 or 10,000 users
Easy updates – swap models without rewriting code

I'll use DeepSeek in the examples, but the same approach works with Qwen or MiniMax—just change the endpoint and API key.

Step 1: Get Your API Key

First, sign up for an API provider. For this tutorial, head over to tai.shadie-oneapi.com where you can get affordable access to multiple AI models including DeepSeek, Qwen, and MiniMax. Once you have your API key, keep it secure—never expose it on the client side.

Step 2: Backend – The Chat Endpoint

Your chatbot needs a server-side endpoint that forwards user messages to the AI API and returns the response. I'll use Node.js with Express, but you can adapt to Python, PHP, or any language.

Code Example 1: Express Server with DeepSeek API

Create a file server.js:

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions';
const API_KEY = process.env.DEEPSEEK_API_KEY; // set your key in environment

app.post('/chat', async (req, res) => {
  const userMessage = req.body.message;
  if (!userMessage) return res.status(400).json({ error: 'Message required' });

  try {
    const response = await axios.post(
      DEEPSEEK_API_URL,
      {
        model: 'deepseek-chat',
        messages: [{ role: 'user', content: userMessage }],
        max_tokens: 500,
      },
      {
        headers: {
          'Authorization': `Bearer ${API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    const reply = response.data.choices[0].message.content;
    res.json({ reply });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'AI service error' });
  }
});

app.listen(3000, () => console.log('Chatbot server running on port 3000'));

Run it with node server.js. Test it using curl or Postman: send a POST to /chat with JSON {"message": "Hello"} and you'll get a reply.

Step 3: Frontend – The Chat Interface

Now let's build a simple HTML/JavaScript chat widget that sends messages to your backend and displays responses.

Code Example 2: Chat Widget HTML + JS

Create chat.html:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; }
    #chatbox {
      width: 400px;
      margin: 50px auto;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
    }
    #messages {
      height: 300px;
      overflow-y: auto;
      border-bottom: 1px solid #ddd;
      margin-bottom: 10px;
    }
    .user, .bot {
      margin: 5px 0;
      padding: 8px 12px;
      border-radius: 12px;
    }
    .user { background: #007bff; color: white; text-align: right; }
    .bot { background: #f1f1f1; text-align: left; }
    #input { width: 80%; padding: 8px; }
    #send { padding: 8px 16px; background: #007bff; color: white; border: none; }
  </style>
</head>
<body>
  <div id="chatbox">
    <div id="messages"></div>
    <input id="input" placeholder="Type a message..." />
    <button id="send">Send</button>
  </div>

  <script>
    const messagesDiv = document.getElementById('messages');
    const input = document.getElementById('input');
    const sendBtn = document.getElementById('send');

    function addMessage(text, role) {
      const div = document.createElement('div');
      div.className = role;
      div.innerText = text;
      messagesDiv.appendChild(div);
      messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

    async function sendMessage() {
      const msg = input.value.trim();
      if (!msg) return;
      addMessage(msg, 'user');
      input.value = '';
      // Show a loading indicator
      addMessage('...', 'bot');
      try {
        const res = await fetch('http://localhost:3000/chat', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ message: msg })
        });
        const data = await res.json();
        // Remove the loading message and add real reply
        messagesDiv.removeChild(messagesDiv.lastChild);
        addMessage(data.reply, 'bot');
      } catch (err) {
        messagesDiv.removeChild(messagesDiv.lastChild);
        addMessage('Sorry, something went wrong.', 'bot');
      }
    }

    sendBtn.addEventListener('click', sendMessage);
    input.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') sendMessage();
    });
  </script>
</body>
</html>

Open chat.html in a browser (make sure your server is running). You now have a working website chatbot powered by an AI API!

Step 4: Customize and Improve

A basic chatbot is great, but you can make it smarter:

System prompts: Set a personality or role (e.g., "You are a helpful support agent for an e‑commerce store").
Conversation history: Send previous messages so the bot remembers context.
Streaming responses: Use Server-Sent Events (SSE) for a typing effect.
Rate limiting & caching: Protect your API costs and speed up frequent questions.

For example, modify the backend to include a system message:

messages: [
  { role: 'system', content: 'You are a friendly customer support bot for an online bookstore.' },
  { role: 'user', content: userMessage }
]

Step 5: Deployment

Once you're happy, deploy the backend to a cloud service like Railway, Render, or Vercel (for serverless functions). Update the frontend's fetch URL to your live endpoint. You can even embed the chat widget directly into your existing site using an iframe or a small JavaScript snippet.

Choosing the Right Model

Different APIs excel at different tasks:

DeepSeek – great all-rounder, fast and cost-effective.
Qwen – excellent for multilingual and long-context chats.
MiniMax – strong on creative writing and roleplay.

Experiment! Many providers offer free trial credits so you can test before committing.

Wrapping Up

You've just built a fully functional AI chatbot for your website using a simple API. No expensive training, no complex infrastructure—just a few lines of code and an API key. This approach lets you focus on the user experience while leveraging world‑class AI models.

Pro tip: To keep costs low and quality high, get your API keys from tai.shadie-oneapi.com. They offer unified, affordable access to DeepSeek, Qwen, MiniMax, and more—perfect for scaling your website chatbot without breaking the bank.

Now go ahead and make your site smarter. Your users will thank you.

How to Build an AI Chatbot for Your Website Using API