Next.js and OpenAI Text Completion
How to build a simple Q&A using Next.js and OpenAI Text Completion
Thursday, March 30, 2023
Check these API implementation and frontend implementation on Github. Here is the link to the demo app.
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.
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.
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
.envout 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
max_tokens can be adjusted to get different results. We can set the
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.
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
The response should be simpler for the Frontend to process
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:
And here is the output when the user submits the form:
Tip: You can use the tailwind
whitespace-pre-lineOR 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.
And here is a slightly better experience:
The source code for this project is available on GitHub
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.
- Image generation with OpenAI
- Save the responses to a database