If you've been living underneath a rock somewhere for the last year, then maybe you're unaware of the fact that you can build full-blown web applications without being a developer. You can build out the front-end UI, develop the backend, connect to databases, tap into APIs, full user authentication, all of it without writing a single line of code. And I've been using some of these vibe coding apps to build out a lot of different tools that I want to use on a daily basis, internal tools just for me. But I started asking myself this question. Can I build an AIdriven app using one of these AI app builders? The answer to that question is yes. And today I'm going to show you how I've used my favorite vibe coding platform, Replet, to build an internal tool just for me that leverages AI. And I built it using AI. Kind of meta, I know. Let me show you how I did it. All right, let's jump into Replet. If you're not used to Replet, you've never used it before, I've done a lot of other videos on the channel. You could check it out. But this is the replet dashboard or the kind of entry state here where you could start kind of prompting your app into existence. You can build an app. You can design it. You have lots of options for web apps, mobile apps, data apps, 3D games, so on and so forth. You can see here over in the lefth hand, I've built a bunch of different apps that I've been using. Content planners, task planners, um ways to tap into Figma and do project management. Um lots of different stuff here. But one of the latest ones I've been building is this app called Draft Room. I started it two weeks ago. And actually, when I say two weeks, I launched the idea two weeks ago and I've just spent a couple of hours here or there kind of working on it to get to the place where I'm currently at right now. I'm going to jump into Draft Room and show you. And again, if you've never used Replet, here's what you're going to see when you launch it. This is the preview of your application over here. This is your prompting space where you can tell Replet what to do with all the options down below. And then you can open up different tools and different tabs. So if I want to get access to the different database or start authentication or do integrations, I can do all that stuff here. I can also, if I go back to preview, I can open up code. You can see the custom code base that is starting to build out. So you get access to everything that it's building, all of the JavaScript, all of the JSON files, all of the routing. So if you want to play with the code, you can do that. I like to stick directly inside of the rep lip builder. And here's where I started with this prompt. I said, "Build an agentic task builder with a drag and drop interface that I can prompt and ask for deliverables and that I can tweak and iterate by adding, editing, removing nodes with different properties. " This was my vision was instead of me writing content over here and then summarizing it researching it at a different place and opening up this app, I'd like to do it all in one place. And I like the idea of AI agents where you can create an agent, a worker that does a specific task and once that worker is done, it passes it off to a different worker to do something with it and then it passes on to another worker. And so that's what I did. I created this initial kind of design and you can see it has a very chat gpt left-hand sidebar that we can collapse and you know I started working a little bit on themes. So, I have a light theme and I have a dark this neutral reading theme that I like a whole lot. You should be able to create a new idea and search through your ideas really easily like this. So, that's nice. And then when you create a new idea, you are launched directly into builder mode. So, we have builder and then eventually we'll have the results from this. And let me just refresh this really quickly so we get kind of a fresh one here. So, in my new workflow we have our results. I have no results in here yet because I haven't really done anything. And we can kind of write custom pages, which we'll talk about, but it kind of gives you some recipes, some places to start. And so, this is kind of your canvas, your work area. And then down below, I kind of took some inspiration from Figma. I have a all of the different agents that I asked Replet to build for me that are laid out like tools that you can drag onto the canvas and drop and actually start to build. So, this was really cool. I asked Replet, build me a bunch of different very specific agents that do specific tasks like a topic agent. I could feed it a topic and some ideas and then a content strategy agent that has like maybe some context to it, what I want from it. An outlining agent that's going to outline it for me. A scripting agent, a virality checker agent, and an exporting agent, so I can export this out to Google Docs or maybe something like Notion or wherever I want to work. So that's the big idea. And when I first told it to build, I said a drag and drop builder. And that was kind of my idea was I want to drag these agents on the onto the canvas kind of free form and then connect them all together like a wireframing or kind of like mind mapping. And then eventually I realized that that's not actually what I want. My flow, my process is a little bit more linear. So I started to move to that. Now what was really interesting was it worked very quickly but it was outputting a lot of Lauram Ipsum or generic text and I actually I had to
Segment 2 (05:00 - 10:00)
tell it now I need it to actually tie into AI models so it actually does the work and outputs real results. Now Replet has this really cool capability and I've done a whole video on this of tapping into connectors or different integrations. So, with some of the other apps that I've built, I've tapped into ASA, Dropbox, Google Calendar, Notion, YouTube. All of those things are now instantly available to any of the apps that I'm building. And there's a whole list of them here that you can tap into. When you tap into AI models, you actually don't have to do that. I can go out and tap into Claude and Chat GPT, Open AI, and grab those models and start integrating with them without a direct integration. And so, that's what it did. It was evaluating the options. It was securely storing my API keys, making the requests to the AI providers, and then it handled all that funny business for me, and I started to get real results from things. Now, how does this work? You basically come in here and you can either drag elements onto the screen, or you can start with a getting started recipe like maybe it's a YouTube script. I just click that and now it's no longer a free form kind of canvas, but it's this top tobottom almost Zapier like experience. This is where it starts and ends. And I can drag these around and kind of rearrange them if I want to. Or I could tap right here and I can add a new one directly in between the nodes. So if I want to add like an exporter or something, I can do that. I'd probably want to put that at the end. That would make a lot of sense. So you can kind of manage each one of these, delete them, customize the workflow. Now, what was really cool is as I built out or asked Replet to build these agents that have their own personas, their own work style that they're going to do and their own tasks, each one of them came with specific properties. So, I told it, hey, inside of a topic agent, I want you just to allow me to choose the model I want to use, receive some topics that I want, and then maybe even a perspective or an angle that I want to kind of attack this topic from. Content strategy, it's what do I want the strategy to be? How's it going to be applied? Script outline, do I want it to be deep or basic with some maybe custom instructions for the outline? And then when I write the script, how do I want to write it? So, target a platform like YouTube or maybe LinkedIn? And this is actually really cool cuz if I target YouTube, it's going to give me a script at the end. That's the script it's going to give me in the output. But if I target something like Twitter, it or X, it's going to give me threads broken up into those individual threads. So, I just went in and told it, hey, here's what I want. And if I didn't know exactly what I wanted, Replet has this really cool ability to not just build everything, but instead I can jump over to plan. I could ask it some questions like I asked it, hey, what would be some good properties that would fit into something like a topic agent or a scripting agent? And it gave me a list of options and ideas that maybe I hadn't even thought of. And I said, "Those are great and those ones aren't. " and I asked it to implement the ones that I wanted. So, it moved directly back over to build mode and started to build those for me. Now, what does it look like when one of these runs? Well, I could, you know, assign this workflow here, this idea. And you can see down here, I could drag new ones inside if I wanted to, but I could just press run. And when I press run, it tells me how many agents have worked so far. So, three out of five agents, four how long it's been running, and then it tells me how much time I'm expected to wait because it does take a little bit of time to go out and grab these AI models and then have them actually run and then process the information directly inside of my workflow. So, you can see here it's working. It's doing its thing. I'm going to move over to an already completed process here. You can see inside of the builder research outline and script. And then it told me that the results are done for this one. So when I click over on results, you can see we could always tab back and forth between the two. Kind of a fun nice interface. But what we have here on the right hand side is we have all the agents and what they outputed. So I can click on the research agent and here's what it gave me. And from the research that it did, it moved into the outline. And so it took all that research, dropped it into the outline, and actually built a nice YouTube outline for me. And then it took that outline and actually built the Twitter thread. This was not a YouTube one. This was a Twitter thread about spacing and UI design and it broke it into those threads for me that I could start riffing and having some ideas. And this just felt so good. It started to work really, really good. And you'll notice here that initially it applied everything into markdown. And I said, "Hey, that's great, but what I would really like is some rich text editing features. " So I could come in here and say, for instance, take this one. And we can still do markdown inside if I want to turn that into an H2. Or if I want to grab that line and for instance turn it grab this whole thing and we'll just remove the markdown spacing from it. Actually, yeah, let's turn that into an H1 instead. And then we can come into these elements here and like bold those elements and you know italicize others. So you got basic kind of text editing or rich text editing that's happening which
Segment 3 (10:00 - 15:00)
is really cool. But the question started to become well what happens if I enter into here and I don't want to start with a workflow or with my agents. What if I just have an idea to start a blank document? I can click on start a blank document. And now you see I have this feature in the top right hand section. This prompting happened much later. This thought came to me and I said, well, what if I just want to have like an empty page? So now I have an empty page and I can just start writing inside of that empty page with rich text. What if I want to have another empty page, maybe a second draft or brainstorming my ideas? I can do that. But I can always jump back over to the builder and have it build something for me, which again is where we get these cool AI or agentic outputs from everything. So you could have both. We could have pages, we could have AI outputs here. All this stuff feels super good. Now, what I really love about this is as I'm building, I can actually be testing at the same time. So if you come down into Replet in build mode, we can actually open up the options. And this is something that's fairly recent with Replet is their replet agent. So I can turn on testing. So app testing gets turned on and I can choose to what extent do I want this thing to test. Maybe it's really low, right? It generates and executes on the task list or maybe medium. It's also going to review the latest code and fix issues just in real time or maybe high. It's going to expand that review and it's going to scope to the entire app. So it's going to say, "Hey, we're working on this one feature, but maybe it broke something over here. Let's fix that to make sure the whole app is working holistically. You can jump into max and that just gets super crazy where it starts to plan and complete new work just independently for me. I like to have a little bit more control. So, I like to keep it on somewhere around medium, sometimes high to get the best results. Now, what I also loved, and I'm just going to scroll down to some of the latest updates that I did here, is as it's doing that testing, it'll actually autonomously test it for you. So, you can watch the replay here. And let's just uh expand this out. You can see some of the work that it's this it was doing this while I was like sitting here thinking or prompting some more. I was actually watching Replet go in as an agent and test things out, try new pages for me, figure out what was broken. Here it is testing multiple pages, writing inside of those multiple pages to make sure that the data was being stored and you can move back and forth in between the ability to see this testing and actually watch it happen in real time and it's talking back to you and saying, "Hey, this thing seems to be working well. This other maybe not working so well. We're going to go ahead and fix that right now based off of what we've seen. " That feature is like mindblowing to me. The ability to make sure your app is fully working. So just this ability is just so great. Jumping back and forth between build mode and plan mode. There was a lot of times where I just wasn't sure if what I was thinking was the right thing. So instead of building it and then having to backtrack, I would just jump over to plan mode and I would say, "Hey, what if we did X, Y, and Z? " It would give me those options. I go, "That's great. Why don't we go ahead and build that? " I also love the ability to just kind of quickedit and change things. Like if I wanted to come up here, you just edit things and actually click things inside of your application. And then I can change like what's the content there. Do I want to change the font size, alignment, text, you know, the margins, the paddings, the layout? Do I just want to delete that element all together and save those changes? And just kind of updates everything on the fly. And this is just so great because now I have this fully formed application that I can actually use. Start a new idea. Maybe I want to be an, you know, Instagram carousel. I can lay in all the details that I want for this carousel. you know, make sure that it's directed towards Instagram, change the tone, and start to spit out content ideas in one place. And if that wasn't enough, once I jump over to things like results, let's jump over here and go back to our results. I can always just any of these like this scripting here. I can copy this. I can even bring it up into a page and paste it in there in case I want to riff on ideas and not mess up the original agent work that was done. But I could also just download this. I just downloaded it into markdown format and I don't have like my export agent there to just directly send it. Maybe I just want to download it, send it to somebody, email it to somebody, manually bring it in and upload it to a different platform that I can't connect to. All of that stuff is available. And again, I made this entire application in probably five or 6 hours to be honest, just kind of on my lunch breaks and in my spare time just kind of clipping away at it. So, the ability to make stuff like this, this is a tool, like I said, it's probably just for me. It's probably something that I'll selfishly just use for me. But if you're interested in it, let me know down in the comments. I can give you access to it. That would be super fun to get your feedback and your thoughts on it from a different user's perspective. That's it. It's an absolutely bonkers idea to build AI with AI. Never have to touch the code. Don't know how to program AI, but I can publish this thing and make it public and allow other people to use it. What do you think about this process? Is it interesting to you? Did you know you
Segment 4 (15:00 - 15:00)
could do this? Let me know down in the comments. And make sure to check the descriptions for some helpful links to other videos I've done on Replet and to go start a free Replet account. Start playing around with it yourself and building the tools that maybe you need in your internal workflow and processes. If you enjoyed the video, make sure to leave a thumbs up, subscribe to the channel. I do lots of content about design, development, AI, and building AI with AI. So, make sure you ring that bell so you know when more videos like this one come out. We'll see you in the next