No-code has come a long way over the last couple years. Now, for this first time, we have a real way to truly supercharge our no-code apps with AI.
This site is built with Framer. You can spin up apps in a weekend with Bubble or Softr. You can integrate Notion, Google Sheets, Airtable, whatever for data using a simple zap. No-code is enabling everyone, regardless of their technical expertise to ship fast AF. How can we take this to the next level?
Well, one great option is to supercharge our no-code apps with AI. In this note, we'll do just that by using OpenAI's GPT-3.
OpenAI’s GPT-3 is a magical tool that you can harness through an API. With the tools available today, you can bring your AI ideas to life even if you can’t code! It’s time to let your ideas shine.
By following this note, you'll be able to build a web app that will take in user input and display a response powered by GPT-3.
For example, I made Explainitome.xyz. It's an app that explains any topic to you as if you are five years old.
Ready to buckle in and give me 12 minutes of your time? Let's get started.
Here’s a quick TL;DR of the entire build and the structure of this walkthrough.
Set up
Configure API in Bubble
Create Bubble workflow
Test and deploy
Set up
👀
Build in public checkpoint
Configure OpenAI API in Bubble
At this point, you're either starting with a new project or have my template cloned.
Go to the 'Plugins' Tab in the left-hand menu.
Once you're here, Search up the ‘API Connector’ plugin and install it (should be free).
Click on ‘Add another API’ and add in the following information so that your API info matches. Refer screenshot below if you're confused.
For the Key value (red rectangle on screenshot), you will want to type it as follows:
🔐
Get your API token from OpenAI's playground
Bearer 'Your API Key'
Once you have entered all the info above in the respective fields and added your unique API key, add the following snippet to the JSON body.
{
"model": "text-davinci-003",
"prompt": "<prompt>",
"temperature": <temperature>,
"max_tokens": <tokens>,
"top_p": 1,
"frequency_penalty": 0,
"presence_penalty": 0,
"user": "<userID>"
}
Once this is in, add the parameter values. For prompt, feel free to type anything for now. This is what I have:
Great, you should now have everything you need for the API.
You can click ‘Initialize Call’ and test. If you've set up everything correctly, you will get the following pop up:
If you are stuck or are facing blockers, reach out and I can help you!
Create Bubble Workflow
In Bubble, a workflow is a series of steps that execute after something happens.
For our app, when a user clicks the ‘Generate’ button, we want the API to be called and whatever they have inputted to be submitted.
Let's create the 'Generate' button.
If you're using the template, click the ‘Generate’ button in the editor and then click ‘Start/Edit Workflow’.
Otherwise, add a new button from the UI builder and click 'Start/Edit Workflow'
For the first step, you will want to hover over ‘Plugins’ in the popup menu and then click the name of the API.
Now I will show you what I did in my workflow to create Explainittome.xyz.
It involves a process called ‘Prompt Chaining’.
If you find this interesting, make sure to check out the full buildspace project below! I used it to understand the concept at a deeper level.
The reason my app produces a complex response based on a single phrase from the user is because I request the API twice for each user request (Prompt Chaining).
As you configure your API request, you will want to consider what exactly you would like your user to get responses to if you are building something unique. Here’s what I did:
‘User text input’s value’ is a dynamic variable that represents what text value is in the gray input box on your app.
So the prompt that is sent to OpenAI is taking their input and asking for a breakdown in 5 steps.
Once the response comes back, here is the next step in my workflow.
I link to the response from the initial request at the end by adding a dynamic variable (what you see in the blue text).
Make sure you are appending the (body) prompt with: each item’s text.
The final step in the workflow is to enable the app to use the result from the API.
In order to do this, we use the function in Bubble called ‘states’. States are ways to store information temporarily in the app - in this case, the API result.
If you are using my cloned template then I have already created the state for you. It belongs to the element called ‘index’ which refers to the page the user will see when they use the app.
This is what you need to do in the final step of the workflow:
And this is what I populated the state with pop-up box with:
For the Value^ it will be the result of whichever step you last called the API in. If the text shows up blue in the Value field that means you entered the Dynamic value correctly.
Again, make sure to add to the value: each item’s text.
The workflow is complete. Time to test!
If you are stuck or are facing blockers, reach out and I can help you!
Test and Deploy
At this point, everything should be set up in the app. You can click ‘Preview’ in the upper right corner and test it out yourself.
Remember to add a title and subtitle to make it look legit!
If you are having any issues with Bubble, I recommend checking out this in-depth tutorial on accessing the Open AI API. If you still are facing issues, reach out and I got you!
👀
Show me what you got!
The intersection of No-Code and AI is magical.
This was just one very simple example that I extended from the AI Writer Project. There are countless other projects that can start building today that utilize no-code as well as GPT-3.
It's going to be very interesting as tools like Bubble and Framer mature, along with the maturation of AI models. It'll get easier and easier for anyone to create sophisticated applications and powerful websites with ease.
I hope you found this note helpful and can't wait to see what you create!
Till next time,
Ali