Replit Agent: From Idea to Live Web App in Minutes

--- type: transcript date: 2024-09-06 youtube_id: XC3RdivjzO0 --- # Transcript: Replit Agent: From Idea to Live Web App in Minutes in this video I'm going to be taking a look at repet agent this is a first look for me I haven't used this before so I'm going to plug in all of my financial information and then I'm going to hop back and we're going to go through some demos and see what we can do with it I'm going to go ahead and purchase here there is a little bit of onboarding here you can see deploy in minutes launch your apps we can launch your apps with just a few clicks we have $10 of flexible credits each month and 100 static websites we get four B CPUs 8 G GS of memory as well as 50 gigs of account storage and then 100 GB of outbound data transfer I'm going to accept this and let's just go ahead and try one of these examples here I'm going to use the stock analysis example that they have so it says I want to input a stock symbol and get a summary of financial data give me a table and a chart tracking the stock price and other key financial information use data from Yahoo finance let me download the table data as a CSV I'm going to click Start building we see repet agent is in Early Access the agent is an experimental product I will do my best to fulfill your request but expect occasional errors or unexpected Behavior we're working to improve the experience and appreciate your feedback as you put the agent to the test I'm going to go ahead and click don't show again and then here going to start when we put that in we have our chat interface it says absolutely let me propose what will build for you I've created a plan for a streamlet based web application to visualize and analyze stock data from Yahoo finance the app app will allow users to input a stock symbol view key financial data in a table and chart and download the data as a CSV would you like to review the details of this plan I'm going to say instead I want this built as nextjs while we wait for that we see that it also did ask if we wanted to add any additional features you can always make changes later but some of the initial ones were add multiple stock comparison Implement technical analysis indicators include new sentiment analysis for the related stock so I asked it to build a nextjs application and it says unfortunately that's not supported in the environment instead it's created a plan for a flash-based web application with vanilla JavaScript front end to visualize and analyze the stock data from Yahoo finance this approach will provide similar functionality to what you're looking for the app will allow users to input a stock symbol View financial data in a table chart and download the data as ACS would you like to review the details of this alternative plan I'm going to say I'd like the app built with a nodejs backend and a react pret I apologize I cannot use nodejs for the backend or react for the front end they are not supported in our current environment I've created a plan for a flask based web application with vanilla JavaScript front end to visualize and analyze stock data this approach will provide similar functionality to what you're looking for while working with our constraints the app will allow users to input a stock symbol view key financial information in a table and a chart and download the data as a CSV would you like to proceed with this alternative plan or do you have any other requirements that we need to accommodate so we'll go ahead and approve that so my wellet is a little bit of a surprise that I couldn't get a JavaScript environment and it really wanted to steer me towards this python environment back end let's see what it will generate on the front end so it went through and it started to configure the environment for us now we see that it's installing the dependencies that we're going to be using within our environment after a couple minutes we now see our application so I can say AAPL we'll click fetch data here and then we see this method is not implemented to check that a complete date adapter is provided so what I'm going to do here and what I encourage you with any of these new AI products is anytime that there's an error put that error within chat don't go and reach out to repet just know that the next step when you have an error is you ask the AI sometimes I get a lot of comments in my video on how to do particular things and I really encourage more people just ask an AI use any AI with the particular question that you have if it has the context of what you're doing and you feed it the error it will likely be able to eventually resolve it it might take a couple tries but just know that's probably the best approach when you run into any issues so it made some tweaks to our application it restarted the server now I'm going to try this again with PL which is the Apple ticker here we'll click Fetch and we also don't see anything again here so now we see that it cannot use import statement outside of a module so we're going to paste that in here and let's take a look at our project here so let's look at our static files here and let's see what it's doing within the app.js so the thing with this is while it's great to have vanilla JavaScript I think a lot of people will likely want something like react especially for their front end components now we don't see an error there I'm going to click AAPL again and there we go so after a couple tries it got it right for us and so while there was a little bit of friction there you saw how you might have to potentially debug something like this just keep asking the chat poke around try and find the errors now mind you you probably would have to have a little bit of knowledge to know where to look whether it's within the console or within the terminal to see where the errors are but look at this with just natural language we have an app and if I go ahead and click deploy the cool thing with this is everything's built into repli I can click Deploy on a reserve VM autoscale static scheduled in this case let's click Reserve VM we'll go to the cheapest option here and I'm going to click deploy the really cool thing with this is going to provision all the resources that we need we see that it's deploying it's provisioning everything that it needs it's going to go through the build phase the bundle phase and then finally it's going to promote it and then it's going to be live once it's live you'll be able to share it you'll be able to put a domain in front of it say if you actually have a domain for a website idea that you might have or a side project idea you can just easily plug that in as well this is very similar to something like cursor but the cool thing with this are a few fold and this is a different implementation than some of the other offerings out there right now repet is really end to end where you can start and build out projects you can work in here just like you would something like VSS code or cursor or what have you and then you can even go all the way within their platform and deploy it so if you take verell for example they have the vzer offering that does really great nextjs components and they're really great on the react side of things and the JavaScript side of things but in terms of local development or that IDE experience that repet has they don't have something quite like that they don't have any sort of features where you can code on the fly in these little ripples like does we do see that it's bundled and it's going through the promotion phase now in terms of the process and it actually running through provisioning all the resources building everything installing the dependencies in the local environment the first time that you set things up I did notice that it is going to take a little bit of time right so sometimes some of these dependencies can be pretty big depending on what you're doing and then the actual deployment process you can see it says we started 2 minutes ago all right so we see that it's successfully deployed to our stock summary track - developers digest and we'll open it up we'll try it out we'll click fetch data and there we have it so while there was a little bit of friction the fact that you can do all of this with natural language is really amazing so it built out all of the directories it installed all of the dependencies it provisioned all of the different resources really amazing when you think about it just think a couple years ago before chat GPT the thought of something like this would have been out of this world you would have thought that this is something that's years out I have no doubt that the team at repet will ultimately be able to support react applications nodejs applications to ultimately offer this to a wider and wider range of developers that are interested in this sort of thing mind you this is the first time that I have paid for rep I usually use other services AWS or versel or Railway depending on the project or whether it's at work or whether it's for the channel here or side projects this is obviously really impressive now the one thing with this that I will try in another video is I want to try and see if it already has a place to start like an existing application to see how well this agent works with existing code to try that out in a future video this I just wanted to do a quick demo of the new repet agent offering kudos to the team at repet this is really impressive stuff I look forward to seeing how this builds out over time otherwise I'm going to play around with this a little bit more I'll make another video over the coming month taking a look look to see at what I've figured out so that's it for this one if you found this video useful please like comment share and subscribe otherwise until the next one