OpenAI GPT 4 Vision No-Code Bubble.io Tutorial

Getting Started with GPT Vision in Bubble

If you're looking to get started with GPT Vision in your Bubble app, then looking further here is my quick guide to adding GPT 4 with Vision to a Bubble app. This was literally only released yesterday, that was November 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 message of the image is.

Setting Up GPT 4 Vision in Bubble

I have got this all set up and I'm just showing you the documentation page here. Right now you need to set your model as GPT 4 Vision Preview and you need to have access to GPT 4 in your developer account obviously. 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 and we have to put it into the Bubble API connector.

Configuring the API Connector

I'm going to show you that I've done just that which is that I've got my OpenAI called here. I will be refreshing, deleting this API key later on but I've got my own name here that I put in OpenAI for my own naming purposes. I say authenticate private key and 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 on the individual call for some reason I need to set my API call up here.

Creating a Website Roasting Tool

I was trying to make a website roasting tool but basically I've got stuck with it. So what I'm demonstrating here is that we can take an image and provide it to OpenAI. I will say "what is this" instead. And then I need as an action in order to be able to put 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 the API Call

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.

Testing the GPT Vision API

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

Conclusion and Call to Action

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.