.jpg)
Introducing Bubble's New AI Page Generator
Bubble has just released an exciting new AI tool integrated into the Bubble Editor, and that is the ability to generate pages with an AI prompt. This is particularly exciting because many people who use Bubble who are entering into the no-code space are solopreneurs, and one of the challenges of being a solopreneur is being a jack or a jill or someone of all trades. I think particularly UI design is something that can't be learned in a rush or learnt quickly. So let's just put this through its paces. I've literally tried this once. You can see that they have allocated me a set number of pages per week.
Testing the AI Page Generator
Let's give it a run for its money, see how it goes. So I'm going to say dashboard, and I'm going to say, might as well make something for Planet No-code. So we could say a dashboard for managing students and lessons for my learning management system, add in some line charts to show engagement in our lesson content. Now one of the main concerns I'd have with the tool like this is if you were to generate a series of pages, would they end up being consistent? And we can see that Bubble has thought of this because you can use existing style variables. So that's going to be things like your color and your buttons, all things that you set in the style tab, which if you're coming in from a more traditional coding background is a little bit like classes, but not quite so versatile.
Generating the Page
Let's just click generate with AI and see what we get. So when I ran this before, this does actually take 30 seconds to a minute. So I'm going to fast forward from this point. Okay, here's our first look. Let's have an explore. So we can see it's written some text and it's put some groups in. If we go into the charts, it's added in Bubble's own chart plugin. Okay, that's not too surprising. We've got these nice data cards where, yeah, it's just dummy data. If I scroll down, okay, here we go. We've got a repeating group and the repeating group is just set to arbitrary text that split by fine, fine, fine. So basically they're giving you a lot of stuff that's going to give you a really good head start here.
Checking Responsiveness
Let's check if it's responsive. So we'll go into the responsive engine and, oh, look at that. We have a nice responsive menu. Let's run this in preview. Okay, now if we turn off the debugger and we actually run it with a mobile emulator, let's see how this works. Okay, so we've gone down. Oh, look at that. We get animations. So there is definitely hours of time saved here, which is sort of what I think it would take to come up with this from scratch to perhaps copy over from a Figma design.
Impressions and Conclusion
So yeah, I'm impressed. This has taken away hours and hours of time. Okay, the pagination is a little bit odd down there. I think mainly that the AI is talking, is generating the ability to quickly do layouts. Yeah, there's nothing going on at the top there. Okay, that is a drop down. Yeah, it's giving you a really, really quick layout. Obviously, this is just one page. Yeah, I think this is really cool.
Call to Action
So I'd love to hear your thoughts and comments. If you're building apps with no code and you're building a Bubble and you want to learn more and you want to join an exciting new community, then click the link down in the description because we've got hundreds of Bubble's Tour videos, which go into a lot more detail than this one. This is just exploring this cool new feature of AI page generation, which was only released in the last 24 hours. But yeah, if you're getting started with Bubble, click the link down in the description.