How to create a ChatGPT application using Next.js and the OpenAI API.

How to create a ChatGPT application using Next.js and the OpenAI API.

Build a ChatGPT application with Next.js, TypeScript, and TailwindCSS.

Prerequisites

• Node.js and npm installed on your machine
• A basic understanding of React and TypeScript
• An OpenAI API key — you can sign up for an account and generate an API key from the OpenAI website.

You can view my complete project by visiting TeamSmart.AI. It’s a Chrome extension that lets you choose from a variety of AI assistants to aid you with your everyday tasks.

What we will build

Following this tutorial, we will use the OpenAI API to create a simple chat application like ChatGPT.

Step 1: Setting up the project

We will use the Next.js Starter Kit from Apideck to set up our project. It comes with TypeScript, TailwindCSS, and the Apideck Components library pre-installed.

Create a new project using the command line:

yarn create-next-app --example https://github.com/apideck-io/next-starter-kit

2. Choose your project name and navigate to your new folder. Inside, create a .env.local file at the root of your project and add the following line (replacing YOUR_OPENAI_API_KEY with your actual key):

OPENAI_API_KEY=YOUR_OPENAI_API_KEY

Step 2: Writing the API client

To not expose your OpenAI API key, we will create an API endpoint instead of making requests to the API directly from our browser. Follow these steps to set up your endpoint using a Next.js API route:

Locate the pages folder of your project and create a new subfolder named api.

Inside the apifolder, create a new TypeScript file named createMessage.ts

In the createMessage.ts file, we can either use the OpenAI SDK or issue an HTTP request to the OpenAI API to generate a new message for our “conversation” with the AI. We will use the direct API call in this tutorial.

Here is the code for our API route.

For this example, we’re utilizing the gpt-3.5-turbo model, as it’s currently available at the time of writing. If you possess access to GPT-4, you can alter the value as necessary.

The messages value is an array that stores messages from our chat-based conversation with the AI. Each message contains both a role and content. The role can be either:

• system This is the initial prompt sent to the AI, which gives it instructions on how to behave. For example, you may use “You are ChatGPT, a language model trained by OpenAI.” or “You are a software engineer who develops software programs, web applications, and mobile applications using various programming languages and development tools.” Experimenting with different initial system messages can help you fine-tune the AI’s behavior.
• user This represents the user’s input. For example, the user could ask, “Can you provide a JavaScript function fetching the current weather?”
• assistant This is the AI’s response, which the API endpoint will return.

Step 3: Creating the messaging functions

Now that the endpoint is ready to interface with the AI, we can begin designing our user interface to facilitate interaction. To start, we’ll create the sendMessage function. Here’s how:

Create a new file named sendMessage.ts in the utils folder.

Add the following code to sendMessage.ts:

With this function in place, you can establish communication between the user interface and the AI via the API endpoint.

Now let’s setup the logic to create new messages inside a useMessages hook. Inside the utils folder, create a file named useMessages.ts and add the following code:

Step 4: Implement the message UI components

Having set up our functions, we can now design UI components that will use these functions to create an interactive chat interface. Follow the steps below:

Create a new file called MessageForm.tsx in the components folder of your project and add the following code:

Now that we have set up the message UI components, we need to create the component to render the list of messages.

Create a new file called MessagesList.tsx in the components folder and add the following code:

We do not want to show the initial system message, so if the role is system we return null. Next, we adjust the styling of the messages based on if the role is either assisten or user.

While we are waiting for a response, we show a loading element. For this loader element to animate, we need to add some custom CSS. Inside the styles folder, create a globals.css file and add the following:

Make sure to import the CSS file into your _app.tsx file:

We have wrapped our components with the MessageProvider so we can share the state between the components. We also added a container div to the MessageForm component, so it has a fixed position at the bottom of the page.

Step 5: Running the chat application

Nice job! We now reached the point where we could see our chat application in action. Here’s how you can test your ChatGPT application:

Make sure your development server is running. (yarn dev)

Navigate to the root URL of your application in your browser. (localhost:3000)

You should see the UI rendered on the screen. Type a message in the text field at the bottom and hit Send. The AI chatbot will respond to your message.

You can now engage in a conversation with your AI chatbot! Feel free to experiment with different types of messages and see how the AI responds.

Final words

Thank you for reading!

Be sure to check out TeamSmart AI for my complete ChatGPT application. It’s a Chrome extension that allows different AI team members to help you with your daily tasks.