How To Use AI Agents To Create Software (Databutton)
Other Videos📅 2025-02-13
Transcript
[00:00] and with just those simple steps we've successfully created software with AI agents and deployed it to a live website link can AI agents really build out a full-blown software in today's video we're going to be checking out data button here which got a brand new update that allows AI agents to create out your entire software therefore the objective for today's video is simple can these agents really build out a software let's jump in welcome back y'all in today's video we're going to be checking out a new update by data Buton they hit me up and they're like yo Corbin we got a pretty big update here that shows a new way of creating an app I'm like okay
[00:30] sounds cool let's go and do it today's video is sponsored by data button now what's really cool about this is that everything I'm going to show you in today's video is available now so you can click it in the description down below I got an early access demo to it and I will say two major things really stood out to me the new user interface and abilities to interact with these AI agents creating software and the second one that I was just like okay this is really cool is the ability for us to associate labor and quote unquote task to these AI agents rather than just doing like a one prompt and then it just gets going this will make more sense as
[01:00] we get into the building process of today's app but for now what are we even building Corbin I went ahead and created a wireframe of what we are building today the app is going to be called mimic mimic is an AI powered platform that lets users input reference content EG tweets product descriptions from a particular brand and generate new copy that retains to the brand style while incorporating the user's personal twist essentially the idea is that we take any brand and output similar type of content so for example Wendy's I know we all love Wendy's especially the frosties and the the idea would be like for example
[01:31] Wendy's tweeting thank you Mr Beast can't believe we're getting Tik Tok banned before GTA 6 like the more sarcastic more edgy type of tweets that we see from Wendy's I want to see that with this AI software we're about to create therefore then we could use any Twitter account or any social media profile or any business content and regurgitate that with mimic AI oh and there you go if I see my shadow you get six more weeks of a vanilla Frosty the best part of Wendy's is got to be the frosty put your fries in it trust me so the first part here will be description so let's going to put that little summary I outlined earlier I'm going to paste that right there hit continue now
[02:02] the next part that's really cool here is we can upload our wireframe right here so I made that wireframe it's a PDF I'm simply going to click this and there we go mimic AIC copywriter PDF this gives a ton of context of who we're targeting the platform for everything about our platform think of this like when you're drawing on the Whiteboard of like your software idea you put this all in one dock upload here hit continue now we have a really cool part here about share your design inspiration and what we can do here is we can simply go to any type of brand we like take screenshots of their web app software place them here
[02:33] so let's say the inspiration I want to give is stripe what I'll do is I'll simply go to different parts of the stripe UI here and I'll just screenshot screenshot one screenshot two what screenshot three or a dry with this all we need to do is come back to data button and simply drag here don't need any special naming as all we're really caring about at this part is purely the design and how it looks hit continue now this next part right here is very very powerful for two major reasons first part is this is basically setting your
[03:03] Baseline like if we're building a house we need a good foundation therefore we need to identify very specific stuff that we want to be integrated into our application that are just fundamental so we have things like off for Firebase off database for fire store scrolling down here our payment method whether it's stripe or lemon squeezy storage could be Fire based storage or super based storage and so on now one thing I want to point out here is that depending on what platform you like best go with the same for all the Integrations it's going to make it easier so for example if
[03:33] you're like Corbin I don't like Firebase that's fine if you're going to do super baso click super base here here and then all the way down here as well just keep it the same it's going to make your life 10 times easier what this does though is that this kind of circumnavigates a lot of those rabbit holes that you face in other app Builders where you're like yo B I want to build an application with Firebase storage and O and then it starts getting confused and then half your app changes and you're just like wo whoo this is the base level this is the ground level let's lay that brick laying
[04:05] Foundation now here is the best part if you want to see an entire video showing you how to integrate Firebase off going leave it down in the description down below it shows you how to do it on the database platform very simple we're going to create our little Firebase project integrate our keys proed for now though the way I'm going to approach monetization in this application I'm going to hit let's get started here as we build this application here is going to be very much like if you're familiar with stock twits or a freebie type of website where you land on the landing page you get value you and then the way of monetization is purely like Google ads and the columns so in this video we're going to be building out that
[04:35] landing page our ability to mimic any brand EG mimic and then our monetization can occur in the left or right side column with the ads through AdSense on Google Google also if you're like this guy's voice sounds a little weird I'm a little sick okay give me a break so here's a new user interface when it comes to data button which is really cool and what I really like first things first as we always love with these AI agents we got our little conversation on the right here ask questions make code changes Etc the biggest change here that I fundamentally don't see in any other platform is this right here the idea
[05:08] being we have in progress to do and then done this right here is 100% correlated with real software development as I create my own software company this is very much like a situation where for example create basic analytics and history tracking this is what we would call a story or as they call them here task the idea is very much rather than us putting one prompt here and this thing just gets going and yeah 80% of the cbase is just different now we are granz each task so that the AI agent's like okay what's the task and it only
[05:38] does it when it's in the in progress area and it waits for a confirmation for us to put it in done basically this is the next level in the sense of I have an AI agent coding out my software and the position I'm taking is a manager role that's why data bundus says you don't need to find a CTO cuz now you're the CTO so here's the situation though so right now we got our task one mm-1 here of creating a landing page it showcases mimics core value proposition but as I stated earlier I want to kind of just do a different type of software web app where we're just kind of in the value right off the bat so what I'm going to do here is I'm going to click this and
[06:09] I'm going to change a little bit of this also with these pre-generated task here it's a really great opportunity for you to understand maybe the best way to formulate wording when asking for a task to be done for now though let's just get this going here so I can show some other features of this application then we're going to connect an open AI API key for the functionality of our value for our platform obviously that could be I deep seek or whatever you want here let's hit start Task and it's going to be in progress here now the one thing about our AI agents here is Clarity the idea is very much like what the heck is it
[06:40] doing right now and then you can come over here and be like okay it's working on mim-1 and it's going to walk you through its entire thought process of how it's approaching it with the file listed thought for a moment let me install the necessary packages and check the current APP TSX content and kind of goes down this Chain of Thought notice I asked for one tastic be done and it's doing that task it's not doing all these it's not just shooting off shooting off shooting off shooting off and you're just like whoa whoa whoa like where is the control that's what's key here that's
[07:10] fundamentally what makes these AI agents very valuable as this is real workf flow in a software company if I was going to have an employee do a task and then for some reason they're doing task M M5 what are you doing no no no no I just told you to do mi-1 so that's the idea here do what you need to do don't over do is that a saying do I need to sell that on a shirt and as I stated before When approaching stories or in this context this would be kind of like pushing a PR to GitHub it gives me the relevant information of what they even changed on
[07:42] this specific push stuff like feature section with three key benefits using cards strong CTA section of gradient background Etc also notice at the end of a task it identifies the specific task that it just did now when a task is done for us to preview at least the frontend changes in this context we can up here to preview and look at this pretty cool I think the great thing about this is that it instantly renders the exact UI rather than us going through terminal and having to start this and if I scroll down here we have a nice little landing page of your brand voice Amplified by AI
[08:13] scroll down here how mimic Works analyze brand voices generate content share an export and a good footer all done within a couple seconds now obviously right now the signin button doesn't work or functionality doesn't work because that's not what we requested here what's really cool is we have a really good starting point here I kind of like like this idea of me putting in like Wendy's there and hitting try now so let's keep going here when you like what you see hit Mark is done there we go and what's great is this is going to keep a nice little catalog of all of our past task pretty cool as now we can identify very
[08:44] specific labor for these AI agents to incur now we have other specific tasks that were automatically given to us that we could try out such as setup Firebase authentication user profiles but for now we know our objective so we're going to create our own task here so what I'm going to do is I'm going to say new page for mimic capabilities I'm going to create task here we're going to get the bigger UI here here we go and just so I can confirm what's going on here I'm going to go to this page right here and notice how the button says try now and this is very important this is how you going to be able to easily look through the code if you need to so I'm going to hit edit code and if I scroll the Way to
[09:15] the Top here it doesn't matter if you don't understand this because we could in theory ask our AI agent to help here but we know it says try now as that's literally the only area it says try now so what I'm going to do is here is I'm going to take this hero section and I'm going to copy this I'm going to hide code again new page for m capabilities perfect I'm going to go and say okay here provide the relevant code and what I like to do is I don't want to throw the whole SN at our AI agent to just do everything that we want it to do typically let's make it step by step here so what I like to do is I'm going to say okay here I'm going to get the relevant code that I wanted to change or
[09:46] add another route to so I provided that for the try now and then I'm going to say make it so when I add a company name here we go to the new page SL mimic play like in your url I'm going to say start Task and what you know is going to get going over here this is kind of the workflow here where you can game plan and set up very specific directions you want our AI agent and data button to go in now once it's done with a story what's really cool is that it will accomplish it right and you'll get a nice little output of everything it essentially did but notice this it says this page is set up with a split view
[10:17] layout showing the referen content on the left and the generated content on the right would you like me to make any adjustments to the layout or functionality basically it's asking me do I want to say this is good we're done here here or make additional changes first off let's see if it even works so we'll come over here we'll say apple and the idea is that we hit try now and we should be rendering into a new page so try now there we go mimic play really nice and what's actually really cool here is that it has a dynamic field for the title so it says generate content in
[10:48] apple style I assume if I change that try Nike it should say Nike nice okay cool it does and then we have a nice little description here reference content from Brands tweet product descriptions Etc that's actually very fundamental here this shows us that wireframe that I gave at the beginning of the tutorial it wasn't just like oh provide that file and then we'll never look at it again it is referencing that file it is using that as a baseline that's key so now the idea here is that I'm going to provide reference content and then we're going to generate content
[11:19] that is similar to that in the brand style and then if we took this one step further to add monetization to this underl platform the left side and the right side of this underl UI we could add like Google AdSense ads for now though I like where we're at I'm going to hit done again as typically what I like to do is every fundamental feature change we can go ahead and just mark it as done so we know that this is the situation on the newer feature change that's cool let's go back to preview let's go to our page mimic play here and let's add a little bit of code change so
[11:50] as you already know the way I like especially setting up stories or tasks for our AI agent is reference the specific code or functionality you want to change to be honest with you when I I give stories to my software Engineers I will show them the specific code files where I want them to change I'll give them context of what should change what function what underlying line Etc so let's treat our AI agents as software Engineers because essentially that's what they are which just kind of crazy we're in the future so what I mean by this is that my next objective here is I
[12:20] want to integrate open AI API key why so that when I hit generate content it references this and outputs here therefore we need to get the relevant block code for here in here now in theory you don't have to go to the exact code if you don't want to look for it you could basically copy all this code or we could reference a specific file so for example if I create the new task here and we'll just say add open AI API functionality and then we hit create task then in theory we could paste the entire code file here if you're not comfortable compartmentalizing it like I
[12:51] have shown but to be honest with you it's very simple y'all all you need to do is go to preview and basically watch this you know reference content command C control C edit code command f contrl f find everywhere it says reference content and that's the specific code so what I'm gonna do is I'm going to Simply go to main content here and what you'll notice which is really nice about these AI agents is that they give these little like content area main content this is comments and code and basically it's not read in software but it gives you
[13:21] Insight on like this is where the main content's located come up here this is where the navigation is located really nice like lame IND dictation so coming back go over here to plan though let's go to open AI API here I'm going to say this okay for this provide the code so now that all we have to do is I'm going to say okay for this give the relevant code that we want to add functionality to navigation Etc I'm going to come down here and say let's integrate open AI API key so that when I click generate content that little UI button we run it through a prompt that will then make the content that is similar and output here
[13:52] in generate content allowing me to copy generate content is the other right side here with the value hit start test and what this should do here is this should ask for my open AI API key so let me go and grab that and there we go makes it super simple for us let me start by requesting the open API key and creating a API endpoint perfect so let just going to paste it right there hit send and it locks it in that's really nice this makes it so when we integrate thirdparty applications it's very simple for the AI agent just to be like we just need the key we'll handle everything else as DJ
[14:23] khed once said major key alert and this is the workflow when building an application with data button at the end here I'm going to show you how to deploy this which at a live website link but it's very much like here's a specific task here's the information go and to be honest with you this is very much the future of software development in the context of using AI agents just because of the fact that in real software development typically we do things called Sprints where we'll identify the labor for two weeks and you can do something very similar here with this little to-do section I think one really
[14:53] nice Improvement that could happen to this platform is making this more of like a kaban situation where we can drag it between columns but for now I this is pretty solid y'all so now that's finished here we're going to hit preview here and I want you to notice something we come over here to your left because we're integrating a third party API it made a new python function here content generation using open's API key that we provided what's really cool here this is like next level y'all and I really like this because it's such a new field but it made the prompt as well like it made the prompt here is some referen content that shows a brand style and tone
[15:25] generate new content that matches it style while being unique and original so now not only did it code out the entire file but it also did the heavy lifting of making the prompt itself I like it so let's try it Wendy's try now okay I'm actually really curious if this works I think like this kind of tweet right here can't believe we're getting a Tik Tok ban before GTA 6 let's see how it interprets this generate content okay and then notice we have a little console log below us so this shows all the relevant like payloads and everything
[15:57] being sent here this actually looks like hit we're out here waiting for Bigfoot sightings while everyone's losing Minds over a potential Snapchat redesign see that's a little bit on brand right there like you want to see like apple putting that out but you could see Wendy's putting that out it got that so now that we know it works with Wendy's I got to give McDonald's some love so let's try McDonald's I bet being an ice cube and McDonald's Sprite feel so good oh gosh how is it going to interpret this generate content get a little shot off here here we go I reckon turning into a
[16:27] golden fry in a McDonald's Happy Meal brings ultimate Joy okay okay not bad that's the idea though and I think that's actually really cool like we were able to integrate a third party API with just one click one story go so your next question might be okay this is cool Corbin but how do I put this at a live website link in traditional software development this would require us to identify the exact project we need to use put in a bunch of terminal commands make sure everything is associated EMV file a bunch of steps here it's just one click go so we find where the UR the app
[16:59] should be going to so I'm going to rename this to mimic app here and hit deploy app and it just gets going this is fundamentally a lot less work than a bunch of terminal commands I also want to point out as well remember when we gave that stripe UI to check out it did take into account making the title and that gradient feel that is very much within strip so that's pretty cool and the gradient feel down here as well while this is deploying good job we've added open AI API functionality with just one simple task we have successfully deployed the application let's go and see it and just simple steps we've successfully created
[17:30] software with AI agents and deployed it to a live website link so we can jump in here check it out put it in a company name Nike just do it one thing I want to point out as well that's really nice about data button and is very annoying in frontend development that it just handles for you is its ability to handle responsiveness in an application so I can go to tablet here really nice UI notice how it makes it a colum I go to mobile here same situation this kind of functionality when it comes to UI being so easily transferred between the different types of devices this is not
[18:01] normal been doing front end development for a while and that's probably the most annoying thing to code out but this handles it flawlessly but there you go I'm going to make sure you leave a link to data button in the description down below this is a brand new update it came out yesterday pretty fun here you can check out these AI agents how we associate labor and task but without further Ado I'll see you in the next video data button to random videos that's my face I'll see you in the next video