Introduction
Ai is the latest buzzword we all have been hearing for quite sometime now. Especially after LLMs took the world by storm. When a technology is built to understand natural language or human language, what more can we ask for? On the other hand, No Code tools are growing in all directions, right from building websites, web applications, mobile applications, chat bots, forms and what not.
What happens if No Code and AI are blended together? Yes, let’s try doing that in today’s post.
Let’s build an app using Softr, one of my favorite no-code tools, and integrate it with OpenAI to create a range of powerful features. What exactly does the app do and who is the targeted audience?
What’s the plan for today’s build?
Well, I thought of building an app that aids the English teaching community. There are a lot of assignments given to students, one of them is story writing. If a teacher has to come up with different opening lines to each student, it’s going to be time consuming.
Thus, we shall build an app that has a feature to generate an opening paragraph for a story. Each student will get a random opening paragraph in a different genre. Good fun, isn’t it?
What are the different pieces that come together ? The skeleton is the app itself which will be built using Softr. We need a database to store the data and we use AirTable for the same. The generation of assignment questions will be done by OpenAI. We also need an integration tool to connect these three tools together to pass and bring back the data back and forth, and I chose Zapier for that.
At this juncture, I would want to highlight that Softr has native integration with OpenAI. Here is a detailed article on the same. The approach or the prime usage of AI in that scenario is while building the Softr app itself, to generate copy, images, blog posts and so on. Whereas we use AI to build a feature of our app. There is a difference between both.
Laying the groundwork
Alright, time to set the stage. Let’s sign up/login to all the following tools:
Softr - We will need a Professional plan to make use of the Call API feature. We will require this in order to invoke a Zap. If you prefer to try things out before committing long-term, feel free to use my affiliate link to enjoy a free month of the Professional plan.
AirTable - We just need use AirTable to create a Base and a few tables in it. So we’re good with a free plan.
Zapier - We will need a Professional plan as we will be building a multi-step zap. Here’s Zapier’s pricing for easy reference. You can as well try performing the same steps with Make, another automation tool similar to Zapier. Here’s Make’s pricing plans for a quick reference.
OpenAI - We will need an account with OpenAI and add a few credits to make use of their APIs. If you load $5, it should be good enough for the APIs that we use in this blog. I’ll list down the steps for the same:
Sign up with Open AI
After you sign up, you will be taken to their documentation
On the top right corner beside your profile picture, you see the Settings (gear) icon. Click that
Once you click on Settings, choose Billing from the left pane
Click on Add to credit balance, enter any amount between $5 and $100. Add a payment method too. I just added for $5 as that’s good enough for a good number of tokens.
Make sure not to Enable auto recharge unless you plan to use it for other development needs.
Now that we are all set to start building and using these tools, let’s get running 🏃♀️
Build mode: On!
A quick recap of what we plan to build. A Softr app that can be used by teachers/tutors to generate opening paragraph for Story writing assignments. Since the intent here is to integrate GPT-4 to Softr, I’m keeping things simple.
Let’s work on creating the AirTable Base as a first step. Follow the steps below to bring it up:
Sign up/Log in to AirTable and Create a Base
Create a table that stores the end user information i.e. the users of this app. I named it as Users and added 3 columns ID (Auto number), Name (text) and Email (email)
Create a table that stores Student information. I named it as Students and added 6 columns ID (Auto Number), Name (text), Email (email, Grade (Rating), Avatar (File), Subjects (Multiple Select)
Create a table to store the Opening paragraph details generated by OpenAI. I named it as Opening Lines. The columns that I added are ID (Auto Number), Generated for (Link column to Students and select Name and Email from Students), Prompt used (Text), Generated Output (Text), Genre used (Text), Image for display (URL), Assignment generated on (Created time), Is Student notified (Boolean)
As a final step, we need to create a Personal Access Token for this Base. Since it’s a common procedure, here is an article from AirTable to create one.
That is all we require as far as AirTable is concerned. Let’s now move on to Softr.
Sign up/Log in to Softr
Navigate to the Home page and click on Start from scratch block that shows on the top
In the next page, you need to choose your Data Source. Select AirTable and click on Next
Select the Source corresponding to the Personal Access Token created in the previous step and the Base
Clicking on Continue will ask you select the tables that needs to turn into app pages
I just selected Student as I don’t need pages for anything else. Click on Continue and generates the app with the basis set of pages including the ones required for Sign up, Log in, Forgot and Reset passwords and Student and Student details pages
Delete all the blocks that come by default and add a Table block. Here is the configuration done for the Source tab
Here are the fields mapped in the Content tab
Since we need to provide an option to Add a student, we need to configure the fields corresponding to it
The next step is the one that is going to generate the opening paragraph. Let’s add an Item button. We invoke the Call API as the action when the button is clicked. The API we invoke is a web hook in Zapier. Let’s actually take a pause with Softr and create the Zap in Zapier and come back to this step.
Sign up/Log in to Zapier and click on Create a Zap
Choose Zapier Web Hooks as the trigger and select Raw Hook
💡
Web Hooks are part of the Professional plan
When you click on Test, you will see a webhook URL similar to the one below. Copy the webhook URL and come back to Softr
Paste the URL in the Call API step and add ID as a URL parameter. The reason to add the ID parameter is because the Zap needs to map back the Opening paragraph to a Student.
Click on Preview button in Softr and the Student page opens up. Now click on Generate button so that the webhook is triggered.
Now go back to Zapier and click on Find new records. You should see a record fetched corresponding to the Student ID against whom you clicked the Generate button.
Select that record and hit Continue. We are done setting up the webhook step.
The next step we configure in the Zap is to connect to OpenAI and choose Send Prompt event. The idea is we provide a prompt to Open AI and instruct it to generate an opening paragraph. Note that you may have to play around with the prompt a few times before finalizing it.
Here is the prompt that I gave:
Generate an opening paragraph for a story using the following details. The paragraph should not exceed 100 words.
Choose one of the genres randomly from this list (Adventure, Comedy, Crime, Drama, Fantasy, Horror, Mystery, Romance, Science Fiction, Thriller, Historical Fiction)
Choose one of the Writing styles randomly from this list (Conversational, Dramatic, Descriptive, Humorous, Melancholic, Poetic, Romantic, Sarcastic)
In order to connect to Open AI, we choose Open AI from app list in Zapier and provide your API Key. Choose Send Prompt as the Action event.
In order to generate an API Key, go back to your Open AI account and click on Settings. In the left pane, choose API Keys. Click on Generate API Key on the right corner. Make sure to give it a name and more importantly store the key in a safe place as the key will not be revealed again
In the Configure step in Zap, I put my prompt, selected Temperature to be 1.0 and left the other parameters to it’s default values. Higher the temperature, the output will be more random. Since in our case, I wouldn’t want it to keep generating similar output I gave a higher value. Feel free to play around with all the parameters to see what difference it brings to the output.
Click on Continue and then on Test. In the Data out section you will be able to see the model it used and the output it generated.
As my next step in Zap, I added one more method to be invoked using Open AI. This time it is generating images using Dall-E
Enter the same account details you entered in the previous step, just that the Action Event is Generate Images with Dall-E 3. Here is how it looks like
In the Configure step, I choose the Response generated from the previous step as my prompt. The idea is to generate an accompanying image for the opening paragraph it generated. The image is more for a visual appeal 😎. Once you input your choices for size and quality, click on Test. You will see an image generated.
In order to try using multiple options in Open AI, I added one more step where it classifies the generated output’s genre. For this we choose Classify text as the Action event. Under Configure tab again choose the output generated in Step 2. I also gave a handful of categories to choose from.
Click on Continue and then Test it. You should see a genre as output. Sometimes it seemed appropriate, sometimes not. Just play around with other parameters until you are satisfied with the output.
We’re almost there ✨. We just need to add these details to our AirTable so that we can display them in Softr
Click on Add step in Zap and choose your AirTable base. In Configure tab, choose the Base and Opening Lines table. Map the fields as below so that the output sits in the table neatly.
Click on Test and you should see a record added in AirTable.
Woohoo 🤩, we are done setting the Zap, Let’s just Publish it now
In AirTable, I added a couple of records in Users table and Students table with appropriate information. Let’s head back to Softr now. Below is how the Students page looks like 👇
Click on Generate button beside any student name and this is what we see
Below is the image generated
And the Opening para generated by Open AI
How cool is that? We can keep adding more and more features using Open AI integration.
A logical next step will be to build a screen for the student to submit their work and a first round feedback can be provided by Open AI.
Or, there can be a feature that helps the student to get over the writer’s block. Again, with the help of Open AI integration.
The possibilities are endless!
Nuances to note
Although it is quite easy to build such an app, one needs to keep the following points in mind while using Open AI
It is always advisable to play around with the parameters while invoking an Action event in Open AI
One needs to pay attention to the model that is being used
One should also explore other GPT-4 options like Claude, Perplexity, Copilot and see what best works for their use case
Pay attention to the pricing plans when it comes to AI tools as well as No Code tools
Conclusion
In this post, we saw how to build a Softr app that uses GPT-4 models from OpenAI using Zapier. An app that will help teachers/tutors in generating assignments to students. We used AirTable as our database.
Here is the link to the app that I developed. It is fully functional, feel free to Sign up, add a student, generate some assignments. Have fun 🌞
If you have an idea that needs to be brought to life, or if you need any help with Softr/Zapier, or just a friendly chat to share your No Code experiences, don’t forget to drop me a line in X or in LinkedIn.
If you're new to Softr, you can sign up using my affiliate link to enjoy a free month of the Professional plan.
Hope you enjoyed reading this blog post! Do share your suggestions, feedback, or any other post you’d like to see in the future.
Ciao until next time 👋
