How to Build an AI app with Bubble

In this course, featuring instructor Gregory John, you'll learn how to create Social Rabbit, an AI application that transforms extensive blog posts into social media content tailored to specific platforms and tones. For example, you could adapt a detailed article about the Tesla Cybertruck into a concise, inspirational post for x.com.

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:
https://bubble.io/page?type=page&name=index&id=social-rabbit&tab=tabs-1

🔗 Loader svg:
https://67daebf452952fe2738ec05dfe91af9b.cdn.bubble.io/f1716302308173x709650276729056000/Loading.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.

Have a question? Please visit bubble.io/support.

Learn more about Bubble:
Homepage ➡ https://bble.io/p9z7rr
Twitter ➡ https://twitter.com/bubble
Blog ➡ https://bubble.io/blog