How to Integrate ChatGPT into Your Web Application

Building AI-powered features has never been easier. In this guide, I’ll walk you through integrating OpenAI’s GPT-4 API into your web application.

Why Add AI to Your App?

Enhanced User Experience: Smart chatbots, content generation, and personalized recommendations
Automation: Reduce manual tasks with intelligent automation
Competitive Edge: Stay ahead with cutting-edge technology

Prerequisites

Node.js 18+
React 18+
OpenAI API key

Step 1: Set Up Your Backend

First, create a secure API endpoint to handle OpenAI requests:

// api/chat.js
import OpenAI from 'openai';

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

export async function POST(req) {
  const { message } = await req.json();
  
  const completion = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [{ role: "user", content: message }],
  });
  
  return Response.json({ 
    reply: completion.choices[0].message.content 
  });
}

Step 2: Build Your React Component

function ChatComponent() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const sendMessage = async () => {
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: input }),
    });
    const data = await response.json();
    setMessages([...messages, { user: input, ai: data.reply }]);
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}