In this Bubble tutorial video, I'm going to show you how you can take AI generated text from OpenAI and how you can split it into multiple parts of text. For example, here is a very quick AI text generation tool I've created. If you're not sure how to get to this point, do check out. We've got loads of videos about OpenAI. But here I've put in a topic and I've basically given it a prompt to generate three social media posts on this topic. And you can see that OpenAI replies with just this single large amount of text.

How do I then split it into multiple parts? For example, what if I wanted to allow a user to click on a copy icon and copy just one part of this to their clipboard? But before I do that, just a quick word about our website. If you're not already a member, we offer an amazing membership deal at planetnocode.com where you can get access to over 100 Bubble tutorial videos, many of which are member exclusive. So if you're not a member, head over ver there and check out all of the tutorials we've got on offer.

Using Split By

But how do I split this? So I'm going to go into my design tab here and I'm going to put in a repeating group because we're going to list through the three different posts that are generated. And the content type is going to be text because I'm going to be putting in a long form of text and splitting that up. So let's go with text. I'm going to get rid of the number of rows just so it's a bit more flexible in its design. And then the data source is going to be the same as my data source here, which is that I'm using a custom state. If we look at my workflow, I generate the AI content and then I save it to a custom state. Again, if you're not sure about any of this, check out our previous videos on OpenAI. We've got one that basically explains the whole process in 30 minutes. But for now, I'm going to give the data source as the same, which is my custom state on my page page. And then, Bubble knows that I'm trying to take a single item and turn it into a list of items.

So I have to use Split By. And, well, OpenAI's responses. Part of crafting your best prompt is to create a prompt that gives you a reliably formatted output. So OpenAI can vary a lot, but your prompt can really narrow down and make it reliable in how it returns its value. And in my testing and asking OpenAI to generate three social media posts about topic X, it puts two line spaces between each post. So if I say split by two line spaces, and that doesn't look like anything, but you can see that they are there, we can then, if I go and change this to a row just so that I could put some text inside it. In actual fact, I'm going to put this over to the left. This is our original output so that we can compare the two. And then this is our Split by output, and I make this current sales text. Cool. I think we can give that a go. So let's go again with advances in AI automation. Click submit. So we're waiting on the response from OpenAI. Okay, and you can see that it has split my...

Copy to clipboard action

Okay, that's because the text... I've made that too small. Anyway, you can see it's dot, dot, dot. It's because it's too small. So the whole of the text response, all three posts is one block of text on the left. But you can see here that I've successfully blocked out each three posts into a single separate cell. And so that then allows me to take something like the copy to clipboard plug in and to say text to copy would be current cell's text. And then I think I would then put an icon in, not use this plug in for a while. Copy and then let's just see if I can add the workflow here based on the copy with links. Just see if we can do this. Okay, now I can target the element ID. So if I say text under score current sales index, that's because an ID needs to be a unique element on the page. So I have to put dynamic text in here so that this one is text under score one, text under score two, et cetera. So then if I say in here, element ID text under score current cell's index.

Right, let's try that. Let's say climate change. Sometimes open the eyes really quick. Sometimes it has slow days. I imagine they really have to scale their competing power over the last few months. Okay, here are my posts. So if I click on that and then it's just going to work. Yeah, there we go. It has copied that post and so I click on that. There we go. It's put. Let's check that again. Because I saw that post 1 was still in there. Yeah, that's work.

Okay, so there you have it. There is how to take a large piece of text from OpenAI and to split it into multiple instances. And that then allows you a bit more flexibility of what to do. Right now, I'm going to record a follow up video to this, which is going to show you how to save this into your database. We have to go through a process back and workflows and iterate through every value because we might not necessarily be dealing with three posts every time. We might want to give our users the flexibility to choose a number, and we're going to need a back end workflow in order to iterate through X number of posts.