<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>

<p>Payload CMS is a very developer friendly CMS, and in it you do everything through code. In this course we are going to check out Payload CMS and I'm going to show you some of its cool features.&nbsp;</p>

Payload CMS

<p>This course is just a collection of tips and tricks for Directus 9 platform.</p>

Directus 9

<p>In this course we will be using Directus 9 as our API and CMS, and of course Nextjs for the frontend of our site. Kind of like we did with <a title="" href="https://watch-learn.com/courses/making-websites-nextjs-and-strapi" target="_self">Making Websites With Next.js And Strapi</a> series.</p>
<p>This time however we will add Tailwind into the mix and also include React Query right from the start for better performing API requests, caching, state management and so on. Oh, and also instead of using REST API we are going to use GraphQL for this series.</p>

Directus 9 + Next

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.

Get Structured Response From Open AI Using Function Calls

When dealing with headless CMSs the usual workflow would be to connect to REST API or use GraphQL to get the data from the API and display it on your frontend. 

If you are using Next.js (or some other SSR framework) with PayloadCMS you can take advantage of a feature called Local API. 

Local API allows you to get the data directly on the server and then display it on the frontend, which means that you don't need to deal with server latency or network speed and can interact directly with your database. 

In this video I'm going to show you how to setup Next.js and Payload to run on the same server, kind of like a monolith app, and then how to use Local API to get and filter the data.

### Next.js and Payload Setup

For this demo we are going to be using [official Payload/Next template from Github](https://github.com/payloadcms/nextjs-custom-server) . Of course you could set this up yourself but that is not a trivial task, so for the sake of time we are going to be using this.

Go to Github, click on "Code" and copy the path to this Github repo.

In your terminal do `git clone` and then paste the path to the repo, at the end add the name of your project. I'm going to call mine "payload-next":

```shell
git clone https://github.com/payloadcms/nextjs-custom-server payload-next
```

Now CD into it, and make sure that you are running at least 16 point something version of Node. 

Create `.env` file by copying `.env.example` file like this:

```shell
cp .env.example .env
```

Let's open this project in our code editor, and then open the newly created `.env` file.

First just add a random string for `PAYLOAD_SECERT` variable. 

Next, add your MongoDB connection to the `MONGODB_URI` variable. If you don't have MongoDB running on your local environment check the [previous video](https://watch-learn.com/payload-cms/let-s-checkout-payload-cms) for some ideas. I'm using Docker image of MongoDB for this demo.

Now let's do `npm install` to install all the dependencies. 

If you get an error like I did, run `npm install` with `legacy-peer-deps` flag.

```shel
npm install --legacy-peer-deps
```

Now we just run `npm run dev` and we should be good to go.

If you go to `localhost:3000` in your browser, you should be greeted with the 404 page. Not to worry, we will fix that later. For now let's go to the `localhost:3000/admin` , this is where Payload Admin UI lives. Create an admin account, and you should get to the Admin Dashboard.

### Creating collections

We are getting 404 on the front page of our app because we didn't setup a home page. Luckily we can seed the database with that data to get rid of that error. Or you can create a homepage manually. 

I'm going to go with the seed option in this demo, because I also want to seed the Products, Colors and Sizes that we are going to be filtering with Local API. Before we seed the database we need to create necessary collections.  

First I'm going to create `Colors` collection.

Create a file called `Colors.ts` inside the `collections` folder and add this code:

```ts
import { CollectionConfig } from 'payload/types';

const Colors: CollectionConfig = {
  slug: 'colors',
  admin: {
    useAsTitle: 'name',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'name',
      type: 'text',
      label: 'Color name',
    },
  ],
  timestamps: false,
};

export default Colors;
```

Check the [previous video](https://watch-learn.com/payload-cms/let-s-checkout-payload-cms) if you don't understand what is going on here - in short we are just creating Colors collection with one field called `name`.

Next create a file called `Sizes.ts` also in the `collections` folder. And add this code to it:

```ts
import { CollectionConfig } from 'payload/types';

const Sizes: CollectionConfig = {
  slug: 'sizes',
  admin: {
    useAsTitle: 'name',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'name',
      type: 'text',
      label: 'Size name',
    },
  ],
  timestamps: false,
};

export default Sizes;
```

It's pretty much the same as `Colors.ts` . 

Now we are going to create a "Products" collection that is going to be using "Sizes" and "Colors" as relational fields along with Product specific fields.

In the `collections` folder create a file called `Products.ts` and add this code to it.

```ts
import { CollectionConfig } from 'payload/types';

const Products: CollectionConfig = {
  slug: 'products',
  admin: {
    useAsTitle: 'name',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'name',
      type: 'text',
      label: 'Products name',
    },
    {
      name: 'price',
      type: 'number',
      label: 'price',
    },
    {
      name: 'colors',
      type: 'relationship',
      label: 'Colors',
      relationTo: 'colors',
      hasMany: true,
    },
    {
      name: 'sizes',
      type: 'relationship',
      label: 'Sizes',
      relationTo: 'sizes',
      hasMany: true,
    },
  ],
  timestamps: false,
};

export default Products;
```

This is a very simple collection, which consist of `name` and `price` fields, with two relational fields that are going to reference "Colors" and "Sizes". 

Great, now all we need to do is register these collections in `payload.config.ts` file. 

```ts
import { buildConfig } from 'payload/config';
import dotenv from 'dotenv';
import Page from './collections/Page';
import Media from './collections/Media';
import Products from './collections/Products';
import Sizes from './collections/Sizes';
import Colors from './collections/Colors';

dotenv.config();

export default buildConfig({
  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  collections: [
    Page,
    Media,
    Products,
    Sizes,
    Colors,
  ],
});
```


### Seeding the database

Now we are ready to seed the database. If you wanna follow along with this video, you can copy  `index.js` file from `seed` folder from the code used in this video (the link will be in the description below). By doing this you will seed the Database with 30 Products, a few Colors and Sizes along with the Homepage of our site. 

To seed the database first stop the server and run it again. So that we have all collections implemented. 

Stop the server again, and run:

```shell
npm run seed
```

If you go to `localhost:3000` we don't have 404 error anymore, but, more importantly, in the Admin UI you should now see Colors, Sizes and Products that we seeded.

Cool, we can now start using this data in Next.js with Local API.

### Generating types

Since Payload fully supports TypeScript, it would be nice to add typings for "Products", "Colors" and "Sizes" so that we can use it in our Next.js app. With Payload this is super easy, but we just need to setup the command first.

Add this code to your `package.json` file under the `scripts` object.

```shell
"generate:types": "PAYLOAD_CONFIG_PATH=./payload.config.ts payload generate:types"
```

Now in your terminal run:

```shell
npm run generate:types
```

And our types will be automatically generated.

You can check `payload-types.ts` file to see if the generator added our types. And sure enough they are here, "Products", "Colors" and "Sizes". 

Nice.

### Getting the products

Create `products.tsx` file inside `pages` folder. 

First I'm going to import everything I need. Two things are interesting here, and those are `payload`  from payload, which we will use to initiate Local API and also `Product` type that we just generated. 

```tsx
import React from 'react';  
import { GetServerSideProps } from 'next';  
import payload from 'payload';    
import Head from '../components/Head';  
import { Product } from '../payload-types';

interface ProductProps {
  products: [Product];
}
```

Next I'm going to create our component. Using `ProductProps` and prepare our products for display. Nothing to fancy here, we are just mapping through the `products` that we are going to get from Payload and displaying `name`, `price`, `colors` and `sizes`.

```tsx
const Products: React.FC<ProductProps> = ({ products }) => (
  <main className="products-page">
    <Head title="Product list" />
    <div className="container">
      <h2>
        Products (
        {products.length}
        )

      </h2>


      <ul className="product-list">
        {products.map((product) => (
          <li
            key={product.id}
            className="product-item"
          >
            <h3>{product.name}</h3>

            <strong className="price">
              $
              {' '}
              {product.price}
            </strong>


            <strong>Colors:</strong>
            <ul className="sub-list">
              {product.colors.map((color) => (<li key={color.id}>{color.name}</li>))}
            </ul>

            <strong>Sizes:</strong>
            <ul className="sub-list">
              {product.sizes.map((size) => <li key={size.id}>{size.name}</li>)}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  </main>
);
```

Now it's time to get our data, remember Local API is only usable on the server, so we need to make our request for the data in `getServersideProps` .

```tsx
export const getServerSideProps: GetServerSideProps = async () => {
  
};
```

And in here we can query our products and send them to our component. Like this:

```tsx

const pageQuery = await payload.find({
    collection: 'products',
    limit: 30,
});
```

So here I'm using `payload` function that I imported, to find all the `products` and limit them to 30 results. `limit` property comes in very handy when you are developing pagination for your lists. 

Only thing we need to do now is send the Products to our component like this.

```tsx
return {
    props: {
      products: pageQuery.docs,
    },
};
```

Before we check this in the browser I will just add a bit of css to `style.css` to make this look a bit prettier.

```css
.products-page {
  background: #000000;
  padding-top: 1px;
  padding-bottom: 60px;
  color: #ffffff
}

.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.product-list, .sub-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-list h3 {
  font-size: 24px;
  margin: 0 0 40px;
}

.product-list strong {
  display: block;
}

.product-list strong.price {
  font-size: 18px;
  margin-bottom: 20px;
}

.product-item {
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  background: #0a0a0a;
  margin-bottom: 20px;
  padding: 20px;
}

.sub-list {
  display: flex;
  margin-bottom: 20px;
}

.sub-list li {
  margin-right: 20px;
}
```

Ok. Now let's check it out in the browser. Great, we are getting our products, with only a few lines of code. This is nice, but Local API is so much more powerful than this.

### Filtering products

Getting just a list of products wouldn't be very useful if we couldn't filter it in some way. 
To filter the products we can use `where` property. Say for example that we want to get just the products that cost less that 100 dollars. 

We can do that by doing something like this.

```tsx
where: {
    price: {
        less_than: 100,
    },
},
```

So we use a `where` property, and then say that the price should be less than a hundred. And sure enough now we get only those products that have a price less than hundred.

To access nested properties, like `color` or `size` we would write something like this:

```tsx
where: {
    'colors.name': {
        equals: 'Green',
    },
},
```

Now we should get a list of Products that have a Green color in the colors options array.

Cool.

But what if we want to get the products that have the price less than 100 dollars AND have a Green color option. Easy, we can write our query within an `and` array, like this.

```tsx
where: {
    and: [
        {
          'colors.name': {
            equals: 'Green',
          },
        },
        {
          price: {
            less_than: 100,
          },
        },
    ],
},
```

Now we are getting products that have a price bellow 100 dollars and color option of Green. You can also use an `or` array, and not only that, you can nest `and` in it so you can do some pretty complicated queries. 

Kind of like this.

```tsx
where: {
    or: [
        {
          'colors.name': {
            equals: 'Red',
          },
        },
        {
          and: [{
            price: {
              greater_than: 100,
            },
            'sizes.name': {
              equals: 'XS',
            },
          }],
        },
    ],
},
```

Now we are displaying products that either have Red color option OR they have XS size option AND are less than 100 dollars. 

Very powerful stuff.

You can take a look at all the options you have available in the documentation. And also keep in mind that these filters are not available only to the Local API, you can use similar syntax when doing GraphQL queries and even REST queries, but for them it is best to use `qs` package to stringify your queries so that they don't look shitty.

Of course Local API is not only used for getting and filtering your data. You can also very easily use it to create, update and delete items. Local API is also used for authentication, so logging in users, resetting passwords and so on. 

I can't cover everything in this video, so checkout the docs if you are interested in other aspects of Local API.

In this video I'm going to show you how to setup Next.js and Payload to run on the same server, kind of like a monolith app, and then how to use Local API to get and filter the data.


PayloadCMS and Next.js With Local API

What I really like about Payload CMS is that everything is done through code, you don't have to go around clicking in the admin UI to setup things like you would do in WordPress, Strapi or even Directus. 

You just configure everything directly in code and use the Admin UI to add data to your app. Being a developer this is really appealing to me. It has a great developer experience, but the end users don't need to know anything about coding to add new data to the CMS easily.

Let me show you how this works.

### Install MongoDB

First of all you need to setup MongoDB to be able to use Payload, this is very easy and there are a few options. 

For this demo I'm going to use a Docker instance of MongoDB - if you want to setup MongoDB that way, you can follow [along with this tutorial](https://manglekuo.medium.com/running-mongodb-on-docker-with-macos-b08324f5aab2).

Another way is to visit [MongoDB docs](https://www.mongodb.com/docs/manual/installation/) and follow instructions there to install it on the system of your choice. 

And the third and probably the easiest way is to sign-up for [MongoDB Atlas](https://www.mongodb.com/atlas/database) and use their free tier to setup your DB. And then use that during Payload setup.

### Install Payload

Once you installed MongoDB, go to your terminal and run `npx create-payload-app` , just be sure that you have NodeJS version 10 or above running on your system. 

Now give it a name, I will call mine `payload-movies` since we are going to create a standard demo that I always use for these types of videos, a kind of movie database.

For project template I'm going to choose a `blog` so that we get some collections and fields right away. And then later we are of course going to add our own collections and fields to create a movie database type of site.

Now you need to enter your MongoDB connection, for me it's going to be `mongodb://root:root@localhost:27017`cd  since I'm using Docker setup. For you it may be something a bit different.

Wait a bit for project dependencies to be installed and then just cd into `payload-movies` directory and run `npm run dev` or `yarn dev` if you are using Yarn.

You should get an URL to the Payload Admin, which will usually be `http://localhost:3000/admin`  - go to that address in your browser.

You will be greeted by a welcome screen and be prompted to add a first user. Add your data here and click "Create" button.

### Admin interface

Admin interface for payload is very simple. You have access to Collections which were created during Payload installation. These Collections work the same way like in Directus, they are just collections of a specific data items.

Since we opted for a blog site during Payload installation, we get some standard ones like Posts, Categories and Tags.

Of course you also have Users, for user management and Media for media management.

When you click on any collection you can create an item in that collection, and then fill in the data in the fields assigned to that collection. Also all very similar to Directus. 

Once you create a new item you can check out API response for it by clicking on the "API URL" link. 

Now, this all looks very minimal, but don't confuse minimal with the lack of options or features. Remember, in Payload you setup everything through code, so you can make it as complex or feature full as you like, because the Admin interface is not for you - the developer, it's made for editors and non technical users and they need the UI to be as simple as possible for adding content to the site without much friction. 

And if you need some custom feature in the Admin UI, you can easily achieve that by adding in your own custom React components, using provided React Hooks and by customising CSS. So even the Admin interface is very extensible. Maybe I will show you how to do that in some other video. 

For this video let's try to cover the basics of creating Collections and Fields, and I'm also going to show you how to create data relations and how to add some custom functionality to your fields.

### Creating Actors Collection

Now open your code editor and let's get to work. Go to the `src` directory and then to collections and create a file called `Actors.ts` - Payload uses TypeScript which is great because you are going to get a lot of code hints and auto complete options in your editor so that you can work much faster. 

First we are going to import `CollectionConfig` from `payload/types`  so that we have typings for our Collection.

```ts
import { CollectionConfig } from 'payload/types';
```


Then we define our `Actors` collection with `CollectionConfig` type.

```ts
const Actors: CollectionConfig = {
...
}
```

And in it we are going to define `slug` for our collection, `useAsTitle`  which is going to be a title of the item in the collection that is going to be displayed in lists and on the item page. For now I'm going to set it to be `first_name` because we are going to create a field called `first_name` for  `Actors` .

After that we are going to set access to `read` so that this can be read by anyone. In Payload you can have very granular control over who can read what, but we will not cover that in this video. 

I will now add two fields `first_name` and `last_name` . Defining fields in Payload is very intuitive. You just define `name` , `type` and `label` for the field. For some fields it can be a bit more complex, but not much, I will show you that a bit later.

Lastly, I will just add `timestamp` property to be `false`. Now you just export your collection and we are done with the `Actors.ts` file for now. 

```ts

const Actors: CollectionConfig = {
  slug: 'actors',
  admin: {
    useAsTitle: 'first_name',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'first_name',
      type: 'text',
      label: "First name",
    },
    {
      name: 'last_name',
      type: 'text',
      label: 'Last name'
    }
  ],
  timestamps: false,
}

export default Actors;
```

One last thing we need to do is to register `Actors` in `payload.config.ts` file. First we just import `Actors` .

```ts
import Actors from "./collections/Actors";
```

Then you just add Actors to the `collections` array. And that's it. 

Go to the Admin in your browser and refresh the page. You should see `Actors` collection show up in the UI.

Click on it and try adding an Actor. Robert DeNiro for example, and click Save. 

Ok, so this works, but what I don't like is that the title of the Actor is just Robert without the last name. Let's try to fix that. 

Go to `Actors.ts` file and import `FieldHook` type.

```ts
import { FieldHook } from 'payload/types';
```

Then we are going to create a function that is going to return value of the `first_name` and `last_name` fields. I'm going to call this function `populateFullTitle` .

```ts
const populateFullTitle: FieldHook = async ({ data }) => {
  return `${data?.first_name} ${data?.last_name}`
}
```


Now we add a new field called `full_name` and hide it in admin UI, and then we use `beforeValidate` hook to populate this field automatically with the `populateFullName` function that we just created. 

```ts
{
  name: 'full_name',
  type: "text",
  admin: {
	components: {
	  Field: () => null
	}
  },
  hooks: {
	beforeValidate: [
	  populateFullTitle
	]
  }
}
    ```

We must not forget to set `useAsTitle` to be `full_name` instead of `first_name` .

```ts
useAsTitle: 'full_name',
```

Go to the browser refresh and save Robert DeNiro again. 

Also let's try adding one more actor. Brad Pitt this time. The name won't be filling up as you type, but it will populate first and last name once you hit save. Great.

### Creating Movies Collection.

Now let's add Movies collection. In the `collections` directory add a file called `Movies.ts`, and we follow the same pattern like we did for the Actors collection. 

```ts
import { CollectionConfig } from 'payload/types';

const Movies: CollectionConfig = {
  slug: 'movies',
  admin: {
    useAsTitle: 'title',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      label: "Movie title"
    },
    {
      name: 'date',
      type: "date",
      label: "Release date"
    }
  ],
  timestamps: false,
}

export default Movies;
```

We are going to use `title` field for our `useAsTitle` property. I'm going to add two fields, `title` and `date` for now. Take note that the date field has the `type` of `date` this is going to give us a nice date widget in the Admin UI.

Now I want to add two more fields, `actors` for choosing the actors in the movie and also a `poster` for the movie poster.

Since we wanna add actors from our Actors collection, `actors` field is going to be of type `relationship` , for this type of field to work we also need to define what collection this field relates to. This is super easy, just add a property called `relationTo` and put `actors` as a value. Since the Movie can have many actors, we are going to set `hasMany` property to `true`. We also want the to create new actors from this field in the Admin UI, so we are going to set `allowCreate` property to `true`. 

```ts
{
  name: 'actors',
  type: "relationship",
  label: 'Actors',
  relationTo: 'actors',
  hasMany: true,
  admin: {
	allowCreate: true
  }
}
```

We need to set up one more field, for the movie poster. This field is going to be of `type` `upload` and for Upload fields you also need to set relation, just like for Relationship field type. I'm going to set `relationTo` property to be `media` . So that we can upload new media, but also use already existing Media. 

```ts
{
  name: 'poster',
  type: "upload",
  relationTo: 'media'
}
```

Save this and we are done with Movies collection, only thing left to do is to register it in `payload.config.ts` file. 

Now let's test it out in the browser. Refresh the Admin UI, and you should get Movies collection.

Create a new Movie. Movie title is going to be Goodfellas. I'm going to set release date to January, 1st 1990. And now we can select actors. 

I'm going to choose Robert DeNiro. 

And since we enabled creating Actors from this page, I'm also going to add Joe Pesci, by clicking on the plus button. Add Joe Pesci and click Save.

And for the movie poster I'm going to Upload New Media, and add poster for Goodfellas. Then click Save. And then Save again to save the Movie. 

And that is it, we can check out the API response by clicking on the API URL.

### Conclusion

I must say - Payload is pretty nice, it has a nice developer experience and is very easy to use for the editors. And since you can do everything in code you can easily share your code through git with your team or other developers you are working with.

This has been only a taste of what Payload can do, and I will for sure make a few more videos about it, since I find it very enjoyable to work with. And as always don't forget to read the docs if you wanna get your hands dirty with it.

What I really like about Payload CMS is that everything is done through code, you don't have to go around clicking in the admin UI to setup things like you would do in WordPress, Strapi or even Directus. 

Let's Checkout... Payload CMS

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

Ok, let's do one more Directus Flow, well actually two flows that are going to work in conjunction with one another.

So imagine you have a movie database type of website, and you want to add a large number of movies to it. Currently, you have those movies stored in a Google Sheets or an Excel Document. Of course, you don't wanna do that by hand, because it will take a long time to do it.

We can use Flows for this type of scenario, we will first save our Google Sheets or Excel document to a CSV file. We are going to parse that file on the front end and create a JSON object which we will send to a Directus Webhook, that will in turn trigger our first Flow. Since we are receiving an array of objects we can create a kind of for each loop by triggering another Flow for every object in that array. That other Flow is just simply going to add the data from the object it receives to the Movie collection.

Ok, so let's do this.

### Setup

Before we start creating our Flows, let's just take a quick look at the setup.

First of all, we need a Movies collection, I already have a simple one setup. It has just 3 fields `title`, `year`, and `director`.

An important thing to note here is that we have to set permissions for the public role so that it can add items to the Movies collection. Of course in a real-world scenario you would give that permission only to authenticated users, but to keep it simple we will allow everyone to be able to add Movies. 

Then we of course need a list of movies in Excel or Google Sheets format. I have one in Google Sheets here. We can save this list to a CSV file right away so we have it ready. 

We also need some kind of frontend so that the user can upload that list to our Directus backend.

I already have this ready, it's just a simple Next.js app with Tailwind for styling, that has a page on which we can upload our CSV file.

The code for uploading CSV looks like this.

I have a form that is going to do something on submit. Most of the code is just layout and styling for the file input field, which I stole from the Tailwind UI site. 

When the user chooses a CSV file and clicks Submit, we are taking that file and parsing it using `papaparse` package - so don't forget to install `papaparse`.

Once the CSV has been parsed, it's going to save the resulting JSON to the `moviesList` state.

And then we have `useEffect` that has `moviesList` dependency, so once the `moviesList` state changes it will send our JSON movie list to the Webhook in Directus using fetch. 

We will need to add a Flow ID to fetch the URL once we create our Flow. 

The link to this code will be in the description below. 

### The Flow

Now we have to create our Flow, or I should better say, Flows because we are going to have two of them.

One flow is going to accept our data using a Webhook, and another one is going to add the data to our collection.

First, let's create a Flow for getting our data. I will call it "Get Movie List".

Click the right arrow to create the trigger. 

The trigger is going to be a Webhook.

Set the method to POST, and check the "All data" checkbox.

Now click the checkmark to save the trigger, and then once again, to save the Flow.

We are not going to add the operation right away, because it is dependent on the other Flow. And since we don't have it, we won't be able to select it.

Ok, so now let's create another Flow, I will name this one "Add Items to Movies Collection".

And for the trigger, we are going to choose "Another Flow". We are doing this because another flow - in our case "Get Movie List" - is going to trigger this flow.

Check the "All data" checkbox, and click on the checkmark to save our operation.

Now let's create our operation, I will name it "Add Movie To Collection" and choose "Create Data" for the operation type.

I used a singular Movie for the name instead of Movies because this Flow is going to trigger as many times as you have movies in your list. And this is because we are going to pass an array of objects to this Flow. When you do that Directus is going to trigger this Flow for every object in that array. You can think of it like a for each loop for Directus Flows.

Ok, so for collection we are of course going to select "Movies", Permissions are going to come from the trigger. And for Payload, we just need to define the fields that are set for our movie collection - `title`, `year`, and `director`.

Very simple, it will look like this:


```json
{
    "title": "{{$trigger.title}}",
    "year": "{{$trigger.year}}",
    "director": "{{$trigger.director}}"
}
```

We are of course getting our data from the trigger. Notice that we don't have `$trigger.payload.something`  here, but just `$trigger.name_of_the_field`  this is because we are going to be receiving just an array of objects from that other Flow. 

Speaking of which, click the checkmark to save this operation, and once again to save the Flow, and let's finish setting up "Get Movie List Flow".

### Finish "Get Movie List Flow"

Go to Flows and select "Get Movie List" Flow.

We are going to add an operation here and name it "Send Movie". The operation type is going to be "Trigger Flow". Because remember, once we receive our array of Movies, we want to trigger the "Add Items to Movies Collection" Flow.

For Flow select "Add Items to Movies Collection".

We have to add our payload now, but there is a very important thing to note here, you don't add it directly to Payload input but click on the dropdown next to the label and select "Edit Raw Value". Now in here add just this simple line of code. 

`"{{$trigger.body}}"`

And click "Done". We need to do it this way because if we don't Directus is going to screw up our string with escape characters and then our payload will not work correctly. 

Also, note that we are saying `$trigger.body` - body is the body of the POST request that we are sending from our frontend, and that body is going to hold our array of movie objects.

Save this operation by clicking on the checkmark, and once again to save the Flow.

### Test it out

Now we have to test this out. But before that, you need to copy the ID of this Flow from the URL. 

And then go to your frontend app and add the ID after `/flows/trigger` 

Save it and let's test if this works.

Let's add our Movie List CSV file, and click submit. 

Ok, now let's go to the Movies Collection and see if this worked. 

And sure enough, it works, and all our movies from the Movie list are now in the collection, with essentially one click. 

Nice.

As I've said, once you send an array of objects to the "Add Items to Movies Collection" Flow, this flow is going to trigger as many times as we have Movies in our list. And to check that, you can go to that Flow, and click on Logs on the right-hand side. 

You will see that we have logged five operations here, and if you click on one of them and then check the payload, you can see that the payload is just one movie object. So this Flow has run five times to add five movies.

In this episode I'm going to show you how you can add large number of data to your Directus database using Excel and Flows.

Add Data From Excel Using Flows

Let us now create another Directus flow. This time just a bit more complex. 

If you don't know what Directus Flows are please check out the previous video for a quick intro.

### Create a newsletter list

First, let's create a new collection and call it `newsletter_list`

Now let's add three simple input fields to it and call them: `first_name`, `last_name`, and  `email`

In this collection we are going to save users that sign up to our app AND opt-in to receive the newsletter, users that don't opt-in will not be added to the collection.

Save the collection, and we are done with our Newsletter list collection

### Add opt-in field to users

In Settings -> Data models click on "System Collections" and then click on `directus_users` 

Create a new toggle field here and give it a name of `newsletter`.

Set the default value to be enabled and Save it.

Now that we have our opt-in field setup, we can start creating our flow.

### The Flow - Trigger

Go to Flows and Create a new flow, we will call it "Newsletter Flow".

The description can be something like "Add user to newsletter list".

Click the arrow so we can set up our trigger.

The trigger will be an Event hook with non-blocking Action.

The scope is of course `items.create` since we wanna trigger this flow once the user has been created.

Click on "Show 15 more" and then select "Directus Users".

Now click the checkmark to save our trigger. 

### The Flow - Operation One

This Flow is going to have two operations, the first operation will check if the user chooses to opt into our newsletter, and then if they did we are going to create another operation that will add that user to the "Newsletter list" collection. Easy peasy. 

Click the plus symbol to create the first operation, and name it "Check Newsletter Opt-in".

For the operation type, we are going to choose "Condition". 

And then in the "Condition Rules" box, we are going to check if the user has opted in using the following code. 


```json
{
    "$trigger": {
        "payload": {
            "newsletter": {
                "_eq": true
            }
        }
    }
}
```

Here we are checking if the `newsletter` field that is coming from our trigger is equal to `true`.

Now click the checkmark to confirm this operation. 

### The Flow - Operation Two

You will notice that this operation has a checkmark symbol and an X symbol on the bottom right side. When you click on the checkmark you can chain another operation that will run if the condition that we created is true, and by clicking on the X symbol you can chain the operation that will run if the condition is false. 

For this Flow, we will only chain the operation if the condition is true, because if it's false, then we don't wanna do anything. 

So now click on the checkmark symbol on the bottom right of the operation box, and we will create an operation that will add the user to our "Newsletter list" collection. 

We will call this operation "Add user to Newsletter list".

For the operation type choose "Create data".

For the collection, we are of course going to select "Newsletter List". 

In the Permissions field select the "From Trigger" option.

Now, all we have to do is set our payload, meaning we have to send values for the three fields that we created for our "Newsletter list" collection: `first_name`, `last_name`  and `email`.

We are going to get our data from the trigger again, so just add this simple bit of code in the "Payload" input box. 

```json
{
    "email": "{{$trigger.payload.email}}",
    "first_name": "{{$trigger.payload.first_name}}",
    "last_name": "{{$trigger.payload.last_name}}"
}
```

Click on the Checkmark to save the operation, and then once again to save the Flow. 

All that is left to do now is to test this Flow out. 

### Testing it out

Go to users, and create a new user. I will name the user John Doe.

Note that at the bottom of the page you will have the `newsletter` field, which should be enabled by default.

If it's not, enable it.

Save the user. 

Now go to Collections and select "Newsletter List" collection to see if this worked. 

And as you can see user John Doe has been added to our list. 

Great!

Now create another user.

We will call this one Jane Doe. But for this one disable the `newsletter` field. 

Save it, and go to collections one more time.

And as you can see we still only have John Doe in our Newsletter list. This means our Flow works since Jane didn't wanna sign up for our newsletter.

### Activity Log

Before we conclude this video I just wanna show you one more thing that can help you when debugging Flows.

You can always go to Settings -> Flows, and then select the Flow you wanna debug. 

Here on the right side of the screen, you will notice the "Logs" tab, if you click on it you will get some useful information about the Flow. 

Like Options and what is especially useful Payload of your trigger. So if something is not working you can always check the Logs to see what might have gone wrong.

Just note that this will only show up if you choose to track Activity & Logs when creating a flow. 

Also note that Logs are going to be stored in the database so it would be good, to clean them from time to time. 

Maybe you can even create a Flow that will do that automatically for you, wink, wink, nudge, nudge.

In this video, we are going to create a Flow that will add a user to a newsletter list if they opt in for it.

Video Tutorials For Curious Frontend Developers

Latest tutorials

AIGet Structured Response From Open AI Using Function Calls

Payload CMSPayloadCMS and Next.js With Local API

Payload CMSLet's Checkout... Payload CMS

AIUsing AI In Your Frontend App feat. OpenAI and NextJS

Directus 9Add Data From Excel Using Flows

Directus 9Create a Newsletter List With Directus Flows

Latest Courses

AI

Payload CMS

Directus 9

Directus 9 + Next