OpenAI GPT3 x Airtable x Make: Low Code Smart Contact Form
Previously, we create a simple web contact form using?Airtable. Today, let us try to make the contact form smarter by introducing OpenAI GPT-3, the AI will help us to rank the comments from visitor, and generate a possible response text to us.
This will help to reduce the man-hours spent on analyzing the comments, and draft the response back to the visitor.
For the smart contact form solution, we going to use 3 tools to built it, which required minimum coding, within 5 minutes!
Here are the breakdown for the tools’ purpose, in sequence where the actions occurred
Quick run-through
Pre-requisite check
URL
Backend
Platform
Account
Cost
Programming Required
Applications Flow
Airtable
Served as frontend contact form, as well as backend database
Make
It is platform that connect different applications, without coding! Other than connect different application using connector, it also provide a webhook for other application send in the data
OpenAI GPT-3
Identify the tone of the feedback, and suggest a response based on the feedback
Limitation
At the time when this article being published, Make’s 1 connector are under beta stage, which are OpenAI connector. As far as I tested, the connector works great.
Let’s get started
OpenAI GPT-3
1. To get the OpenAI to work, let’s start by creating an account. Once you done that, create an API keys within your account.
2. Next, record down the Origanization ID
3. You are done with OpenAI here for now, let’s move on to next step.
Airtable
1. We cover the building contact form with Airtable before, to refresh your memory, you may refer to?here. For now, let’s just create a base for contact form.
2. Let’s create the fields similar as contact form we created just now using Contact Form 7, with additional 2 fields
. Now, let’s create a form with Airtable, and remove the unwanted fields from the form: type and suggestion, as it will fill up by AI.
4. The final step with Airtable is, to get the API key for integration. Please take note the API Key going to deprecated by Jan 2024.
Make
1. Create a “Scenario” in Make, let’s start with a first step by creating a connector for Airtable.
2. The action we required are to watch any records being created in Airtable. Again, I would like to remind that, for this use case, we will need to create a schedule job to pull the data, hence the timestamp is crucial. For make.com, the minimum scheduled time interval is 15 minutes.
3. Once you setup the connector’s connection, here is the place you enter Airtable API Token.
4. Let’s configure the Airtable connector
领英推荐
5. Next, let’s create a OpenAI GPT-3 connector. You will need to provide the API Key, and the Organization ID here.
6. For the connector OpenAI GPT-3, let’s select the actions “Create a Completion”
7. Let’s setup some default parameters
In order to let OpenAI GPT-3 work with other application, we have to “guide” it and ask the right question, else it will response with long winded answer which you need read between the words.
Below is how I enter the question in the prompt, mixed with the variable from Contact Form 7:
Tell me if this comment is a Spam, or Angry, Good, or Unknown? Please recommend a professional response, please response your answer in JSON format, which having 2 nodes, type and suggestion. Here is the comment: [THE-CONTACT-FORM-7-MESSAGE]
It basically tell the OpenAI to
8. Once we done with the setup of OpenAI GPT-3, we will need to run it for the first time to get the response.
As the Airtable required to pull, so the steps will be
9. If the contact form setup properly, the webhook should be triggered and data should received at Make. You will see the “1” on each circle below.
10. Click on the “1” at the top right of the OpenAI GPT-3 bubble, you shall see the pop which having input and output. You can troubleshoot the data from Airtable, and the response from OpenAI GPT-3.
With the response sample from OpenAI GPT-3, you will be able to move to next step, which is to form into a valid JSON from the string.
11. The response from OpenAI GPT-3 is a text, hence we need to form into a valid JSON object, to do this, we have to use “Parse JSON”
12. To parse the JSON, we need to create a similar JSON object structure. Please take note, the JSON structure that OpenAI return as a text, need to be the same as JSON object structure we going to parse.
Hence, it is always good to keep it simple and stupid.
In this case, the JSON structure we are having is
{
"type": "FEEDBACK-MOOD-RETURN-FROM-OPENAI",
"suggestion": "SUGGESTION-TEXT-RETURN-FROM-OPENAI"
}
13. Once you define the JSON object structure, under the “JSON string”, click the response from pop up, which indicate response from OpenAI GPT-3 connector.
In this case, it is
Choices[].text
14. Final connector! Let’s create the connector for Airtable, as we will update the response from OpenAI GPT-3 back to Airtable.
15. You may use back the same Airtable connection you created in previous step 3
16. We shall select the data from Airtable, and JSON object from OpenAI GPT-3, and map to the Airtable table — we created previously.
17. We shall done for the entire setup, let’s give it a try.
Let’s try it out
1. The entire setup in Make should look like below
2. Let’s go back to Airtable to submit some feedback, you can use the sample response text I provide?here. Sometime, the OpenAI GPT-3 may run into below issue, in this case, just increase the Max Token may solve the issue — that could be due to send out words and response words are exceed the Max Token.
We start with good feedback
Then, an angry customer’s feedback
Then, a spam
3. Once you done with the form submission, go back to make.com and click on the Run Once at the bottom left, as we submitted 3 feedback, hence you shall see the bubble with 3 for OpenAI GPT-3 connector, JSON connector, and Airtable (updating) connector.
It indicate run successfully.
4. We shall check the Airtable now, and you can see the data are in, including the suggestion from OpenAI GPT-3, amazing! Isn’t it?
5. Lastly, just turn on the scenarios, so that it can switch into Live mode, and wait for every 15min to pull data from Airtable . You basically have an AI powered smart contact form, which able to help the admin speed up the customers response work!
Although the suggestion from OpenAI GPT-3 can be handy, but it shouldn’t send out directly to the visitors, as I notice sometime the suggestion that OpenAI response are for the admin, not the visitors. In this case, I would suggest that admin should at least check thru the suggestion before sending out to visitor.
For spam, if the message is too vague, OpenAI GPT-3 also can’t determine clearly.