Transcription
Anyone that follows this channel and knows me knows that I love Replet. I've been singing their praises since over a year ago when I discovered it. It's often my go-to platform before bringing it into Claw Code. And that's why I'm really excited to tell you that Replet have sponsored this video.
We're going to go from beginner to pro to expert usage of Replet. We're going to start off with something very basic, an hour of usage, where I'll show you how easy it is to get an app up and running. Then we're going to take it to the next level, dig a little bit deeper into the UI and understand the files and the features that it has to offer. And then we're going to go to expert mode where you're going to master the UI and understand some of the more hidden features that most people just glaze over.
With that being said, we haven't got much time, so let's get cracking. All right, here is Replet. Now, links to everything will be down below. If you do want to get started, use my referral link. Of course, link that below as well.
But you'll be confronted with the usual AI prompt interface here. And a few things I want to pick out. Now, you've got two versions here. You've got design and you've got app. And under the hood, Replet uses Gemini 3 for its design mode. Anyway, now low key, design mode, I think, is for developers who are quite frankly a bit rubbish at design because it puts a lot of care and attention, a lot of its focus in the overall design of the app. It's not hooking up anything in the back end and this and that. And that's that's why I think it's good for developers because they don't get a head start on all the integrations and things. You can still of course prompt all that, but like I say, the design mode, it it just builds out the design and then you're left to then hook it all up later on.
App I personally think is fantastic for most people where Replet is going to build a I think a fairly production-ready version of your app with a good balance of design and actual working integrations. And this is why I love Replet because it has a database, it has hosting, it's an all-in-one platform where you sort of don't need to worry too much about separately hooking up a Superbase or a Convex database. It kind of contains everything you need to get an app up and running.
So with that, this is where I begin to prompt. I'm going to go into plan mode because traditionally I've always used the plan mode to get it to really think about what it's going to do. I can then improve the plan and then we can get to building. So I'm going to go to that. You can upload any images, any inspiration, maybe a document, a PRD document. We'll get into that in a sec. Um to the AI here. We can also go into fast mode. Again, if it's a simple app or something like that, you can put it into fast mode. If it's a quick little Kanban board or something that's not really going to be like a SAS product that you're going to sell, go to fast mode.
We've also got some tools here. So, once again, we can select uh fast, but the uh autonomy is already pretty high. Um, app testing is built out of the box. Another great feature of Replet and it's going to test the app and you'll see it clicking around the app making sure it's working before it ships it. A really fantastic feature and we'll see that get to work in a little bit. We can go max but we're going to balance our credit system here. So with that, let's not back into plan mode. I like plan mode. And I describe my app in plain English. I don't try and be clever about the technology. I let the AI decide the technology that's best for the the product.
And what I'll often do with my clients is that I'll transcribe a call of them talking about the product, take the transcription, pop that into any sort of any any AI and ask it to create a PRD based on the discussion. So saying that I have a genuine conversation here with one of my clients talking about a HR application that they want to build. So what I'm going to do here is I'm going to say generate uh PRD from the discussion. So got a problem statement which is a an onsite HR system managing various SC staff. We've got some goals and objectives here. So all I'm going to do is take this and pop it into Replet.
Now I'm not kidding. I've literally done this whilst on the train into the office once. And by the time I got into the office, the app was built, the app was working. It was it was incredible. So, I know this can roughly take a, you know, up to up to 45 minutes, an hour to actually get this going on. So, kick back, relax, and we'll wait for the plan to be presented to us.
Right. And we're back with a with a plan. Let's take a look here. Including comprehensive HR platform system management for managing on-site staff temporary covered time time sheets and payroll for property sector clients role-based authentication again another great feature of Replet has built-in authentication staff database will comp with comprehensive profiles personal details document management HR document library for policies absence cover time sheet basic payroll this looks pretty spot on. So let's do it.
And what you're going to see here is the preview is going to show in this right hand uh panel here. This is a new simplified agent flow. In the advant in the pro section, we're going to dig deeper and go beyond this interface. So stay tuned for that. But as I say, this can take up to half an hour depending on the complexity of the platform. We're going to let it do its thing and I'll check in with anything interesting that shows up.
Okay, checking in here. Here we actually have some visuals going on. So we can got a little landing page here which is quite nice. Um we can well I don't want to click sign in just yet but what can we what can we do here? It's still working away. So looks like auth is working via Replet. Let's wait until the agent is done and then we can check in again.
And I think we're actually done. That took 14 minutes. So, a lot quicker than uh the anticipated one. But as I say, I think this is a bit of a simpler app. So, we should be able just to sign in here. And I have not checked this. It's going to ask us. We're going to authorize through Replet's own authentication system. And here we have a staff platform. Let's see if we can see if we can add a staff. Samuel Gregory test.com cleaner. Let's say hourly rate. That's fine. Add a staff member. So, we failed to add a staff member. That's totally fine. And in fact, actually, let's take a little look over here. Missing description field. That's just a warning. Let's look at the server logs. And we're getting an error here.
Now, I know I can probably just dump that into the agent here and get it to fix this. But this means anyone with a Replet email, Replet account can log into this and create a user and this and that. And what I think is great about this is that this is a dev. I could share this URL with you right now and you could go to it, but unless I've started it up, the the instance won't persist because it's in development mode. It's not until I've then deployed it that it will be available on a permanent URL and I can link a domain and all the rest of it that this this will be a working app.
And here's what I was talking about. So, it's going to run test. It's going to click on that. It's going to try and add a team member to get it working before deeming that it's completed. So, there's a little mouse there. Just recognize the sign in button. Signing in. It's like a little movie. We can just uh watch what it's doing, chill out, and watch it. use our website. And there you go. It's added. So, it's now going to verify and it's going to confirm that everything's working as expected. And it's got total staff, which equals one. And there we go. That's done. We can close that.
What And what has also done is actually make a checkpoint that we can roll back to. If we were to make a change and we don't like what it's done, we can roll back to that checkpoint. And this is just rinse and repeat. We use the app, we try and find where the bugs are. We we try and think like a user and we get to a point where we're then able just to publish this all within Replet.
So I just want to knock around the interface here and just introduce you to a few things. Firstly is the actual database. Now if we go into the database here, what do we do? We added a staff and we can already see there's one row to the staff member in there. Okay, we can add a record and add them manually like that if we want. We can give people login like this would be a silly thing to do, but we can also add buildings. There's the building that the test added. Time sheets. This is where you're going to inspect the data and begin to understand if there's an error, a bug, or or just want to change data really really quickly.
We showed you before that we've got some web view logs. This is on the front end, but you've also got server logs which are on the back end. Something's crashing, then definitely worth checking these logs. And as you saw, I put it in there. We've got different mobile We've got different uh mobile views to view the app in different um different size browsers. We can change the theme. Theme is going to be an interesting one where we can begin to adjust the the colors of the application all within here. here. So, if we we start to adjust the theme here, you can see that we've now we're beginning to change stuff based on this theme. Primary color background. See if that's the staff button up the top right there. Honestly, with a tool like this, I'm just going to discard that and use the theme that Replet built for me. It looks quite cool, but this looks fine for what it's needed for, but we do have themes there you can override.
This pops out into a new window. So you can again send this to someone. It won't persist as I mentioned earlier, but you can just see it in all its glory. And then down the bottom here, we can we can go back into plan mode or keep building. We can actually select elements here and say, you know, change this to rounded corners or we can even add those ourselves with the editor here. So we can make minor adjustments like this or just prompt our way to success. We can attach images to make changes or inspiration to make changes from go back into that fast mode as I said earlier. And we can even change the level of autonomy and uh the testing settings like we saw on that first page. So this is pretty much everything a amateur, someone who's just excited and wants to get building a Replet, this is all they need. Now, as I say, it's rinse and repeat on finding bugs, fixing them until you're confident your app is ready. Once you're happy with everything, we're just going to hit publish, prove publish, and your app will be live and ready for the world to see.
And it's published now at my URL. Can sign in. Right now it's using Replet auth and we're in and this is a separate completely separate database to the development database. So we're seeing zero staff.
So knocking back into Replet we're now going to start to dig deeper into the interface and understand it a little bit more. The first thing you're going to want to do is generally from a mindset perspective, you're going to start to narrow your scope. Rather than making big broad changes in the agent, making massive features, you're probably going to want to open the side panel here, which introduces you to the files that make up this project. going through here.
Attached assets are assets that were provided during you can see my initial prompt here was provided during the setup process. The client is where the front end of your application is. This is the UI. This is everything that gets displayed to the user. And if we go into source here, we've got all our components made up. And these are the components that make up the app which are used then in turn using components which are probably React components here you can see. So we've also got hooks and this won't be a deep dive on React per se. I'm just sort of breaking all this down for you. The libraries common libraries used across many files and then the individual pages here. So it's really clean really simple setup and then public is where you're going to store all your images and things like that. Most of the time the agent will take care of that all for you. But it's just nice to be able to understand what's happening here. So that's why I'm introducing you to it.
The server is where the express server lives. So just as a quick breakdown, someone goes to a URL, it first checks if there's a URL that exists in the back end. If it doesn't exist in the express server, then it falls back to the client and that's where the React takes over. And this is broken down pretty logically. You've got your routes here which make up the dashboard, staff ID, things like that. Um, how to access storage. Again, right now this this use Replet's built-in storage, accessing the database, setting up the database here, various things like that. And then shared are is the schema which are all of the data which is all the database schema the the values and the properties that go into the database schema that the front end and back end can both access and understand and auth is again something shared across both of the front end and the back end. So it's put in a shared folder.
The Replet file here is how Replet starts up which port it's on. Generally, you're not going to want to touch this stuff. And then you got the Replet MD file, which is a markdown file full of all of the information that your app, the agent needs to understand your app. Now, this is a good place to start to put rules in, things that you prefer, things that you dis, you know, if the agent has a a way of working that you don't understand, this is exactly where you're going to want to put it under probably under user preferences. Now, Replet will support agents.md. I think it even supports cla.md files. Um, but it also has its own Replet.md. So, you may as well chuck it in there.
The other thing I'm going to want to introduce you to, which will come into play a lot later on, is the tools menu. So, this is where you can start to access some of the more advanced features of Replet, including quick access to files. So, we can type in, let's say, auth here, and it will bring up all the auth files here. You can jump to them, have a little look at them, change them, whatever, if you should need to dig deep. If you're working with teams, you can add team members here with multiplayer. And that's kind of it from that standpoint.
Now, I mentioned a way that you're going to save money on Replet, and it all starts with the level of autonomy you give your Replet agent. The more autonomy you give it, obviously the longer it's going to take, especially with things like app testing and something specific here, expanding uh review scope to the entire app. Now, if we come down here to medium, if we knock back down to medium, when we want to work with specific files, we'll do we'll do the classic @ mention of that file. And this will bring the context of that file into the current chat. And then we can say update a line of text in this file. Similarly on the context in the context of context we can also create new chats here which will wipe the context and allow us to begin a fresh chat and not start to lose intelligence as we build up our chats very so it's very easy to get caught up in just adding features adding features adding features where we need to get used to just creating a new chat every individual task that we that we start.
So, we fixed adding staff members here, right? Um, let's find something that's not working. So, we can pick staff members. Amazing. Let's take some annual leave and let's put the start date. Okay, I'm seeing something here where I'd like a calendar um component to pop up. So, I might come up here and uh type absences and come down to this file here and begin to understand what the file is doing. Um, we come back here. It was record absent. Let's just search record absence to make sure it's record. So, it is in here. So, we can actually refer to this file now. So, if we go absences, um, when I add a new absence and choose the date, I'd like to see uh, calendar pop up. So, just double checking here. We're probably going to turn off app testing again, just to save on a few credits and to save on time. reference the file. I might go into I might go into plan mode, but this is a fairly simple task. We'll go into plan mode just to explain that. But this then starts to again be narrow focused, specific to the files. We're understanding the files and ultimately we're saving on tokens, not having the Replet agent do everything.
So let's see what it does. Okay, it didn't take any time at all. Just took a sip of my coffee. I can see that for the form currently uses the input date for this start and end dates shows the browser's native date picker. I'll replace these with Shad CN's calendar component. Sounds good. I need the to add the Shad CN calendar um uh calendar and pop-up components. Then update the fields to use a pop-up. Here's my plan. So yeah, fairly simple. I'm happy with that. Add popover date um date picker features. Add a calendar feature uh feature component. Use calendar absences. Looks amazing. Let's get started on that.
And while it's doing that, I do want to say as well, their app is absolutely fantastic. Both the web app, you know, even in Safari, it's very, very performant, but also the App Store app as well. Very performant, very usable, even on a small screen. So, you might want to go and check that out, too. Again, I've got referral links to everything down below.
And while it's working away there, I want to draw your attention to the sort of account page and more specifically the usage. Now, this is where it's going to show you how much you're using, where you're using that usage. So, yesterday we used the um agent quite heavily and we actually spent $6.78, probably a little bit of what we've been doing today. And you get depending on your plan, you get uh $20 worth of credit or whatever to spend. So we've got $18 remaining, $6.88 used, and it resets every single month. You will get charged on deployment and uptime as well. But again, this will be uh dependent on your um outbound transfer data, whether you have any reserved uh virtual machines, autoscaling as well, database stuff. So a great place to manage and understand all of your usage here.
So it looks like this is done. Can then review this now. Absences. Pick a date. Perfect. Can we even install that now? Let's go from this day to a week here. Holy bobs. Great. So again, we've made our change. We've been very specific. We're done with that now. Create a new chat. We don't need rinse and repeat here, but one thing that's really bothering me is the dark mode, light mode selector. So again, I'm just going to go into let's say app here. We can even maybe search. So um dark mode looking for something Maybe even there's a layout app.tsx. I'm going to go to app sidebar 2 dark mode switch is not performing well. The app sidebar does not change to a light color. We want the entire app to look harmonious. Also add system setting option too.
Now here probably going to want to have some testing, bring a bit of Playwright into it. And we can keep it we can keep it medium. I think uh we still don't want it to expand the scope. We just we know what we want to do and we can go into plan mode for that to see if it's going to actually do it. Don't need any of this. And we'll see what it comes up with. Cool. Sidebar problem in your CSS. The sidebar is set to dark. Both in light and dark modes, even darker. So when you switch light mode instead. Um, no system option. Here's the approach. Update the light mode. Sidebar to CSS variables to use light colors. Enhance the theme toggle switch three states and a drop down for better UX. Let's go.
So here's what we wanted. We want the test to take place to make sure it's doing its thing. Just saves us a little bit of time, I guess. Watch it full screen here to see make sure that it's working properly. So there the sidebar looks good. We've got light, dark, and system. Perfect. Nailed it. Cool. We don't want to republish.
The only thing I want to bring you to your attention, so you know that we've got the dev tools down here and we have server logs. What I do find myself going to is the actual console here, which is this the same thing. I just think it's a bit clearer and a bit more space to work with that you can flip between without actually having the dev tools needing to be open. One thing you might want to do is do the security scanner here. It's going to scan for vulnerabilities. This is actually quite a nice feature. It's using Semgrep under the hood, which is one of my favorite linters that I use. No vulnerabilities found. So there we go.
We've seen how the interface changes and how we can dig in to make our changes more specific, more nuanced, more targeted, which in turn saves money, but also allows us a lot more control over what the what we can do inside of Replet. Now, we're going to move over to the more advanced expert category, which we're going to start to break out of Replet's ecosystem a little bit, which by the way, I still strongly recommend. It's great to have authentication. It's great to have storage. And it's great to have databases built in. But in real life applications, we're going to want to interface with third-party services in order to scale the application and maybe use it with, I don't know, an iOS app or something like that. So, a more real-world use case. So, join us in the next section where we're going to dig in to the expert user of Replet.
Replet provides a set of really really useful managed services like Replet database uh app storage for data and files built-in authentication and even Replet domains. But as with all things you might want to integrate other third parties Work OS for your authentication or Convex for your database. This is where connectors come in. And if we look here, we've got a list of all of these connections that make it super easy to integrate these into your app. We've got things like 11 Labs for AI generation, speak to text, HubSpot for CRM needs, Resend for email, and even Spotify. So, if any of these take your fancy, connect them and you'll have instant access to them.
But what if we wanted a third party? Let's say let's do Work OS for your authentication needs. Now, I'm going to guess that the agent 3, which uses Opus 4.6, isn't so up to date with Work OS. So, this is where I might consider using an MCP like Ref or Exa, which are my personal favorite MCPs, which enable the agent to look up-to-date documentation on tools and technology that don't yet exist in its training data. So, if I head to ref.tools tools here and go to MCP. You can find the remote MCP URL just here. Add MCP server inside of Replet. Call it Ref. Give it a URL. Now we need to give it a custom header here called X-Ref-API-Key. and then my API key. We test that and save. It's active. It's good to go.
We're going to create a new chat here and we're going to mention Replet auth or mention all the files related to auth command I will toggle into plan mode and I'm going to say we want to move onto Work OS for our authentication use Ref MCP to research up-to-date documentation. And on that note, I'm going to add the X to MCP, which is also great at searching up-to-date documentation. So, we're going to take the URL. We're going to add a new MCP server. Test and save. We got that active now. And XAM MCP to research best practices. I also like to put this inside of my agents.md or Replet.md open in editor I normally say when using new tools or adding new features use Ref MCP to research up-to-date documentation and XAM MCP to research the best practices and we're going to hit plan and you can see it's using the Ref MCP.
So using the official docs Work OS SDK faring current setup uh we need SDK instead of node packet instead of password.js JS we're going to use the uh Work OS node package cookie pa built-in logout URL what needs to change request free secrets so this is something I'll need to go and get which I can go and get while it's building and it's even saying we can deprecate the sessions table so the plan tasks here get Work OS sign-in details from the user add necessary tools set Work OS features update sign-in switch Work OS signing system update user info update sign-in paths document Work OS sign-in changes and review and test the systems let's go and let's head on over to Work OS and here's what I love about Replet as well it gives a lot of guidance on how to actually integrate with these systems and it's telling us we need the Work OS API key the client ID key and the cookie path. So, I need three values from your Work OS dashboard. Work OS key found under API keys in your Work OS dashboard. Let's get that. There we go. Quick start is uh coming in clutch there. And then we need the client ID which is also there. Welcome cookie password. a strong 32 character password to encrypt session cookies. You can generate one by running this. So let's do that and command K uh go to shell and just run it inside of Replet and continue. Also make sure in your Work OS dashboard under redirects you configured Replet URL. We can get that under preview and here had a redirect URL there. What was it? It was API callback. Maybe ask us to log in.
So, it's asking us here if we want to add these secrets to the account so we can use these forever in all of our applications. I'm going to say not now, but you can do that. Here, I'm just reading through it all. So, it's cleaning up some stuff. No need to change. Restart server is running and responding directly. Returns 401 authenticated request, which is exactly what we want. Now, let me update the remaining tasks. Cool. We command shift B here. We can just toggle that off to the side.
Okay, the Work OS auth kit migration is fully complete. Replaced the Replet OIDC and Passport.js with Work OS orkit SDK. Session cookies middleware or flow user clicks login redirects to Work OS hosted auth page after login gets redirected back. So basically the same exact process. When you're not using Replet, you have to pop it out into a new window here. And so we get an error here. Let's give that a while into. Okay. When after I click log in, I get the following error. I like to put mine in backticks for some unknown reason, but let's see if it knows anything. I may have set up the redirects wrong inside of Work OS, but let's see what it says. Duplicate key. Looks like it's creating a new email that was already in. I'm guessing that if I had put in a unique email, it would have worked fine. And then we're just checking that out. Try again. And we're logged in using the new Work OS system.
And this for me is the bare minimum of breaking this out if you wanted to host it elsewhere because the database is still accessible because under the hood it's using Neon. It's only really the the authentication that means it's kind of fixed inside of Replet. Even though we've got checkpoints and the whole system inside of Replet is great for rolling back, it's still probably highly recommended to put it inside of Git. So again, if we hit command K and type Git, you can see that all of these commits are happening and they just sitting inside Replet.
So, let's create a remote inside in GitHub and we're a personal account. Let's just type it. I mean, what I didn't even check what it was called. Staffing HR management. We'll keep it private. Confirm the session. And so I've obviously already logged in on GitHub in this window, but of of course if you were not logged in, it would ask you to log in. And we're going to push that to GitHub. And here we go. It's inside of GitHub.
Now, if you did want to get this running locally, maybe you're going to use Clawed Code or you wanted to host it on a different server here. Search process.env. You're going to want to take the database URL to be able to access the database from a third party. The Replet ID, you'll need those, too. Just make sure you've got all of these environment variables. Some you can take from secrets. Others you'll need to log out. And this will give you all the environment variables you'll need to get this running on a separate server. Say you've got some sort of auto deployment from GitHub.
So, there we go. That is pretty much from beginner to intermediate to expert usage of Replet here. You saw right at the beginning we got an app up and running very quickly without really digging in to a lot of the UI. But if we start digging deeper, we start narrowing our focus. We start getting into all of the nooks and crannies of the software in order to get a better result, the more demanding our requirements are. Replet is a very very powerful tool and I'm I'm privileged to be able to work with them and sharing this information with you.
Let me know down in the comments how you're using Replet. If you're building any tools or if you have any questions about the software in general, hit me up and I'll respond when I can. So, that'll do it this week. Like, subscribe. Thank you to all my Patreons who support me directly. Until next time, keep on vibing.