How To Use Artificial Intelligence in a Low-Code Web Application

How I created GenerativePlaylist.com

Feb 17, 2023

Artificial intelligence is all the rage at the moment. As I probably mentioned previously, I have dabbled with ChatGPT but I quickly realized that it was the “poor man’s” AI. It’s a nice little tool that gets people familiar with the concept of AI and how it will impact us in the future.

The most compelling use of AI, in my humble opinion, is the Open AI API. I am not going to explain what it is, but basically you can use the API behind ChatGPT and integrate it into your own application.

Now as you know, I am not a developer. I work mostly in DevOps and cloud architecture. I do, however, love to build basic web apps with low-code tools. No-code or low-code tools have significantly improved over the last few years. I remember back in the lates 2010s when I found Wix for the first time. I basically spent my senior year of high school creating Wix and WordPress sites.

More recently I have been obsessed with Webflow. For the uninitiated, Webflow is a more advanced website creator. It requires designers to use classes and elements and can actually be quite daunting for someone coming straight from Wix. Some coding is required but you can totally make a functional web app with just the drag and drop functionality.

Last week I decided it was time to make my own “AI Based” web app. I came up with a simple concept and got to planning:

I wanted to create an application where a user inputs a song, the song gets sent to the Open AI API requesting that a list of 15 songs be printed out, the 15 songs are added to a public Spotify playlist, and the playlist link is sent to the user in an email.

Now of course we have to have the following prerequisites:

An Open AI account.
A Spotify account.
An email account.
A Webflow account with a website.
A way to connect everything together.

I already had an Open AI account. I created a Gmail account and opened a Spotify account with the Gmail account. I already had a Webflow account, so I just created a simple website with a form. Here is the frontend:

I like the futuristic copy on the site which was unironically generated by ChatGPT. I found a cool robot picture on Canva, found a cool font, and slapped together a logo and color pallet.

Now let’s move onto the backend. I decided to use Zapier as the glue of the whole project. Here is the result:

The form is submitted on the website and the data comes into Zapier.
A prompt is sent to the API. It took me a while to figure out the most efficient way to get what I wanted. I ended up with something like this:

List 15 songs that have the same mood, genre, and style as <SONG> by <ARTIST>. The data should be formatted as follows: song1 - artist, song2 - artist, song3 - artist, etc...It was important to normalize the format of the output but I will explain that later.
A second prompt is sent to the API. The prompt reads something like this:

Create a catchy name for the following playlist: <OUTPUT FROM PROMPT 1>. It should be three words long.
A Spotify playlist is created. The playlist uses the name from step three.
An email is sent to the user with the public URL of the playlist.
The <OUTPUT FROM PROMPT 1> is now transformed into individual fields.
A loop starts.
The first song (field1 from step 6) is found using the Spotify API and the Track ID is recorded.
The track ID is added to the playlist we created earlier, and the loop starts over.
The loop continues to search for each field generated by step 6 until there are no more fields. After that, the zap has completed.

If you think this was easy, I can assure you, it was not. It took me 16 iterations on Zapier and lots of testing. I used almost 600 tasks in Zapier testing this (I am allocated 750 per month).

The hardest part was understanding the loop step. Iteration 5-10, I used individual steps for each track (15 songs x 2 zap steps = too much work). After battling with the loop step, I finally found some helpful documentation and was able to reduce the amount of zap steps from 30+ to 9.

What did I learn and what can we take away from this?

I have been feeling rather paralyzed by the sheer number of options when it comes to using AI. Every single day I read about a new AI tool that I need to try out. Thankfully, I can use Zapier to go right to the source. I would encourage you to try out Zapier + the Open AI API and see what you come up with.

Another note, I thought my use of the OpenAI API would get expensive. You of course have to pay for using it. Overall, I only ended up spending $0.82! Open AI also gives you $18 to play around with so I didn’t actually spend any money.

I believe I ended up generating 40+ test playlists. The fact that I only used $0.82 is astounding to me.

Feel free to test out my application here → GenerativePlaylist.com

Anyway, that’s all.

Cheers,

Joe