Introduction to AI Integrations

Let's create a flow that will familiarize you with AI. In this tutorial, we'll guide you through creating a flow where the user can select the category of joke they want to hear, such as knock-knock, pun, one-liner, dad joke, wordplay, etc. The system will then respond with a joke that falls within the selected category. So, let's get started!

Prerequisite

This tutorial assumes that you are familiar with the concepts mentioned in Creating a Template from Scratch.

Step 1: Create a New Template

Create a new template and add a state that suggests a joke is pending, and an action that suggests a joke is being told. It should resemble the image below. For the purpose of this tutorial, there's no need to worry about the end of our flow. Tell a Joke Flow

Step 2: Create AI Prompt

Locate and click on the Add Template Data button by the toolbar. Add Temp Data

Now you should see a popup prompting you to create a Data Path for new template data and you can give it any name that resembles prompt.ai_instructions - make sure to have dot notation in your name. Name Temp Data

Now, the template data should appear on the canvas highlighted in green, as shown in the image below. Now, let's add some instructions to the template data that we will use as a prompt for the AI tool that will generate the jokes.

We can do this by clicking on the button on the prompt.ai_instructions template data. Added Temp Data

Now, let us come up with some instructions and add them to the text box area. Therefore, it should resemble the instructions in the image below. Feel free to play and tweak the prompt to your liking.
AI instructions

Once you have finished writing up your prompt, you can close the popup window, and your canvas should look as follows: Joke canvas

Step 3: Add field and AI task to action

Now, let's add a text field to our

tell a joke

to take in the user's joke category. Ideally, we should use a select field; however, for simplicity's sake, we will only use a text field. Feel free to implement the use of a select field if you're feeling a bit brave. Once you have added a field, your action's fields tab should look similar to the following: Joke category field

Next, let's add the GPT Chat task to the action. This task allows us to integrate our action with AI.
Once added, open the advanced tab of the GPT Chat task.
By default, the advanced configurations should look like so:

Now, configure the GPT Chat task so that the AI's system is provided with the prompt we created in the previous step. To do this, replace the content of the system message with a reference to the prompt using Variable Substitution.

        {
  "role": "system",
  "content": "~~template.data.prompt.ai_instructions"
}

Also, configure the GPT Chat task to dynamically get the joke type category submitted by the user.
To do this, replace the content of the user message with a reference to the joke category field using Variable Substitution.

        {
  "role": "user",
  "content": "~~stub.data.joke_category"
}

Once you have configured the GPT chat task, the advanced configurations should look like so:

Step 4: Test the flow

Now, let's create a new stub to test our flow. Once created, our canvas should look like so: Joke canvas completed

Open the stub and locate and click on the Tell A Joke action. Once the Tell A Joke post is revealed, enter a joke category in the text field. Let's first try with a category that is on our list, for example, Knock-Knock Jokes. Once you've entered the category then click on the Tell A Joke button.

After clicking the Tell A Joke button, the view of the Tell A Joke post should be updated with the data, namely the joke_category. A new post, Update From Chat Assistant Task, should appear. This post should contain the joke that was generated by the AI system. Check whether the joke is of the category you selected, as in the image below. Knock-knock joke told

Now, repeat the process with a different category, for example, Dad Jokes or other jokes not on our list, such as Yo Mama Jokes. For example, let's try Yo Mama Jokes.