Sharanshu Kashyap
August 9, 2024
Integrating conversational AI capabilities into modern web applications allows software teams to deliver dynamic, context-aware user experiences. By combining Node.js, Express, and OpenAI's API, developers can rapidly prototype and deploy light-weight, highly scalable chatbot interfaces.
Before writing backend code, create an OpenAI account and generate a secure API secret key from the developer dashboard. Store this key safely as it authenticates your application's access to OpenAI models.
Next, set up a clean development workspace:
mkdir chatbot
cd chatbot
npm init -y
npm install express openai
This sequence creates your project directory, initializes a standard package.json file, and installs Express along with the official OpenAI Node.js SDK.
Create a root file named server.js to initialize the Express HTTP web server. Configure static asset middleware to serve public client-side web files automatically.
const express = require("express");
const app = express();
app.use(express.static("public"));
app.listen(5000, () => {
console.log("Server is active on port 5000");
});
Create a /public directory containing an index.html file to serve as the user-facing chat window. Add basic text areas, dynamic response containers, and custom CSS styles to render conversational threads cleanly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
</head>
<body>
<div id="chat-area"></div>
<div class="input-form">
<textarea id="input1"></textarea>
<button id="btn">Submit</button>
</div>
</body>
</html>
Attach a DOM event listener in JavaScript to capture user submissions, stream asynchronous HTTP POST requests to your local backend, and render returned message objects dynamically.
Configure your backend route in server.js to process incoming chat payloads, route them to the OpenAI endpoint, and send back completion responses to the client UI.
const { OpenAI } = require("openai");
const openai = new OpenAI({ apiKey: 'YOUR_API_KEY' });
app.use(express.json());
app.post("/chat", async (req, res) => {
try {
const resp = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: req.body.question }],
});
res.status(200).json({ message: resp.choices[0].message.content });
} catch (e) {
res.status(500).json({ message: e.message });
}
});
Using modern async/await patterns ensures non-blocking request handling, keeping backend throughput fast during simultaneous user queries.
Launch the application locally by running the main server entry script in your terminal execution environment:
node server.js
Open http://localhost:5000 in any modern web browser to access the live chat interface. This modular application setup offers a lightweight architecture ready for custom system prompt adjustments, database message persistence, or expanded full-stack capabilities.
Partner with BytePX to modernize Salesforce, streamline data pipelines, and scale core infrastructure.