Next.js and OpenAI Text Completion

How to build a simple Q&A using Next.js and OpenAI Text Completion

Thursday, March 30, 2023


TL;DR

Check these API implementation and frontend implementation on Github. Here is the link to the demo app.


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.





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






Create the Backend API


Create a reusable OpenAI client






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).






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.


GIF




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.




The response should be simpler for the Frontend to process


GIF




Create the Question Form


Create variables to store the question and the answer




Create a function handler when the user clicks the button




Create the form with an input and a submit button




Render the response if it exists




(OPTIONAL) Add global style to the page




The whole component should look like this




Here is how the markup looks like:


GIF




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


GIF




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.




GIF




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.




And here is a slightly better experience:


GIF




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
    •