← 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.
🚀 6 Tips for Building Webflow Sites More Efficiently

🚀 6 Tips for Building Webflow Sites More Efficiently

Discover the secrets to enhancing your Webflow design process with these 6 essential tips! In this video, we'll walk you through time-saving techniques, productivity-boosting hacks, and valuable strategies to help you build Webflow sites more efficiently. From style guides to on-page optimization, these expertly-crafted tips will empower you to work smarter, create beautiful and responsive websites faster, and take your Webflow skills to new heights. Don't miss out on unlocking your full Webflow potential – tune in now to elevate your website-building experience!

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Supercharge Your Webflow Landing Pages: Creating Custom Open Graph Images with Placid (Part 3)

Join us for the final installment of our series as we explore the creation of custom open graph images for each landing page. In Part 3, we'll use Placid to automatically generate visually appealing open graph images with custom screenshots and text. Enhance your website's social media presence and elevate your landing pages with these custom images. Complete your automation journey and unlock your website's full potential with this innovative workflow.

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Supercharge Your Webflow Landing Pages: Automatically Updating Webflow CMS Items (Part 2)

Continue your automation journey with Part 2 of our series! In this video, we'll guide you through setting up a workflow that automatically updates Webflow CMS items whenever any of your titles have been created or updated. We'll use Airtable Automations to trigger a make.com workflow that seamlessly updates your Webflow items. Streamline your website-building process and keep your landing pages up-to-date with this powerful workflow.

Supercharge Your Webflow Landing Pages: Automated Title Tags, Meta Descriptions, and More (Part 1)

Supercharge Your Webflow Landing Pages: Automated Title Tags, Meta Descriptions, and More (Part 1)

Discover how to optimize your landing pages with automated workflows! In Part 1, we'll explore how to use OpenAI's GPT-4 language model to automatically generate SEO-optimized Title Tags, Meta Descriptions, H1 and H2 headings for your landing pages. Enhance your website's search engine visibility and boost your SEO efforts with these powerful techniques.

Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Introducing Relume Ipsum: Revolutionize Your Web Design Process with AI-Generated Copy

Ready to take your web design game to the next level? Discover how Relume Ipsum's AI-powered plugin can revolutionize your content creation process. Read our blog post now!

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.