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).
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.
- An OpenAI account and API key.
- Basic command-line familiarity.
Get Your OpenAI API Key (Keep It Secret)
- Go to platform.openai.com and sign in.
- Open API Keys and create a key.
- Copy the key and store it in a
.envfile 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 (Chat Completions):
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());
const limiter = rateLimit({ windowMs: 60_000, max: 60 });
app.use(limiter);
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
app.post('/chat', async (req, res) => {
try {
const { messages } = req.body;
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? Minimal example:
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. For a simple chat box, Chat Completions is straightforward. For stateful multi-turn flows and hosted tools, use Responses.
Step 2 — Build the Frontend (HTML + JS)
Create index.html in the project root (or a public/ folder):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ChatGPT Clone</title>
</head>
<body>
<div id="chat">
<h1>ChatGPT Clone</h1>
<div id="log"></div>
<textarea id="userInput" rows="3" placeholder="Ask something..."></textarea>
<button id="sendBtn">Send</button>
</div>
<script>
const log = document.getElementById('log');
const box = document.getElementById('userInput');
const btn = document.getElementById('sendBtn');
const history = [{ role: 'system', content: 'You are a helpful, concise assistant.' }];
function addRow(text){
const d = document.createElement('div');
d.textContent = text;
log.appendChild(d);
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}
async function send(){
const msg = box.value.trim();
if(!msg) return;
addRow('You: ' + msg);
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);
history.push({ role:'assistant', content: reply });
} catch(e){
addRow('Bot: [Error contacting server]');
} 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
- Start the backend:
node server.js - Open
index.htmlin your browser. - Ask a question and watch the reply appear in the 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 tone, domain knowledge, and guardrails.
- Persist per-user sessions with an ID if you need long-lived chats.
Enhancements (Production Tips)
Security
- Never expose
OPENAI_API_KEYto the browser. - Use HTTPS.
- Validate inputs (length caps, basic checks).
Rate Limiting
- Use
express-rate-limitto throttle abuse. - Return friendly errors on 429/5xx and allow retries with backoff.
Streaming (Optional)
Stream tokens for a typing effect via SDK streaming or Server-Sent Events.
Model Choice
gpt-4o-mini: fast and cost-efficient for chat UX.gpt-4o/gpt-4.1: higher quality for advanced reasoning.
Deployment Notes
- Set environment variables on your host (
OPENAI_API_KEY,PORT). - Serve static
index.htmlvia CDN or the same Express app. - Configure 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 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 the URL/port matches.
Q: Chat Completions or Responses?
A: Completions for a simple chat; Responses for stateful multi-turn workflows and tools.