OpenAI Chat (GPT)

AI-powered chat system using OpenAI GPT models for Express apps. Provides a simple REST API for intelligent conversation.

aiopenaigptexpresschatnatural-languagenodejs

v1.0.0AI

Overview

A lightweight and developer-ready AI chat component built on OpenAI’s GPT models. Provides a clean Express REST API for chat and can easily integrate with any frontend like Next.js, React, or Vue. Supports configurable models, JSON responses, and secure environment variable setup.

Installation

CLI

npx backternity add ai-openai-chat

What This Does

Installs a ready-to-use OpenAI chat system for Express.js applications. Handles API routing, request processing, and GPT responses via OpenAI SDK.

Files & Folders Created

File / Path	Description
/src/config/openai.js	Initializes the OpenAI client using API key from environment variables.
/src/services/chatService.js	Contains logic to send user messages and retrieve AI responses.
/src/routes/chat.js	Exposes POST /api/ai/chat for chat requests.
/server.js	Express server setup integrating the chat route.
/.env.example	Configures OpenAI API key and model name.

Files to be modified

File / Path	Description
server.js	Adds /api/ai/chat route and JSON parsing middleware.
.env	Adds OpenAI configuration variables.

Configuration

# OpenAI Configuration
OPENAI_API_KEY=your-openai-api-key
MODEL_NAME=gpt-4o-mini
PORT=3001

Frontend Integration

Integrate the Q&A endpoint into your frontend using fetch or a Next.js client component. Below is a working example using Next.js with Tailwind styling.

POST/api/ai/qna

Sends a user question to the server and retrieves an AI-generated answer.

Example

// app/ai/AskAI.jsx (Next.js Example)
'use client';
import { useState } from 'react';

export default function AskAI() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');
  const [loading, setLoading] = useState(false);

  async function handleAsk() {
    if (!question.trim()) return;
    setLoading(true);
    const res = await fetch('/api/ai/qna', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ question })
    });
    const data = await res.json();
    setAnswer(data.answer);
    setLoading(false);
  }

  return (
    <div className="p-4 bg-black/40 border border-white/10 rounded-lg">
      <h3 className="text-lg font-semibold mb-3 text-white">💬 Ask the AI</h3>
      <textarea
        className="w-full p-2 text-sm rounded bg-black/20 border border-white/10 text-white focus:outline-none"
        rows={3}
        placeholder="Ask a question..."
        value={question}
        onChange={(e) => setQuestion(e.target.value)}
      />
      <button
        onClick={handleAsk}
        disabled={loading}
        className="mt-3 px-4 py-2 rounded bg-primary text-white text-sm hover:bg-primary/90 transition"
      >
        {loading ? 'Thinking...' : 'Ask'}
      </button>
      {answer && (
        <div className="mt-4 text-sm text-foreground border-t border-white/10 pt-2">
          <strong className="text-emerald-400">AI:</strong> {answer}
        </div>
      )}
    </div>
  );
}

Usage

// Direct Service Example
const { askQuestion } = require('./src/services/qnaService');

(async () => {
  const answer = await askQuestion('What is quantum computing?');
  console.log('AI Answer:', answer);
})();