<p>In this course or series we are going to be talking about all things AI, and especially how to use AI in your frontend projects. Expect to learn about Open AI API, DALL-E, Function Calling and much more.</p>

Will the AI take our jobs?

YES!

When?

We are not sure! (probably soon... ish).

Ok, now that we got that out of the way, since that seems to be a concern in the dev community, we can figure out what to do in the meantime. 

And I don't mean by helping you to code your apps (which it can do for sure), but to help with the features of your apps. 

For example, I put useful links to articles I find around the web in Notion or Obsidian apps. However I always need to categorise them somehow, by tags usually. 

Wouldn't it be great if I could just paste a link to a box, and then let AI generate most relevant  tags or keywords for that article and that way I would be able to categorise them. 

In this video we will create this exact example using OpenAI and NextJS.

And actually, it's incredible how easy this is. Let me show you.

### Setup

Let's quickly just go over the setup.

I have here NextJS 13 app with Tailwind for styling. What we will also need is an OpenAI SDK for Node. You can install it by running `npm install openai` in the root of your NextJS app.

Now you need to Signup for OpenAI API by clicking the API link on their site, and then click Signup. You can use Email or Microsoft or Google Accounts.

Once you are done with that - Login. Click on your profile and then View API Keys. 

Create new secret key, and save it somewhere because you will not be able to copy it again. You will only be able to create a new key.

Ok, setup is done. Let's write some code.

### Create API Endpoint

In your Next app create a file called `.env.local` add `OPENAI_KEY=` as a variable and add your key there. 

Now, create a file called `get-ai-response.js` inside of `pages/api` folder.

We need to setup OpenAI connection.

First we require `Configuration` and `OpenAIAPI` from `openai` module.

Then we define our configuration and pass in `OPENAI_KEY`  from our `.env.local` file.

Great. 

Let's define our async handler function for our API endpoint. In it, we will actually call the OpenAI API and give it a task. 

The most important parts here are `model` and `prompt` . `model` defines the AI  model that you wanna use. Different models have different usage cost. You can read about different models on the OpenAI site. We will use the most expensive one "text-davinci-003". Don't worry, you get 18 bucks of API calls for free for two months. And thats more than enough for what we are doing here. 

`prompt` defines what you wanna ask the API. Like when you go to ChatGPT page and ask it something. 

For this we will ask the AI to read the link we send it and give us 3 most relevant keywords of an article, and then return those keywords as a string separated with pipe symbol. This is so we can parse it easily into an array later on.

So we can say something like: 

```
Read this link: ${req.query.link} and give me 3 most relevant keywords, output them as a string separated with |
```

We will of course get the link from the request that we will send to our `get-ai-response` endpoint.

Only thing that is left to do is to return data from the response in json format. 

```js
const {Configuration, OpenAIApi} = require("openai");  
const configuration = new Configuration({  
  apiKey: process.env.OPENAI_KEY,  
});  
const openai = new OpenAIApi(configuration);  
  
export default async function handler(req, res) {  
  const response = await openai.createCompletion({  
    model: "text-davinci-003",  
    prompt: `Read this link: ${req.query.link} and give me 3 most relevant keywords, output them as a string separated with |`,  
    temperature: 0,  
    max_tokens: 100,  
  });  
  
  res.status(200).json(response.data)  
}
```

We can already test this out by going to `localhost:3000` then `api/get-ai-response?link=<link-to-the-article>`.

Now wait a little and if everything is ok, you should get a response like this. 

```json
{  
  "id": "cmpl-6iSLDVJiFvEEx2WkCnA7wxvKAgMuA",  
  "object": "text_completion",  
  "created": 1676053395,  
  "model": "text-davinci-003",  
  "choices": [{"text": "\n\nDirectus|Newsletter|Flows|Subscribers|List", "index": 0, "logprobs": null, "finish_reason": "stop"}],  
  "usage": {"prompt_tokens": 48, "completion_tokens": 15, "total_tokens": 63}  
}

```


Notice that under `text` property we get a string with keywords separated by a pipe. 

It works!

All that is left to do now is to create a user interface for sending links and we are done. 

### User interface

So I removed almost everything from the home page of our NextJS app. And replaced it with just an input field and a button.

Input and button are inside of a form tag. 

Ok, first of all lets add two states, `loading`  for showing loading state while the AI is working, and `data`  for setting and displaying the keywords that we get from the AI.

Now let's add a function for submitting our link to the API. I'll call it `handleSubmit`. We will of course first `preventDefault` so that our page doesn't refresh. Then we set the loading state to `true` , get the link from the field named `link` in our form. And we send that to the API with `fetch`.  we await for the data, and when we get it we need to trim it to remove new lines, and then split it into an array on the `|` symbol. Set `loading` to false.

```js
const handleSubmit = async (e) => {  
  e.preventDefault()  
  setLoading(true)  
  
  const link = e.target.link.value  
  const res = await fetch(`/api/get-ai-response?link=${link}`)  
  const data = await res.json()  
  
  setData(data.choices[0].text.trim().split("|"))  
  
  setLoading(false)  
}
```

Great. 

Now all we need to do is pass `handleSubmit` function to `onSubmit` event of the form.

Under the form we show "Please wait..." if the loading state is `true`.

And then finally we spit out the keywords if we get the data and `loading` state is `false`.

And that is all there is to it!

```jsx
{loading && <div>Please wait...</div>}  
  
{data.length > 0 && !loading && data.map((tag, index) => <div key={index}>{tag}</div>)}
```

Let's test it out.

Find your article somewhere on the web, and paste that link. I will use the documentation for installing TailwindCSS on NextJS: https://tailwindcss.com/docs/guides/nextjs.

And if everything works as expected we should get some results. 

Try it out with a few more articles, and judge for yourself if the results you are getting are relevant.

### Conclusion

Of course this is just a proof of concept. But the possibilities are endless here. You could for example take those key words, save them to the database with a link. Maybe allow the users to add their own keywords, play around with refining the results and so on.

What would be your idea for using AI in your apps? Let me know down in the comments.

Everything we did here will be available for you on Github. The link is below.

In this video I'm going to show you how you can use Open AI to create some nice features in your apps.

Using AI In Your Frontend App feat. OpenAI and NextJS

With function calling you can still get some hallucinations from the system, but at least those are going to be structured hallucinations. 

Using Function Calling we will build an app called Movie Nerd. You just enter the name of the movie and the API will return release date of the movie, actors, director, summary of the movie, most memorable lines from the movie and to add a bit weirdness to this whole process we will ask Chat GPT to generate description of the movie poster, that we will send to DALL-E to generate an Image of the poster which almost always gives a weird and kind of creepy result. 

So let's get started.

### Setup

For this demo I'm using Next.js 13 with Tailwind installed for a bit of styling. You will also need Open AI API key if you wanna follow along with this tutorial. That key needs to be saved to the `.env` file at the root of your Next.js app. 

We are going to be using using `openai` npm package to talk to ChatGPT and DALL-E. Just be sure to use at least version 3.3.0 of the module since that is the one that supports Function Calling.

If you are having troubles with Open AI setup you can [checkout this post](https://watch-learn.com/frontend-tips/using-ai-in-your-frontend-app-feat-open-ai-and-next-js)  for more information about this setup. And of course everything we do here will be available on Github, the link is in the description below.

Only note worthy thing is `index.js` in `pages` folder that is currently just displaying an input box and a button.

The code for the file looks like this: 

```jsx
import Head from 'next/head'
import {useState} from "react";

export default function Home() {
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState([])


  const handleSubmit = async (e) => {
    e.preventDefault()

    setLoading(true)

    const movieName = e.target.movieName.value

    const res = await fetch(`/api/get-movie-data?movie_name=${movieName}`)
    const data = await res.json()

    console.log(JSON.parse(data));

    setData(JSON.parse(data))

    setLoading(false)
  }

  return (
    <>
      <Head>
        <title>Movie Nerd</title>
        <meta name="description" content="Generated by create next app"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="icon" href="/favicon.ico"/>
      </Head>
      <main className="max-w-3xl mx-auto py-10">
        <div>

          <form className="mt-1 mb-10" onSubmit={(e) => handleSubmit(e)}>
            <label htmlFor="movieName" className="mb-2 block text-lg font-medium text-gray-500 prose">
              Enter the movie
            </label>

            <input
              type="text"
              name="movieName"
              id="movieName"
              className="block w-full rounded-md border-gray-500 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-5"
              placeholder="Enter name of your movie"
            />

            <button
              type="submit"
              className="mt-5 w-1/2 mx-auto flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            >
              Get me the movie data
            </button>
          </form>

          {loading && <div className="text-white">Please wait...</div>}

        </div>
      </main>
    </>
  )
}
```

We have our form, a loading state, and `handleSubmit` function that is going to trigger `get-movie-data` endpoint and send it the name of the movie. Of course, if you try clicking the "Get me the movie data" button right now you will get a 404 error. Because that route still doesn't exist. 

Let's fix that. 

### Defining Open AI Call

In the `pages/api` folder create a file called `get-movie-data.js`.

Next, initialise Open AI API like this:

```js
const {Configuration, OpenAIApi} = require("openai");
const configuration = new Configuration({
  apiKey: process.env.OPENAI_KEY,
});
const openai = new OpenAIApi(configuration);
```

Now we are going to export default `handler` function, that receives request and a response. 

```js
export default async function handler(req, res) {
  
}
```

In the `handler` function we are going to make our request to the Open AI API. Like this:

```js
const response = await openai.createChatCompletion({
	model: "gpt-3.5-turbo-0613",
   messages: [
	    {"role": "system", "content": "You are a movie database assistant."},
	    {"role": "user", "content": `Give me information about movie called: ${req.query.movie_name}`}
    ],
    functions: [
        {name: "get_movie_data", "parameters": schema}
    ],
    function_call: {name: "get_movie_data"},
    temperature: 0,
});
```

Let's go through this code for a second. We are using `createChatCompletion` function to talk to ChatGPT, this is the function that supports Function Calls.

Next we are defining a model - for this to work you need to use either `gpt-3.5-turbo-0613` or `gpt-4-0613`  but since I don't have access to GPT-4 I will use 3.5.

In the [previous AI video on this channel](https://watch-learn.com/frontend-tips/using-ai-in-your-frontend-app-feat-open-ai-and-next-js) we were sending a prompt to the Chat GPT. We are not going to do that today. Instead we are going to send messages array. The first one primes Chat GPT to be our movie database assistant. And the next one is our prompt. So we say "Give me information about movie called:", and then we send in the movie name from the request object. 

Next, we are defining functions. Meaning you can send more than one function to the API. But for this use case one function is enough. We are giving it a name of `get_movie_data` and then sending in parameters. The parameter in this case is going to be a schema that we are going to build out during this video. 

After that we just do a `function_call` and call our `get_movie_data` function. 

This is all the code we need to talk to Open AI and get our data. The only thing we need to worry about now is defining our schema to get the structured response from Open AI. 

And to send that data to our frontend we just need to add this one liner: 

```js
res.status(200).json(response.data.choices[0].message.function_call.arguments)
```

And this should send the response from Open AI to our App so we can display it. 

### Defining the schema

Now we need to define a schema, this is the most important part. But luckily it's very easy to do.

Our schema is going to be of type `object` and is going to have some properties. 

```js
const schema = {
	type: "object",
	properties: {
	
	}
}
```

First property that we are going to add is `release_date` it is going to be of type `string` . We can also provide a description so that Chat GPT has context of what we wanna get. We can just write something like: "Release date of the movie in Day.Month.Year format". You can think of it like a mini Chat GPT prompt.

```js
const schema = {
	type: "object",
	properties: {
		release_date: {
	      type: "string",
	      description: "Release date of the movie in Day.Month.Year format"
	   },
	}
}
```

There is one more thing that we need to do, to get a response is to define required fields. Like this:

```js
const schema = {
	type: "object",
	properties: {
		release_date: {
	      type: "string",
	      description: "Release date of the movie in Day.Month.Year format"
	   },
	},
	required: ["release_date"]
}
```

We just add a `required` array to the end of the schema and fill it with fields that we wanna get from the API.

Ok, so now let's see if this works. Go to your browser, and enter a name of the movie in the input, for example Inception. Click "Get me the movie data" button.

Since we didn't setup any data displays on our page, we will check our console to see what we are getting from the API. 

And after a few seconds we get back an object with the `release_date` property and the movie release date.

Nice. 

So now let's get the actors for the movie. We follow the same steps as for `release_date` but this time our property type is going to be an array. So we have to set it up a bit differently. Since this is an array we also need to define how the objects in that array will look.

```js
actors: {
	type: "array",
   description: "Get the names of first five most important actors in this movie",
	 items: {
        type: "object",
        properties: {
          first_name: {type: "string"},
          last_name: {type: "string"}
        }
	 }
},
```

For that we use `items` property and in it define that our item is going to be an object that is going to consist of two fields `first_name` and `last_name` both of those fields are going to be strings. 

And that is it.

Now just add actors to the `required` array and we can test this out.

```js
required: ["release_date", "actors"]
```

Enter Inception again and let's see what we get from the API. 

We are getting an array of first five actors for this movie. Great!

Now I will add a few more fields to our schema, so that now it looks like this:

```js
const schema = {
  type: "object",
  properties: {
    release_date: {
      type: "string",
      description: "Release date of the movie in Day.Month.Year format"
    },
    actors: {
      type: "array",
      description: "Get the names of first five most important actors in this movie",
      items: {
        type: "object",
        properties: {
          first_name: {type: "string"},
          last_name: {type: "string"}
        }
      }
    },
    director: {
      type: "string",
      description: "Director of the movie"
    },
    summary: {
      type: "string",
      description: "Provide a brief summary of the movie remove any double quotes from the text."
    },
    quotes: {
      type: "array",
      description: "Provide three most memorable lines from this movie",
      items: {
        type: "object",
        properties: {
          quote: {
            type: "string",
          },
          actor: {
            type: "string",
            description: "Actor that is saying the line."
          },
          person: {
            type: "string",
            description: "Character in the movie saying the line."
          }
        }
      }
    },
    poster_description: {
      type: "string",
      description: "Accurate description of the movie poster for this movie in seven sentences."
    }
  },
  required: ["release_date", "actors", "director", "summary", "quotes", "poster_description"]
}
```

I added a director, summary of the movie, quotes array that is going to provide us with 3 most memorable lines from the movie, character in the movie saying the line and the actor playing it.

And lastly we defined `poster_description` field that is going to ask ChatGPT to provide a description of the movie poster in seven sentences, so that we can send that to DALL-E later on. 

Also note that I instructed ChatGPT to avoid double quotes for the movie summary because that could screw up our response.

Let's test this out with the movie Big Lebowski since this will get us some nice quotes. 

We are probably going to have to wait a bit longer for this response since we are requesting much more data. 

Ok it works, "this code really ties the app together". 

Before we implement those creepy poster images for the movie, let's display the data on our page.

### Display response on the page

I'm just going to add this code to below loading indicator:

```jsx
{Object.keys(data).length > 0 && !loading && (
	<ul className="text-white mb-8">
	  <li className="mb-4"><strong>Release date:</strong> {data.release_date}</li>
	  <li className="mb-4">
		 <strong>Actors:</strong>
		 <ul className="ml-4 mt-4">
			{data.actors.map((actor, index) => (
			  <li key={index}>{actor.first_name} {actor.last_name}</li>
			))}
		 </ul>
	  </li>
	  <li className="mb-4"><strong>Director:</strong> {data.director}</li>
	  <li className="mb-4"><strong>Summary:</strong> {data.summary}</li>
	  <li className="mb-4">
		 <strong>Quotes:</strong>
		 <ul className="ml-4 mt-4">
			{data.quotes.map((quote, index) => (
			  <li key={index} className="mb-4">
				 <figure>
					<blockquote>
					  {quote.quote}
					</blockquote>
					<figcaption>
						—{quote.person}, <cite>played by {quote.actor}</cite>        </figcaption>
				 </figure>
			  </li>
			))}
		 </ul>
	  </li>
	</ul>
 )}
```
  
Here we are just checking if we are getting something from the API, and if we do we are displaying data inside of unordered list.

Since actors and quotes are arrays we are mapping through them. Nothing complicated.

Let's test this out with a movie Goodfellas.

Nice, we are getting the data on the page. Now lets implement those creepy images.

### Setup Movie Image Endpoint

Create `get-movie-image.js` inside the API folder, initialise Open AI API and define handler function. Just like we did for `get-movie-data.js`

```js
const {Configuration, OpenAIApi} = require("openai");  
const configuration = new Configuration({  
apiKey: process.env.OPENAI_KEY,  
});  
const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  
}
```

In the handler function we are going to call `createImage` function from `openai` module. 

```js
const response = await openai.createImage({
	
})
```

We need to define  `prompt` for this API, which is going to be `poster_description` that we got from ChatGPT. Number of images, in our case 1, and the size. I'm going with '512x512'. And lastly we are just returning response from the API to our frontend.

```js
const response = await openai.createImage({
	prompt: `${req.query.poster_description}`,
	n: 1,
	size: "512x512"
 })


 res.status(200).json(response.data.data[0].url)
 ```

And that is it for the API. We just need to implement image creation on our page.

### Displaying DALL-E image on the page

In `index.js` add two states, for image loading and image URL.

```jsx
const [imageLoading, setImageLoading] = useState(false)  
const [imageUrl, setImageUrl] = useState(undefined)
```

After that we will define `getImage` function that will get the image and set it to the `imageUrl` state.

```jsx
const getImage = async (movieDescription) => {
 setImageLoading(true)
 const resImage = await fetch(`/api/get-movie-image?poster_description=${movieDescription}`)
 const image = await resImage.json()

 setImageUrl(image)

 setImageLoading(false)
}
```

Now we will use `useEffect` that is going to have `data` dependency. So when the `data` changes a.k.a we get the movie data response we will trigger `getImage` function and send it `poster_description`.

```jsx
useEffect(() => {
 if(data.poster_description) {
	getImage(data.poster_description)
 }
},[data])
```

Below movie data I will add loader for `imageUrl`.

```jsx
{imageLoading && <div className="text-white">Image loading, please wait...</div>}
```

And below that we display our image if we get anything from the DALL-E API.

```jsx
{imageUrl && !imageLoading && (
	<div>
	  <img src={imageUrl} alt="" />
	</div>
)}
```

And that should be it. Save it and let's test it in the browser. Write Top Gun in the box for example.

This response is going to take a bit longer since first we are contacting Chat GPT to get movie data and after that we will contact DALL-E API to get the image.

That image is weird, but at least we are getting something, so that is nice. 

It would probably be better to send that description to Midjurney API, I'm sure that we would get much better results. But for the sake of brevity and simplicity we are using Open AI APIs all the way in this demo.

Note that if you don't send anything to the API or send movie name that doesn't exist it will make stuff up for you, so you can use this as an imaginary movie generator or something like that. 

### Error Handling

Just one note before I conclude this video - It's good to wrap your requests to the API in a `try` `catch` block, so that you get some useful info if something breaks. 

```js

try {
 const response = await openai.createImage({
	prompt: `${req.query.poster_description}`,
	n: 1,
	size: "512x512"
 })


 res.status(200).json(response.data.data[0].url)

} catch (error) {
 if (error.response) {
	console.log(error.response.status);
	console.log(error.response.data);
 } else {
	console.log(error.message);
 }
}
```

While doing the prep for this post I would sometimes get the message from the API that the description for the poster is using unsafe words, and then it wouldn't generate the image. I wouldn't know what the problem was if I didn't wrap it in a `try`  `catch` block. So keep that in mind.

### Conclusion

As you can see using AI to be your backend of sorts can be very powerful, and this is just scratching the surface. You can do much more complicated things with this approach. But that's  a topic for another post.

Open AI released new Chat GPT feature - Function Calling. 

What this basically means is that you can send a function to ChatGPT API and get structured JSON response that you can use in your app.

AI

AIUsing AI In Your Frontend App feat. OpenAI and NextJS

AIGet Structured Response From Open AI Using Function Calls