How to integrate OpenAI into your Bubble App

Part 1: Discovering how to build AI powered features which delight users and drive revenue.

Hi there,

Welcome to the latest No Code SaaS Newsletter!

This issue is all about leveraging OpenAI in Bubble - and how to build incredible features that will blow your user’s minds.

I’ve been working on integrating OpenAI into my own Bubble SaaS UserLoop over the last month, and shipped the first feature powered by it in January.

The feedback from customers has been fantastic and even driven a few new positive reviews!

I believe OpenAI and Bubble are going to be an unbelievably powerful combination over the next year, and those who master both are going to be able to build some incredible products (and ultimately businesses!)

In this issue I want to explore how I approached leveraging OpenAI in my product, and how I technically implemented and tested it.

What can you build with OpenAI in Bubble?

If you’re anything like me, you’ve been super excited about the possibilities of OpenAI. I’ve been experimenting with ChatGPT and the API pretty much non-stop!

I did experiment a bit with DALL-E, but I’ve spent most of my time in the text completions API, and specifically the text-davinci-003 model.

When thinking about what to build using OpenAI - it’s important to remain focused on what value you can deliver to your users.

It’s easy to get carried away and build things simply because they're cool, but I would encourage you to really spend some time thinking about how you can leverage AI in your product to make your user’s lives easier.

Here are a few questions you can ask yourself when thinking about how to build AI-powered features in your app.

• How can you save them time?

• How can you help make workflows more efficient?

• How can you improve onboarding?

• How can you help make their lives easier?

The exciting news is that we’re on the dawn of a new age of computing where AI is about to make the answers to all these questions much easier.

As someone interested in Bubble - you’re uniquely positioned to be one of the first people building AI into your products quickly.

There are three main things I’ve experimented with…

• Text generation. Helping the user by generating things like a list of questions to use in their surveys.

• Summarization. Summarizing long lists of survey responses into a simple digestible summary.

• Categorization. Taking some text and categorising it, perhaps through adding a series of tags.

Most of the examples shared on social media are around using OpenAI for text generation, but in my experimentation, some of the most valuable use cases for it have been with summarization and categorization which is what I’m going to cover in this issue.

I’ve made a video tutorial to go along with this issue which you can watch here…

How to setup OpenAI in the Bubble API Connector

Setting up OpenAI in the Bubble connector is actually fairly straightforward, here’s what you need to configure, you can also read the OpenAI docs to help.

Here, we’re just looking at the completions API. We’re setting it up as a data function in the API connector, so we can it in the body of other workflow steps later.

Here’s the body for that call to help you set it up…

{

"model": "text-davinci-003",
"prompt": <prompt>,
"temperature": <temperature>,
"max_tokens": <tokens>

}

Model: I’m using text-davinci-003 which is the latest and greatest, and closest in output to Chat-GPT

Prompt: This is where you send in your request text to OpenAI

Temperature: This is covered in the OpenAI docs but essentially it controls how creative the API will be in its response. It is a numeric value between 0 and 1, with 0 being the most reserved only relying on your prompt input and 1 getting more expressive with its response. You can experiment with each call to find the mix that’s right for your use case.

Max Tokens: This basically controls how many resources are used by OpenAI when processing your request, it includes the length of both your request and the response. It has a max value of 4,000. I recommend working with a max value while you’re testing and keeping an eye on costs. It’s fairly cheap to run and makes developing much easier.

Once you’ve got your API call set up and initialized, you can start using it throughout your app.

In my example, we’re going to call it from a backend workflow to generate some text we will put into an email.

Structuring your prompt

If you’re planning on using OpenAI to summarize a list of things, you need to send it that list of things inside your initial prompt.

I recommend making your prompt inside an ‘Arbitrary text: formatted as JSON safe’ operator. This makes it easier to edit your prompt and you don’t have to worry about escaping non JSON safe characters.

Here’s how that looks in Bubble…

Which when you click into, looks like this…

So this is the prompt we are sending to OpenAI to write our summary.

The first thing you might notice is that for Responses: we’re searching for a list of answers and formatting them as text.

This means Bubble is going to search for that list of things and output them as text into our OpenAI prompt, here’s how that format as text operator looks..

As you can see, we’re outputting each answer on a line and including a count of how many responses match that answer, we then add some new lines in between each result with the \n\n commands - this will send a nicely formatted list into OpenAI.

Note: You may wish to use the :items until operator on the data you get back, or to cap the responses to the forst 100 characters to make sure you can predict how big your request into OpenAI will be. I found I needed to place a limit on these records when sending into OpenAI as I was exceeding the max request size, so this is worth keeping an eye on.

And that’s pretty much it for our request!

Here’s how it looks when it’s outputted into our email template…

It’s a good example of the kinds of powerful summarization you can do with OpenAI from your data in Bubble, and you could do this throughout your app. You could store these responses in your database, put them into reports or pretty much anything you imagine… the possibilities are endless!

I’m going to be exploring more of what you can do with OpenAI over the next few issues, in the meantime, I hope you found this helpful.

If you have any feedback - or suggestions for other topics you’d like me to cover in the newsletter please hit the reply or comment button!

That’s it for this time, happy building!

James.