🤯 Build AI app with ChatGPT & Bubble.io | No-Code AI App Tutorial
Вставка
- Опубліковано 1 лип 2024
- Build an AI-powered children's story generator using ChatGPT GPT3.5 and Bubble.io, a no-code web app builder. 🌟
In this no-code tutorial you'll learn how to:
✅ Use ChatGPT for Finding a brand name, domain, creating prompt
✅ ChatGPT Prompt Engineering
✅ Prompt Optimization and Dynamic Prompting for App Building
✅ Bubble.io API connection to ChatGPT API
✅ Get Live, all of this in less than 1h
✨ BONUS: you get the source file
Subscribe + 🔔 Add notifications to get the next episodes with image and audio generation with the book stories and more AI builds... ✨
Tools used:
📹 My AI Video Editing tool: vince.ly/ai-editing
⚡️ No-code WebApp Bubble: nocodefam.com/t/bubble
✨ Get the Bubble Editor Source File: ko-fi.com/s/72e037aecf
Some of these links may have affiliates links to help me continue giving producing this content.
Resources:
🚀 Join the community: vince.ly/community
☕️ Buy me a Kofi: vince.ly/support
🐦 Follow me on Twitter: / vince_nocode
Chapters:
00:00 Build with Bubble and ChatGPT App
00:22 The App we’re building
04:09 No-Code App Architecture
9:16 ChatGPT Prompt Engineering
14:31 Improve ChatGPT Prompt in OpenAI Playground
21:58 Engineering ChatGPT Prompt for Dynamic API calls
25:55 Bubble API Call to ChatGPT
40:19 Design the App in Bubble.io
54:01 Create Bubble Database for ChatGPT calls
57:47 Bubble.io workflow for ChatGPT generations
1:05:00 Testing our ChatGPT App
1:06:55 Cleaning the UI in Bubble.io
1:15:16 Going Live
#bubble #bubbleio #gpt3 #Chatgpt #chatgptapi
✨ Got Shiny Object Syndrome?
👉 Get my favorite tool of the week here: vince.ly/tool-of-the-week - Навчання та стиль
This is amazing! I am so glad I came across your Twitter profile, and it led me to this. Extremely helpful and understanding how easy it can be (after you helped us understand the “how to”) to build an app integrated with chat gpt! I created my first story!
I appreciate your kind words Mike 🙏 Awesome to hear you already created your first story!! Can't wait to hear about your next project using ChatGPT! Make sure to share t with me! 🚀
PS: next videos will be bringing audio/visual to these stories too via other types of generative AIs! So stay tuned :)
Hey Vince! This video was AWESOME. Will you still be doing the updates do this video? Would love to learn more about bubble and GPT integrations and the uses.
Is there any way to display a response to the fine-tuned prompt in a more dynamic way on the front end? For example, allowing the writer to choose alternative intros, body’s, and endings to the story.
Follow-up, can you have multiple prompts/chats working on the same platform?
This was amazing thank you! This was the only video that was clear easy to follow! I appreciate you very much!
Glad it was helpful!
Fantastic video!!! Thank you!
Awesome. What diagram software did you use for the layout? Thank you!
Vince this is next level informative content. .
Thank you, Sam! Appreciate it 🙏
Lots of love from India...you are awesome. Please continue the videos on Langflow and flowise also it will help us.
got use case you want to see?
That was lengthy, did we have to do all those fields and style modifications?
Why not just use one input and one output?
But thanks for the guide.
It's very helpful!
It works!
Not the first time, the 3rd time, I had to go back and correct 2 things.
I didn't realise the response group had a text field, well obviously it should!
Hi Vince, what tool are you using to create the outline for the end user workflow? Thanks for your help bro.
Do you mean the visual representation of the workflows? It’s whimsical
Great video @Vince! I followed your track and was able to reproduce something similar. Though I am facing a slight challenge.... I would actually like to be able to use a longer text as input (about 40 words as dynamic input value, that I cannot fragment in several categories as you did: character, name, gender, ...) and it does not take it properly. What would be my options? I was think that maybe I should create a prior step to transform the initial 40 word inputs into JSON so that ChatGPT API processes it. Am I on the good track? Or is there any other solution?
Super tutorial.
Thank you Samir! Glad to hear it! 🚀
This is nice 👍 love the way you explain. Can you build something with Bubble+OpenAI+pinecon, also is there a way to use voice input using whisper instead of type input?
Thank you Jay for the comment! Releasing videos as fast as I can, we’ll eventually get to AI memory! Can definitely use Whisper as input yes. Maybe a good idea for next video. Just released Text to Speech though. Maybe next will be Speech to text :)
@@buildwithvince looking forward to it. I have seen speech to text but not taking speech as input using whisper then pass the argument in chatgpt and then get reply from text form as well as voice by using elevenlabs
morale != moral.
Morale is how happy the people are.
Moral is the lesson we should learn from this story.
Add your questions & feedback in the comments 👇I'll do my best to answer them!
If you want to support my content: vince.ly/c/support 🙏☕
Vince can you please share what tool you're using for the drawing of your workflow? I notice on top it states Vincent's Workspace but can't figure out the name of the software you're using to create your visual representation of your workflow? Please advise. Thanks in advance.
@@jenevievefuentes6970 whimsical!
@@buildwithvince Thank you so much! Appreciate you, your video and the response. Really trying to wrap my head around all this and hope to be able to accomplish something like what you've created one day soon.
@@jenevievefuentes6970 Awesome! looking forward to see your result :)
What program are you using for the no-code app architecture section? That would be helpful.
whimsical!
Nice name, Vince.
Nice tutorial! Side question: how do you edit your prompts in chatgpt?
Also, is it possible to increase the speed of gpt and make it faster? It takes 40-45 seconds more or less to give the answer.
Thanks Joaquin! what do you mean about "edit your prompts in chatGPT?"
@@JoaquinTorroba Speed to ChatGPT is directly related to OpenAI API speed. How you can optimize the speed is: Reduce the amount of data you send or request back from it. Example: a 20-character response based on a 1 line question will be faster than a 400-character response with a full-page context sent.
@@buildwithvince Haha minute 12.16. Am I wrong or you are editing an old prompt after having an answer from chatgpt?
This Content is amazing! I would love to talk with you more about building a SaaS product.
You are awesome but fast 😂 thanks from Yemen
😂 Thanks! 😃
how much does it cost to obtain and api and retain it ?
Please see my video on Create an Open AI API Key. Price is Pay as you go. So the more you use it the more it costs. But price is really low, you can check on openai.com/pricing
What is the tool you used here 4:23
whimsical!
Can you do this in Glide can you show us how to
What are you specifically interested to know how to do with Glide? the GPT call?
any specific reason why you are not using gpt 4?
You could.. GPT-4 outputs aren't specifically much better for such simple prompt in my opinion and not worth the much higher price. But I recommend testing GPT3 vs GPT4 and make that decision for yourself based on your use case and output!
The character 1 type is not working, in the story generated it's still a bird.
Hi! thanks for following along the tutorial, I appreciate you! During the live video I forgot to remove in the text (37min39) after The bird . If you remove that, it won't every time call a bird. So you'll fix the bug! :) I believe I also fixed that in the downloadable Bubble Editor example! Let me know if this fixed it 🙏
i got this message There 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": null
}
}
This means you have exceeded your calls quota given by OpenAI. So either you've spent over the initial credit they've provided you or you need to check your billing details. You probably need to add your payment info to your OpenAI account.
I have resolved my financial situation, but I still receive the same error code.
@@momoauly I'd recommend you reach out to OpenAI support team directly then.. Or send me a video example of your issue on Twitter including: bubble setup, api setup, openai setup etc... - Send it on the open/public so we can help others out there too!