Building a Cover Letter Generation App with Wized, GPT-3, and Webflow

I recently had the opportunity to build an app using Wized, a powerful tool that allows for greater customization and app-like functionality within Webflow. The app, called coverletter.ai, streamlines the job application process by generating custom cover letters using GPT-3, a natural language processing tool.

What tools did I use to create CoverLetter AI?

• Webflow: to create the front-end of the website
• Wized: for the logic and app-like functionality
• GPT-3: to generate the cover letters
• Xano: to store user signs ups

Here's a step-by-step breakdown of how I built coverletter.ai using Wized and GPT-3:

Step 1: Create the interface in Webflow

To start, I used Webflow to design the look and feel of the app's dashboard. I kept things simple by only working on the key page, which is where users input their personal information and the job they're interested in. I used Relume to import the client-first style sheet.

Step 2: Adding OpenAI to Wized

To generate cover letters with GPT-3, I needed to connect Wized to the OpenAI API. As Wized currently doesn't have a native integration with OpenAI, I used the REST API app and followed the OpenAI API documentation to configure the base URL and endpoint URLs for each data out function in Wized. I set up a Data Out function to test the API call and make sure it was successful.

Step 3: Apply Wized attributes to input fields

In order to generate dynamic cover letters, I needed to pass the values from the user's form input to my API call. To do this, I applied wized attributes to the form input fields in Webflow. This told Wized to use these values or elements in the API request. I was then able to find these values in the General tab in Wized and use them in my API requests. The flexibility of Wized in handling data in, data out, and text manipulation requests is what really sets it apart from tools like Airtable and make.com, which require more custom coding to achieve similar results.

Step 4: Set API response to display cover letter

‍

Once I was able to generate custom cover letters based on the user's input, I needed to display the cover letter response in the interface. To do this, I set up an action that would display the text from the API response on a static text element in Webflow if the API call was successful. As a bonus, I also added a loader to display while the API request was being processed, as API calls to OpenAI can take a bit longer.

Step 5: Configure button trigger

Finally, I set up a button trigger that allowed users to initiate the API request when they were ready. I applied a wized attribute to the button and set up a new "on click" action that performed the "Complete a completion" request in Wized.

‍

In summary, I built coverletter.ai, an app that streamlines the job application process by generating custom cover letters using GPT-3 and Wized. Wized was the perfect tool for building this app because of its versatility and ability to work seamlessly with Webflow. The process of building the app involved creating the interface in Webflow, connecting Wized to the OpenAI API, applying Wized attributes to form input fields, setting the API response to display the cover letter, and configuring a button trigger to initiate the API request.

Overall, I am really happy with my first Wized app. I will continue to add more features, so be sure to sign up to the newsletter when you want to get updated when I publish the next post!