Getting Started with GPT-4 Vision in Bubble

If you're looking to get started with GPT Vision in your Bubble app, then look no further. Here is my quick guide to adding GPT-4 with Vision to a Bubble app. This is literally only released yesterday. That was November the 6th, 2023. And GPT-4 Vision basically allows you to supply an image as part of your message content to the AI and to ask OpenAI what their opinion of the image is.

Setting Up GPT-4 Vision

So I have got this all set up and I'm just showing you the documentation page here because right now you need to set your model as GPT-4 Vision Preview and you need to have access to GPT-4 in your develop account, obviously. And we have to take this, and if it doesn't quite look like this, make sure that it's not nodes, that it's actually CURL.

Integrating with Bubble API Connector

We have to put it into the Bubble API connector. So I'm going to show you that I've done just that, which is that I've got my OpenAI call here. I will be refreshing, deleting this API key later on. But I've got my own name here that I've put in, OpenAI, for my own naming purposes. I say authenticate private key in header, authorization, bearer, and then my API key. How do I know that? Well, because it tells me here, authorization in the header, h for header, bearer, API key. I then need to also put in content type application JSON into the header. And I have that here. I could have put that in shared header, but I put it on the individual call for some reason.

Setting Up API Call

I need to set my API call up here. So I was trying to make a website roasting tool, but basically I've got a bit stuck with it. So what I'm demonstrating here is that we can take a image and provide it to OpenAI. So I will say, what is this instead? And then I need it as an action in order to be able to play out in a workflow. The endpoint is post and it is the completions endpoint. Again, how do I know that? Well, because it tells me here.

Customizing Messages for GPT-4 Vision

And then I just need to go and basically copy everything that is in the data section, d for data. I sometimes refer to it as body there. And so I will copy all of this and paste it in. And then I will customize all my messages. So my user will say, what is this an image of? And then using the structure of the JSON here, I'm going to say that it is also including an image. And the image URL is here. I'm just going to in fact change this to image. And the image I'm working with is a screenshot of the PNC website.

Initializing the Call

And I will initialize the call. So we get a response and it says, the image you provide in the PNC screenshot or website from a website related to Bubble, a no-code development platform. So that's us. We're Planet No-Code and we have got hundreds of Bubble tutorial videos.

Building with No-Code and GPT-4 Vision

And if you are interested in building your own SaaS app online with no-code or even just a fraction of code like we've done in this tutorial with a bit of JSON, then you should check out our website, planetnocode.com. And if you've liked this video, give it a like, hit the subscribe button, because we've got many more videos coming out in the next few days about some of the exciting new releases from OpenAI.