Build Your First AI Chatbot Using OpenAI API

# Create a new project folder
mkdir ai-chatbot && cd ai-chatbot
npm init -y

# Install dependencies
npm install express openai dotenv cors

# .env file, keep this out of version control
OPENAI_API_KEY=sk-your-actual-key-here
PORT=5000

// server.js
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import OpenAI from 'openai';

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

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

  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: [
        { role: 'system', content: 'You are a helpful, concise assistant.' },
        { role: 'user', content: message }
      ],
      temperature: 0.7,
      max_tokens: 300
    });

    res.json({ reply: completion.choices[0].message.content });
  } catch (error) {
    console.error('OpenAI API error:', error.message);
    res.status(500).json({ error: 'Something went wrong' });
  }
});

app.listen(process.env.PORT || 5000, () => {
  console.log('AI chatbot server running');
});

<div id="chat-window"></div>
<input type="text" id="chat-input" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>

<script>
async function sendMessage() {
  const input = document.getElementById('chat-input');
  const message = input.value.trim();
  if (!message) return;

  appendMessage('user', message);
  input.value = '';

  const response = await fetch('/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });

  const data = await response.json();
  appendMessage('bot', data.reply || 'Something went wrong.');
}

function appendMessage(sender, text) {
  const window_ = document.getElementById('chat-window');
  window_.innerHTML += `<p><strong>${sender}:</strong> ${text}</p>`;
}
</script>

// Track conversation on the frontend
let conversationHistory = [
  { role: 'system', content: 'You are a helpful, concise assistant.' }
];

// Inside sendMessage(), before the fetch call:
conversationHistory.push({ role: 'user', content: message });

// Send the full history instead of a single message
body: JSON.stringify({ messages: conversationHistory })

// After getting a reply, add it to history too
conversationHistory.push({ role: 'assistant', content: data.reply });