How to add AI text generation to a Bubble app - OpenAI

Connecting OpenAI and Bubble

This video is about OpenAI and Bubble and I'm going to show you how to connect to the OpenAI API with your Bubble app and this should take no more than 10 minutes. So it's very quick. First of all we head into plugins and if you haven't already you need to install the API connector. We're going to be making this connection ourselves rather than relying on a pre-built plugin in the Bubble plugin directory because it gives us more control and flexibility.

Setting Up the API Connection

So I've created a new API here and rename it OpenAI and if I go back to this examples page this really tells you everything you need to get started and there is loads of documentation to go through to understand exactly how the models work, how to make the most of their API but we can get going with just what's provided on this page and I'm going to use the essay outline because I think that would serve as a very good demonstration. So in the API request in order to connect it through with Bubble change it from it's probably Python by default to curl or C URL and these are the details that we have to put into the right places in the Bubble API connector.

Configuring the API Endpoint

So first of all let's go for copying the URL the endpoint so we will call this essay generator, it's rather essay outline generator. We want it as an action in order to be able to use it in our workflow. Does it say whether it is post or get? I think I would guess that it is post so let's go post and then we've got some headers to fill out so we have to declare the content type you can just copy and paste this between them. The headers are in fact if we say we're doing an essay outline generator now but we might want to use a different feature of OpenAI, by using the shared header we only need to enter this part once.

Adding Authorization and Data Fields

Okay and then we also need authorization. Okay I'm going to fill out the API key in a moment let's do the rest of it first. So this is data this is everything that goes into the data field and then we need to make some of this dynamic in order to input different different text or different variables into our workflow so we can call this prompt and then I'm going to leave the rest because that's provided with the example that they give using the Tesla and you can read about the difference that any of these make in the documentation. So oh and we untick private in order to be able to access this value in a workflow.

Testing the API Connection

Right I'm just going to get my API key which I'm giving private there and then I think we can run a test so if we go back to the example we can see the sort of prompts that works really well so I'm going to copy all of that in prompt and then say create an outline for an essay about I'll say the invention of the internet and that's cool okay so I'm getting an error about the API key and that is because I have overlooked something which is quite common with authorization you have to put the term bearer and the space before your API key so let me do that okay and now let's try that again that's more promising it's thinking about it it's waiting for a response okay brilliant so let's have a look at what we've got back here.

Understanding the API Response

Okay so here we go in choices it's given us one back no hasn't it's separating them by so this basically is a new line here we go so it's basically saying point one there we go followed by a new line the internet is a global network computers that allows to exchange information and then line space is point two okay so how do we put this into a Bubble application because we have the API integration working really nicely now.

Implementing the API in Bubble

So if we go on to design I've created just rough what we need and I finally I need to add a place to display the response so I'm going to create a custom state here called generated text and because my workflow is a my API connector is set not as data but as an action I can retrieve it from my workflow builder here I'm going to connect this to my multi-line input and then I will have to create a way to display the text that's returned so I have my text response text which has a custom state and then this is the choices I think I need to let's go for each items text it's because choices returned as a list as like there are multiple options available like when you make a call to a service like OpenAI you can set how many different kind of goes or attempts you want to return back and but just so I get everything I'm gonna get it to list out each items text.

Displaying the Generated Text

Oh no wouldn't accept that okay let's have a check if I go back to plugins and then manual response I just need to see what's returned so it is text each items choices text I'm just gonna reinitiate the call yeah returns as text text field yeah so this is the field that I'm trying to get to okay I will knows that it's text so each items text it's good choices first item text okay that accepts it maybe I need to display in a repeating group in order for the list anyway I'm gonna get the first result and that's the result that I want and then lastly I need to tell this text field to basically display the custom state in it preview.

Testing the Implemented Feature

Okay so I'm gonna write an essay outline about the history of okay let's go reinit fire of the Firefox web browser leave a comment if you're using Firefox see I'm using break write an essay outline about history of the Firefox web browser okay so I click that and there will be this waiting period because it's waiting for a request to return back from OpenAI but there we go not sure if that's good or bad I mean yeah Firefox had a rise and then had a fall is it having a resurgence I mean how specific is that to Firefox but you get the idea we now have a working API connection between Bubble and OpenAI their API and you can now basically customize by going back into plugins kind of these parameters here the the model that's used the temperature tokens etc you can customize it you can really now dive into any of the examples here and build that into your Bubble application.