Databutton: The First Reasoning AI Developer – The Bold New Contender to Lovable + Bolt.new

--- type: transcript date: 2025-02-11 youtube_id: neKPbWUb0zY --- # Transcript: Databutton: The First Reasoning AI Developer – The Bold New Contender to Lovable + Bolt.new in this video I'm going to be showing you data button the world's first reasoning AI developer I've used a ton of these AI app Builders and data button definitely stands out there are a number of really nice implementation features within how they built this the first thing that you can do is you can make a free account on the platforms once you make a new application they have this really nice interface and we can describe what we want our app to be on this I'm going to say I want to build a course platform that is similar to corsera and UD Demi you can give as few details or as many details as you want within that panel now the cool thing with this is you can upload different documents within this whether it's designs requirements references or quotes I'm going to put in some information that I generated about how this is going to work it's going to have curriculum the ability to create a new course upload lectures so on and so forth effectively there's going to be the Learners View and then there's also going to be the instructor's View and that's all filled out within this relatively long document with in here you can go in here and put in as much information as you'd like another neat thing with this is you can throw in all of the different design inspiration that you want for the platform what we can do within this is I can go ahead and just take a screenshot of whatever inspiration that we have so let's say in this case I want to use the Udi platform I'm going to go ahead and I'm going to upload that and you can upload multiple references I'm going to go ahead and click continue now when I saw this I absolutely love this feature this was definitely the moment that sort of turned my head with what data button was doing what they have within here is the ability to choose between different o providers they support both Firebase o as well as superbase o and then for databases you can have a nosql database on fire store or you can use postgress on superbase in this application I'm going to go ahead and pick Firebase for both authentication as well as our database they're both very easy to set up and I'll show you all of that as well for payments I'm going to say I want to use stripe and then finally for storage I'm going to go ahead and choose Firebase as well once we've selected the different options and mind you depending on the application you might not necessarily need to choose all of these but given we are building a course platform we're going to go ahead and plug all of that in within here the cool thing with this is they give you this project manager type of view where we have all of these different pieces about our application within here we have the ability to click to start the first task we have all the major Milestones of the application within year create an engaging landing page to Showcase courses and the value proposition build out the course catalog so on and so forth just to go through this a little bit we have the chat panel on the right hand side here where you see welcome to data button I'm excited to help you build your course platform within here sometimes it will ask you clarifying questions or you can actually invoke to start the process so even though there is the option to start the task right here what you could also do is you could say let's start and that will essentially act as the same as clicking that button we'll start to have the agent start to build out our application so here if we just walk through the process a little bit of what it's done it's going to update the task it's going to install the necessary packages read the code files read through the application so on and so forth now for any key decisions it's going to go and update it within the current activity So within here we can see the activity is starting the implementation of the landing page with a modern clean design follow the Udi inspiration including navigation hero section featured courses benefits and a testimonial section so one thing to note is you can pause a task you can alternatively delete a task if you'd like and the other thing with this is you can click stop down here say if you see the agent going down a direction within its thought process or whatever it might be that you don't agree with you can go ahead and stop and interject at any point another nice piece with this is if you hover over the thoughts you can see all of the different steps is planning on taking we have the observations we have a clean slate to work with we have the plan and then we also had the next steps here we see it added more key decisions here we can see it's both ready to review and to test at any point you can click the preview button here at the top here we go so here is our application I can open it with in preview and that will open up a new Chrome tab and here is our platform so far we we have our hero section we have our login and sign up button we have these nice nice featured courses here we have the star rating as well as the price the instructor name we have these very distinct sections we have some testimonials and we have a really nice looking footer as well if I hop back to the platform we can also take a look in tablet and we can look at what it looks like in Mobile basically in one shot it effectively nailed it now the other thing with this is you actually can go ahead and click to deploy your application this is going to put it on a subdomain Within databas button at any point you can just click to deploy your application and you'll actually be able to see it as soon as you click to deploy your application if it's the first time that you're deploying it it's going to ask for the subdomain that you'd like and then it's going to start to deploy your projects at that rad here we see it's deploying our application and we also have the terminal here where we can see everything that's going on so the build deployment has started it succeeded and now we have our deployed application now that it's deployed we can go ahead and check out our application at this point this is a live application you could begin sharing this at this point in a couple minutes we already have a really good start so within here there are a number of pieces which we'll start to see a little bit more on within here as we start to build out our application we'll see all of the different component pieces in the leftand sidebar here any apis that we have any UI files if we have UI components they will all be listed out here as we start building out the application we'll begin to see some of those things populate since I think this looks great I'm I'm going to go ahead and Mark as done but you can go in here and you can say okay maybe I want this to look a little bit different I want it to have a dark theme or I don't want to have testimonials actually or whatever it might be and similar to before you can ask it to continue within here or you can just go ahead and click to Mark as done so now the next step is to set up authentication let's go ahead and start that here we see that it's kicked off that task within our agent and now it's asking if I want to add Firebase to the application I'm going to go and say want to add Firebase now this is really great what this allows you to do is you can make a free account on Firebase and there are very clear instructions on how to set this up but I'll just show you quickly what this looks like and I'm also going to be deleting this project any sensitive keys that you see don't worry this will be spun down after I record this video within the project name you can call this whatever you'd like I'm just going to call this course platform you can choose to enable analytics or not and then once you've done that you can go ahead and create the project once done you'll see that your Firebase project is ready and you can click continue next you can click this web button here and we can register our application so I'm just going to call this course platform and we're going to go and register once the app has been registered the key piece that we need within this for data button is this section right here we're going to paste that within our application next if your application does have authentication what you'll have to do is go within the authentication tab within Firebase and what you can do is you can click this get started button here from there you can choose your signin providers in this case I'm going to use email and password and I'm also going to allow users to use Google as well once we have that we have to go and add in these two separate domains within the authorized domains within our application what we can do here is if we go down to authorized domains we can go ahead and add both of these here you can just copy both of these links and paste them in just like that so data Button as well as whatever your subdomain do datab button is as well I'm going to go and add that in here the last thing that you'll have to do is just enable fir store for the database if you want to store data in this case since our application does have a database all that you have to do is choose the region that you want to use and then you can go ahead and accept that it will go ahead and provision out your Cloud fire store and if you haven't used a Firebase before this is essentially the UI to be able to access our database so once we've done that we can go ahead and click install here and what that will do is it's going to go through and we're going to create a a login page a logo page a configuration and then it will finally restart the application and then once that's done we'll see that our app is protected we can go ahead and click done here we see that it added to the activity here and it's going through the different process here we see that the Firebase extension was installed it created the login and sign up pages with email as well as Google authentication it's going to implement the user Ro selection during sign up and store the profiles within firestore so So within here we see that it's going through this Loop here it thought for a moment it read through the code it thought again and now it's actually writing out some code for us now that it's gone through it's written some code for us it's reviewed the code it's validated the UI we can go ahead and deploy the application or at any point like I mentioned you can go over to the preview tab you can open it up and you can begin to try this out let's go ahead and try logging in all right here's our login page we have the option to put in our email and we also have the Google authentic a option and we also have this option to sign up within here we can go ahead and click sign up I'm going to go ahead and authenticate with Google I'll select my email here I'll continue as if I was signing up so now we see that I am now successfully authenticated within the application here we see our homepage and we also see that I'm logged in at the top here I can also sign out if I'd like if I go ahead for instance try and log in again it will immediately allow me in with that account so so now that I think it looks good I'll go ahead and I'll deploy the application now we're starting to see a few other things within here you can also see a number of the different pieces that were just built out we can see the homepage the login page Log out as well as the signup page all within here the other thing to know with this is you can change the code within the platform at any time so let's say you want to change something within the homepage you can go ahead and change out whatever it might be say if you want to swap out this line of copy instead of unlock your potential with expert Le online Cod courses let's say we want it just to read unlock your potential for instance I can go ahead and I can have that as our H1 and it will immediately reflect that similar to the deploy button that we saw within the chat panel you can go ahead and deploy any updates at any time right here I can go ahead and start a deployment process just like that I'm happy with the authentication step I Mark that as done I'm going to go ahead and I say I want to build out the course catalog with browsing and search functionality one thing that I want to note is within the to-dos is you can also edit these as well say within the description or the title if you want to give further information or if you want to change these at all you can do that within here you just add XYZ and you can also add in some more within the description just to show you how flexible the system is I'm going to go and kick off this next step here this one is a fair bit more detailed so we see that it's going to create a data structure for the courses field it gives the example of the data structure create the UI files create the horse catalog implement the realtime firestore integration with filtering and pagination now the one thing to know with this is depending on the task it could take a little bit of time you can go for a walk do a little stretch maybe do a few push-ups take your dog for a walk do what you have to do and it will just work for you as if it was your AI employee once this is done I'll just skip forward and we'll see what the result looks like it's worked through a number of pieces it updated our app. TSX it validated the UI and we can also see that it created this init.py file to validate the seed for the back end and finally reload the apis here we see the browse courses button what I can do here is I'll go and I'll log in and now I'll click the browse courses again here we have the ability to search the courses here now the one thing I notice here is it says missing or insufficient permissions anytime you run into an issue you can just feed in all of that information within data button and it will just work through that process to resolve that often times depending on what it's doing it might have to write some code attempt to execute it and then also review it there's this whole agentic Loop that happens depending on what you're asking for if it's a UI component it's going to read code write code and also test the UI component similar thing for apis or seed scripts like we had within this example here it's going to go through write those scripts if there are issues it's going to go through and continually feed that information back to itself the other cool thing with this is it can also perform research here we see that it's researching the topic of asking how to initially Firebase SD within Python and here we can actually see it's going through all of these different URLs to go and attempt to find that information that's the thing with data button that's pretty amazing is it's not just limited to what's within the training data of whatever llm that's being used under the hood is there are all of these other features where it can go and use tools like a research agent to try and attempt to find the information of what it might need even with an error it took its time to research it it asked me to provide some information that I needed from Firebase I put that within a secure credentials field I sent that in and it was able to write that initialization script now if we have a look here we can see that we do have our footer we have our navigation and we still do have this error here where it says missing or insufficient permission I'm going to go back to data button I'm going to say I still have the error and I'll paste in this on the courses page now one thing to note is you can always check if your data has been seated within Firebase so if you're using Firebase or superbase you can also look at the collection of data that you have within here here we can see we have the various courses and and for all of the different courses we can see the category for each of them the description the duration as well as things like the instructor name so on and so forth we have objectives within them price rating and what have you now we see to resolve this error what we're going to have to do is to fix the permissions error you'll have to update your fir store security rules to allow for public read access to the course collections what I'm going to do here is I'm going to go ahead and update the rules here and it gives you very good descriptions here here I'll go to Firebase database and then from there we'll see this rules tab right at the top here so now we're going to publish this new rule set what data button instructed me with so now I'm going to inform the AI that is done I'm going to say I have completed that now we have this different error I'm going to go ahead and paste that in here it's instructing us to go to this link and it's going to create this index for us so we're going to go ahead and save that out we see that it's building this and we see that we have the students the price as well as the names in all of these fields here and after all of the instructions that it clearly gave us we now have our courses page so if we go back to our homepage here we can click to see all of the different courses here if I click on one of these courses here we see that the page is not found but now if we go back to the plan we do see that the next step is to implement the course creation and management for instructions develop the course viewing as well as the progress tracking system it's looking good we have the tile view we also have the list view we can change the price if we want to filter by the price of the course we can do all of that now let's go ahead and mark the step as done let's go ahead and kick off to implement the course creation and management for instructors within here we see that it's going to build out a course creation interface for instructors add the course details curric structure and content include basic content management for lessons quizzes and resources store the course content in Firebase storage it made a key decision here let's take a look at it so what it's decided to is is going to extend the types it's going to create the course management store for crud operations it's going to implement the course creation interface it's going to set up a Firebase storage for Content management and finally it's going to add the course edit and publish functionality now the one thing to note is sometimes depending on what it's trying to accomplish within the task this could run for potentially 30 45 minutes if the task is particularly involved and that's nothing to say about the application being slow that's just something to be said about how independent this application can work this is a very powerful agentic system I use a ton of these AI agentic systems for different applications whether it's app building or different AI tools this one is very impressive for what it does at any point let's say You're Building out a UI component you could plug in an image and say you want a particular section to look like this image and take a screenshot or use some other source of inspiration now one thing that I do want to highlight is let's say right now within the application I don't want to go through the process to implement the course creation and management for instructor let's just say I want to have that manually inputed for now and that's a feature that's past the MVP that I'm building right now I'm going to go ahead and delete this task you can confirm to delete that and then from there you can go ahead and move on to another step is all of these different tasks are partitioned out where you will be able to have the flexibility to Pivot in real time on if you want to remove things or update things or whatever it might be otherwise that's pretty much it for this video If you're looking to build out a full stack application where you need a hosted database authentication payments as well as the ability to store files I I really encourage you to give data button a shot they allow you to try this out for free you can see exactly how the platform works but otherwise that's pretty much it for this video if you found this video useful please like comment share and subscribe otherwise until the next one