How to Build a Simple ChatGPT Clone with the OpenAI API (2025 Guide)

Build a ChatGPT-style assistant using Node.js, Express, and the OpenAI API.

2025

Node.js

OpenAI API

🤖 How to Build a Simple ChatGPT Clone with OpenAI API

Want your own ChatGPT-style assistant? In this hands-on guide, you’ll build a clean, secure chatbot using Node.js + Express on the backend and a lightweight HTML/CSS/JS frontend. We’ll wire it to the OpenAI API, add conversation memory, and share production tips (CORS, rate limits, environment keys).

Contents

1. What you’ll build (architecture)
2. Prerequisites
3. Get your OpenAI API key (never store on frontend)
4. Step 1 — Build the backend (Express + OpenAI)
5. Step 2 — Build the frontend (HTML + JS)
6. Run locally
7. Add conversation memory
8. Enhancements: security, rate limits, streaming
9. Deployment notes
10. Troubleshooting & FAQ

What You’ll Build

You’ll create a minimal two-tier app:

• Frontend: a single HTML page with a chat window and a textarea.
• Backend: a Node/Express server exposing POST /chat. The server securely calls OpenAI and returns the model’s reply.

Why this design? Your API key stays on the server. The browser never sees it, which is essential for security.

Prerequisites

• Node.js 18+ and npm installed.
• A free OpenAI account and API key.
• Basic command-line familiarity.

Get Your OpenAI API Key (Keep It Secret)

1. Go to platform.openai.com and sign in.
2. Open API Keys and create a key.
3. Copy the key and store it in a .env file on the server (never hardcode it in frontend JavaScript).

Important: Treat your key like a password. Rotate it immediately if you ever leak it.

Step 1 — Build the Backend (Express + OpenAI)

1) Initialize the project

mkdir chatgpt-clone
cd chatgpt-clone
npm init -y
npm install express cors dotenv openai express-rate-limit

2) Add environment variables

Create a file named .env at the project root:

OPENAI_API_KEY=your_real_api_key_here
PORT=3000

3) Enable ES modules (optional but recommended)

In package.json, add:

{
  "type": "module"
}

4) Create server.js

The following server uses the modern OpenAI Node SDK. It calls the Chat Completions API for a classic chat flow. You can swap the model (e.g., gpt-4o-mini) and temperature later to adjust style and cost.

import 'dotenv/config';
import express from 'express';
import cors from 'cors';
import rateLimit from 'express-rate-limit';
import OpenAI from 'openai';

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

// Basic rate limiting for safety in production
const limiter = rateLimit({ windowMs: 60_000, max: 60 });
app.use(limiter);

// Initialize OpenAI client (server-side only)
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

// POST /chat expects { messages: [{role:'user'|'assistant'|'system', content:string}, ...] }
app.post('/chat', async (req, res) => {
  try {
    const { messages } = req.body;

    // Fallback seed if client didn't send history
    const seeded = messages?.length ? messages : [
      { role: 'system', content: 'You are a helpful, concise assistant.' }
    ];

    const completion = await client.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: seeded,
      temperature: 0.7
    });

    const reply = completion.choices?.[0]?.message?.content ?? '';
    res.json({ reply });
  } catch (err) {
    console.error('OpenAI error:', err?.message || err);
    res.status(500).json({ error: 'OpenAI request failed.' });
  }
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log('Server running on http://localhost:' + port));

Using the newer Responses API?
You can also build your clone with the Responses API, which supports stateful conversations and hosted tools. Minimal example (server-side):

// Minimal Responses API shape (Node)
import OpenAI from 'openai';
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const response = await client.responses.create({
  model: 'gpt-4o-mini',
  input: 'Say hello like a friendly chatbot.'
});

const text = response.output?.[0]?.content?.[0]?.text || '';

Both approaches work. If you just need a classic chat box, Chat Completions is simple. If you want built-in tools and managed, stateful conversations, try Responses.

Step 2 — Build the Frontend (HTML + JS)

Create index.html in the project root (or a public/ folder if you serve static files):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ChatGPT Clone</title>
  <style>
    body{font-family:Inter,system-ui,Arial,sans-serif;background:#0f1218;color:#e6e8ee;margin:0;padding:24px}
    #chat{max-width:760px;margin:auto}
    .row{padding:10px 14px;border-radius:12px;margin:10px 0;white-space:pre-wrap}
    .user{background:#1d2430;border:1px solid #2b3546}
    .bot{background:#161b22;border:1px solid #2a3446}
    .controls{display:flex;gap:8px;margin-top:12px}
    textarea{flex:1;padding:12px;border-radius:10px;border:1px solid #2a3446;background:#0b0f16;color:#e6e8ee}
    button{padding:12px 16px;border-radius:10px;border:1px solid #2a3446;background:#222b3a;color:#fff;cursor:pointer}
    button:disabled{opacity:.6;cursor:not-allowed}
  </style>
</head>
<body>
  <div id="chat">
    <h1>ChatGPT Clone</h1>
    <div id="log"></div>
    <div class="controls">
      <textarea id="userInput" rows="3" placeholder="Ask something..."></textarea>
      <button id="sendBtn">Send</button>
    </div>
  </div>

  <script>
    const log = document.getElementById('log');
    const box = document.getElementById('userInput');
    const btn = document.getElementById('sendBtn');

    // Keep conversation history in-browser and send it each time
    const history = [{ role: 'system', content: 'You are a helpful, concise assistant.' }];

    function addRow(text, who){
      const div = document.createElement('div');
      div.className = 'row ' + (who === 'user' ? 'user' : 'bot');
      div.textContent = text;
      log.appendChild(div);
      window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    }

    async function send(){
      const msg = box.value.trim();
      if(!msg) return;
      addRow('You: ' + msg, 'user');
      history.push({ role:'user', content: msg });
      box.value = ''; btn.disabled = true;

      try{
        const r = await fetch('http://localhost:3000/chat', {
          method:'POST',
          headers:{ 'Content-Type':'application/json' },
          body: JSON.stringify({ messages: history })
        });
        const data = await r.json();
        const reply = data.reply || '(no reply)';
        addRow('Bot: ' + reply, 'bot');
        history.push({ role:'assistant', content: reply });
      } catch(e){
        addRow('Bot: [Error contacting server]', 'bot');
        console.error(e);
      } finally {
        btn.disabled = false;
      }
    }

    btn.addEventListener('click', send);
    box.addEventListener('keydown', (e) => {
      if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); send(); }
    });
  </script>
</body>
</html>

Run Locally

1. Start the backend: node server.js
2. Open index.html in your browser (double-click or use a local server).
3. Ask a question and watch the reply stream into your chat log.

Add Conversation Memory

In the simple version above, the browser keeps an array of messages and sends it on each request. For a larger app, store conversation state server-side (session, database, or cache) to control history length and privacy.

• Trim history to the last N messages to save tokens.
• Add a system prompt with your assistant’s tone, domain knowledge, or guardrails.
• Persist per-user sessions with an ID (cookie or header) if you need long-lived chats.

Enhancements (Production Tips)

Security

• Never expose OPENAI_API_KEY to the browser. Only your server talks to OpenAI.
• Enable HTTPS where you host the backend and frontend.
• Validate inputs (length caps, basic profanity checks if needed).

Rate Limiting

• Use express-rate-limit (as shown) to throttle abuse.
• Return user-friendly errors on 429/5xx and allow retries with backoff.

Streaming (Optional)

You can stream tokens for a “typing” effect. The OpenAI SDK supports streaming; alternatively, implement a Server-Sent Events (SSE) endpoint and incrementally write chunks to the client.

Model Choice

• gpt-4o-mini: fast & cost-efficient for chat UX.
• gpt-4o/gpt-4.1: higher quality if you need advanced reasoning.

Deployment Notes

• Set environment variables on your host (OPENAI_API_KEY, PORT).
• Serve the static index.html from a CDN or the same Express app (using express.static).
• Whitelist your public frontend origin in CORS if backend is on another domain.

Troubleshooting & FAQ

Q: I get 401 Unauthorized.
A: Missing/invalid OPENAI_API_KEY, or the server isn’t reading .env. Confirm the key on the server (not the browser) and restart.

Q: I get 429 Rate limit.
A: Slow down requests, back off on retries, and consider caching previous responses.

Q: CORS errors in the browser.
A: Ensure the Express server uses cors() and that you’re calling the right URL (localhost port must match).

Q: Should I use Chat Completions or Responses?
A: For a simple chat window, Chat Completions is straightforward. For stateful multi-turn flows and hosted tools, Responses is powerful.

Useful Links (Official)

• OpenAI Docs
• Create / manage API keys
• OpenAI Cookbook
• OpenAI Node Quickstart (GitHub)

• All Women’s Clothing – ShopySquares
• Retro Clothes Collection – ShopySquares
• Gold & White Dresses Collection – ShopySquares
• Summer Clothes Collection – ShopySquares
• materials-fundamentals-for-construction-engineers

✨ You now have a working ChatGPT-style clone with secure backend calls, conversation memory, and a clean UI. Extend it with streaming, auth, and a database—and ship!