How to split and save OpenAI response Part 2

Introduction to OpenAI and Bubble.io Integration

In this Bubble tutorial video, I'm going to show you how you can take an OpenAI response, which looks like this, which is a request to generate three social media posts and then split them into multiple text entries, which we've demoed in a previous video. At the moment, I'm saving this to custom states, but now I want to save it to my database. So I'm going to show you how to use a backend workflow to split out each social media post, one, two, three, and save them as, one, two, three posts as a data type called posts in the Bubble app.

Planet No Code Membership Benefits

But before I start, are you a Planet Node Code member? If you're not, you're missing out because on our website, planetnodecode.com, we've got videos you can't find on our YouTube channel. We've got over 100 Bubble tutorial videos, very bite-sized, very specific, all heavily interleaked and easily searchable. So do go and check that out.

Setting Up the Backend Workflow

So I'm going to pick up from where I left off in the previous video, which is to, yeah, I've got my page. I'm generating my three social media posts. If you're unsure about the process of getting to here with generating using the OpenAI API connector, using OpenAI's API with the Bubble API connector, do check out our previous videos. We've now got loads on OpenAI, particularly our 30 minutes, how to build a chat interface with OpenAI and Bubble. That's a great video. Go and check out to get you to this point. But let's start with where we are and I'm going to go into backend workflows. And I'm going to create a workflow and this will be called create social media post.

Creating the Workflow for Social Media Posts

So this is the workflow that I want to happen for each social media post I generate. And we're having to use a backend workflow because we need to iterate through X number of results. At the moment, I know that I'm going to get three posts back, but what if I wanted to make that dynamic and allow my user to say five posts or ten posts? We need to use a backend workflow because we don't know how many times we're going to need to run the create a new thing action. So we use a backend workflow so we can go through a list and if there's three posts, five posts or ten posts, Bubble will just do the right number.

Setting Up the Data Type

So in here, I'm going to have text and leave it as text. It doesn't need to be public and I can leave all that as it is. So then I go create a new thing and I'm going to create a new data type. Called after score social posts and what should we do? Oh yeah and then I'll just have content of type text and save the text into the content field.

Configuring the Workflow to Run Multiple Times

So how do I get this to run the three times? Well, I can go back to my page. Which one am I using? Chat split and here's my current workflow, which is to say make the request to OpenAI and then save the results as a custom state. So I'm going to get rid of the custom state because I'm now going to be saving them to my database and I'm going to say schedule API workflow on a list and it's going to be a list of text and the list to run on is going to be the result of my OpenAI request. Choices first item.

Processing the OpenAI Response

So I'm getting all three social media posts back in a single message, a single choice from OpenAI. Message content. Now this is the full message, all three posts in one large block of text. So I use my split by command or modifier and I put in two line spaces. Now I've got a list. I will have three items in my list because I have three social media posts split by two line spaces.

Running the Backend Workflow

I then run it on my create social media post workflow. I just want to run that right away. I'm going to leave intervals empty because then Bubble self-optimized. Obviously if you were going to run this on a hundred entries, it's going to queue them up and kind of chug through them as quickly as it can, but that will take some time. Three will be fairly quick and then the text is going to be this text and this text refers to a single entry in the list coming out of this field here. So that is this text is now a single entry and that's how it ends up in my backend workflow creating a single post at a time.

Testing the Workflow

Now I do need a way to recall this and show it on the front end, but actually I'm going to test it first. So let's refresh this. We go back into data app data. We can see that my new post here, social posts is empty. Let's run it with... Oh, I need another learning a foreign language. So now we're waiting on OpenAI to respond and we're not actually going to see anything on this page because I've not put any method to display it, but I'm hoping that if we go in social posts, we can see that it's created all those social posts.

Displaying Results to the User

Right. Last step. I want to display that back to the user. How do I do that? So let's have a think. So I'm going to do this by creating another data type. I'm going to call this request and I'm going to add to my social posts a field of request. And so I'm going to use the request data type to save the initial input, which in that case was learning a foreign language. And then it's going to be used as a method to establish a database relationship and a grouping of my social posts data type.

Creating a Database Relationship

So this is going to be a type request. And then this means that if I go back into my workflow, I'm going to create a request, create a new thing request, and I'm going to save the input. Just think, you know, this is all useful if I'm going to recall it to my user. So input, and that's going to be my multiline input. And then I want to pass that into my back-end workflow because when I create a new social post, I need to be able to link it in.

Updating the Backend Workflow

So if I go into back-end workflows, create social posts and add in the field, I can pass in a request. And then I can save the request, our grouping data type, to the social media post. Going back to my page, I'm going to have this as social posts now. And I'm going to leave it empty because then that allows me to add in a display data and there are a piece in group steps.

Optimizing the Workflow

So I can say display list. Ah, okay, no, this is not going to work. Okay, now I'm going to try. So I'm going to display a list. No, that's not going to work because the list is only generated after this action is run. Okay, let's fix this bit first, which is the request as the result of step two. That's fine. That's successfully passing our request to the back-end. Okay, now I've got a plan. I've got a plan, which is just to show the most recent one.

Implementing Custom States

So we're going to say do a search for social posts where request equals do a search for... Ah, no, no, I don't need to do another search for... Right, here is what I'm going to do instead. I'm going to try and optimize this by getting rid of unnecessary do a search fors. So on my page, I'm going to set a custom state and we're not doing the AR response. That's from the previous video. I'm going to add in a request custom state.

Finalizing the Workflow

So that way we know the most recent request. And then in workflow, as soon as request is created, we're not going to use that. I'm going to say set state to be the result of step one. That allows me to put a single do a search for here of do a search for social posts where request equals the custom state request we've saved. And so now it's only going to show the results that match the most recent request. I'm going to check to see that this is all connected up, that our text labels know. So I'll update that to content. Right, I think we're now ready to test that.

Testing the Final Implementation

So let's go with traveling around the UK. Okay, submit. Okay, so we are showing one result there. Why is that? We're going to data, app data. We're getting more than one saved and they all have the same request. So what's going on here? Let's go into inspect. Have a look at our repeating group. Search for social posts. That's any returning one. Why is that? Okay, so I'm not sure what's going on there. I fixed that maybe by reducing the min height of row. I think it's because in order for speed, I'm sort of mixing fixed with columns and rows, which I usually do because it gives you headaches.

Troubleshooting and Final Results

Like I think I've just encountered, which is that elements don't lay out quite how you expect them and so you don't see them there. Anyway, now we're seeing our social posts about this time I ran a prompt for traveling in France and we're seeing these and if I go back into data, we can see that it's added in our three posts about traveling around France.

Additional Resources and Coaching

So if you want even more help with your Bubble videos, head over to our Bubble, more help with your Bubble app creation, head over to our website where we have even more Bubble videos for you and we have one-to-one coaching available that you can book straight in the calendar at a time convenient to you and you can speak to someone like myself who will guide you through whatever you're stuck with in Bubble and we can work it out together.