In this course, we're going to be learning how to build an AI app with Bubble. We'll be using OpenAi to build Social Rabbit, which takes a long-form blog Post as an input and then formats it relevant for any social media Post as an output. We'll also be able to adjust the tone of the Post so that it's formal, humorous, or inspirational. The key concepts in this course are building the app in Bubble, connecting to OpenAi via the API connector, as well as the UX involved in creating a great app experience. Let's jump into the demo
app and try it out. So this is Social Rabbit. On the left-hand side, we have some inputs, and on the right-hand side, it Looks like we are awaiting instructions, and this is where the results will be produced, which is the social media Post. So if I click on this dropdown, I can select the social media platform. I'm going to select x. com. It has a 280 character limit. The tone I'm going to go with is informal. And in terms of the blog Post I'm pasting in here, I found this Tesla Cybertruck review, and I've just
gone ahead and copied this blog Post. I'm now going to paste it in. And if I scroll back up, you can see all of this long form content that needs to be summarised for x. com with an informal tone. Let's try it out. I'm going to generate. And there you go. That took just a few seconds. And let's look at the results. Ever seen a vehicle that's more like an A-list celeb? Enter the Tesla Cybertruck. Fantastic. So what else can we do here? Let's try Generate Image. And there is our image relevant for our social
media Post. Okay, so there you have it. Let's jump straight into Bubble and start setting up our app. So in order for this app to actually work, we need to use backend workflows, Otherwise known as server-side workflows. These can only be enabled on a paid plan, but as I've created this new app, Bubble have offered me a free trial. So go ahead and accept a free trial because we're going to need it for the functionality for this app. Okay, I'm going to skip the Application Assistant And here we go. I've just double-clicked on the page
to bring up a Property Editor. And I'm going to change the page title to Social Rabbit. Over on the Layout tab, I'm going to change the container layout to a column, and I'm going to change just the default builder width to 1200. This gives us a bit more canvas space to build on. Now, there are just a few styles I'd like to adjust slightly. This is optional. You can skip forward to the next chapter if you like. Otherwise, you can just follow along with for a few minutes while I adjust some of my styles, which
means that what you're building in your end will look exactly what I'm building on my end. So I am going to head over to the Style tab. I'm going to click on Style Variables. First thing I'm going to do is just change the default font to Inter. After that, I'm going to change my primary colour. This is just going to be a dark primary colour. I'm going to choose a ones across, that's six ones. On the text, I'm going to choose twos across. On the surface, I'm going to choose #F7F7F7. Then I'm going to set
up two new colour variables. The first one will be called dark grey. And here I'm going to say body text. Then the second one will be called light grey. I'm going to say Borders. Now, I'm going to go over to my Element Style, and I'm going to go look for my button. Here it is here on the left-hand side, I'm going to go to my primary button and we can see that the colour has changed here. Okay. Look in the Appearance tab, we can see primary colour, ones across. That's because we updated our global styles
for this particular colour. I'm just going to change the font size to 16 for this button, and that's fine. I'm going to close the buttons on the left. Let's see. I'm going to go down to Inputs. I'm going to open up Standard Input. I'm going to change the boldness or weight to 500. Actually, one thing we do need to do is back in the Style variables, just set these colours down here. Okay, So dark grey will be fours across. And light grey is going to be #EBEBEB. Back on the standard input, I'm going to set
the placeholder colour To be dark grey, our new variable. Border style will be solid with a roundness of 8. Then the colour is going to be our light grey. And let's have a look at the conditionals quickly. We're going to remove the hovered conditional, but leave the rest. Let's do the same now for the multiline input. First on the appearance, going to change it to medium 500. Placeholder colour will be dark grey. Border style is solid with a roundness of 8. And then my border colour will be my light grey. Lastly, on the conditionals tab,
going to remove the hovered. Okay, almost there. Let's just have a quick look at our text. So we've got Body as the default, 14 pixels. I'm just going to bump up to medium. And I'm going to change the font colour to my dark grey. And then I'm going to do the same with the Body Large. This is 16, medium, and dark grey. Okay, just having a quick look at the headings. We're going to be using heading 3. I'm happy with the settings there. We'll use heading 6 as well. So for heading six, settings are currently
fine. Just change the weight to semi-bold, and that's fine. Okay, I think that's what I wanted to do with the styles. Let's now go ahead and set up our database and our option sets. So I'm going to click on data, and then I'm going to go across to option sets first. We can skip the tutorial. And in the demo, I showed you we had a number of option sets there. We had two dropdowns. The one dropdown lets us select the social platform, and the other dropdown let us select the tone. And there is a third
option set called Status, where we can monitor the status of the Post that has been generated. So the first option set I'd like you to add is called Social Platform. Or actually, we're just going to use the word platform here. Go ahead and create that. I'm going to type in three options here. The first being Facebook. Create. Next one, LinkedIn. And the last one is x. com. Now with AI, we are able to feed through quite a lot of parameters, give AI instructions over how to format the text, the tone of the text. And in
this example, we're just referencing the social media platform because of the character length, the max character length. So we're going to create a new attribute here which will enable us To assign a max character length, and we will refer to that max character length when we're building our prompt later on in the workflow section. So let's create a new attribute here, please. We're going to call this length. And this is a number. Now we can assign a number to each option set. Let's go ahead and modify attributes for Facebook. And the length is 63,206 characters.
Go ahead and save that. Let's do LinkedIn next. Max length is 3,000 per Post. And lastly, let's modify attribute for x. com. Set that to 280. And yes, maybe by the time you watch this course, some of the limits have been lifted or slightly different. It doesn't matter. The point being is that we have control. We're giving instructions to OpenAi for the actual character length that we'd like returned. The next option set we're going to create is going to be called tone. Let's go ahead and create that. And let's set up three different options here.
Let's say formal, humorous, and inspirational. And the last one we need to create is called Status. And we're going to have two states here. One is Pending, and the other one is Complete. And how these two statuses work is when we initially click the button Generate, we are creating a Post in the database, setting the status to Pending. With that status, we can then create the UX experience I was talking about in the earlier part of this course, which is building a great user experience. So whenever users have to wait, well, you need to show
them something, give them instructions, let them know that something is happening in the background. That's what the pending status for. And then once it's been complete, we've got data back from OpenAi and we've saved it to the database. We'll also update the status to complete to then on the front-end on the user Interface, we can then show the results. So pretty imperative that we have these two statuses so we can track the flow and the completion. Let's head over to the data types now. And we're going to create a new type called a Post. Now,
the first thing we're going to do is add a field for each option set that we've just created. First one is Platform. And that is under option sets, platform. Next one was Tone. And that is Option Sets Tone. And the last one is Status. And let's find our Status under Option Sets. And then if we think back to the design on the left-hand panel, we had the two dropdowns, platform, tone, and then beneath that was the multiline input. So that would be called the source. And that is just text. So we need a source field
type of type text. And that is basic type text. Okay, this could also be called input. Same thing. Now we need output, and this is what we're receiving back from OpenAi, and we're receiving text back from them. And then something else I want to do is have Output, space, edited, because we Are going to be outputting what we get back from OpenAi into a multiline input so that it's easy for a user to make quick edits if they'd like. And I think this is the best way to work with AI. Ai is an assistant, but
it's always nice to make sure that you can edit some of the work that it returns. We're going to choose text for that. And then lastly, we notice that we're able to generate an image. And something to note is that OpenAi temporarily store the image file, but that eventually expires. So we actually need to save that image to Bubble. We can't just extract the link that has returned back to us. We need to save it to Bubble. I'll show you how to do that. So we need to capture and save that image to the database.
That is of type image. Okay, now that we have our database set up, We can go ahead and do some design work. So I'm going to split this into two parts. The first part will be the left-hand panel with the inputs and the source, and then we'll do the right-hand panel, which is the output. And the right-hand panel actually has three separate views. We have basically the new post view, so nothing has been done. We're just in idle mode. The second is the pending state. We have hit the Generate button and we're waiting for something
to be returned. And then the third one is we now have a result. So we've got three different groups, all collapsed by default, and we're using conditional statements to show the correct one at the right time. Let's head over to the Design tab. And if you If you click on the index in the element tree, we can bring up the Property Editor. And the first thing we're going to do is just change the background colour here. Type in #F7F7F7. Because I want our groups to stand out on this background. Okay, now go ahead and grab
a Group, please, and just drop it on the page. Don't worry about the shape if it's slightly different to mine. But let's do name this to Group Container. And on the Layout tab, what we're going to do is choose Horizontal Alignment in the centre. And we're going to set a max width here of 1200. Then scroll down and uncheck Fit Height to Content so that it just covers the entire page. And then let's just add some padding. So So top, bottom of 96 and 96. And then left, right of 32 and 32. And the last
bit of spacing we're going to add to this Group is on Gap Spacing at the top of the Layout tab, we're going to choose 32 Row Gap. This will become evident once we start putting groups On the page, why we're doing this. Okay, fantastic. So now we need to grab some text. Here it is here, and just drop it inside this Group container. Now, the Group container should be covering the entire page. And what the purpose of putting down a Group container is so that we can limit the width to 1200. So the page can
stretch as wide as it needs to. And I'm on quite a big desktop, which you can see in view here. And if there was no max width, then we would have this massive desktop that wouldn't be very usable. So we wanted it centred with a max width of 1200. That's why we're using Group container. I'm going to click just to drop the text in there, and let's type in Social Rabbit. For the style, we're going to choose Heading 3. Now for that little icon, let's do this. It'll be fun. Let's go over to Plugins and
let's Install... Actually, while we're here, we can install the API connector, and this enables us to communicate with OpenAi. And then let's look for Material Icon. It's third in the row here, Google Material Icons. Those are the only two plugins we need to use. Okay, back to the Design tab. Let's scroll down under Visual elements and find Material Icon. Click it once and then click it on the page. And I'm looking for a little rabbit. I think it's under the term Cruelty Free. So C-R-U, and that brings up a little rabbit. Okay, let's make the
icon, let's make it the primary colour. And on the Layout tab, I just want you to change the Fixed Width and Fixed Height to 24 by 24. It'll scale down nicely. Let's put this in a little Group as well. So I'm going to right-click and say Group Elements and Align to Parent Container. Let's rename this Group, Group Icon. And I'm going to remove the min height and the min width. And let's add some padding all the way around of 8 pixels. 8, 8, 8, 8. Just having a bit of fun here, guys. We're going to
get to the logic really soon. And then we're going to add a little border on this as well. So solid with our light grey. Always going to use this light grey on borders. And then 8 on the roundness. And let's just make sure we have a background colour of that colour, a flat colour. Then let's always just set a style here, so the primary contrast, Which means now we have this neat little rabbit in this icon. Moving on, we're going to highlight Group Icon, highlight text, Social Rabbit, right click, Group elements in a row container.
Fantastic. We call this Group Header. And on the Layout tab, we need some separation between those two elements. So we're going to add column gap of 12. And then we're going to remove the min-height as well. So we just close down the height. Got some space we're not utilising underneath. And lastly, we can highlight Social Rabbit and make next. And there we go. Just a touch of design work. We're having fun here. Okay, now I just want some subtitled text here. So I'm going to grab text again, drop it in. I'm just going to give
an instruction here. Create social media posts with images. Okay. Let's now work on our left side Input Group. So I'm going to scroll down to Containers, grab a Group, and just, again, just drop it inside your Group container. Let's call this Group Source. I'm going to detach the style because I do want to set up style here. So let's change the background colour to flat colour. Let's set up our usual border colour with our light grey And with 8 on the roundness. Always going to be the same. And for now, let's just set a max
width of... Let's try 576. This is just temporary, but I just want to create a basic shape to work within. And let's do the same on the height, 576. We'll come back and adjust the exact sizing later. So you can see that when I did this, we've got some overflow problems down here. So what I'm going to do is click back on Group Container, and I'm going to select Fit Height to Content, and that will then increase the size of the page. And this Group will fit height to the content within, which is this Group
source. Okay, back to the Group source. Now we're going to add some padding of 32 pixels all the way around. Make sure it's padding the very last row and not margin. Margin will give us a different result. We want internal spacing. Okay, we're ready to add some content inside. Going to grab some text, drop it inside the Group source. This will say, 'What would you like to create?' Let's use a Heading 6 for this. And on the Layout tab, I'm just going to remove the Fit Width to Content just so it spans edge to edge.
This is just for mobile or responsive reasons. And let's give another instruction beneath. So I'm going to highlight this text and I'm going to duplicate. And on my Mac, the shortcut is Command+D. It duplicates the text. And in here, I'm going to change it to Body Large, first of all. And then I'm just going to type, 'Select the platform and tone then paste in the content you'd like to summarise.' Yeah, just a bit of an instruction there. So we can see that we need some spacing in this particular Group. So for that, we're going to
use our Gap Spacing. We're going to just use 24 here. Okay. Now we need a dropdown. I'm going to choose my Input Forms, look for a dropdown, drop that in. And I've just realised that this is the one thing I didn't Style. So we're going to do that now. Edit the style of the dropdown just so it conforms with the rest of my style choices. We're going to choose 500 medium. Placeholder colour will be dark grey, solid border, 8 on the roundness. You know what to do here, guys, light grey. And on the Layout tab,
I'm going to match it with the inputs. And the inputs have 16 pixels of left, right padding. So we've set the same for the dropdown. And then we don't have Hover on the Conditional tab. I'm going to delete that. Okay. So Dropdown A. We're going to just select this dropdown that says Dynamic Choices because we want to feed through our option set options here. So where it says types of choices, we can now choose platform. Then Bubble is saying, well, from that, which choices would you like? But I would like all of the platform choices.
So I'm saying all platform. And then Bubble is saying, what text should we display in the dropdown? And that is going to be the display. The length we're going to be using in our prompting later on. And it will have no default value. Let's give an instruction for the placeholder. Let's say Select Platform. And on the Layout tab, let's just sort out the width here. We're going to remove the fix width and the min-width. And let's just say for this course and this project that the height is going to be 40 for inputs and dropdowns.
Okay, good stuff. Let's duplicate this. Command D on my Mac. And now we need to allow the user to select the tone. So I'm writing, Select the tone, and I'm going to change the platform to tone. I'm going to say, Please show me all of the tone options available, and that will be the current options display, which is the written options that we set up in the option set. Now for the actual blog post that we're going to summarise, let's grab a multiline input for this purpose, drop it in, and let's say 'Paste your blog
post here.' Let's edit the style of the multiline inputs just to make it consistent with the other input, so 16 and 16. And let's actually do 16 all the way around. And I'm happy with the rest. Okay. So on the Layout tab of this multiline input, let's remove the the fixed width and the mid-width. Then let's choose a fixed height here of 192. And the reason why we're creating a fixed height is because we don't want the input to grow with all of the text. Then we can't find the button which is just beneath the
multiline input. We'll do that next. So just good user experience here. Smaller input, but enough space in there to be able to paste and edit and that thing. Okay, now let's grab our button. So I'm going to scroll up, find a button, drop that in. This will say Generate post. And on the Layout tab, I'm going to remove the fixed width, remove the min-width. I'm going to select fit width to content, and I'm going to say 40. So it matches our dropdowns. Now I'm going to position this on the right-hand side. Very nice. Okay, this
is looking really good. So we can see a bit of space down here. So I did a pretty good estimation when I estimated that on Group source, the fit height to content, the min height would be 576. So we can just actually press backspace and remove that, but keep height to content checked. Okay, the last thing I want to do, just because I'm obsessed with design, is highlight this text up here and the text beneath, and put this in a new Group because I want the spacing to be closer together. Right-click, Group elements in a
column container. I'm going to rename this to title and subtitle. And spacing here will be 12. We're doing this for the proximity effect. Okay, we want text to be closer together, and then we want the inputs to be closer together, but further away from the text. Then we also want the button to be slightly separate. Okay, this is just much easier or a better user experience by doing this. Let's do the same for these. We're going to select all three of these inputs, right click, group elements in a column container. We're going to rename it
to Group Inputs. And then we're going to apply a gap spacing of 12. Okay. So the text is closer together, these inputs are closer together, and then the button is down here, 24 pixels away from that Group Input. So that's the Group source, and now we're going to deal with the Group output on the right-hand side, and that has three different conditional states, the first being the idle state. This state exists when the page is first loaded, and a user has not clicked the Generate post button yet. We're including a little notice that we our
waiting instruction. The second state is the pending state. We're showing a loader and letting the user know that their generation Is in progress and that they need to wait to see the results. And lastly, we're showing the completed state. And this is the generated post itself. So let's jump into the design now. Let's grab a Group in the container section and drop it above the left-hand panel Group Source. Let's name this Group Output. Let me change from a standard group. What we're going to do is actually copy this style across. Okay, so let's say, create
a new style. Let's call this Card Medium. And Create. Now we can apply that style to Group output. Perfect. On the Layout tab, just add a bit more height, maybe 160. And with Group Output highlighted, I want you to also highlight Group Source. Right click, Group elements in a row container because they need to be on the same axis next to each other. Let's firstly rename this Group to Group Content. And then we're going to apply some gap spacing of 32 pixels on the column. Looking good. So this Group source needs to be on the
left. So from the Layout tab, we're going to choose make first. Fantastic. Now we can crack on. So we've done some great design work here, Group title and subtitle, and I actually want to copy that across and place it inside Group output. Now, before we do that, I want to change the container layout to Align to parent, and then we're going to choose vertical stretch so that this Group stretches as much as the left Group stretches. Okay, now for our three different states. So this state would be for the actual result. But why don't we
start from the beginning, so the Idle state. So let's grab a Group, from the containers, and we can drop it in the centre. I'm going to call this Group Idle. And then I'm going to grab this little rabbit icon, come on, C, In my Mac, and then paste it in. I'm going to choose horizontal alignment in the centre. I'm going to grab this text here, Command+C on my Mac to copy and then Command+V to paste. And I'm just going to change the text to 'Awaiting instruction...' On the Layout tab, I'm going to choose... Sorry, not
on the Layout tab, on the Appearance tab, I'm going to choose Centre. And then I'm going to duplicate this text using Command+D. I'm going to select Body, put that in the centre. And then I'm going to type, 'We are ready to produce your post.' Okay, and it looks like it just needs a touch of gap spacing on the Layout tab. Let's just choose 8. Very nice. All right, let's bring this closer. Now, it's not going to be visible on page load, so please uncheck that on the Layout tab of Group Idle. Then we do want
to collapse it, and we're going to show it based on the condition. And that condition we'll work on a bit later on. For now, we can go over to the elements tree, and we can use this eye icon to hide it. Now for the pending state, we're going to do something similar now. Grab a Group, drop it in the centre. Group pending. It's not visible in page load, and we will collapse it when hidden. Let's grab an image element now. Drop it inside. And I'm going to upload my loader. You can basically copy this from
the demo app, and you can find the link in the description. On the Layout tab, I'm going to choose 56 with a fixed width, and I'm going to keep element aspect ratio fixed as a one to one, and then finally put that in the centre. Going to change the naming to image loading. Now I'm going to grab some text, drop it inside Group Pending, Let's say 'Generation in progress...' Let me Centre align that, and then on the Layout tab, remove fit with to content. Looking good. Make sure it's collapsed and hidden and not visible in
page load. I'm going to head over to the elements tree, close that down, and then hide it. Now we need another Group. This time we're going to position the Group at the top, okay, up here. This will be called Group Results. And that will not be visible in page load, and it will be collapsed when hidden. And I want to increase the height here to 260. This is just a bit of guesswork. We need some space to work within. We'll deal with the actual height later. Now, I'd like you to copy this text across, please.
I just want to save some time on the design work. Command C in my Mac, and Command V. Going to say, 'Here is your post.' And for this piece of text, what we're going to do is combine static with dynamic text. And for the placeholder, let's just get some text in here. I'm going to say, Here is your x. com post. I could say Facebook post, LinkedIn post, with an inspirational tone. And you know that the word inspirational will be substituted with dynamic data for whatever the person chose from the dropdown on the left-hand side.
And let's say, Generate an image with the button below. Okay, fantastic. So on the left-hand side, this multiline input source, I want to copy that across and then rename it because when the post is generated by OpenAi, the user might want to edit it slightly or add more to it or subtract from it. So we're going to push the results from the database into a multiline editor, a multiline input, excuse me, so that they can quickly edit it and then save it to that output-edited field in the database. I'm going to copy, go across to
Group Results now, and paste. Make sure to rename this immediately, please. Output. And now we need a button, so I'm going to take this generated post, copy, and I'm going to paste it inside. And by the way, another way to do this is, in fact, if we just duplicate it, come on, command + D on my mac, over in the elements tree, we can actually move it into position. So here's the button here. And I want it down here somewhere, I can just drag it down to position. Slightly out. There we go. This will say
Save post, and this will basically save any edits that have been made here. Okay, just checking on the row gap, it's 24. Let's add 24 pixels of row gap on the Layout tab of Group Results. Looking good. Now we need a big button so that the user can generate an image. So let's, this is going to be a unique one-off style button, but let's go ahead and grab a button. Let's drop it inside. Let's say Generate Image. And let's see what we have here. So we have a flat button. Yeah, so select flat button. Change
the size to 16. Let's add a border style of dashed. A roundness of 8, a width of 2 because it's dashed, and then our border colour, which is light grey. And then on the Layout tab, let's remove the fixed width, remove the min Width, and I want this to be quite big. Let's try 48. That looks really good. And now we also need an image. So I'm going to click on Image. I'm going to drop it beneath Generate Image and the multiline input. Let's name this to Image Post. On the Layout tab, we're going to
remove the Fix Width and the Min Width. I'm going to set an aspect ratio of 3-2, common photography size. Then lastly, on the Appearance tab, I'm going to set a roundness of 8. Okay, so obviously that image is not visible in page load, so on the Layout tab of Image Post, I'm going to uncheck Visible in Page Load. I'm going to check Collapsed when hidden. And on this Generate Image, I'm also going to say not visible in page load and also collapses when hidden. So when there is no image, the button Generate Image will be
visible, and when there is an image, then the button Generate Image will not be visible. Just making sure that this is collapsed and hidden. Yes, it is. Okay. So now we're going to deal with the initial workflow. It's just the Bubble side things. So that would be creating a Post and setting a parameter to control which Group is shown at which stage. So let's dive in and have a look at these. Let's set up the initial workflow for generating a post. So let's add a workflow to the Generate Post button. And what we're simply going
to do is go down to data and things and Create a new thing. We know that's going to be a Post. And let's first of all, add all fields with this little option down here. Let's go through them one by one. Now, an image is going to be generated later on via the workflow on the button that we set up a few minutes ago. So we don't need that here. The output is what is returned from OpenAi, so we don't need that. Output edited is what's saved from the Save button in the right-hand panel Group
output, so we don't need it. But these are the four fields we need to fill out. So we know the platform comes from a dropdown. Dropdown Select Platform's value. Perfect. The source comes from the multiline input. Now make sure you use the source here. Okay, otherwise you won't be sending any data to OpenAi. Next is the status. Now we're going to set this to pending. The button has been clicked, and now we're going to show them that the generation Is in progress straight away. And then the tone is coming from the dropdown. And then naturally
after this, we would be sending this data to OpenAi, but we first need to set up those API connections very shortly. For now, let's just sort out the end of what this workflow is going to be. We're going to go Navigate, Go to page. Now we're not changing pages. We're just going to select the same page, which is the index, because I want to access this section down here that says, Send more Parameters to the Page. I'm going to check that. This allows me to set a parameter. So I've clicked Add a Parameter. I'm going
to call it post. And what I'm going to do is grab the results of step one. So the Post that's being created, that bit of work that's been done is the result and its ID. I'm going to type in ID to look for Unique ID. And because we are setting a parameter with the Unique ID, we can then change the behaviour on the page. So we're going to be referencing that parameter, all that Unique ID for the rest of this course, so we can show and hide relevant groups at the right time. Okay, let's go
back to the design, because now we need to look at when to show and hide these groups based on this parameter. So over in the elements tree on the left-hand side, this open up Group Idle. And on the Layout tab, we can see that it is not visible in page load and it's collapsed when hidden. Let's add a conditional of when we can show this. We need to define another condition. An expression will read. We need to type the word 'get' because I want to access get data from page URL. I want to access the
parameter we've just set in step 2 of the Generate Post workflow. Get data from page URL. The parameter name is going to be called post. And that is of type Post. Easy. We're going to say that when it is empty, when get post from page URL is empty, that's when we show Group Idle. I just realised that I'm doing this to Group Results. I'm just going to copy this and delete that. And I'm going to open up Group Idle. Okay. So Group Idle is showing. I just didn't click on it. I'm going to paste this
back in. And that's when it's visible. When get post from page URL is empty, that's when it's visible, and it's not visible on page load. Let's copy this expression. Now, let's hide Group Idle in the elements tree and open up Group Pending. And then I'm just going to make sure that Group Pending is clicked. Okay. On the Conditional tab of Group Pending, I'm going to paste in this expression that I've just copied. And now I'm going to access the Status field. So I'm going to click on Is Empty to access Status. And then Is Pending.
That's when it's visible. And now for Group Results, let's select Group Results, Conditions tab, paste the expression in. We're going to access Status, the operator 'is', and the option Complete. That's when that's visible. Okay, so we have when the parameter Post is empty, show the Idle state. When the parameter post, when it is pending, show the pending state. And when it's complete, show this on the screen right now, Group Results. Easy. Now, in order to be able to show the actual results in the multiline input with the image, we need a data source in Group
Results. Okay, so I've clicked on Group Results. Here is my Property Editor. I'm going to choose Type of content is a Post. And the data source is basically the same pattern, get data from page URL. The parameter name, we called it 'post', and that is of type Post. Close, and now we have a data source that we can reference. So let's start down in this multiline input. The initial content will now be Parent group's Post's output. Let's return from OpenAi. We'll deal with the Save button shortly. Let's deal with this image. It's going to be
the Parent group's Post's Image. Let's change the run mode rendering to zoom for this. I want to zoom the image and cut the shape. And now on the Save button, we're going to add a workflow. This will be very, very simple, this one. Make changes to thing. Make changes to the Parent group's Post. And what we want to do is save the multiline input to the output-edited field. Multilineinput's, output's value. Okay. At that stage, we probably just want to show a little alert as well. Where is it? Here it is here. I'm going to drop
it in. I'm going to say successfully saved. And maybe this can have a background colour of our green and I don't know, 10 %. Then on the Layout tab, let's put that in the centre. That looks fine. Let's go back to this workflow. So on the Save button, let's just add in that alert. At this step here, we can just say Show Message, and Bubble have recognised that we only have one alert. There it is there. Okay, so we're saving the Post to output edited, the multiline output's value, and then showing the alert. So that
is the design section done with some basic workflows. And now we're going to turn our attention to integrating OpenAi with our app. Let's jump in. Please navigate to platform. OpenAi.com. And if you already have a ChatGPT account or a developer Account, you can go ahead and log in because you can log in with your global OpenAi account details. If you don't have an OpenAi account, then please go ahead and sign up. I'm going to log in and I'll see you in the dashboard. Before we continue, let's quickly review what happens when a user generates a
Post. After clicking on the Generate button, we're going to be sending OpenAi some prompt information based on the user's inputs. OpenAi will then follow the instructions and return some data to Bubble. Once that data, or in this instance, our summarised social post is returned, we can save it back to the Bubble database and change the status of the Post from Pending to Complete. And this enables the user to then see the generated post in the dashboard. So now that you are logged in or signed up in the dashboard, there are two things we need to
do. The first is we need a billing account. So the API through OpenAi is not free. You absolutely have to pay for it, and it's very cheap. So I have possibly $8 or $9 on my account. You could possibly top up with $1 or $2 for this course, and that would be enough. Let's just first have a look at how it's done. I'm going to head over to this left-hand panel and I'm going to go to settings. Once I'm in settings, I'm going to go ahead to Billing. You can see that I have a credit
account of $9. 35 and auto recharge is off, and I can add to my credit balance. Please go ahead and add a payment method if you don't have one, and then top up your account just with a few dollars. Once you've done that, we need the API key. So we head across this left-hand menu, head into the API keys, And I've already gone ahead and created an API key for Social Rabbit. Here it is here, and I've just saved it to my notepad. So once you've created your new API key or secret key, just save
that to a notepad for now because we're going to need it soon when we are setting up the API call. So I've saved my key to a notepad, and I'm going to head over to the documentation, and I'd like you to do the same. So OpenAi have just released GPT 4o. That's the model we're going to be using. 'O' stands for Omni, and it's a multimodal model. The two endpoints we're going to be using. The first is text generation. That's going to take the blog post and convert it into our social media Post. We're going
to be using the Chat Completions endpoint. And the second one we're going to be using is Image generation. And OpenAi I have a model called DALLE-3 3 for that. Let's first have a look at the text generation, Chat Completions. So let's just read this first. Chat Completions API. Chat models take a list of messages as input and return a model generated message as output. Although the chat format is designed to make multi-turn conversations easy, it's just as useful for single-turn tasks with out conversation, and that's exactly what we're doing. We're not starting a conversation. We
are just sending some data with some context of what we want, and then we will be returned with the summarised social media Post. Then it says, An example chat completions API call looks like the following. We have our URL, which we're going to need. We have the content type, which we're going to need. We have authorisation bearer, and that's where we insert our API key. Then we have this body over here, and we're going to need some of this, but not all of it. If yours looks a little bit different, just make sure that you
are on the Curl option. You should be by default. To save ourselves a little bit of time, what we're going to do is just click on this Copy icon, and then we're going to go ahead and set this call up by pasting this into the API connector. Let's head over into Bubble. I'd like you to navigate to the Plugin sections and the API connector. If you didn't install the API connector, go ahead and do that now by adding Plugins, and then add another API. What we're going to do is scroll down to find this option
that says Import another call from Curl. We just clicked on the copy icon, and that's what we're going to do. I'm going to click on that, paste it in, and then click on Import. Okay, fantastic. Now we need to move some of this data further up to this shared area, which is more secure as well. So the first thing we're going to do is at the top, we're going to type OpenAi. The authentication method, which is in the documentation, is private key in the header. We're going to move authorisation up here. The value, I'm just
going to copy this. Command+c in my Mac, Command+V. Then I'm going to delete this part here. Now go to your notepad and copy that secret key that you generated earlier. If you didn't save it, you'll need to go ahead and create another one. I'm going to paste mine in. And you will have access to this app but by the time you have access to this app, you won't be able to use the secret key because it will be deleted. So you won't be able to use my account to run these calls, and test it out.
Now we need a shared header. So I'm going to click on the button that says Add a Shared Header, and we're going to copy this content here. So the key is Content-Type, and the value is application/json. Now that this content is up here, it means that we can make as many API calls as we want beneath it. And this is shared data for those calls. Okay, so we can go ahead and delete these two. And let's continue with this call. I can see another one up here. Let's just delete this one above it. Sorry. I'm
just going to delete that. Okay. So it's copied across all of this stuff here. We're going to deal with this shortly. Let's change this call to 'Create text'. We're going to be using this as an action. And the difference between the data and action is that when we select action, it then becomes available in our workflow section. If it was set to data, it would not become available as a workflow step. The data one is for connecting data directly in, for instance, a data source like a table or a Repeating group, but we're running it
as a workflow step. We know that the data type is json because we set the option here. Okay, let's come down to this section now. Let's look at this top to bottom. Firstly, it says the model is GPT 3. 5 turbo. That's an outdated model, so we're not going to use it. We're going to highlight the 3. 5 Turbo and type '4o'. Not 4-0, but 4o. O stands for Omni. And now we have role is system, content is you are a helpful assistant. So this is where we're going to be dynamically feeding some instructions. And
then beneath that, it says role user, and content is Who won the World Series in 2020. It looks like we also have a set of instructions here. So what we'll be doing is feeding through dynamic data in this section under system basically saying that you are a social media manager and you're going to be summarising this blog post into a social media post. And then in the role for the user, the content will be, well, here is the post that you need to summarise. So we're going to now highlight with the quotation marks this part
here. And I want you to just copy it first to clipboard. Command C. After you've done that, we need to add the option to insert a dynamic value. And just above, we can see that Bubble gives us instructions. Use the smaller than and greater than signs for dynamic values. So I'm going to do that here. I'm going to add two. And then inside, I'm going to type . . And now, if I I click in this section, Bubble then says, Well, here is a key value pair, and please paste in a temporary value. I'm going
to paste that back in. You are a helpful assistant. Now, we need the double quote marks here for it to work. This is going to not be private. If this box was checked, it would not show up in the workflow section. We need it to show up in the workflow section with a value so that we can insert dynamic data. So now we're going to a similar thing for the row beneath that. We're going to highlight Who won the World Series in 2020 with the quote marks and then copy it. Then replace it with smaller
than and larger than signs. Then inside, we're going to type . I'm going to paste that value back in. Who won the World Series in 2020? And then uncheck private because we need to feed dynamic data into that value. Okay, so some of this we don't need. So this is where you need to be ultra careful. I'm just going to click on row 19, and I'm going to delete from row 19 all the way to this comma. Okay, but I'm going to keep that curly brace on row 11. I'm going to scroll down like this
up to row 19, press this backspace, and then click outside the box. So we've got user prompt that ends with the greater than sign. Then we've got our closing curly brace Then we've got a square, bracket, and then another curly brace. Once you've done that, we can actually go ahead and initialise the call. Okay, so that was pretty quick. I'm going to have a look at the raw data, and we can see that we have our GPT-4o with today's date, and then we have message, role as assistant, and the content, the Los Angeles Dodges won
the World Series in 2020. So we're sending dynamically created system and user prompts to OpenAi. OpenAi will then follow the instructions from the two prompts to produce an output. The output, all the summarised post, is then returned to us to Save to the Bubble database. Okay, let's go ahead and save that now. And let me show you a quick example in the workflow tab that you don't need to do this. I'm just showing you where it turns up now. Because it's an action and because we uncheck private, under Plugins, we can see OpenAi Create Text.
Here's our step. And here are the temporary values values that we inserted into the key value pair in the API connector. You are a helpful assistant, the user prompt, who on the World Series in 2020. And the pop-up that showed earlier with the results and the answer, that Will then become available as the result of step three to use in subsequent steps. Okay, I'm going to delete that. We're not going to use it right now. Now in terms of the image, let's go back to the Plugins API connector. Because we're going to add another call
in a second, or we'll be using the Import feature first and then editing the call. Let's head back to the documentation and we're going to scroll down to Image generation. So Image generation. Learn how to generate or manipulate images with DALL-E in the API. The image generation endpoint allows you to create an original image given a text prompt. When using DALL-E 3, images can have sizes of these options here. We're going to be using the 1792 by 1024, so it's in more of a rectangular format. By default, images are generated at standard quality, but when
using DALL-E 3, you can set quality is HD. Let's go ahead and do that as well. Change this option to Curl, if it's not already on that, and let's copy it. Let's hit back to Bubble. We're going to import another call from Curl. Paste that in. Import. And let's work top to bottom. Let's call this one Create Image. It needs to be an action, remember, we wanted to show up In the workflow section. Data type is json. It's a POST call, and there is a URL. We don't need these two headers because we already have
these as shared headers for all of our calls. Okay, fantastic. Let's move on down here. The model is dall-e-3 . For the prompt, this needs to be dynamic. Okay, so let's highlight all of this, including the double quote marks. First copy it to clipboard, and then use the smaller than and greater than signs. Let me type the word prompt. Okay, let's add this value back in and uncheck private. So the size, let's change this to 1792 by 1024. Actually, I want to add the HD quality here. So I'm going to press comma, then enter or
return. It's going to line up my cursor. Then I'm going to say, double quote mark, quality, and double quote mark, colon, space, and then 'hd' in double quote marks in a lowercase. Now, there is no comma after this because we're not adding any more lines. Okay, so the prompt basically says, DALLE-3, please generate an image of a white Siamese cat. I want that in a 1792 by 1024 aspect ratio, and I want the quality to be HD. Now, there are more parameters you can set here. Feel free to look through the documentation to see what
they mean and how to adapt them. But for now, let's go ahead and initialise the call because there is something very interesting I want to show you in the results. Now, initialising this call does take a little bit longer. And while that is initialising, don't forget that you need to top up your OpenAi account for this call, for these initialization calls to work, because what we're doing is we're actually making the call as we would. That's how we initialise calls in Bubble. We actually make the call, and that does cost money. Okay, so we've got
something returned here. Let's have a look at the raw data. And I can see a URL. Url, down here. I can see a URL. But this is interesting. This says, Revised prompt. A white Siamese cat was the data that we fed OpenAi, returned with a revised prompt. A white Siamese cat with bright blue eyes, short, slick fur, and distinguished features. So that's interesting. And this is a way for OpenAi to actually get better results because lazy prompting leads to lazy results. And this revised prompt helps OpenAi and the DALL-E 3 model to create a much
better image because it's got a much more detailed prompt. And OpenAi does this by default. Very interesting. Now, before you save this, this URL that's returned is currently text, and that makes sense. But if we want to save this URL or this image to the Bubble server, we actually need to change it to an image. Once it's set to image, we will then be able to save this to the Bubble server from the workflow section. Okay, click on Save. And to expand on that slightly, OpenAi, the DALL-E 3 images are temporarily Hosted, so they will
one day go away. If we want them to persist, to be permanent, we need to save them back to Bubble. So that's why we're doing it. Fantastic. So we now have our two API calls up and running, and we're ready for the workflow section. Now, before we head to the workflow part, just wanted to run over steps to make sure that the app you're currently working on is secure because you have live keys in this app. So we need to make sure that it's set to private and that no one can access your developer editor
part of this app. Let's have a quick look. I want you to head over to the settings section and then go to general. I want you to make sure that you're set to a private app. Set to a private app and that you have a username and password. My current username and password is both a rabbit and rabbit, which means if you have this URL up here and you have the username and password, and it's not set to private app, it's set to one of these, everyone can view or everyone can edit. Then that becomes
a definite security problem. By having the username and password, it means that you can actually run this app as a user would. Okay, while we're here, we may as well just change the progress bar colour, which I forgot to do earlier, just to black. Fantastic. So let's quickly just summarise how far we've got now. So we've done the design part. We've done some basic Bubble workflows to create the Post and then set up our parameters. The right-hand Group Output has the three different states of idle, pending, and we're receiving the results. We've now initialised these
OpenAi calls. One is for the text generation using the Chat Completions endpoint, and the other one is the image generation using DALL-E 3. Let's now have a look at the workflows to make this work as it should. So we're going to be running backend workflows now. But it's something that we need to enable in the API section in the settings tab. So click on the settings tab, Then let's go to the API. Now we're going to enable workflow API and backend workflows. With that checked, when we click on this dropdown, we can now see that
we have backend workflows. Let's click that. And here we are in the backend workflow section. Now, these work a little bit different to the workflows that you've run so far, as this is now running on the server. The workflow tab are for workflows that run client-side in the user's browser, in your own browser. Okay, so the way we work within the backend workflow section is we Have to create what's called an endpoint. And then to be able to access this endpoint, we have to schedule it to run as an API workflow in the workflow tab
in the browser or on the client side. That sounds like a bit of a mouthful. So we're going to walk through the steps of how backend workflows and frontend workflows interact. What we first need to do is click on this block that says, Click here to add a backend workflow. We're going to choose new API workflow. We need to give it a name. We're going to call it, 'create-post'. Or lowercase, and it needs to be a single string, so joined with a hyphen. Now, we don't need to expose this as a public API workflow, so
we're going to uncheck that. Now, the next step is to add new parameters. So we're going to click this box. We're going to give it the key of Post, and the type is a data type Post. So what this means is the endpoint will be expecting Post data, and that is created client-side. In the user's browser, when they click on Generate Post, the Post is created by Create a thing, create a Post. They're going to take that Post, feed it through to this backend workflow via this parameter. And now we can access the Post and
use it to interact with OpenAi. So with that done, we're going to click here to add an action. We're going to go down to our Plugin section and choose Create text. Okay. So now we have our system prompt and our user prompt. And the user prompt will be the exact instruction and the system prompt will add a bit of context. What is OpenAi acting as? And we're going to say that you are a social media manager whose job it is to summarise blog posts into social media posts. And then we'll feed the Post through in
the user prompt. So I'd like you to do the following. In the system prompt section, let's insert dynamic data. I want you to type A-R-B. This is going to bring up arbitrary text as a data source. And basically this allows us to construct paragraph text. I'd like you to type the following. You are a social media manager. Whose job it is to summarise blog posts into engaging social media posts. And that's it. That's going to be our system prompt. So basically OpenAi is our social media manager, and they are tasked with this particular job that
we're going to instruct it to do next. Now, after you finish typing that, please close and then I want you To type the word json, j-s-o-n, and select ':formatted as json safe'. While I'm hovering on :formatted as json safe, I can see the Bubble is giving me a little hint to say, if you'd like to learn more about this operator, see this reference. I'm going to click on that. Let's see what this actually does. So it says this operator sanitises a text string, date, yes, no, or a list of text into json acceptable formats by
escaping certain characters. So when it comes to paragraph text, we might have certain characters that aren't going to work in the json format. So formatted as json safe is a way to make sure that we're sending sanitised data to OpenAi to be able to interpret correctly. So we always need json safe. Let's go back to Bubble. I'm going to click back on arbitrary text. I'm going to access the more option. I'm going to type json and then say :formatted as json safe. We're going to do a similar thing for the user prompt now. So, we're
going to insert dynamic data. Type a-r-b to get arbitrary text because we need to construct our prompt. It's going to be paragraph text. Some of it will be static, some of it will be dynamic. Now I've pasted this in, and I'm going to read it for you. First, we gave the system prompt saying, You're a social media manager. Now we have the user prompt, and it says, 'Write a post that teases the below context in no more than post length characters in this particular tone.' Here's the context, and that is going to be the actual
post itself, the long form post about the Cyber truck. And then beneath that, it says, The post is. So this is just a short lesson on prompt construction, but feel free to go back to the documentation in OpenAi and look at their particular methods for prompt construction, because this is where it came from. Okay, so we need to add some dynamic data here, the post length and the post tone, and we can get that from this particular parameter. The post has been fed through this parameter and is made available to us now. So I'm going
to highlight with the brackets, post length, and we're going to feed through the post length here. So insert dynamic data. The data source is the Post, and it's going to be the platform, because the user has the option to select Facebook, LinkedIn, or x. com, and they all have variable Post lengths. Here is the length here. So that takes care of the length. Now we're going to set the tone. Similar thing, highlight brackets plus Post tone. I'm going to access the Post, find the tone, and it would be just the display. And now we need
to feed through the source. So this is the blog post itself. Just going to make sure I get those brackets, square brackets, insert dynamic data, select the Post, and then find the source. Now it says the Post is. We'll leave that blank because that is basically given instruction to just return the Post itself with nothing else. I'm going to close that. And then I'm going to choose Formatted as json safe. Okay, and because this is a Post request, something will be returned. Okay. Which means we can add another step here to data things make changes
to thing. Now we can select the Post so we can save the results of this Post request. And the result will be saved to the output. Okay. Because this is a Post request, we're sending data and then we're receiving data, and we receive it by referencing the result of step one. Choice. Now we're going to select first item because it's a list that's returned. We're just grabbing the first item and then message content. And you'll become familiar with this particular expression or format as we continue on with this course. So it's the choices, first items,
message content. And by the way, this is actually illustrated to us in the API section. Let's have a quick look. I'm going to go back down to the Create text, and I'm going to click on Manually Enter API Response, because I can see the format that's returned here. So it was OpenAi, Choices, and then this is a List. So it was the first Items, message content. Here it is here, the message. Okay, and it's at this stage that we can change the status to complete. Status equals complete. So let's head over to the index page,
please. And then open up the design, click on Generate post, and let's edit the workflow. So what I'm going to do is add a new step 2. Now we can go down to Custom Events and select Schedule API Workflow. Because now we need to send data to the backend Workflow section because we're currently in the Client's browser. So we're going to select the API workflow we created. It's called Create Post. We're going to feed through the Post from the results of step one. And then we're going to set the schedule date by typing the word
date and then current date and time. Schedule date meaning that we can actually delay sending this or scheduling this API workflow, but we want it done in real-time, so current date and time takes care of that. Let's have a quick look at our Create Post again. We capture the dropdown for the platform, we capture the dropdown For the tone, we've got the source being the multiline input source's value, and the status is pending. Guys, we can actually go ahead and test this now. I'm going to preview the page. Okay, let's create our first post. I'm
going to select the platform being x. com just because it will be the most summarised result. I'm going to select the tone being... Let's start with inspirational. And now I'm going to go find that blog post about the Cybertruck. So here is a Cybertruck review, and I'm just going I'm going to go ahead and quickly copy this text. Okay, going back to Bubble. I'm going to paste in this blog post. Scrolling up, making sure everything looks good. And by the way, you can use any blog post you like here. I'm just using the Cybertruck. You
can go ahead and find any post on any topic you like. I'm going to generate the Post. Generation and progress. We can see the Post is in the URL. And here's the result, folks. So remember, we had dynamic data in the subtitle? Here's your ex. Com post because we selected ex. com and saved it to the database in an inspirational tone. Generate an image with the button below. I I don't see the image, but we're going to deal with that shortly. And the result is, Meet the Tesla Cybertruck, not just a truck, but a revolution
on wheels, etc. etc. And how helpful is this? We have a little link emoji and we can actually edit I'm going to edit this post to add the link because it's in a multiline input. I'm going to go ahead and save this post. Let's go have a look at the database next. Head over to the Data tab, App data, And here is our post here. So here is the output that was just generated. Output edited is what I saved, and I could have included the original blog Post link here. The source is the original blog
Post. Tone is inspirational. Platform is x. com, and the status is complete. This is absolutely perfect. Let's just quickly head over to the Design tab to look at some of the conditionality. Okay, I'm going to click on Group Output, and I just want to see why the Generate Image button isn't there. So that would be... Let me expand this out a bit. Group Results. And expand Group Results. And here is the button I'm looking for. Okay. Aha. So we don't have the conditional statement here. So we need a conditional. Define another condition that says, when
get data from page URL, the parameter is Post, which is a type Post. When it's image is empty, that's when this is visible. Check. Let's have a look at image Post. This needs a condition as well, which we'll say. When get data from page url, which is post, this is all case sensitive as well, folks. When get post from page url, image is not empty this time, the opposite of the button. That's when it's visible. Okay, let's preview this. Going to refresh the page. And here we have our button. Fantastic. So now we need to
go to the backend workflows again, and we're going to work on creating the prompt to generate this image. And this is going to actually be a daisy-chained multi-step approach because we can get really creative with how we use the Chat Completions API. I want to demonstrate this to you. So let's go back to the backend workflows, and I want you to create a new API workflow. Let's call this Create image. We're not exposing this as a public API workflow. We need a parameter, which is a Post, and that is of type Post. And it's the
same as the Create post endpoint, where we are feeding a post through, where the Create post endpoint, we're using the source being the long blog post. Now that we have the summarised result, social media post for x. Com in an inspirational tone, we're going to now use that to look at prompt construction for the best image possible. So we're going to set up an effective prompting technique here with a three-step daisy-chained process. In the first prompt, we'll be asking OpenAi to help us come up with the stock image concept for the Post. For instance, if
the Post is about the Tesla Cybertruck, well, how can we best depict this image? Is it just a Cybertruck on a plain background? Is it a Cybertruck in a city? If so, which city? There's so many variables, so we're going to let OpenAi Come up with the best concept for us. Now that we have a stock image concept, we're going to ask OpenAi to please create the best possible prompt to represent this new concept. OpenAi can probably do a much better job than a human can, so let's take advantage of that. Lastly, now that we
have the prompt constructed, we're going to send it to DALL-E for the image creation and then save the image back to the original Post and update the status to complete. So let's add a step here. This will be Plugins, and we're going to create text first. And I'm going to say, I'm going to re-label this to Create idea. Okay, now we're going to be using the same system prompt from Create Post, So I'm going to go grab that. And then paste that in. Now in terms of the user prompt, here is the context. I'm going
to copy and paste what I have in my notes. I'm going to choose Arbitrary Text. Actually, we need Arbitrary Text here as well. Let's just quickly deal with that. So on the Create Text for Create Post, we're just going to copy this expression, go back to the image, and then in here, just paste this expression. Okay, so we can do that for future workflow steps as well. Let's go back to the User Prompt for Create idea. So this is the prompt, and you can find this prompt in The description below this video. The prompt is,
Create a short idea for a stock photo that would pair well with the below social post. Okay, then a bit more about the construction, subject in relation to a background, and then we need to feed through the dynamic data to say, here is the social media post that has already been created by OpenAi, and give me the stock image idea. Okay, so we need to feed through dynamic data here for Post output, and this is going to be the Post output. Okay, Post output. Let's close that and then format as json safe. And I just
want to show you the database again quickly. So the Post output is here. This is what was created in step number one. So that's what we're feeding through the Post output. So that's step number one. Step number two is take the idea and now create the best possible prompt. You, AI, you're better at prompt creating than I am. So let's work at this together. You create the prompt for me. I'm just going to give you the instruction. So we're going to go through the same step again. Plugins, Create text. I'm going to rename this to
Create prompt. Okay, I'm going to copy across the system prompt. Insert dynamic data, right click and paste that expression in. And you might be thinking to yourself, well, we're just using the same system prompt throughout. Maybe it didn't need to be dynamic in the API connector. But actually this gives us a lot of flexibility because we could start adapting the system prompt and the context through these various steps. So it's good to keep it as dynamic data. But for this course, we're just going to be using the same system prompt, but rather changing the user
prompt. But it's good to have both been dynamic to give us a lot of flexibility. Now for the user prompt, insert dynamic data, arbitrary text Because we're dealing with paragraph text that is both static and dynamic. I'm going to go and find this prompt that I've saved and paste it in here. Okay, again, you can copy and paste this prompt from the description area. So this one's slightly different. Now it says, okay, OpenAi, please create me a prompt to be used for image generation for the idea below. Now, the idea is created in step one.
Use precise visual descriptions rather than metaphorical concepts. Try to keep the prompt short yet precise. Now, I've got the prompt structure. Lastly, I've got that I've said the photo composition should be simple. And the idea will be the result of step one. It's created in step one. So let's feed that through. And you recognise the actual formatting here, which would be the result of step one. Choices. First items. Message content. And then where the prompt is. And there is no right way or wrong way for prompt construction. I'm just trying to give you an idea
of how detailed we can get to get the best possible result here. Let's close that. And let's say format it as json safe. Okay, so the conceptual stuff is done. We've now got a prompt, and we can now send this prompt through to DALL-E. So for that, we're going to use plugins and create image. And this one's a simple one. All we need to do is point to the prompt that is outputed from step two. Insert dynamic data. Now we choose the result of step two. That's where the prompt has been generated for us. Choices,
first items, message content, and then json safe because OpenAi is going to return paragraph text for what the prompt is. Lastly, guys, we can now go to data and things and make changes to the Post. Think to change is the Post. And we can finally set the image and set the status. Status is an easy one. Now we are complete. And now for the image. So the image is coming from the result of step three. We've sent a Post request to the DALLE-3 model with a prompt. That image has been constructed. And DALL-E is now
returning a link to that image. So that is the result of step three. It's data to be the first item, the URL. We remember this from the API connector when we changed the format from text to image. And because we did change it to an image, we now have these new operators here. I'm going to choose saved to s3. Now that has to be done in order to save that image to the Bubble servers. Otherwise, it will stay and eventually expire on the OpenAi servers. We're not going to add a new file name. We don't
need to. So that was pretty much a deep dive into prompt construction and how we can and get a lot smarter with leveraging multiple different endpoints of OpenAi or multiple different models to give us the best possible result. Because I think that OpenAi and AI in general is just better at conceptualising ideas, creating prompts, and so forth. Let's head back to Index page, please. And let's bring up our button. I'm just going to search for a button up here and find the Generate Image Image button. There it is there. And let's add a workflow. So
now we can go to Custom Events, Schedule an API workflow. This time we're going to schedule the Create image workflow, feed through the Post, which is basically the Parent group's Post, and the current date and time. And what we could also do is, I guess this would be optional, but we could reset the status of the poster pending, so it says Generation in progress. Maybe this is a good idea just to prove that something is happening here. I just need you to be patient, please, as a user, because this Is a multi-step process now. So
although the Chat Completions API is quite fast, it is going through the two steps and then it's feeding through DALL-E, which is a little bit slower. So let's do this. Let's say, make Changes changes to Thing. Thing is the Parent group's Post, and just change the status back to Pending. Just for now. This is just optional, and now we're just talking about UX. Okay, I think we're ready to run this. So I can refresh, this data will remain here because we have this URL parameter, Post equals, and that is the unique ID in the database
of the Post we're dealing with. I'm going to now generate an image. Let's see what happens. So back to Generation in progress. And there we go, guys. There is our Tesla Cybertruck. We can now save this post again. And let's have a look at the data. Head over to the Data tab. Let's open and then let's just refresh the data because now, if I click on Edit, I can now see this. And there's the beautiful cyber truck. It allows me to zoom in slightly as well. Okay, folks, we're done. We've got our result. We took
a blog post, we selected x. com as a platform, we selected Inspirational tone, we then got the social media post that we're looking for and then use that post to then generate this particular image. Now, of course, there are many options you can go to from here, such as regenerate the image or start again, regenerate the post. I'll leave that up to you to explore. But I hope you enjoyed this intro to AI with Bubble. Super, super powerful what we can do. And I look forward to seeing what you create from here.
