Build an AI App in Less Than 60 Minutes Without Writing Any Code

Hey everyone, how's it going? My name is Ehan Isaacs. I'm the head of global growth for the Founder Institute. Thank you so much for taking the time and joining us for today's webinar. We have a super exciting webinar planned out today. It's all about building an AI app in less than 60 minutes using no-code. Our instructor or co-host today, his name is Rodryg Naska. He's the co-founder of Revito, which is a product studio that specializes in low-code technology. So super excited to have them back. He did one, I think, about 5, 6 weeks ago, or maybe even 7 weeks ago on no-code and how to build your MVP. It was super popular, so we wanted to bring him back to talk a little bit more on how to build an AI app. With that being said, we'll bring up Roderick momentarily. What I wanted to do was just go over some very brief housekeeping rules just so everybody knows where everything is. So first things first, as everyone can see, there's a chat function on the right. You know, do let us know where you're dialing in from. I see Colorado, Warsaw, London, Pakistan, Toronto, Lagos, Warsaw, Poland, Puerto Rico, Chicago, Israel, Kenya, St. Louis. So very big and global audience. We had about 500+ people sign up, so I'm expecting around 250+. We're about 226. Underneath the chat, there's a Q&A button. Please use the Q&A button to feed us your questions. I'll take— I'll jump on towards the end of Rod's presentation to take some questions and feed it to him. After we're done today's session, you'll see there's some virtual networking component. Feel free to stick around to network with each other. I'll certainly be there as well. Last but not least, there's emojis at the bottom. Feel free to use that if you think that any of the content that the speaker is saying resonates. Feel free to give those reactions. Perfect, I see some stuff there. All right, well, let's bring Rod up. While Akshay is bringing up Rod, one of the questions he wanted me to ask was, here, let me show this on stage, is what type of chatbot in today's session should Roderick build? Should he do a personal fitness trainer, a sales copy expert, or a social media content expert? While that's going on, what I wanted to briefly talk about is how today's session will run. So Rod is going to do about 30, 40 minutes worth of content. He's gonna do a live building workshop. After on, I'll jump back on to do some question and answers, but we also have something new at the Founder Institute that we're bringing live today, which is something what we're calling the teardown sessions. I'll talk a little bit more about that. But essentially, if you like today's content, if you think that Rod is somebody that you wanna continue speaking with, you know, you can sign up for a teardown session. We'll drop the link in the chat. The whole idea of a teardown session is that, you know, you can book some time with Rod and you can dive deeper into your product-specific questions, whether it's building your MVP or building out a specific product. It's really that time for you to connect and ask specific questions and get that feedback going, right? I'll jump on and talk a little bit more about that and how that will be structured. Hey, Rod, can you see? Yeah, I think you're in mute.

Yeah.

Okay, awesome. Welcome back. Appreciate you taking the time. So these are your poll results. It's tight. You have 144 votes in from 298 people live. 48% of the audience wants you to build a social media content expert. Can you do that?

Yeah, I think we can get to it. I'm actually not surprised. I think it's one of the main uses for GPT right now.

Awesome. Let me get you on the spotlight here. All right, Rod, I'm going to hide myself and get off the stage, but I'll see everyone back in maybe 30 minutes. FYI, you have 300 people live from across the world, so everyone's here to hear you speak. Once again, FYI, Rod's been amazing, guys. This is his third event with FI. He's constantly helping the network, providing free content, free support to everyone out there, not like, even if you're not an FI alumni or current members, so like, do connect with him on LinkedIn. He's a very valuable individual who knows a lot of content on low-code, no-code, building MVPs, and all that type of stuff. So Rod, very much appreciated for you taking the time and doing this for the third time for us.

Uh, no, thanks, Adrian. Uh, it's a, it's a pleasure to do this, and, uh, I do expect— so very happy to have hundreds of people here, and I do expect you guys to be, I'd say, a bit interactive. I might ask a few questions here and there for maybe how, what would be the best way to structure this simple chatbot that we'll create so that hopefully it'll be the most relevant to what you want to build.

Perfect. I'm going to hop off. Just one last thing. People are asking about the recording and any handouts. Yes, we'll send out the recording and any follow-up material and in an email within 48 hours. All right, I'm gonna hop off. Thanks everyone.

Okay, thanks, uh, so I think what, uh, what would be the best way is going over just a very brief presentation on what we're actually going to build, uh, and then just getting started with it. So, I hope I don't mess up sharing my screen over here. I think this should work out good. Okay, perfect. I can see what I'm sharing. I hope everybody else could see it. If not, just let me know. Perfect. So the idea today is how can we use no-code tools and low-code tools to build a pretty simple AI app without coding. So one thing that I want to make clear is this method that I'm going to show in this call, in this presentation, is usually used for you to test out in a simple way building an AI app, usually for prototyping and seeing if something is worth pursuing further. This does not actually include you fine-tuning or training your own model, but it does include making use of an existing model, in this case GPT, and actually prompting it to act and behave a certain way when it communicates to users. So just a quick intro on everything that is going to be addressed. The introduction which we're doing right now, I know that not everyone is familiar with no-code. It might be the case that a lot of you guys are, but I'd love to give an intro introduction on that, a very brief overview on how we do product requirements, at least at Trevido, and how we think about the product that we're going to build here. Then the fourth step, which will be, you know, the one that we're going to elaborate mostly on, will be actually building this app here in this call. We do have also a take-home assessment for anyone who'd want to do this on their own and, you know, if you want to come to the teardown session or anything else, and then a Q&A at the end, which I hope we're going to have a lot of time for it, but probably around 5 to 10 minutes, I think. So, uh, what is no-code? I'd say that any, really any way that allows you to build software without the need of code, and most usually It is actually visually building something, even though now AI actually is making it possible to do that by using natural language and describing it, you know, to whatever AI model. But for the main part, the most capable tools at the moment are usually visual development tools. A few things to keep in mind with no-code. The main advantage, I'd say, is to move really fast. Maybe even up to 10 times faster than using code. Usually these no-code tools, the faster that you can move with those, usually the less customizable they'll be. So depending on what you want to build, you might want to find the balance of something that maybe won't be the fastest tool that you can use, but you'll have more customizability. And there is a question if a no-code tool actually will help you build a scalable product. And the reason we have the thinking emoji there is because first of all, probably you shouldn't care about scale if you haven't gotten a product that has been proven to get traction, et cetera. And a lot of these no-code tools can actually build scalable products up to a certain extent. So there is no clear answer there. In short, code will be more scalable, but no-code can also be scalable up to a certain point. And then for this specific presentation, we are going to use Bubble, which in my opinion is probably the most complete no-code tool out there, which allows you to build websites and web apps. Bubble is not really the best front-end builder for no-code. Neither the best backend builder for no-code, but it does both of these things really, really good. So it's usually very helpful if you have both the backend, the frontend, and even the database in one place if you want to move very fast. And in this specific case, if you guys want to pursue building anything with no-code, Bubble does have a big community and support, so that could, could prove to be very useful. And very briefly to talk about the product requirements. This is actually more addressed in the take-home assessment if you're going to want to do that. Not going to go into this into detail, but some of the things that we always try to clarify or, you know, get a really good idea about before building from a development point of view. What are the user roles that we're building for? So then I can come up with the user stories. Basically, what should each user role be able to achieve? In which screens or, you know, visual elements in the app they'll be able to do that. Something that is definitely relevant with code, but even more relevant with no-code is what is the technical feasibility of what we're trying to achieve, and can our tools actually achieve this? Before we start to, you know, actually build with those. And then we usually split our work into milestones. Before going into super heavy development, we always like to do a prototype because if you don't have— you'll have a lot of assumptions on what you want to build, and a lot of those will be correct, but a lot of those will be wrong. And I'm a strong believer that if you have a prototype that you can share with actual people, you'll probably get a good idea of the assumptions that you need to change. And I hope that what we do today is actually going to be a really good step for you being able to build your prototype. And then, you know, after you have a prototype, you probably want to do the build-out, you want to plan your launch, and then after you launch and you have users, you keep iterating. So I know that you guys are probably waiting to get started with the build, so let's actually do that right now as that's the next thing that we're going to do. So as I said, for this workshop we're going to use Bubble as the tool of choice to build this chatbot. So this is the last slide that you're going to see here until I get back to sharing my screen. So let's just jump into Bubble, and if you will have any questions, actually, feel more than free to put them in the chat, and I will try to keep an eye on that so that we can talk about those. Just one second, make sure I'm pulling up the right page for you guys. Okay, perfect. So I'm not going to go over here just for the sake of time on how you can create a Bubble account. Uh, it's going to be very straightforward in the bubble.io homepage, but this is what you see after you've created an account and you create a project or an app there. You're going to see this, uh, canvas here where this is the screen or the design or the front end that you are building. You can pull a bunch of visual elements here. You can pull text and create buttons, images, etc. Here we're going to have the workflows that we'll be using. Uh, here we can create a database, which we're also going to go over in a bit but not really focus much about that today. We'll rather actually be working on the workflows and the design. And if you want things to be very consistent, you can edit your styles if you have a brand guide. So one requirement to build this is— so these keys are usually private here. These are our OpenAI API keys. So we're going to use OpenAI to use GPT. Uh, so keep those private. Uh, we're going to delete this key after this call. Uh, but this is the plugin that we do recommend to use. Uh, it's a plugin that will make your interactions with, uh, OpenAI and GPT really fast, uh, because it will do that in the frontend via JavaScript rather than backend API calls. So the first thing, make sure to go to your— actually, let me show this for you guys as well. Make sure to create a developer account with OpenAI, which will be very straightforward as well. I think you'll be able to figure that out. Go to grab your API keys, create a key, label it correctly, and then just copy that key and paste it wherever you should. And then you can jump to Bubble. So assuming you guys have done that, this would be the time to actually show how you can build and what you can build. So now it's time to build our social media expert here. So the first thing that we're going to do is we want to structure this page and make it look like a chat. So we are going to make this into what's called Align to Parent so that we can put a container which is called the grouping bubble right in the center of the screen where we can have all the content. And just to make it look a bit more like a screen really quickly, let's give it— and also guys, do not judge my design. I'm going to try to be effective, but probably not with the best possible design. That we can build. So just for this to look more normal and centered, call this to chat container. So we have this, uh, then the next thing, uh, let's put some gap between the elements that are here. Let's just say 32 pixels so things are not totally next to one another. Uh, as with every chat, we want to know know who we are talking to. So let's put a header up top. Let's make this into a row column so we can put things side by side horizontally. And let's put a smaller minimum height. And let's just keep paddings at 20 so that things have a bit of distance from the borders. Uh, let's put here the name of who the user is having conversation with. So let's just call this fi social media expert. And this is really not a requirement, I'd say, but just something to make this more user-friendly and to make sure that it looks like, you know, anyone who is using this is actually speaking to someone in a chat, interface. So let's make this look a bit better, and then— okay, cool. So if we preview this page over here— oh, I am probably not sharing this screen. We can already see in real time what we're building, which is really cool about Bubble. Now it's time, I think, probably best to add the space where someone can actually send a message. So the way we designed that is just like we did with this. We didn't need another container for that, so let's put in another group here and then Just to make this a bit separated, let's put a background on this as well so the user knows where they're looking at. And this can go till the end, should probably be smaller. A good idea is when working with building a chat, you probably want to choose this container alignment here so that it will space out the elements here. So let's call this group message input container, and let's give the same padding to everything. So now Bubble has done a really good job with the elements that can be added here. So if we go to input forms, we can find a simple input or a multi-line input. I'm going to choose a multi-line input for this. Because this can dynamically expand in height if the user wants to send a longer message or something. So let's make this able to go until the end and let's give it a name to refer to it later, user input. And we need a button as well for the user to be able to send the message. So let's put that here. We need a gap between these two elements, make sure it looks better. And let's simply call this "send." Make it a bit smaller, just exactly the width that it should be. And another thing, I think probably it's good to make this white. So Let's see what we have so far in the Spanish. This is interesting. So let's put this up top just to make sure things are going to show well, everything is visible. Okay, I think we are facing a bug in a live call, which is Never something good. So let me just delete this whole element, make sure that we can put something else and just test it out. Okay, perfect. Probably it was just mis-rendering things. So let's repeat the same thing really quickly. It's here. Okay, perfect. So now we know that someone is speaking to the social media expert and then they can send a message here. The last design aspect we'll need to do is let's just make sure that these messages are just shown here and then let's get straight away to the ChatGPT. Part. So before I do that, let's just put a border to separate this from whatever else will be on the page. So we can put a top border over here, and you can just leave the default one. Uh, in Bubble, there is something called the repeating group, which is basically a dynamic list of items. And the list of items we're going to show— the dynamic list is the GPT or the messages overall, GPT messages as well as user input messages. So let's make it possible for this to look more natural, to be until 820 maybe long. So here we don't want to make this into a fixed number of rows because then it's only going to show 4 messages at once. So we would uncheck this. Minimum height of a row, let's say just an arbitrary number, 30 pixels. The minimum height of this, let's say also 30, so it will show at least once. And here is where it put the messages. So just to keep it very simple, let's put another container for one of the messages. One thing that I just forgot to do is we want to never keep this as a fixed Layout. So usually we'll put row, so we're going to align things to the left, to the right. And now that that's done, we can take this and call group chat message. Let's make this a row as well. And I think it's a good idea to give this a color. Let's see this over here. So maybe we're going to make this into, I don't know, maybe a dark color, and then the message can be a light color message. So we're going to have this here. Then of course we're going to need to have the text for the message. We don't have any dynamic data, but let's just see how it will look like. Let's also put some padding on this so that things are a bit farther from the borders. And really quickly, let's see how it will look like in the front end. So by the way, I am butchering the styles here. Usually you want to use styles and be consistent with those, but there is a lot of content on how to do that if you just search how to do that. Okay, cool. So that actually won't show because we're not sending anything to this list. So let's actually set it up right now and make sure that we are sending messages from GPT. So as I said, we're using the Soppy ChatGPT plugin. Soppy is used, is built by someone who is very active in the Bubble community and it's one of the best plugins that I know of. So here we can specify a few things, and you can think of the element that I just put on the page kind of as our in-page connector between GPT servers and our app over here. So the system message is how do you want the agent, the chat agent, to respond. So in our case, this would be, you are a social media expert who is very detailed on replying to social media content-related queries. And, you know, we can, we can definitely play around with this and see what prompt will act the best. But let's also say your replies will be detailed and you will always propose captions or other details for social media posts. So we have this. Then the other thing is what do you want the first initial message always to be from GPT. So in this case, let's say, hey there, I am your social media expert for the day. And then here, uh, you need to— this is just a couple of technical things, but if you read chat message type, choose that chat message. If you read chat response type, choose that. This is just a way for this plugin to understand what it is talking with. So as we've done this, I want to go back to this repeating group and set the type of this, the type of content that will show. It will be a chat message that comes from GPT via this plugin. And then the data source refers to any element in the page. So if we search Sophie, this will come up. And then we just choose the chat messages. So if we reload this page again, whoops, let's dynamically refer to the chat message. We choose a type of content because we're looking for a chat message of that, and then refer to the current cell's chat message over here, uh, that will be picked up from that list. And then next, if you click on this— and in Bubble, if you click on the blue chip over here, you'll have dynamic options. So in this case, we want to get this group's chat message, and we want to get the content from it. So we have this, let's reload and let's see what— okay, perfect. So we are getting the first message. So now it's time to actually send a message from the user to GPT. So when you click on an element on Bubble and you click add a workflow, you can basically create a function or something that is triggered from that element. So when the button send is clicked, we want to, uh, we want to process a user message from Sophie. So to do this, we want to refer to that input that we created. So the multiline input's value— and you'll see this a lot, but the input name— so it's always a good idea to actually name this. So let's call this user message input, or however is easiest for you. And then here, this is very important because this is the list of messages prior to this message to give context to GPT to make sure that you don't lose the context. So, uh, Soppy does a really good job of that. So if you click here and just chat messages, uh, this will be done. So you think that this is probably done, but actually it will not do anything because if I type anything here, you just add a message there, right, in those messages list. But we need a way to get back the response that came from GPT. So GPT actually send a response, but we need to capture it. So in our case, what we need to do is if we type here, and then we need to check if ChatGPT has an update in its chat messages. So if this is the case, then what we'll do is— let me— I did set this up for you guys beforehand, so let me just pull it up really quickly so we can go through the steps one by one. So there are a couple of things that we want to do. The first thing is to give a natural view of a chat. We want to scroll to the latest entry of that repeating group. The other thing is we need to process all the messages that came through, and then we need to assign those to the SOAP plugin. So basically, let's just replicate those in what we're building together. So the first thing that we need to do is we need to scroll to an entry of a repeating group, and we refer to this repeating group. And then basically here we get the chat messages and then we go to the last item. And then as you can see here, the next thing is we want to make sure that we make another API call via the plugin just to get everything together and to parse what comes back from GPT as well. So what we do here, I'd say you probably will be using this model. By the way, you need to apply for early access for GPT-4. And then let's— these are a few other parameters that you can set. So if you think some users can abuse your system, you can send an ID, and Bubble always includes an ID for for that. And this is really if you want to deal with, I'd say, with OpenAI, if there is anything there. This other stuff, you can check the documentation from openai. But max_tokens is what is the maximum length approximately of a message. Temperature is how close do you want the response from the AI to be to the prompt. And those kind of stuff. So let's then process. Let me make sure I'm not messing things up for you guys. So the next step will be, yeah, we need the assistant response and send it and attach it to GPT. So the response string, we actually get it from the second API call that we did. I'll make this app public, by the way, so you guys can see how all of this was done. But this is— we just get the whole body text for that. And then the chat message over here is the— all the messages that we have at the moment. So if we get this, and then you can easily refer to it here. So let's, let's see this in action. Let's see if we have a really good social media assistant. Okay, perfect. Let's troubleshoot this really quickly. So it's a bit challenging to do this in a live call. So let's refer to what was built just a bit earlier. So we have the chat messages, we have the role, body text, and the role system. Ah yes, we need to send everything here for it to match. So let's give it another shot. Okay, uh, this is not good. So what we can do instead is let's use this, uh, this demo that was built right before the call and let's update this instead. So we just need to update this here to say the prompt for the system is you are a social media expert that can provide expert guidance for social media captions. Okay, perfect. So now we're getting the responses. So let's just ask this chatbot, what is your purpose? And then let's see how well it is actually abiding to the prompt that we gave it. So, okay, perfect. So this is pretty much the setup. Sorry for— it's a bit messy, but I think sharing that app will be really— sharing this app will be very useful. I do not want to get into troubleshooting what happened there because I'm afraid we'll lose a lot of time for this. So let's, let's make sure to keep using this page and actually make this a bit more user-friendly overall to understand what's going on and to actually make it look like a chat. So the first thing would be let's also limit this list to a maximum width of, let's say, again, 820, so that they all have pretty much similar width. Let's make sure that the background here will be some sort of color that is easy— easier to see and differentiate this from the rest. And let's put a border Here, maybe of 2 pixels. And then let's give this chatbot a simple name. So we're gonna put again 20, 20, 20. And let's call this FI Social Media Content Expert. So as we've done this, a couple of things that we probably want to do here. Right now, if we take a look at how this is looking, it is very messy. You really cannot understand if a message came from the user or if a message came from GPT. So one thing we can do is, first of all, if we go to this list, we can separate all the messages and let's say by 12 pixels. And we don't want to see a line there with this color, so we can make this 0, uh, the opacity, and the messages will be separated. We can then choose this text, make this with the width and all that, and we can give this also padding to make it look a bit nicer, make it look like a chat message over here. And then if we do maybe this, and then the text would become white, and then a nice border of 4. So what we know here is this now, that every message will look a bit nicer, but it still will not be clear, uh, where message is coming from. So if I click this, you know, this was from the user, and they all look pretty much the same now. So what we can do is we have options over here to basically align these messages in a certain way. So we probably want to first of all put these messages in a group, or maybe now we can just change the color. I think that would be easier. So if we click here and then the role is— so let's say, so the message is user because that's how it would be defined, or system if it's from OpenAI. Maybe right now we can just change the color over here and let's make it something that looks more like a chat. Let's see if this will look any nicer for our case. Okay, perfect. So that's how you can differentiate this. I'm not going to try and make this into a design workshop, but basically you could design this to be, you know, on the top right, you could use the same conditional to maybe show the picture of the user, etc., etc. So Before I continue further, actually, I don't know what is the best way to maybe answer any questions or try and make this more digestible because I've been working with Bubble for a long time and I know I can be moving a bit fast. Yeah. And this was a lot.

Yeah, for sure. Well, first of all, thanks, Rod. I think that was very insightful. Uh, we're at the 40-minute mark. I think it'd be good to break for questions, but I think that was pretty impressive. And like, look, the goal, everyone, was to just highlight and show what the, uh, potential is. It's very tough to build an app in like weeks and stuff. You can imagine in doing this live in front of 300+ people is even, you know, even more challenging. So I see a lot of people are asking in the chat, well, what about the recording and stuff like that? Yes, we're gonna be sending this out to you shortly and you know you can review this and then go from there. I think, yeah, Rod, we can do a little bit of questions, but I guess before I do that, like I would like to talk a little bit about the teardown session. So I shared it in the chat. Um, let me, uh, everyone could see it's pinned, uh, it's pinned there. Um, the idea of these teardown sessions is, you know, Rod's going to be like, he's covered quite a bit of content. It's like, hey, if you have specific questions on your MVP, like what, what type of no-code technologies I should be using, the idea is you come to teardown session, you join that, and you're like, hey, these are kind of my problems, and, or these are the kind of my challenges, this is my MVP, what no-code technologies should I be using, or what features should I be building? You know, it gives you that more intimate time with Rod to be a little bit more specific. Think of it as a group office hour. So a lot more information is on the landing page, go check it out, and then we can— I'm happy to answer any additional questions. With that being said, yeah, Rod, let's, uh, talk about the assignment first and then let's do questions to wrap up.

Okay, perfect. So in the assignment, uh, let me just share really quickly just a bit of information about it. Uh, the assignment is aimed at anyone really being able to replicate this on their own for a specific use case. So a couple of things went, uh, I wish I could show more here actually in this call, so I'll make those more clear, uh, in the assignment. Basically a couple of other tips that I provide that were— I was unable to go over in this demo, but the assignment would be basically a very small exercise for you to define what kind of chatbot you are trying to build, uh, and then a couple of steps on how to replicate this process that I was building here. And I'd like to actually address a couple of questions in the chat about this. So is this a GPT wrapper? 100%. You're not training your own model. You're not fine-tuning your own model with this one. Does it provide anything more than what GPT would do? ChatGPT? Technically, no, but we've seen— we think this is a great way for you to test out a prototype before investing to fine-tune your model or train your own model. At the same time, though, if you have an app or an idea, you can use this method to use GPT's capabilities and feed it data from a specific user. So one example that is quite useful actually is we have actually created social media GPT bots specifically for social media management, for social media management SaaS. And we haven't done anything other than this. But the benefit is considering that it's plugged in into that app, we can give it instant access to all the social media posts of a user. So this one is really just a wrap over GPT, but it can be useful if you want to make GPT, I guess, easily and instantly accessible to a user and provided data without actually the user having to do manual work. Otherwise, then you'd really need to train your own model. So I— and that's it about the question. The take-home assessment, I don't know if you guys will send it via the email Yeah, we'll send this in the follow-up.

So folks, the idea of this is that we wanted to make sure that everyone walks away with actionable tactics. So you'll get the recording of this, you'll get this deck, and then you'll see here where these links go. But Rod's given a template there, he's given some notes on what you should be doing, and you know, if you actually do the assessment, uh, or the assignment, you can use the teardown session to review your, this, uh, your, your work with him, right? That's kind of the idea here is that, you know, you've learned some insights here. You've learned today that Bubble can be utilized to build something. Go and try to build something with Bubble. It's really tough. We know that, but that's the reason why we're here for. That's the reason Rod is here. Uh, you know, hopefully this kind of gets you started. You can then go and come to a teardown session and then take it to the next level. All right, so let's take a little bit more questions. So we have questions all over, we have questions on the chat and in the Q&A. So Rod, I'm gonna switch over and maybe do, let's do 3, 4 questions on the Q&A and then we'll go from there. So Victoria is asking from Barça, what about Figma? Like Figma versus Bubble at a very high level, what would you— how would you kind of—

uh, so, uh, Figma is really just a design tool, uh, where you— I say you do a design there and you hand it off to developers, uh, to implement it in a front end. Uh, what you build in Bubble is actually, uh, the front end. It— I think it's inspired by Figma to some extent. It tries to make it as easy as Figma, but Bubble is really something that can allow you to build a full-stack application, not just a design. Cool.

All right, let's move on. So Lloyd, I think— sorry, Floyd's asking Webflow versus Bubble in terms of customization, is any preference, or what are your thoughts on this?

Oh man, this is a really good question. They are different, but Webflow, I'd say, is one of the, one of the best no-code tools out there. However, Webflow's focus is really on marketing sites and landing pages. They have been playing around with allowing you to build web applications. And then on the other hand though, Bubble really focuses on you building new web applications where you can have users that can log in, a database, functions, chats, and all that.

Yeah, great response. Um, all right, uh, Abir is asking, is Bubble— can you actually deploy the app in Bubble, or is it just for prototyping?

Uh, you can, uh, it is more than possible, and there is a lot of startups that actually run on Bubble. So I think for startups it's perfect. Usually the theme is a startup, after, as we've seen, after a year or two years on Bubble, they'll get big enough that it makes sense to use code. But we've seen quite a lot of people that actually deploy it on Bubble and then keep going with it.

Okay, good stuff. Uh, Carson is asking, uh, can you integrate another tool interface into Bubble, like Bubble acts like the overlay allowing users to navigate between sections. Uh, he's thinking about connecting to GoHighLevel. GoHighLevel is very like, it's like a fast builder, so I don't know how this integration would exactly work.

We, we've actually done that, but we, we have only connected with the scheduler, uh, aspect of GoHighLevel. So the, the answer to your question would be as long as there is a REST API, which Go high level does have a REST API, you can connect it with Bubble. Or if something has a TypeScript, you know, JavaScript SDK, you can also connect it. So it is pretty tool agnostic as to where you can, where you can get the data from that goes into the front end or even the database.

Great.

Let's—

I'm just trying to burn as many through as many of these questions just to make sure people get as much value. Uh, what's the most intricate app that has been built using Bubble to your knowledge? Uh, can you create these drag and drop editors like Canva? I believe Bubble was created using Bubble, but I could be wrong.

Uh, the, the landing page of Bubble was created using Bubble. So the, where we see Bubble's limitations, I think, is in instant collaboration apps. I think you could build something, let's say, like Notion or Figma, where everybody— well, Figma probably not because it is very graphics heavy. You could build something like Notion where you have 10 people working on the same page, but there would be a lag in, you know, someone types something, you wouldn't see it in that second, you could see it 2 seconds later. So instant collaboration apps, I think, are where the limit is usually, like, you know, Excel, Notion, etc. Then regarding something like Figma, Bubble allows you to implement JavaScript in the frontend. With Bubble's elements that I showed there, you wouldn't be able to do something like Figma. But you'd be able to do that if you basically code your JavaScript private plugins or components yourself. But at that point, for something like Canvas or not Figma, it would really become much more low-code than no-code if you use Bubble.

Perfect. Let's do one last question. We're just going through some of these. I think this is interesting. Camiar is asking from St. Louis, how do you limit it to stay within parameters or scope of the app? So if it is a fitness app, how do you stop it from giving advice on chemistry or math? So like when you're designing this AI chatbot, how do you make sure it operates within, or the responses it gives within those parameters?

Yeah, so that's one of the things that I want to to add to the PDF that you guys are going to attach, because it's one of the things I want to go over but run out of time. Basically, with this method, the way for you to do that is to reiterate what it has to do in the system message in the beginning. And when we've done this before, we would reiterate that on every subsequent message that is sent to chat GPT just to strengthen that context. From my experience, the lengthier your system instructions are, the better it will be at following those. However, if somebody really wants to push it and really kind of like prompts engineer it to break it down, it wouldn't be possible for a user to make it lose its focus. But I don't think that would make it useless. I think for 90% of cases, it still performed pretty good.

Okay, perfect. Uh, thanks so much, Rod. This has been super insightful, super helpful. Um, I want to take a pause here. You know, we're at 52 minutes. I want to be respectful of everybody's time, especially yours. I want to make sure that we can break out for some networking. Uh, once again, folks, if you want to chat with Rod, I think the best thing to do is for First of all, you can join one of his tables after in the networking session, in the networking lounge, which you kind of see shortly. But also, like, I do encourage you, take him up on the offer of doing the assignment. It's a lot of work, but at least you can come and then book a session with him in the teardown and, like, review and get some critical feedback, right? With that being said, Rod, thank you so much. A lot of people are giving their thanks. As you can see in the chat, a lot of thank you, a lot of hearts, a lot of claps. Any final words for the audience?

That's pretty much it. I hope this was really useful. I've actually been enjoying it a lot, speaking to other attendees from other events with you guys here. So feel free to reach out on LinkedIn. If I have the time, I'll definitely reply to any questions if something was unclear. And yeah, I'd say take a look at the take-home assessment. We'll definitely try to make that as useful as possible if you're trying to build something similar.

Perfect. Yeah, and we'll send out all the links to everyone. All right, we're going to stop the session now. We'll go to the networking portion and then let's, let's try to chat there. Thanks everyone.