← All blog posts

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

I'll show you how I used the power of GPT-3 by OpenAI, @Wized and Webflow to create an app that generates custom cover letters for job listings. If you are looking for GPT-3 business ideas, feel free to use the same process to set up your own site.

December 31, 2022

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!

Use the code

Copy

Dive Deeper with the MVMP Marketplace Course

Learn how to build the essential features for your online marketplace. Start creating the most essential features for your no-code marketplace and start scaling your site

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
Webflow SEO Hack: Convert Your CMS Images to WebP

Webflow SEO Hack: Convert Your CMS Images to WebP

In August, Webflow added an internal compression tool that allows you to convert images to the webP filetype for improved web performance. While this feature is available for static images, it is not yet available for CMS images. Luckily, a solution to this problem is converting your CMS images to WebP.

How to Fix Common Webflow Performance Issues with Lighthouse

How to Fix Common Webflow Performance Issues with Lighthouse

Are you experiencing performance issues on your Webflow site? Lighthouse can help you identify and fix common problems such as slow loading times, poor server response, and lack of caching. Learn how to use Lighthouse to improve your Webflow site's performance and enhance the user experience.

Optimizing Webflow Designs Using Line Clamping

Optimizing Webflow Designs Using Line Clamping

Using line clamps in Webflow allows for the creation of visually appealing layouts by limiting the number of lines of text displayed within an element.

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

Advanced Webflow Search & Filtering w/ Data Fetcher & Finsweet Attributes

In this post, we'll be walking through the process of using Finsweet Sort and Filter to implement search and basic filtering functionality for our book collection. We'll also be using Data Fetcher to import Google Analytics page views and incorporate them into our Webflow site, allowing us to sort our books by popularity.

ChatGPT 🤝 No-Code - How to create and schedule social posts with AI

ChatGPT 🤝 No-Code - How to create and schedule social posts with AI

As part of the booknotes.ai series, I will show you how to build a workflow for creating and scheduling social media marketing posts. For this example, I will be using Instagram, but you can set up this workflow for whatever other social media platform you want to use, like Twitter, LinkedIn, etc. In the first part of this series, I showed you how I created booknotes.ai, a book recommendation service created with AI.

How to build a book recommendation site with AI

How to build a book recommendation site with AI

I will show you how I used ChatGPT by OpenAI to create a book recommendation site in Webflow. I will take you behind the scenes and show you what tools I used, what processes I followed and what my thoughts are on using AI to generate these types of sites.