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.
Step 2: Create AI Prompt
Locate and click on the Add Template Data button by the toolbar.
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.
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.
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.
Once you have finished writing up your prompt, you can close the popup window, and your canvas should look as follows:
Step 3: Add field and AI task to action
Now, let's add a text field to our
![Joke category field](/images/gettingstarted/joke_category_field.png)
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.
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.
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:
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.
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.
Congratulations, you have completed this tutorial.