3 Powered Applications Using Next.js and Replit in 20 Minutes

Why You Should Build a GPT-3 Powered App

Dive into the world of AI with this GPT-3 tutorial. Within 20 minutes, you'll be wielding the power of a 175 billion parameter text transformer, GPT-3 from OpenAI. This guide, suitable for those with a basic understanding of React and NextJS, will walk you through the effortless steps of creating and deploying your own web application. If you're new to these technologies, don't worry, we've got resources to get you up to speed. We'll be using NextJS and Replit to build and host our application, covering all the basics to get your GPT-3 application up and running.

Setting Up Replit and Importing Our Project from GitHub

We start with creating an account at Replit where we will import and initialize our project. This will allow us to get a working build so that we can see our updates in real-time.

Getting Started with Replit

1. The first thing you will need to do is create a new Replit project. To do this, head over to Replit and sign up for an account if you do not already have one.

2. Once logged into Replit, click the + sign in the top right corner.

3. In this tutorial, we will be using the GPT-3 boilerplate that will make our lives easier and allow you to build your own GPT-3 powered application in 20 minutes.

4. Click Import from GitHub.

5. Paste https://github.com/nextgrid/GPT-3-Nextjs-Tailwind-starter in the GitHub URL field.

6. Click the Import from GitHub button.

Installing Dependencies & Configuring Our Project

The first thing we need to do is add our GPT-3 API key from OpenAI. If you do not have one, you can get one by signing up at beta.openai.com. Once your account is created, you can go to your profile and click the "API Keys" tab or simply click this link for OpenAI API Keys.

Add Our GPT-3 API Key to .env File

1. Click the lock icon on the right side.

2. In the key field, write OPENAI_API_KEY.

3. In the value field, write your GPT-3 API key that should look something like sk-tKyMX1XbOS***Agaa5qx89UToRCy.

4. To start our application, we need to update the run command. In the run command field, change the command from npm run start to npm run dev.

5. Click the Done button.

Install Dependencies and Start Development Environment

Now it's time to install all the dependencies and start the development environment. Follow these steps:

1. Click the big green RUN button.
2. Wait for the development environment to install and start.
3. Once you clicked the RUN button, you will see output in the console window where it first installs packages and then starts our development server.
4. Once this is done, you will see your web app in the window above the console.

Building Our GPT-3 Powered Application

Right now we have a simple frontend connected to our GPT-3 powered backend. If you enter a text into the text field, you will see the generated response. Let’s try to enter text and see what happens:

Your input:

GPT-3 Output:

Customize Our GPT-3 Powered Application

At this stage, you should have a GPT-3 powered application that you can use to generate text. Now it’s time to configure the application to our needs. For instance, we can create a GPT-3 powered application that helps summarize an article that we can use as our copy for a social media post.

Configuring the API Endpoint

Start by opening up /pages/api/openai.js. The file should look similar to this:

To make our life easier, we have added the following values: The $beforePrompt and $afterPrompt will streamline adding desired values before and after our prompt before it's sent to the GPT-3 API.

As we build a social media post generator, we will use specific placeholders to modify the prompt.

Testing Our Application

Now, let’s test our application using an article from TechCrunch. Here’s a snippet:

Instagram has just announced a new feature that allows businesses to boost their Reels to turn them into ads! This is a great way to reach new audiences and get your brand story out there. Remember to check your Insights to see which ads performed the best.

Final Words

Congratulations on completing this GPT-3 tutorial! In just 20 minutes, you’ve laid the groundwork to build diverse applications. But why stop here? Join our AI Hackathons, where in just seven hours, you can collaborate with a global community of over 52,000 enthusiasts to create a working AI app prototype.

Let’s shape the future with AI!