Introduction

Next.js, a popular React framework, offers developers the ability to build fast and efficient web applications with ease. When combined with the power of OpenAI's assistant capabilities, you can create smarter, more interactive applications that enhance user experience. In this blog post, we'll explore how to integrate OpenAI's assistant into a Next.js application, providing practical examples and best practices.

 

npx create-next-app@latest

npm install openai

import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export default openai;

OPENAI_API_KEY=your_openai_api_key

import openai from '../../lib/openai';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Only POST requests are allowed' });
  }

  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ message: 'Message is required' });
  }

  try {
    const response = await openai.createChatCompletion({
      model: 'gpt-4',
      messages: [{ role: 'user', content: message }],
    });

    const assistantMessage = response.data.choices[0].message.content;

    res.status(200).json({ message: assistantMessage });
  } catch (error) {
    res.status(500).json({ message: 'Something went wrong', error: error.message });
  }
}

import { useState } from 'react';

export default function Home() {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message }),
      });

      const data = await res.json();
      setResponse(data.message);
    } catch (error) {
      console.error('Error:', error);
      setResponse('Sorry, something went wrong.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Chat with OpenAI Assistant</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          rows="4"
          cols="50"
          placeholder="Type your message here"
        />
        <br />
        <button type="submit" disabled={loading}>
          {loading ? 'Loading...' : 'Send'}
        </button>
      </form>
      {response && (
        <div style={{ marginTop: '1rem' }}>
          <h2>Assistant's Response:</h2>
          <p>{response}</p>
        </div>
      )}
    </div>
  );
}

npm run dev