Your first application on Replit
1. Your first application on Replit
So now we're gonna get started with our first application on Replit, and I want you to use this as an opportunity to follow along with the ins and outs of the platform rather than the specifics of prompting. I'll walk through specific features and why I made certain decisions, but later in the course we'll discuss the in and outs of prompt and context engineering. So what will we build? Well, we're going to build our meditation application with some different breathing techniques and our nice guided display. We're going to start with a design. So I mocked this up beforehand, thinking through what I wanted from the final output, and from there we're gonna go to a prompt on Replit, where we'll start building. So when we open the Replit homepage, this is what we'll see. And you'll notice in the prompt box, I attach a screenshot of our design and I said: ‘Hey, help me create a meditation app. It should feature different meditation presets, like box breathing or timed practices with interval presets. Do research on popular meditation techniques for our app. The timer should be the core functionality. Make the app hyper minimalist to be distraction free and zen’ . And I'm gonna start the chat with our prompt. Off the bat agent's gonna configure our app and present us with a plan for what it wants to build. You'll notice on the bottom there, that agent will report its status as well as what it's thinking and what it's doing. So here we can see agent is searching the web. So now we can see that agent found some search results for popular meditation techniques and returned them to us to inspect. It also was able to discover exactly the specifics of those techniques, and now it's coming up with a visual preview of our application. The visual preview is a version of our application that helps us understand the design that agents can use when it's building out our app. You'll see code streaming in. In the visual preview box, and then agent will start building that display in real time. You can also see the features that agent plans on implementing here on the left, as well as remove any features that you might not want in your application. From the display on the right, it's starting to look like exactly what we'd asked for, so I feel pretty confident in this. I'm going to approve the plan, and agent will continue that visual preview and then start building once it has enough information from the preview. Now, while agent's building, we can talk through some specifics of Replit. So what you might notice is that the Replit workspace is relatively simple, but an important point is that under the hood we are writing code. So at any time you can pop open the file system to see the files. That agent will start writing once it's built on our application. We'll leave that open for the moment so that you can see them as they start being written. At the same time, there are a bunch of tools in the Replit workspace that we'll talk through as we build out our app. Those can be accessed by clicking the plus icon and selecting the name of the tool or searching from the search bar. Search can also be accessed through this search icon up in the top right. The bottom left is our chat interface, and that's where we'll be doing most of our work in this course. You'll notice that there's a build and plan Toggle. Build mode is for when we wanna make changes to our application, plan mode is for when we want to ask questions of agent or learn more, or even plan out what we're gonna do in the future, as the name might suggest. There's also a button for attaching a file and some settings. If we look at the agent tools, we have access to web search so agent can search the internet, image generation so agent can generate images with the latest models, and app testing. That just means agent is gonna be able to test out the changes that it's making to our application. So taking a quick break there, you'll notice that all of these files just got populated, so agent is now writing the code for our application, we can see that in real time. We'll close this for now. We have some other tools here, which are called dynamic intelligence. That includes extended thinking and high power models. These are just fancy ways of increasing the amount of compute and thinking tokens that the models will use when they're building out our application. Those come with a higher price, so be wary of that. Now we can see that agent is writing the files for our application. We'll come back once agent is done, building out our prototype and talk about what we got. So now let's take actually an important break here and look at what just happened. So there's an error here it says React is not defined, but agent can actually see that error. It has access to the console and it's noticing that there's a React import error. So it's gonna fix that LSP error, just that language server error, and then continue building out our application. So now we can see the app looks like it's working, so this is an important point to make. Agent is actually understanding errors, looking at the console, understanding what's going wrong, and then fixing those errors pro-actively to get us to a point that works. And that means that it's actually taking some of the hard work of testing and debugging your application for us. That's something we'll still need to do, but it's really nice to know that agent is gonna handle that in some cases. Now we see that agent is actually reviewing its own code and thinking through what it's gonna do next. And now a really new feature in Replit, you'll see on the left that agent is starting up a browser with our application inside of it. It's really amazing, and then it's gonna test our app for us, so you can kind of see the cursor there, you might see it jump around as it clicks buttons. This is brand new. It's something I don't think any other app really can do, but it means that it takes all of the hard work out of testing things yourself. We're still going to test it, but you can be more confident in a final output once agent is done testing your application. So agent completed our application, and what you'll see is that we got a checkpoint. So at any time we can view the changes that were made in a checkpoint. You can see that a lot of changes were made because this was our first version, as well as roll our app back to any version. So as we're building with Replit, you don't have to ever worry about losing your work, and that's important. Now, just because agent tested our app doesn't mean we shouldn't test it ourselves and see how it works. So I'm gonna take a look at my meditation app, and I'm gonna choose a practice here. We'll say box breathing, then I'm gonna select play. So we have our inhale guided behind our timer there. We have our hold for four seconds, and then let's see what happens on the exhale. So the app is functional and I quite like the display, but it's difficult to read because our guided section is behind the text. In the next section, we'll talk about how to debug our applications, so stay tuned.2. Let's practice!
Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.