Building an Intelligent Chatbot with the ChatGPT API

1. Get Your OpenAI API Key

To start, create an account on OpenAI’s Developer Platform and generate an API key from the dashboard. This key will be used to authenticate all requests made to the ChatGPT API.

OPENAI_API_KEY=sk-your_api_key_here

2. Install Dependencies

If you’re using Node.js or Next.js, install the official openai npm package:

npm install openai

This package makes it easy to send requests to the ChatGPT API and receive AI-generated responses.

3. Connect to the ChatGPT API

You can now initialize the OpenAI client and create your first chat completion request:

import OpenAI from "openai";

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

const response = await client.chat.completions.create({
  model: "gpt-4o-mini",
  messages: [
    { role: "system", content: "You are a helpful chatbot." },
    { role: "user", content: "Hello! How are you?" },
  ],
});

console.log(response.choices[0].message.content);

4. Build a Chat Interface

Next, create a simple chat UI where users can send messages and see the bot’s replies. You can use React state or context to manage the conversation history.

function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  async function handleSend() {
    const userMessage = { role: "user", content: input };
    setMessages([...messages, userMessage]);
    setInput("");

    const response = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify([...messages, userMessage]),
    });

    const data = await response.json();
    setMessages([...messages, userMessage, data]);
  }

  return (
    <div className="space-y-4">
      <div className="h-64 overflow-y-auto bg-muted/30 p-4 rounded-lg">
        {messages.map((m, i) => (
          <p key={i}>
            <strong>{m.role}:</strong> {m.content}
          </p>
        ))}
      </div>
      <div className="flex gap-2">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="flex-1 border border-border/30 rounded-lg px-3 py-2 bg-background"
        />
        <button
          onClick={handleSend}
          className="bg-primary text-white rounded-lg px-4 py-2 hover:bg-primary/90"
        >
          Send
        </button>
      </div>
    </div>
  );
}

5. Add Memory and Context Awareness

To make your chatbot more intelligent, store conversation history and pass it back to the API on each request. This helps ChatGPT remember context and respond more naturally.

const response = await client.chat.completions.create({
  model: "gpt-4o-mini",
  messages: conversationHistory, // include previous messages
});

6. Deploy Your Chatbot

Finally, deploy your chatbot using platforms like Vercel, Netlify, or Render. Make sure your API keys are stored securely as environment variables.

• Don’t expose your API key in frontend code.
• Use server-side API routes to handle requests.
• Cache responses for repeated queries if possible.