Building complex features using OpenAI in Bubble

Go beyond chat and build more advanced features in Bubble by asking OpenAI to return blocks of JSON which you can parse to do... pretty much anything!

Hey there!

Welcome to the latest NoCodeSaaS newsletter - where I share my own experiences of building a profitable SaaS business without code on Bubble.

It’s been a while since my last issue - as some of you may have seen on my Twitter I’ve officially left my full-time job to work on building my own No Code SaaS - UserLoop.

Since I started building the app as a side project in 2021 it was always my goal to leave my job and work on building my own startup full-time when I could get to some degree of product-market fit and MRR.

It’s been great to be working on building the app full-time, but of course I’m now on the roller coaster of startup life so every day is a balance of good and bad.

In this issue, I wanted to talk about one of the AI features of my application which has helped move the needle in recent weeks.

It’s a feature I’ve called ‘Survey Copilot’ and it helps store owners who sign up to my app write high-quality questions for their surveys.

This was always one of the areas I saw people struggle with after signing up, so I wanted to see if I could train an AI model to help them with it.

This has become a key part of my onboarding - it takes a bunch of info taken from the customer during the signup process and writes their first questions for them so they’re ready for them when they first log in to their account.

I think this approach is quite interesting as it uses OpenAI’s Chat API, but instead of simply returning a block of text (which we’ve covered before) it actually returns a large JSON object with multiple variables.

Here’s an example of what the result looks like in my app:

The merchant can type in a prompt of the kind of question they want to write, I then make a request to OpenAI which returns the following…

• A list of potential questions the merchant could ask their customers

• Each question can either be ‘Open Ended’, ‘Single Select’ or ‘Multiple Choice’ depending on the nature of the question.

• Each question also comes with a list of potential answer options

All of this is generated by OpenAI and returned to my app as a blog of JSON which I then parse with a backend workflow and put into the UI you see above.

OpenAI is doing everything from writing the question to deciding what type it should be - and if necessary writing a list of answer options.

This is all done in a single API request - and as you can imagine requires a fairly complex prompt!

Writing the prompt took me quite a while but it’s now super reliable and being used by users of my app every day.

I’m going to consider you’ve already set up a basic OpenAI integration to your app using the Bubble API Connector, I covered this in a previous issue if you want to go back and take a look.

So let’s take a look at some of the things you need to prompt OpenAI with do perform complex actions like this and get a complex blob of json back.

Using Option Sets

I recommend putting your prompts, or chunks of them inside an Option Set in Bubble. This lets you use the same prompt across multiple API calls and makes them easier to update. It also lets you dynamically adjust a prompt based on a specific user or their requirements.

Use ChatGPT & JSONPaths

I recommend using ChatGPT to help you write the prompt, specifically, the format of the JSON object you want to get back for whatever you’re making.

Most of the Bubble Plugins you’ll use to parse the response from OpenAI rely on JSONPaths to extract the data from the response.

I used ChatGPT to help me create the JSON object that made sense for what I wanted to do, and then to turn that object into a JSONPath which I could use in my prompt and in the Bubble Plugin to extract the data afterwards.

Here’s an example of some of the terms you should include in your prompt.

Write your response as a JSON object.

The JSON object should follow the pattern of this jsonpath: $.questions[*].{question: question, type: type, options: options}

Just respond with the JSON object, do not include any other text or explanation.

Use Backend Workflows

I complete the entire action of making the request to OpenAI, parsing the response and creating new things in my database using backend workflows.

Here’s an example of a backend workflow I built to write survey questions:

As you can see there a couple of steps to the workflow.

• Making the API request to OpenAI Chat API. This is where we send our prompt asking OpenAI to create our JSON object containing whatever we want.

• Parsing the response. Depending on what kind of object youre creating, you might have to parse several things from the response you get from OpenAI. In my case we need to parse the question itself, what type it is and any answer options.

• Finally we take all the content from those parsed outputs and use them to create a new thing in our database. Here’s how that looks in my example. We’re taking the results of what we parsed from the JSON and making a new question in our database.
  

We then show that question to end users in our app’s UI. As everything has been parsed and put into our DB in a structured way, it lets us show things like custom icons depending on the type, split out the answer options etc.

This means you can build really powerful features which are based on AI but not just a simple text response, you can literally use this technique to create any kind of data in your app!

Here’s how the end product looks to users after the response is parsed and shown in the UI:

There are several JSON parsing plugins you can use in your Bubble app to parse the response from OpenAI. Personally, I’m using the parser developed by Youssef at MinimumStudio. But you can also check out the JSON Parser plugin, there are a few different options in the Bubble App Store depending on what you’re trying to do.

I hope this issue inspires you to go and build some cool new things with OpenAI and Bubble! I’ve seen some people doing great things using this technique. Kieran from yep.so has used a similar method to automatically build marketing landing pages.

There’s so much potential for what you can do, I can’t wait to see what you build.

Until next time, happy building!

James