Replit Agent 4: ШІ-помічник для швидкої розробки застосунків з паралельними агентами

In this video, I'm going to be showing you Agent 4 from Replet. Now, Replet, if you're not familiar, it started out as a cloud IDE and now it's evolved into a platform with just natural language. You're able to build as well as deploy and scale your applications. Effectively, all that you need to do is you can write and run code in your browser. There's no local setup. You can also do this from your mobile phone. And since they've added their AI agent in 2024, now you can build full apps with just a text prompt. Agent 2 was the first real version, whereas Agent 3 was the first added autonomous multi-hour agent with self- testing. So, what agent 4 now allows you to do is instead of letting your AI run longer, it's focused on actually letting your AI do things at once while you stay in control. So, without further ado, let's dive in. Now, first things first, there are four pillars effectively to the new agent offering. There's a new infinite design canvas. There's parallel agents, there's multi output, as well as team collaboration. The first thing that I want to highlight is what you'll notice within the new interface here is you'll see there are a number of different tabs here. So we have one for website, mobile design, slides as well as animation. Within the interface once you log in what you'll notice here is you have the ability to select a website, mobile design, slides or animation. And what you'll find is when you have an idea for a product you might start with design that might move to a website and once you have the website and the web app made you might want a mobile application. From there, you might actually want to have slides for a pitch deck or maybe you want to have an animation to actually present this on social media. The whole idea of what they built here are all of the different component pieces that actually go into a product offering. So within here, I'm going to say I want to build a fitness application. For the fitness application, one of the key capabilities is I want to have very rich visualizations for everything. So I want beautiful graphs and one of the key features that I want to have is I want to have a graph that's very similar to the GitHub activity graph. Within that, I want to show the different minutes of how often I exercise. I want to show things like the calories consumed. I want a ton of different graphs, including habit tracking. All in all, I want to start to brainstorm this idea. Okay. So, within here, I have my initial prompt. And what I'm going to do is I'm going to select that design tab. Okay. Now, before I send this in, I want to show you a couple different options that you have. So, you can import a Figma design if you'd like. You can also upload different files. So, if you have things like images, you can include those. Additionally, what you can do within here is you can import an existing project or you can use these different skills that they have. So within here, you'll notice a number of different skills. We have sales and marketing skills, we have career skills, we have research and analysis skills, so on and so forth. You do also have the option to plan as well. But what I'm going to do within here is I'm just going to go ahead and send in this prompt. And what we'll see is we've automatically switched to our new economy mode, which is up to three times more cost effective with nearly the same performance. You can switch back to power mode at any time. Now, just a quick breakdown, but it is pretty intuitive. So, on the lefth hand side, we have our agent panel. What you'll notice, it will go through, it will think through what we need to load up. We see that it loaded up a skill to help with mocking out our application. It's scoping out the application, and we have these different actions that it will take along the way. So, you can go and expand everything if you want to take a closer look at everything that it's doing. And within here, what we see is the design is being built in the background. And then once this is all done is we're going to be able to see this within the infinite canvas view here. Now, the one aside that I do want to point out, I do have the Replet mobile app installed. And what's really neat with this is as soon as it requires your attention, like something completing is it will send you a push notification. So, in the background, I also got an alert when this was all done. And that's one really nice thing with Replet is you can have it accessible within the web app or you can also walk away and use it from the mobile app as well. And within here, it's generated this beautiful design for us. So, within here, we have that design. We have that hub activity log. We have all of the different beautiful charts like I'd asked for. I can also expand this so I can see all of the different component pieces that it generated for us. Now that we have this starting point, what I actually want to have it do is I want to have it redesigned in the style that I have for the brand on my website. What I'm going to do is I'm going to copy this prompt that I have on my website. One of the really cool things with the canvas view is you have a few different options. If I want to update things within this own view, I can send in a message directly to this panel here. But additionally, what I can do within here is I can reimagine it. I can select from these different prompts. Or additionally, if I have something else, I can say I want to use this structure with the following styling. And then what I'm going to do is I'm going to paste everything in and I'm going to send in that next prompt. And then what it will do is it will take that design style that I had referenced and it will begin to apply it. And now we can see it's going through and it's going to reimagine this dashboard in the styles that I'd like. And here we go. It has gone ahead and it has redesigned this entire page within the design system that I had sent in. Within here, I have all of those beautiful graphs. I have all of the different color styles that I have on my website and I have all of the different accent colors as well. I have the workout types within here. I have the recovery metrics. I have today's macro. And overall, this is a really good starting point of the initial dashboard. Now, one of the cool things with this with being able to copy and paste different things is while I like this, there might be certain elements that I don't quite like or I want to visualize differently. So what I can do within the same frame is I can say I want to instead have the workout types, recovery metrics as well as today's macros right below the exercise activity and move the calories and body weight to the bottom of the page. And now additionally what you can do within here is you can copy and paste different things and you can visualize how different pages might look. For instance, within one prompt on the lefth hand side here is I asked for it to move up these panels a little bit higher because I do find they're a little bit more compelling that I think it could work well on the initial dashboard here. But additionally, you can have them side by side and compare. And one of the really nice with the infinite canvas view is this is solely focused on the front-end functionality. Now that I'm good with our dashboard, I just want to move immediately into building the application. So what I'm going to say is I want to now move what I have in design into actually building the functional web application. And then as soon as I send that in, what it's going to do is look at what we've designed and it's going to begin to scaffold this out for our codebase. So within here, we can see it explored our codebase. You can see the API server is a blank slate. The database schema is empty and there's no front-end artifact yet. I'll plan this as two sequential tasks. We'll have the backend foundation first, then the front end. And since the front end needs to generate the API hooks to exist before it can be built, let me write the plan files now. And then now it's going ahead and it's writing out all of the different plan files within here. So within here, it has the proposed task. I can take a look at the plan. So it's really nice within here. I have the fitness app backend foundation. I have all of the different tasks. It's going to do the database schema generation. It's going to have an open API spec. We have the different endpoints. We have habits. We have nutrition. We have sleep. So on and so forth. It's also going to seed the data as well. And then we have the plan for the front end. And what's nice with this is we also have a description of what's out of scope. Right now we have things like authentication that's currently out of scope. And it's going to just start with the main implementation. Here we have the dashboard page, log workout form, log nutrition form, as well as the daily habits. So I'm going to go ahead and click start building here. And now one thing that I do want to highlight with Replet that is quite nice is they do have a checkpoint mechanism that's automatic. So at any point if you do want to roll back to a previous step, you will be able to do that with a simple click of a button. Now within here, what we'll see is it will begin to work through all of the different tasks. So it broke it into two main tasks. We have the backend layer, the data layer, and then we have the front end that's dependent on the back end. Once this is all set up, we'll take a look at our application is since they do have a mobile application is you will have an alert as soon as this is ready. If it is a longer task, don't feel like you need to sit on this window. You can walk away. You can close this window and you can circle back once it's done. Now, a really nice aspect of the platform is it will actually review and test your code. So, within here, you'll notice that sometimes it will test and it won't pass validation. And what it will do is it will automatically recognize that and it will continue to iterate on whatever you're building until it is actually correct. Say if there's an issue with a migration that it ran or maybe there's an issue with the API that it built, maybe there was a type-checking error, whatever it might be, if it runs into anything given that LLMs are non-deterministic and sometimes it does have errors, what it will do is it will just circle back and fix those errors as it goes. And now the one thing that I want to call out with Replet is oftent times because of that validation step is it will take a little bit longer, but you can be ensured that it has actually tested what it has built for you. So it will go through and it will do a very comprehensive test suite for what you're building within here. I'm going to go ahead and mark this complete now that this step is done. And now what it's going to do is it's going to move on to the next cued plan for the front-end portion of our application. So here is what it has generated for us. So I have the functional activity chart. So depending on the threshold of how much time was spent within an activity zone for instance, I have the different colors. I have the light pink for if it's under 30 minutes. I have within 30 and 60 minutes by the looks of it I have a dark pink and if it's over 60 minutes I have these black squares within the activity and what it's done is it's basically gone ahead and it's converted everything on the front end to now be functional. And then the other nice thing with it is it will also go ahead and it will test and validate what we have on the front end. Now where this becomes important is when you have things that are dependent on the back end it will become increasingly important to actually validate both of those things. So, for instance, if I were to go ahead and continue to add in payments or authentication or all of the different things that might go into the next step of the application, you will definitely want to make sure that all of those things are valid, functional, and secure. That's one really nice thing with the agent and the platform that they built is you don't have to worry about any of those pieces. Within the testing cycle, it's going ahead and it's testing out a handful of different features within here. I have the log workout button that it didn't originally have, but what I can do within here is I can add in, let's say, 500 calories. I can add in some notes. say I felt tired within this workout. I'll go ahead and I'll log that. And within here, what you'll notice is I have the workout types updating here for me. Now, if I go and I refresh the page, what we'll notice is we do have that persistent. So, that is an indication that the backend is in fact working. Then, further within here, if I scroll down to the daily habits and I click view all is what I'll be able to see within here is I can go and I can select all of those different daily habits as I go and I complete those each day. For instance, did I eat vegetables? Did I sleep 8 hours? Did I read for 30 minutes? No sugar today? Did I have the vitamins? All in all, you can see all of the different functionality working. So, if I take a look at the top two sections here for water and exercise, for instance, I can see if I click water, it will go and it will increase the rate of the number of streaks that I have for consuming water or for exercise, similar thing. I can go and I can simply click those buttons each day and I can see the progress on how I'm tracking on all of the various components that I have loaded up within the system. What's really neat with this is one of the ideas that I quite like with this is you can actually start with something that's helpful and useful to you. A platform like this, arguably this could be helpful to anyone. And as you start to flesh it out, what you could potentially do is you can begin to build this out for yourself and eventually actually expose this and it could potentially even be a product that you offer to other people. And the thing with this is you saw I basically went through a couple different iteration cycles. While it's gone through and it's built out a ton of different component pieces for us, the one thing that we have to remember is I started with just an idea. Initially, what it generated for us, I didn't quite like the design, but with a couple tweaks to the overall design style as well as the layout. Once it had that, it was able to take that design and actually make a fully functional application. It was able to create and figure out what it would need for the back end. it was able to deconstruct all of those different tasks as well as build out the front end and actually go through these iteration cycles where it would notice, okay, I need that log out button. I actually need these different functionalities as it's going through the cycle. All in all, the really nice thing with this is if you want to invite anyone to collaborate, let's say you have multiple stakeholders, you can invite them into the platform and they can collaborate with the agent with you across all of these different component pieces. So they can work on the designs with you, they can work on the web app. The other cool thing with Replet is you can now also generate videos as well as presentations on the platform. It has all of the different component pieces of what you might actually need to launch a product. Now, additionally, one of the really great things with Replet is you can go ahead and publish your application with one click. You can publish to a subdomain on their replet.app platform. What you can also do is you can set up your own domain and point it to that. Now, another nice thing that I do like with Replet is you can actually set up who can access the app. And there is an interesting sort of new space now where you can create personal software. And the one really interesting area that I've been thinking more and more about is what you can actually do is if you built software that's useful for yourself is once you have worked through some iteration cycles and begin to use it and seen all of the different things that you might not have liked or how it could be improved. Eventually, if it's useful for you, you can actually begin to productize it. And the one nice thing with Replet is it makes it incredibly simple to do. I can start with it as an application for me. I can publish it for myself. I can iterate on it. I can actually build the product itself instead of leveraging different products. And then once it's useful is I can actually expose it for other people to use as well. And and the thing with the fitness app is this is arguably something that everyone could potentially use. Depending on your idea, depending on the vertical, depending on whatever you're interested in building, Replet makes it easy to do all of the different component pieces. Now, additionally within here, what you can do is if you have different tasks, you can add them within your task list. All that you need to do is you can build out and have different tasks that you can queue up for the next task for the agent. And now additionally, one really nice thing with the platform is you can go and you can target different elements where you can actually deterministically edit them just as if it was a website builder. So other platforms like WordPress or Squarespace or Wix or what have you, they allow you to oftent times have these different plugins where you can manually edit things just like this. And what's nice with this is you have the option where you have the AI available or you can also deterministically change things out as well. All in all, what's really nice with the platform is as it's going through, it's building, it's validating your different idea is you can actually go ahead and play around with different component pieces as it's going and updating everything. The other nice thing with Replet is it allows you to scale and work on multiple projects at once. I have my fitness application. If I were to have another idea and I wanted to build that out, I could do that. And the other nice thing with this is if I go and I select design for instance, if I go within import from an existing project, the one thing that I do want to point out is you are going to be able to import projects directly within Replet as well if you'd like. If you have a pre-existing project on GitHub, you can bring it into the platform or if you have it on other platforms, there is the option where you can import that as well. Overall, I just wanted to do a quick look at Replet 4. Kudos to the team for what they build. It is quite an impressive offering as always from the team at Replet. But otherwise, if you found this video useful, please like, comment, share, and subscribe.