[new feature] AI page designer (beta) + build guides for Bubble beginners

[henry.dowling]

Hi everyone,

I’m Henry, a product manager for Bubble working on AI. Along with @alex.bolanos and her team, I’m excited to announce the launch of a few AI features for Bubble beginners that we ‌demo’ed at Zero to One with AI + No-Code event earlier today. This event ‌aimed to help early-stage founders get started with building and designing their first apps faster.

Here’s some details on what we’ve launched to everyone for free:

Create personalized app build guides with AI

AI product management can help you through the learning curve of building your first app.

Describe your app idea, and Bubble’s AI will generate a custom build guide that gives you a list of features you can include, then walks you step-by-step through building them. This feature helps you understand how to get started on app building, including what features to prioritize based on complexity. Each feature comes with custom AI-generated steps for your use case on how to set up your database (with suggested data types and fields), what pages you’ll want to design, and what workflows to add.

Worth noting is that the build guides feature was built entirely on Bubble by our internal team of Bubble developers (shoutout especially to @Andrew.Vernon @john.carter).

Build guides are saved automatically—you can search through your previous ideas and access them at any time.

If you want to try out build guides for yourself, you can find them at Bubble | Build Powerful Full-Stack Apps Without Code

Generate your first pages with AI page designer (beta)

Once you have your guide, Bubble’s AI page designer (beta) can help you generate your first page designs in minutes. Select from eight starting templates, describe the page you want, get a first draft, then personalize and adapt your pages with workflows and data as you build your app.

You can try this feature out in any of your apps, or start generating pages in a new app at AI | Bubble. See here for more info about the feature and a prompting guide.

BIG thank you to more than 30 experienced alpha testers from the community who gave us feedback during this process! Many of you are more experienced builders who have seen the early stages of these features, and have shared your thoughts with us. For some of you, these features probably aren’t going to be tools you’ll use often in their current stage.

That said, we found that many Bubble beginners really benefited from these tools, so we’ve decided to release them in beta to everyone for free. These features are intended to be a stepping stone to a wider scope of work we’re focusing on that touches upon AI-assisted backend, workflows, and more, which we’re excited to share later this year at BubbleCon 2024.

Note that this feature is not yet available on dedicated instances; we have plans to roll it out to dedicated in the near future.

Stay tuned for more updates in the coming months!

[johnny]

Great work, @henry.dowling and the AI team This beta is promising already – gonna make design so much faster!

[siddharth]

Cool
Will work for me cause I have hard time in UI designing.
Can we have news on App development too ?

[sudsy]

Nice!

I consider myself quite proficient with Bubble’s responsive layout engine and have a library of high quality assets that I created from scratch; and I must say, it’s not bad for a beta feature!

I just generated a marketplace page, and it’s fully responsive, uses style variables, has working horizontal scrolling, and looks pretty good! At the very least, this will reduce the time and tedium required to create a functional layout. I’m eager to see how this feature evolves.

Great work!

[cowontherun]

I’m loving it. I’m leaving the industry but have one app left and it’s going to save me a lot of time rolling out new features and maintaining it as a side hustle + it’s fun to use!

[Frinet]

Hello Bubble team!

I played around with the new AI features this morning. From my perspective, it’s just a usual AI landing page generator, nothing more, nothing less. Other types of pages are based on one template with a few differences (hide/show blocks) and generated text.

Where is my DB schema, workflows, filters, etc.? In conclusion, if you don’t know Bubble, this AI won’t help you. If you know Bubble, you don’t need it.

By the way, thank you for taking me back to the early 2000s with this amazing design

[Frinet]

I also checked the Build Guides. In my opinion, you teach people the wrong things from the first guide point.

I want to create an “Online store.” The first step is “User Signup and Login.” In the guide, you need to create TWO different pages – one for signup and one for login. That’s totally not best practice. The right way is to create one page for both login and signup and use conditions to switch between them.

---

I played a bit more… I want to build a ChatGPT Chat App, and the “Real-time Messaging” section in my guide really surprised me because handling ChatGPT Stream responses is not a common thing for Bubble. So, I opened this section. The guide suggested adding an unexciting plugin called “RepeatingGroup Auto Refresh” for real-time updates of the RG. Otherwise, RG in Bubble is supposed to auto-update if data in the DB changes. There were no words about ChatGPT integration or anything close to my case.

A few months ago, I developed a custom GPT for NoBubble (and was banned on the forum for incorrect naming). It looks like my GPT gave me the best answer. I spent two days developing it.

[pxlhstlr]

My app has all the sudden started getting inconsistent ‘CORS’ errors preventing me from using basic javascript to download an image or capture the base64 data.

Could it be related to this update?

[henry.dowling]

@pxlhstlr Hmm, would you mind submitting a bug report? That’ll help our team to figure out what’s going on and fix the issue.

[pxlhstlr]

Done

[senecadatabase]

I think the AI page designer is absolutely awesome.

It’s not perfect yet of course, but it definitely gives you a great start.

I did a couple of different pages and was very impressed.

Good job on developing this!

[randomanon]

I get what you’re trying to do here on a long-term basis but this feature is contingent on AI models becoming a lot better than they are right now. Paradoxically, however, if GPT 5 becomes good enough to just whip up perfect plug-and-play code then this feature becomes moot anyway.

I think you should focus on the people who are making AI apps under the assumption that models won’t reach AGI for a while. This means basic stuff like native JSON parsing (instead of having to rely on plugins, or calling your own public backend workflow through the API/App Connector), maybe a JSON data type (instead of just text).

Like I guarantee none of the devs/PMs have tried to make a fully-featured and semi-complex AI app. Focus on making Bubble the best-in-class product for dealing with JSON and APIs, that’s what you need to do to have full market share over this space.

[TipLister]

ok start but without creating datatypes / option sets then workflows and including them in the pages created the value add is quite small.

this is like the table element, unfinished and underwhelming release.

hope you do the hard work now and release something much better in 9 months!

[rafaelfernandes]

Hey @henry.dowling
It is really very interesting the purpose of this feature, and I believe that in its current state, it can help new Bubble Dev under simple Apps. However, to enhance productivity and innovation for more mature apps, it does not seem to be helping yet.

I noticed that there are basically copies of the same screen with very similar improvements, even when we use different contexts for the same need. I hope future versions can reach this point.

What I also want to express with concern is that I noticed this version is consuming a significant amount of memory when loading the editor.

This certainly won’t happen for pages with few elements, but I believe Bubble was not created to cater to small projects only.

In my case, besides consuming a good part of the initial loading time of the editor, I noticed that the development performance was also reduced. We are talking about a page under the same conditions as before the implementation of this beta, with 1GB of Internet and a high-performance computer.

I would like to know if there is a way to disable this beta version for those who do not wish for it to be loaded. Could you please give some guide line about this matter?

Thank you in advance.

[henry.dowling]

Hi @rafaelfernandes, sorry that you’re experiencing editor slowness! Would you mind submitting a bug report about this?

I talked to the engineering team and we don’t think it’s related to the new AI features, so a bug report will help us track down and fix the issue.

[rafaelfernandes]

Hi @henry.dowling
Thank you for feedback.
For sure. I will send an e-mail to support team.
Would you mind to tell if is there a way to disable this functionality?

I am aware, for example, that other features of the editor can be disabled by inserting a “value” in the editor’s URL itself.

For example: to remove the “issue checker” generally I just learned from Bubble support is to add to the URL of your editor the parameter &issues_off=true

For this AI, is there a way too?

[henry.dowling]

No, that flag for the issue checker is more of the exception than the rule. We added the ability to disable the issue checker since we saw impacts on editor performance for certain apps, but we haven’t seen the AI feature impact performance at all on our side (which is why it’s strange that you’re running into performance issues—thank you for the bug report!)

[Zeroic]

This is great stuff and a good start to bring AI into Bubble. Next steps could be to include this in the other much critical parts of the editor (I agree with what @TipLister says)

@TipLister

ok start but without creating datatypes / option sets then workflows and including them in the pages created the value add is quite small.

A few areas that I could identify:

1. Feature implementation: Have an acceptance criteria or a feature in mind? The AI does it for you and would make it easier for newbies to get accustomed to the terminology along with what actions should be called when

2. Optimize application: It actually finds places where the same task is being executed multiple times or where there are redundant actions. The AI identifies the points and cleans them up for you

3. Data leaks: the AI finds places in your application from where potential unauthorized CRUD operations can take place and suggests improvements

[TipLister]

Even if you hadn’t quoted me I would have said great points.

Expanding on point 2. a smart find and replace.
Eg I see you tried to replace 3 fields where it said X‘s Y. Do you want to replace all 20 other ones listed below?
Select one by one/ select all