DEV Community

Carlo Gino Catapang
Carlo Gino Catapang

Posted on • Updated on • Originally published at l.carlogino.com

Build a simple AI-powered Q&A using Next.js and OpenAI Text Completion

#javascript #openai #react #nextjs

TL;DR

Check these API implementation and frontend implementation on Github.

Introduction

OpenAI is a powerful artificial intelligence platform that allows developers to create intelligent applications. Next.js is a popular React framework that provides server-side rendering and other advanced features. In this blog, I will create a simple Q&A app using OpenAI and Next.js.

OpenAI's text completion API uses AI to generate human-like text based on a given prompt, making it a powerful tool for tasks like generating creative writing, building chatbots, and creating language models. Its advanced language processing and vast data resources enable it to produce text that closely resembles human writing, making it a valuable resource for businesses and developers.

Prerequisites

Before you begin, you should have a basic understanding of React and Next.js. You should also have an OpenAI API key. If you don't have an OpenAI API key, you can sign up for a free account on their website.

I will only be using TypeScript and TailwindCSS for this project, but you can use JavaScript and any CSS framework you prefer.

Project Setup

Initialize a NextJS project

You can create a project as suggested in the NextJS official documentation.

npx create-next-app@latest
# or
yarn create next-app
Enter fullscreen mode Exit fullscreen mode

But if you are like me that prefer to have TypeScript and Tailwind, you can clone this boilerplate instead.

npx degit codegino/nextjs-tailwind-slim-boilerplate
Enter fullscreen mode Exit fullscreen mode

Create the Backend API

Create a reusable OpenAI client 

// src/libs/openai.ts
import {Configuration, OpenAIApi} from 'openai';
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

export const openai = new OpenAIApi(configuration);
Enter fullscreen mode Exit fullscreen mode

Never commit your API key to your repository. You can .env out of the box to store your API key.

Create a NextJS API handler

We only need the API to handle POST requests, so we can return an error if the request method is not POST.

We can use the OpenAI client to create a completion using the createCompletion method. We can set the prompt to the question, and the model to text-davinci-003. The temperature and max_tokens can be adjusted to get different results. We can set the n to 1 to only get one result(also to save some money).

// src/pages/api/completion.ts
import {NextApiRequest, NextApiResponse} from 'next';
import {openai} from '../../libs/openai';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {prompt} = req.body;

  if (req.method !== 'POST') {
    return res.status(400).json({error: 'Invalid request'});
  }

  const response = await openai.createCompletion({
    prompt,
    model: 'text-davinci-003',
    temperature: 0.6,
    max_tokens: 100,
    n: 1,
  });

  return res.status(200).json({
    data: response.data
  });
}
Enter fullscreen mode Exit fullscreen mode

Run the application using yarn dev. Test the newly created endpoint using curl, Postman, Hoppscotch, or whatever you prefer.

We should see the response data from OpenAI.

Update the API response

Since we don't need the entire response from OpenAI, we can simplify the response to only return the data we need. Because we set the number of results to only one using n: 1, we can simplify the response to only extract the first choice.

Also, we can remove the new lines from the beginning of the response using the replace method.

// src/pages/api/completion.ts
import {NextApiRequest, NextApiResponse} from 'next';
import {openai} from '../../libs/openai';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {prompt} = req.body;

  if (req.method !== 'POST') {
    return res.status(400).json({error: 'Invalid request'});
  }

  const response = await openai.createCompletion({
    prompt,
    model: 'text-davinci-003',
    temperature: 0.6,
    max_tokens: 100,
    n: 1,
  });

-  return res.status(200).json({
-    data: response.data
-  });

+  const firstResponse = response.data.choices[0];

+  return res.status(200).json({
+    data: {
+      ...firstResponse,
+      text: firstResponse.text.replace(/^\n+/, ''),
+    },
+  });
}
Enter fullscreen mode Exit fullscreen mode

The response should be simpler for the Frontend to process

Create the Question Form

Create variables to store the question and the answer 

// src/pages/index.tsx
const [prompt, setPrompt] = useState('');
const [response, setResponse] = useState('');
Enter fullscreen mode Exit fullscreen mode

Create a function handler when the user clicks the button 

// src/pages/index.tsx
const handleSubmit = async e => {
  e.preventDefault();

  const res = await fetch('/api/completion', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({prompt: prompt.trim()}),
  }).then(res => res.json());

  setResponse(res.data.text);
Enter fullscreen mode Exit fullscreen mode

Create the form with an input and a submit button 

// src/pages/index.tsx
return (
  <div className="max-w-md mx-auto pt-20">
    <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
    <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
      <div className="mb-4">
        <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
          What do you want to know?
        </label>
        <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
          onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
          className="shadow border rounded w-full py-2 px-3 text-gray-700"
        />
      </div>
      <div className="flex gap-2">
        <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
          Ask
        </button>
      </div>
    </form>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Render the response if it exists 

// src/pages/index.tsx
return (
  <div className="max-w-md mx-auto pt-20">
    <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
    <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
      <div className="mb-4">
        <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
          What do you want to know?
        </label>
        <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
          onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
          className="shadow border rounded w-full py-2 px-3 text-gray-700"
        />
      </div>
+      {response && (
+        <div className="mb-4">
+          <h2 className="font-bold">Response</h2>
+          <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
+        </div>
+      )}
      <div className="flex gap-2">
        <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
          Ask
        </button>
      </div>
    </form>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

(OPTIONAL) Add global style to the page 

// src/styles/tailwind
body {
  background-image: radial-gradient(blue 0.1px, transparent 0.5px);
  background-size: 10px 10px;
}
Enter fullscreen mode Exit fullscreen mode

The whole component should look like this 

// src/pages/index.tsx
import {useState} from 'react';

const IndexPage = () => {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

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

    const res = await fetch('/api/completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({prompt: prompt.trim()}),
    }).then(res => res.json());

    setResponse(res.data.text);
  };

  return (
    <div className="max-w-md mx-auto pt-20">
      <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
      <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
        <div className="mb-4">
          <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
            What do you want to know?
          </label>
          <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
            onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
            className="shadow border rounded w-full py-2 px-3 text-gray-700"
          />
        </div>
        {response && (
          <div className="mb-4">
            <h2 className="font-bold">Response</h2>
            <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
          </div>
        )}
        <div className="flex gap-2">
          <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Ask
          </button>
        </div>
      </form>
    </div>
  );
};

export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

Here is how the markup looks like:

And here is the output when the user submits the form:

Tip: You can use the tailwind whitespace-pre-line OR vanilla CSS white-space: pre-line; style to preserve the new lines in the response.

Improve the UX a little bit

We can add a loading state to the button and disable the input field while the request is being processed. Also, instead of spamming the Ask button, we can add a Try Again button to reset the form. That way we can save some of our precious OpenAI credits.

// src/pages/index.tsx
import {useState} from 'react';

const IndexPage = () => {
  const [response, setResponse] = useState('');
  const [prompt, setPrompt] = useState('');
  const [loading, setLoading] = useState(false);

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

    setLoading(true);
    setResponse('');

    const res = await fetch('/api/completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({prompt: prompt.trim()}),
    }).then(res => res.json());

    setResponse(res.data.text);
    setLoading(false);
  };

  const handleTryAgain = () => {
    setResponse('');
    setPrompt('');
  };

  return (
    <div className="max-w-md mx-auto pt-20">
      <h1 className="text-3xl font-bold text-center mb-6 bg-white">
        Ask Me Anything!
      </h1>
      <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
        <div className="mb-4">
          <label
            className="block text-gray-700 text-sm font-bold mb-2"
            htmlFor="prompt"
          >
            What do you want to know?
          </label>
          <input id="prompt" type="text" name="prompt" value={prompt}
            onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
            autoComplete="off" disabled={!!response || loading}
            className="shadow border rounded w-full py-2 px-3 text-gray-700"
          />
        </div>
        {response && (
          <div className="mb-4">
            <h2 className="font-bold">Response</h2>
            <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
          </div>
        )}
        <div className="flex gap-2">
          {response ? (
            <button
              onClick={handleTryAgain}
              className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
            >
              Try again
            </button>
          ) : (
            <button
              type="submit"
              disabled={!!loading || prompt.length < 5}
              className="bg-blue-500 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
            >
              {loading ? 'Thinking...' : 'Ask'}
            </button>
          )}
        </div>
      </form>
    </div>
  );
};

export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

And here is a slightly better experience:

Source Code

The source code for this project is available on GitHub

Conclusion

In this blog post, I demonstrated how simple it is to use OpenAI text completion with Next.js. We have seen how to create an API route in Next.js, how to make an API request to the OpenAI API using the openai library, and create a client-side form to accept prompts and display the response from the API. And those three steps are all we need to create a more awesome app.

What's Next

  • Image generation with OpenAI
  • Save the responses to a database

Top comments (0)

Read next

preethi_p_gowda profile image

Future-Proofing Your Auth0 Integration: Moving from Rules and Hooks to Actions

Preethi Puttegowda -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

joshuaamaju profile image

The Right Way to Add Images to Emails in Next.JS

Joshua Amaju -

peterlidee profile image

Writing Jest tests for searchParams in Next 15

Peter Jacxsens -