# How to Build a Writing Coach App with Softr and GPT-4 ## Introduction Ai is the latest buzzword we all have been hearing for quite sometime now. Especially after [LLMs](https://www.cloudflare.com/learning/ai/what-is-large-language-model/) 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](https://softr.io), one of my favorite no-code tools, and integrate it with [OpenAI](https://openai.com/) 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](https://softr.io). We need a database to store the data and we use [AirTable](https://airtable.com) 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](https://zapier.com/) for that. At this juncture, I would want to highlight that Softr has native integration with OpenAI. Here is [a detailed article](https://docs.softr.io/integrations/etS18kJqm1fuD58KCsjC3z/open-ai/a7akuLYNadxZ18rqRLZ877) 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](https://softr.io) - 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](https://softrplatformsgmbh.partnerlinks.io/otg4qnux750i) to enjoy a free month of the Professional plan. * [AirTable](https://airtable.com) - We just need use AirTable to create a **Base** and a few tables in it. So we’re good with a free plan. * [Zapier](https://zapier.com) - We will need a Professional plan as we will be building a multi-step zap. Here’s [Zapier’s pricing](https://zapier.com/app/planbuilder/plans) 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](https://www.make.com/en/pricing) for a quick reference. * [OpenAI](https://platform.openai.com/) - 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](https://platform.openai.com/) 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735552902220/67994ad4-51f9-40b0-a040-972f79f6d1df.png align="center") * Once you click on Settings, choose **Billing** from the left pane * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735553029137/b6636527-6944-4c1e-9c19-bf58e0c3e2d3.png align="center") 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](https://airtable.com/developers/web/guides/personal-access-tokens#creating-a-token) 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** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735555543051/9d1243ff-52b0-4ceb-8795-0c18e864ada0.png align="center") Clicking on **Continue** will ask you select the tables that needs to turn into app pages ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735556083412/512e3f49-6563-4abb-97d0-4cfedb8eae24.png align="center") * 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735557118520/ff118757-441d-4e10-857d-67e445ebb594.png align="center") Here are the fields mapped in the **Content** tab * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735557173386/3722128d-b0ef-4876-a81c-b85ea1052c16.png align="center") Since we need to provide an option to **Add a student**, we need to configure the fields corresponding to it * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735557391603/72d4abfa-da42-46c6-8e75-f55cf9dbfbd4.png align="center") 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. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735557553018/b8718cc5-a82b-4c1b-978f-b74bf8381955.png align="center") 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 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735557919902/b3ef929b-1273-4fa7-baf2-f8001de5b105.png align="center") * 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. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735558068559/99558e5c-c7da-4f16-be29-4ba6e9ee820d.png align="center") 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. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735558481463/d8020bb7-996a-4a3e-a1a1-08fc04e47dec.png align="center") 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 * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735558646088/c134d5f2-f8ee-4bf3-8032-464511ebc9c4.png align="center") 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. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735559027273/972dded9-018c-4591-8fe9-656fa48f4020.png align="center") 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 * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735559160258/2c78c26a-2380-4410-94bb-d458ce3feaab.png align="center") 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. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735559295378/60e2a6ba-8c41-4e8f-906b-94f690948f05.png align="center") 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. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735559620028/c3dad3fc-2a52-45e3-80eb-af0d6012ab9f.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735559719548/6ac4da32-6e90-4b86-a3fb-5cea55f0aa85.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735559741728/2aa19af5-e244-47ca-8901-73b88ff63d54.png align="center") 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. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735560219584/26a91d14-d8a3-4d2a-8358-251452158794.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735560242473/40a74c04-76e5-4d2f-98b1-b75a76af0d94.png align="center") 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 👇 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735576925013/2aa96795-c1b4-4efa-944c-71443991879e.png align="center") Click on Generate button beside any student name and this is what we see ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735577193126/2bda641a-02e0-45e3-af42-55b269ea912e.png align="center") Below is the **image generated** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735577223174/9249e5e6-cd8d-43ee-809a-88096955c07b.png align="center") And the **Opening para** generated by Open AI ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1735577272792/a0bcceea-e570-4c42-93c6-e89165212749.png align="center") 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](https://claude.ai/login?returnTo=%2F%3F), [Perplexity](https://www.perplexity.ai/), [Copilot](https://copilot.microsoft.com/) 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](https://writecoach.softr.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](https://x.com/saminsolitude) or in [LinkedIn](https://linkedin.com/in/sambhavi-dhanabalan). If you're new to Softr, you can sign up using [my affiliate link](https://softrplatformsgmbh.partnerlinks.io/otg4qnux750i) 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 👋