How to create a ChatGPT app with no code using Bubble.io | Bubble.io Tutorials | Planetnocode.com

Подписаться 27 тыс.

Просмотров 35 тыс.

50% 1

Watch all our Bubble tutorials at www.planetnocode.com/tutorials
In this Bubble tutorial video, we demonstrate how to incorporate the amazing advancements of OpenAI's ChatGPT into your Bubble app. We show you how to install the API Connector from the plugin directory, authenticate it, and then use GPT 3.5 turbo (gpt-3.5-turbo) which is 10 times cheaper than davinci-003. We explain how to use the messages field to build up a conversational prompt, and how to create a dynamic value in Bubble to make the API call. We also show you how to save the response from OpenAI into the Bubble app and display it in a group.
Video Chapters:
00:00:05 - Introduction
00:00:27 - Installing the API Connector
00:00:44 - Using GPT 3.5 Turbo
00:01:02 - How to Put it in a Bubble App
00:01:15 - Understanding the Messages Field
00:02:00 - Choosing a Model
00:02:26 - Explaining the Prompt
00:02:57 - Sending Data to OpenAI
00:03:09 - Understanding the Messages Field
00:03:47 - Adding in the User Provided Content
00:04:26 - Generating the API Key
00:05:22 - Testing the Call
00:05:50 - Saving the Response
00:06:08 - Adding a Multiline Input
00:06:47 - Making the API Call
00:07:15 - Creating a New Thing
00:08:08 - Displaying the Email Template
00:08:28 - Generating the Email
00:08:44 - Testing the App
00:09:21 - Displaying the Results
00:10:22 - Generating the Response
00:10:46 - Final Thoughts
Visit www.planetnocode.com to learn more about Bubble.io and to get 1 to 1 coaching and tutorials!

Опубликовано:

1 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@DeniseLance Год назад

I am just starting with no code. I love your channel. Thank you so much!

@aabstraction Год назад

Amazing, this was so helpful mate!

$@goodfractalspoker7179$

@goodfractalspoker7179 Год назад

Thank you so much bro, I thought my idea was unfeasible until you showed me how 3.5 works in bubble 💪🏽🔥🔥

$@goodfractalspoker7179$

@goodfractalspoker7179 Год назад

You will soon have 100k subscribers plus once people realize how valuable this info is!

@playtablegg Год назад

Thank you for this!!! Excellent stuff

@NikiFrancesca 8 месяцев назад

Thank you, this is a great tutorial 🙌🏼

@luminrabbit9488 Год назад

Fantastic video, love your content!!

@planetnocode Год назад

Thanks so much!

@orimata Год назад

Great! Thank you

@planetnocode Год назад

Thanks for reaching out! We are really excited to be able to provide our educational Bubble tutorial videos through our RU-vid channel @planetnocode and our website www.planetnocode.com. On our website, we have even more tutorial videos than on RU-vid, and we also provide Bubble coaching (1 to 1 support for Bubble app creators). We would love for you to check us out and let us know what you think!

@steven-rn6zn Год назад

This is a great video for single prompt usage. Can you create a video to demonstrate multi prompt conversations that takes the previous conversations into account.

@planetnocode Год назад

It looks like that is possible with Bubble, but at first look it might be a bit more complex that a single prompt response. We'll look into it!

@thedarrenpeel Год назад

Or I’d love to see one with multiple input fields to generate one response. Following the video example… what time would you like:_____ what is the name of the recipient: _____ what question would you like to add to the email: _____

@TheGuillotineKing Год назад

Just ask the AI

@planetnocode Год назад

Our most recent OpenAI video shows the whole process including context aware conversations: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Oqs9xgR-MBM.html

@LucasS.Santos Год назад

I love you bro!

@jaydev8148 Год назад

cool! we need more complex ChatGPT bubble project tutorial

@planetnocode Год назад

Agreed! In case you haven't seen it this video is a good follow on as it shows how to keep track of the conversation history with OpenAI just like the ChatGPT demo. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4jxBwSmMw8s.html

@jaydev8148 Год назад

@@planetnocode I have watched it after watching this video. Btw, regarding whisper video there is no actual design only api config and testing. Can you create some cool app with whisper api😊

@BitesandGo Год назад

I modified Chatgpt chat with the API in python. How could I add it here?

@jakefrosher Год назад

Nice

@Ciaran-Armstrong Год назад

Great video! Might be an obvious answer to this question but hopefully you can help: How would you make the "Role System Content" dynamic in the same way that you have " Role User Content" dynamic using the user prompt?

@planetnocode Год назад

We have another video that goes into the detail needed to dynamically populate the GPT3.5 Messages JSON. Should answer your question. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4jxBwSmMw8s.html

@Ciaran-Armstrong Год назад

@@planetnocode legend, will check that out - thank you 🙏

@marksch99 Год назад

Great video, thank you! Question - Why do you need the Group (at 8m50 in the video) in order to display the result in the text box? Also, how can you display the response on a new page? So for example the "Generate" button navigates to a second page and that second page has the response from ChatGPT.

@planetnocode Год назад

You can use the Go to page workflow action to send your results to a new page, as long as you've saved your result to your database first. This tutorial demonstrates how to link through to a new page and display a single entry in your database: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VFX8kZ5eFOQ.html

@marcobazerla8379 Год назад

brother'you great

@planetnocode Год назад

Thanks very much!

@dandrea32 Год назад

Great video! Is it possible to set AI usage limits for users? For example, allow them to use the ChatGPT feature 30 times per month?

@planetnocode Год назад

Yes, that’s something you’d have to set up through Bubble. A simple solution would be to have a date field (list) for User. Each time the user runs your API workflow add Current Date/Time to this field. Then add a conditional When statement to your API Workflow based off filtering the date field by dates in the last month, performing a count of the results and only running the workflow if count is less than 30.

@ObservingBeauty Год назад

Thanks for this video. Would love to know if possible to integrate 2 elements: 1. History memory 2. Offline data (wiki style) integration. Trying to understand if it can extend to something similar to langchain

@planetnocode Год назад

History memory would be possible. Just store your messages and conversations in Bubble do a user can come back and continue a conversation later. Offline data? I’m not sure what you mean. I think the closest to what you mean OpenAI call Fine-tuning.

@ObservingBeauty Год назад

@@planetnocode many thanks. I'll check. Thanks of sharing all this

@oxeon06 5 месяцев назад

how can I use static text if user prompt is empty?

@XCmdr007 Год назад

Smoking! Thank you!

@jvanh8926 Год назад

This is amazing, thank you so much for sharing! I've got a question though. Do you need an API connector in Bubble for each 'prompt'? Lets say I want a prompt regarding 'Generate a list of SEO keywords' and a page about 'generate business ideas'? Thank you very much in advance. You got a new follower

@planetnocode Год назад

You don't need to have a new connection for each prompt, but it might help keep things organised if you do. It entirely depends on how you want to structure your app. Both ways could work. An alternative to making the prompt field dynamic data in Bubble, then you can add any prompt you like when your user runs the API request.

@jvanh8926 Год назад

@@planetnocode Really appreciate your quick reply. This info helps a lot!

@lupinhouseanimation 10 месяцев назад

Thank you for the video. Is it possible to make it so there are multiplu imputs to consider before sending it?

@planetnocode 10 месяцев назад

Yes you'll need to use Arbitrary text and JSON safe to insert your inputs into your prompt in your workflow action.

@lupinhouseanimation 10 месяцев назад

Thank you for the reply! @@planetnocode

@Tristanyway Год назад

Thanks a lot. Now, I have a question... How would you limit the number of requests one user can make?

@planetnocode Год назад

Assuming your users are signed in, you could keep a count with a number field for your Current User. +1 each time your workflow is run. Add a conditional to the Workflow to only allow is Current User *insert field* is 0.

@christophercarney1809 7 месяцев назад

This is great! I am however running into the issue that if the user prompt is too many characters this will invalidate the json that is being sent to the openai api. Do you know a workaround for this that would maybe turn the text input into valid json?

@planetnocode 6 месяцев назад

Are you sure it is character length and not certain punctuation? We've got several videos explaining the json-safe text modifier: www.planetnocode.com/bubble/formatted-as-json-safe/

@om6418 Год назад

One more question: i noticed, that even when i give Chat gpt a role (system) IT still answers almost every question. Lets say role is a helpful IT advisor IT still answers questions about biology, History, cheesecakes, whatever If asked. Is there a way to Limit ist Just to one or two themes?

@planetnocode Год назад

Great point. Designing the right prompts while also limiting the response is still requires some skill and trial and error. You could try adding a sentence or two someone in your opening messages saying, "Only reply with content about topics...". Another way is to not give your users complete freedom of entry into a message, you can form some of the message with fields such as dropdowns so you can provide some controlled content in the message prompt.

@davyS4v 5 месяцев назад

how can I train chatgpt with my documents?

@brianelley1045 Год назад

Great video. This is exactly what I was looking for. Question - when I reproduced this, it worked well but it doesn't remember the context from my previous message. Like I say, my name is Joe, in the first message and in the second message if I ask, what is my name, then it doesn't remember it. Should I pass some parameter or call in a dif way?

@brianelley1045 Год назад

I see that it's addressed in your next video. Thanks!

@planetnocode Год назад

Glad you found our follow up video. We have also recently uploaded a further follow up video about how to make your JSON safe when sending it to OpenAI where we slightly change the JSON messages format shown in our videos. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kSyR28dJtBM.html

@brianelley1045 Год назад

@@planetnocode Yep, I am watching that as we speak. Thanks for these helpful notes.

@planetnocode Год назад

Here's the link to our more detailed ChatGPT video for everyone else ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4jxBwSmMw8s.html

@ConsultativeAI 7 месяцев назад

I'm putting in the json body just like you are but its saying its not in json format?

@planetnocode 6 месяцев назад

Json-safe adds " marks. Are you duplicating your " marks?

@user-fr4ji5yy3u 9 месяцев назад

Hi, I'm new to bubble and I'm having a hard time with conditions related whether the user is logged in or not. How do make my app notice the user is logged in and restrict them from activities if they aren't then prompt them to log in. Basically saying: If this user is logged in, allow them to do this and that but if they're not make them log in and once they are they can do stuff.

@planetnocode 9 месяцев назад

We recorded a couple of videos on just this today! Should be released in the next few days. Make sure you're subscribed.

@om6418 Год назад

this is very nice, but how do i set the parameters like max tokens or temperature and so on?

@planetnocode Год назад

Here's the example data section for the GPT3 API: { "model": "text-davinci-003", "prompt": "", "temperature": 0.7, "max_tokens": 256, "top_p": 1, "frequency_penalty": 0, "presence_penalty": 0 } For ChatGPT / GPT 3.5 turbo, as shown in this video, just swap out the model name and instead of prompt use the 'messages' (with the JSON structure shown in the video) instead of 'prompt'.

@om6418 Год назад

@@planetnocode TY very much!!!! Very helpful!

@ChristoMount Год назад

@@planetnocode This doesn't seem to work for GPT 3.5 Turbo, error message says these fields are not expected

@StefanDobosStrabag Год назад

i have this error when initialize call. OpenAi V2 error: this header name is not correct Content-Type please help me up i do the same instructions as you did.thanks

@planetnocode Год назад

The OpenAI documentation shows that 2 header parameters are required: platform.openai.com/docs/api-reference/chat Authorization AND Content-Type: application/json Do you have Content-Type: application/json ?

@MRRANDYPIDDLETON Год назад

What if you need to have two different prompts say on the same dashboard. One button generates email, another button generate business reports. How do you manage two such prompt requests to chatgpt?

@planetnocode Год назад

Two different prompts can be created by adding a 2nd API call with your 2nd prompt text to your Bubble API Connector.

@MRRANDYPIDDLETON Год назад

@@planetnocode thanks, I wondered if this was the case but was afraid to try it in case I mess up my app

@itshuskai 8 месяцев назад

For some reason in your video, your text generates beyond the screens border, but mine cuts off with a ... and doesn't fully load all the text :(. How do I fix this? Also for some reason all the api calls that I make are extremely slow. (it can only generate 1 output every minute)

@planetnocode 8 месяцев назад

Are you using a Fixed layout container?

@WeWontAllSleep Год назад

THIS IS HUGE.

@feuerherz007 Год назад

unlike urs

@johnbourke9073 Год назад

I keep getting a , infront when I'm searching for the list of messages which means that the json isn't parsing through, any ideas? eg: , {"role": "user", "content": "how big is mars"

@planetnocode Год назад

Please check out our more recent video demoing GPT-4. The model may be different but this video shows how to use json-safe in Bubble to more reliably format your JSON. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WfkNKbz32XY.html

@johnbourke9073 Год назад

@@planetnocode Yep I'm using JSON safe and I still get that comma at the start when I do a search, if I just push through the results from a previous work flow I don't get the comma, just when doing a search, any tips? Appreciate the reply!

@planetnocode Год назад

Check your Message data type in your Data tab. It looks like you have an empty message being sent first. The comma is being added because your {"role": "user", "content": "how big is mars" is behaving as the 2nd message, NOT the 1st.

@drabik89 Год назад

Didn’t work for me. “Issue setting up your call status code 429” I went to copy the parameters code from the website but it was no longer on the site. So now what?

@planetnocode Год назад

We've not encountered the error code 429. OpenAI have a help article on the topic: help.openai.com/en/articles/6891829-error-code-429-rate-limit-reached-for-requests

@aaditya_ai Год назад

Please do one integrating Open AI Whisper

@planetnocode Год назад

We'll look into it!

@aaditya_ai Год назад

@@planetnocodeDid this one today. It is fast and accurate.

@codewiththilaks Год назад

when i make an api request to openAi i got this issue, I am using free plan as well like you're using: Status code 429 { "error": { "message": "You exceeded your current quota, please check your plan and billing details.", "type": "insufficient_quota", "param": null, "code": "insufficient_quota" } }

@aein05 11 месяцев назад

questions, what do i do if i accounter this issue when i initialize call? here was an issue setting up your call. Raw response for the API Status code 429 { "error": { "message": "You exceeded your current quota, please check your plan and billing details.", "type": "insufficient_quota", "param": null, "code": "insufficient_quota" } }

@planetnocode 11 месяцев назад

Have you added billing details to your OpenAI account?