​OpenAI launched ChatGPT - a new AI model that can answer all your questions, and the internet blew up 💥

I am pretty sure you already saw everyone talking about it on twitter.

I went deep down the rabbit hole asking the most random question and testing “what else” can ChatGPT answer. After some good hours, my mind was blown 🤯 and I started asking myself how long until even the developers will be replaced by AI.

Fear aside, ChatGPT is truly a very powerful technology that will open the door to so many new opportunities. It makes AI and Machine Learning accessible to any developer, even beginners.

Let's get our hands dirty with ChatGPT

After a couple of hours spent interacting with the ChatGPT, I decided that it’s time to get our hands dirty, and see how we can use ChatGPT in our projects.

First of all, we need to understand how we can interact with ChatGPT API. As a user, we write some text and ChatGPT tries to complete it.

If you write a question, it will try to complete it with an answer.

These are the 2 important concepts to understand:

• Prompts: The text input we send to ChatGPT
• Completion: The text output we receive from ChatGPT

Your first ChatGPT app in 5 steps

Let's follow the Quickstart guide from OpenAI docs, to get up and running openai API.

1. Create a new account on OpenAI

​https://beta.openai.com/signup​

2. Clone the quickstart repo

3. Create the .env file in the root directory with your API Key

OPENAI_API_KEY=<Your API Key>

4. Install dependencies

5. Let’s run the dev server

Open http://localhost:3000 and play around with the Pet Generator.

​

Let's break-down the demo app

Now that we have ran our first app that interacts with OpenAI, let's haver a look at how it works.

The demo application is build using NextJS. You don't need a lot of experience with NextJS, to understand what is happening here.

I will just recap 2 important topic when it comes to NextJS.

All the files inside the pages directory, are mapped to a url for your web application. Because at the moment we have only one file inside pages, and it is the index.js, this file represents the home page and will be rendered when accessing localhost:3000/. If you add a file pages/about.js, that page will be rendered when accessing localhost:3000/about

There is also a folder pages/api. This folder is treated differently, and every file here is mapped to an API endpoint. That means that the code we write here, is executed on the server side, and we can query this REST api from anywhere.

Backend side

Now that we know how it works, let's check pages/api/generate.js. This file is responsible for generating pet names.

As you can see, we

• We initialise OpenAIApi using our API key (that comes from .env)
• We export a function that will be executed when this API endpoint will be called.
• From the request (req) object, we take the input: animal
• We use a separate function generatePromt that generates a predefined prompt, using the dynamic parameter: animal
• With that prompt, we call openai.createCompletion, to get the recommendation.

This is how our backend side works. The part responsible for interacting with openai API.

Frontend

Now we need a frontend, that will be responsible to take the input from the user (using a form), and then submitting this data to the API endpoint we created above.

Let's have a look at pages/index.js.

You can see there the rendering logic that displays the form with the input and a button, but what we are interested in, is the onSubmit function:

We use fetch api, to query the endpoint api/generate by sending the animal field that the user wrote in the form.

Mobile client (React Native)

Now you might be wondering how can we integrate OpenAI in a React Native application.

Just as we did on the web. We will query our API endpoint for pet name recommendations by sending the animal input.

The good thing is that with React Native, we also have access to the fetch api, so we can reuse the same function onSubmit that we have on the web.

For the url that we are fetching, make sure to include the full path of your api, for example: http://localhost:3000/api/generate

The only difference will be the rendering logic of the form. On the web, we work with components like <form /> and <input />, but in React Native, we will have to work with <TextInput />, <Pressable />.

Want more ChatGPT projects?

If ChatGPT got your attention, and you don't want to stop here, then check out this tutorial I did last Friday.

In this project based tutorial, you build a Full-stack application for WEB, iOS and Android using:
✅ ChatGPT​
✅ React Native​
✅ NextJS

Best regards,
Vadim Savin from notJust.dev​

PS. Hit reply and let me know what is the number 1 thing you want to learn and get better at during 2023?

I read all the answers, and some of this ideas will make it in our content plan.