Learn to Build an AI app with Bubble

You'll use Bubble’s API connector to integrate with OpenAI, with a particular focus on constructing effective prompts. This includes generating high-quality images that align with the blog content you are adapting. Additionally, the course covers the essentials of crafting a seamless user experience within Bubble, particularly when handling the inherent delays in AI processing with services like OpenAI.

Whether you are beginning your journey in AI development or looking to enhance your skills, this course is designed to equip you with the practical knowledge to build AI-driven applications efficiently.

* * * * *

🔗 Link to Bubble editor:

🔗 Loader svg:

* * * * *

Prompts

Create text:
System_prompt: You are a social media manager whose job it is to summarise blog posts into engaging social media posts.

User prompt: Write a post that teases the below context in no more than [post's Platform's Length] Length characters in a [post's Tone's Display] tone

Context: [post's Source]

The post is:

Create idea:
User_prompt: Create a short idea for a stock photo that would pair well with the below social post.

The idea template (should be a simple composition): A [subject] [in relation to] [a background]

The post: [post's Output]

The stock image idea is:

Create prompt:
User_prompt: Create a prompt to be used for image generation for the below idea. Use precise, visual descriptions (rather than metaphorical concepts).
Try to keep the prompt short, yet precise.

Prompt Structure:
“A photo of [subject], [subject’s characteristics], [relation to background] [background]. [Details of background] [Interactions with color and lighting]. Taken on [Details of camera, lens, style and settings.”

The photo composition should be simple.

The Idea: [Result of step 1 (OpenAI - Create idea)'s choices:first item's message content]

The prompt is:

* * * * *

Chapters

00:00:00 - Introduction to Social Rabbit
00:02:45 - Adjust UI layout, styles
00:05:46 - Database setup discussion
00:07:13 - Adding option sets
00:10:53 - UX during AI interaction
00:13:57 - Design workflow setup
00:19:18 - Finalize design setup
00:23:36 - Dropdown dynamic setup
00:28:49 - Idle and pending states
00:35:19 - Display generated results
00:38:45 - Image generation setup
00:40:10 - Initial post workflow
00:41:39 - Tone and source setup
00:45:50 - Post data interaction
00:49:12 - OpenAI API overview
00:50:22 - API key setup
00:51:41 - Setup API calls
00:52:59 - Configure API in Bubble
00:54:27 - API security settings
01:00:18 - Confirm API setup
01:01:39 - Image API configuration
01:03:10 - Adjust image prompt
01:04:56 - Finalize image API
01:07:32 - Secure app settings
01:10:07 - Create API workflow
01:11:33 - Setup API parameters
01:13:19 - Format API data
01:14:49 - Construct effective prompts
01:17:56 - Save generated results
01:19:32 - Schedule API workflow
01:24:18 - Create image workflow
01:25:47 - Image prompt construction

* * * * *

Subscribe to this channel to be the first to hear about new videos!

Bubble is a software development platform that enables anyone to build and launch web applications without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. That means anyone from first-time entrepreneurs to enterprise-level companies can take an idea from concept to fully functional, scalable reality — faster and cheaper than you could with just code.

Learn more about Bubble:

[CodyHatch]

This guy is like the Bob Ross of creating Bubble apps. Instead of, “happy little accidents, ” it’s, “we’re just playing around here”

[brandonmccrae]

These videos from Gregory are amazing! Please continue this Bubble, the learning curve for Bubble is a bit steep but these videos help. Once you do understand Bubble though, it's power is immense, especially if you understand API's and Artificial Intelligence!

[srdjanvelickovic]

It's amazing how in this heap of information Greg effortlessly fills out all those fields as if he were ChatGPT :)

[AdrianoMassi]

Greg, this is simply awesome! I wanted to go through this one before diving deep into the Buildcamp AICamp I've purchased and will be released in a few hours. Thanks!!!

[mehulshah]

Absolutely great content and teaching style! Awesome Gregory. Are there other no code tools that you like that complement the Bubble offering?

[buthelezinkosinathi]

Thank you Bubble team for these lessons. I'm bubbling with excitement of how I can now build the web app ideas I've had.

[GiuseppeCastiglione-zy]

Thank you very much Gregory, your work is amazing!

[dr.kenlogan]

Excellent job, Gregory. Unfortunately, I can't access your demo file. It's asking for a UN and PW. The AI API connection works fine; however, I have difficulty getting the three state screens (Idle/Pending/Complete) to show. Are there any common problems to look for?

[kimathibundi]

Always amaizing content following up from keny, bubble has changed my life and still learning

😊

[dineshSekar-zcsm]

Can you tutor like this? We need practical way

[Oatkimhun]

Thanks for the great tutorial. Gregory is the best Bubble trainer I have ever seen.

[videos]

Would love to see how to use bubble + openAI with own knowledge base.

[richardstuart]

Thanks Gregory for another informative tutorial.

[felipedutra]

How can I setup a captcha like service to avoid spams on the AI text generation button, and incurring in extra costs on the API service?

[shakungupta]

I have followed the instructions, but unable to see preview of the app (1:20:30 min of the video), please share how to debug this?

[小安说币]

when i click The generate，it shows Schedule API Event action requires access to the API and the scheduler. Please upgrade your plan to run this action.

[pedrolrjunior]

Awesome dude, thanks a lot for this great tutorial =D

[AliQasim-tpqq]

i have a question can we just directly make image backend work flow without prompting is it possible

[dinorossi]

Bubble is introducing mobile option soon? To compete with Flutter? I am debating what to do.

[brianrios]

Wonderful course! Thanks for such good information and clarity Greg!
I have a question not related to Bubble: how did you create the animation of the minute 49:00 ? I'd like to do something similar for my presentations.