Build a Full-Stack AI Web App in 12 Minutes: Cursor, OpenAI o1, V0, Firecrawl & Patched

--- type: transcript date: 2024-09-18 youtube_id: utEzCj5ASPY --- # Transcript: Build a Full-Stack AI Web App in 12 Minutes: Cursor, OpenAI o1, V0, Firecrawl & Patched I came up with an app idea after seeing a tweet that went viral and I thought I'd build a little project Consulting is dead I'm on a plane sitting next to a woman who works at a top consulting firm making a presentation for a Fortune 50 client chat GPT has written every single word in this deck what happens when clients find out they're paying Millions for chat gbt what I thought would be interesting is if we create a consultant report generator if we build out an app completely from scratch by leveraging some of the latest and greatest tools out there the first thing that we're going to use within this is we're going to be using open ai's new 01 model what's unique with this model is it's the first Frontier Model where how it works is it will actually think through the instructions that you give it then what we're going to be using is fir craw and what fir craw allows us to do is we can ping a URL and it will return a recursively crawled website for us we can specify how many pages we want it will go to that URL and it will begin to crawl the different links on the page and ultimately return markdown to us and why markdown is helpful is because it's like a succinct block that we can pass to the llm then I'm going to show you some tips on how you can leverage cursor to help build this out and then finally we're going to be using patched and patched allows you to build AI workflows to automate codee reviews docs and patches I'll show you that near the end of the video the first promp we're going to send in is create a react component for a consultant report generator we're going to be using tip tab we're going to have a random button with some examples and then we're also going to ask for a header and footer the cool thing with tiptop is it's like a light version of something like Google Docs or Microsoft Word nice gooey where you can create text documents the cool thing with VZ we'll see all of this start to stream out here we see Generate random report we can test it if we click Generate random report we see that we do have some of this interactive ability from tipt here we have the ability to Center things and some otherwise sort of basic functionality that we can play around with next one I'm going to say is above the tiptop editor let's have a input for a URL an input for instructions and a submit button all right so now we have our basic app we have our URL we have our instructions we have the ability to generate from the URL and then we can also generate a random report as well so what we're going to do is we're going to click this add to codebase button and then I'm going to open up a brand new project within cursor the first thing I'm going to do is I'm going to bun create next and then we're going to create it within this directory then once that new nextjs project is initialized we'll run this command from v0 and this is going to be where you can set up all your Shad CN Styles and all of that the really cool thing with v0 is if I take a look at the code here when you run that command you'll see if I go within the component that it's actually already installed tip tab so if I check out the package.json we see that all the dependencies that it used in that example it actually installed for us which I think is a really cool feature of vzer now that we have that I'm just going to start our development server here and then I'm also going to open up a new terminal for a couple things that we're going to also install here is the boiler plate for nextjs the first thing that I'm going to do is I'm just going to get rid of everything on the homepage here then I'm going to put this component that we just installed right within the homepage there so we see this now all locally we see the examples working now that we have that set up I'm going to command shift I within composer and this is where you can pass in the context of the different files so in this case we're just going to be passing in the component we got from v0 as well as the page I'm going to say I want to set up a route that returns HTML with the instructions and some mock data on submission and replace what's within the tiptop editor let's use op rouer instead of trying to do this within one prompt I'm going to show you step by step how you can start to flesh out an idea and make sure each little piece along the way is working first we're just going to send back some mock data here we see a route all set up and I'm going to say update my front end as well to handle the request submission and state update now the cool thing with composer is it can create net new files and then it can also edit your existing files that's what makes it really powerful because all of a sudden instead of copy and pasting code from things like chat GPT or CLA have this within your code editor we see that handle submit on the front end and then we also have that route from the first request now if I go back to our app and let's just put in a random URL and let's just say test I'm going to have that submission and then there we go so we have that response back now what we're going to do so we see within the reasoning model the thing that's different with this model from open AI is you can't use things like system messages or tool calls here I'm just going to paste in that example and I'm going to say I want to send in the instructions and ask for HTML from the model what it's going to do for us we see that it's taking in the instructions we're going to be using o1 preview and then instead of having that mock HTML now we're going to have an actual response back from open AI so now if I go ahead and I click generate report we do see that we will need some sort of loading State as well and I see Hello how can I assist you today now we know that mini is wired up I'm going to go over to the fir crawl example and what's different with fir crawl is they have this node implementation on how you can crawl the response but then what you also have to do is you have to check the crawl job what I'm going to do is copy a few of the examples within the documentation and I'm going to say now I want to use the URL from the request as well to use to crawl on fire crawl I'm going to paste in those examples here but you could also use the docs feature within cursor which allows you to index that entire page if you'd like but in this I'm just going to direct it specifically on these examples and then I'm going to say limit the results to five also at that if we just go through and read what it's doing here so we have a post request and the first thing it's going to do is we're going to initialize the fir craw client handle if there are any errors from our request and then once we have that we're going to make a request to the 01 model and now what I'm going to say is I want to send in the request from firw to open AI asking to generate a report back with the instructions results and the URL in valid HTML we submit that the other thing you will have to install both the fir craw SDK as well as open AI so you can just bun add both of those and then open AI just like that so I'll go and I'll accept this and so now if I go back to our app and I'll say WR a report on what this is we'll click generate report there we go we have this report from fir craw and another the next thing that we're going to have to do is if we just inspect this we do see that it's returning valid HTML within here but it's all flat right it's all the same size what we can do is if we go within the global. CSS within our project we can just ask for some some Styles I could say generate some broad styles for a tiptop editor for all of the base HTML elements that look great all submit that within our CSS and it can just generate some for us so alternatively you can go and just reach for some styles on the tip documentation here they're pretty straightforward it's basically what we're asking for we see tip Tab and then we have the broad HTML elements that it's targeting for each of them once this is all complete I'll click accept I'll save that out now it looks a bit better you can play around with it within here but the other cool thing with tipt is you can just grab this and if you want to put it within something like a Google doc it will have that structure all nice and laid out exactly like something you could start to build out a report from now that's done we're going to make a repository here we're just going to call this AI Consulting I'll make it public once I publish this video what I'm going to do is I'm going to initialize it within this project and then I'm just going to create my first commit here now I should see everything that I just did here but now what I want to show you so see we see the basic nextjs read me here I partnered with patch with this video patched is a platform where you can build AI workflows to automate code reviews docs and patches but what I love with this and if I go ahead and I click manage and I search for Consulting I can click add it's all within this gooey here you can also do this all within their open source project if you want to use your own llms what's great with this if I click patched and I go to generate read me and then I select the branch in this case I just have Main and the directory of where to write the read me.n now if I click patch what it's going to do is it's going to go through my repository and effectively understand what's happening it's running what's known as a patch FL it's going to go through the repository it's going to understand the context of what we just wrote and then it's going to generate a read meet for me one thing that I do find challenging as a solo developer is that it can be difficult to maintain all of the open source repositories that are paired with all of these videos that I have out there what's great with patched is instead of having to write read me or work with an llm to develop that remme with just a couple clicks I can generate that remme now if I go and I click details we see this generate readme patch flow ran and if I view the pr we see Patchwork PR generate readme and I can take a look at the read me here and it basically broke down exactly what our application is doing if I click view I can say looks great I'll submit this and then we can merge that polar request now if I go back to our code here's the read Mia generat this is a nextjs application that implements the consultant report generator it allows users to generate reports based on URLs and custom instructions as well as edit and format the generated content then it breaks down what the components are doing breaks down what the route is doing we see the inputs the outputs arguably this is a much better read me than if I were to type this out and it took seconds it even gave setup instructions how to install everything set the environment variables npm run Dev and then you can access the application on the default Port of 3000 and then it even gives you some deployment options the last thing we can do let's say we just want to deploy this and you want to deploy it to verell and I'm going to just say create a new project I'm going to call it AI consultant and then what that's going to do is it's just going to go and deploy it to production the one thing you will'll have to do on versell is you'll also have to add in the environment variables but then once you have that you have a hosted application there's just a quick example on how you can go from idea to deployment by leveraging all of these great new tools from patch to cursor fir call open Ai and vzer you can basically build to your heart's content in my opinion this is probably one of the funnest times to be a developer if you start to lean into all of these tools there's new things coming out every single day I encourage you to check out all of them but otherwise that's it for this video if you found this video useful please like comment share and subscribe otherwise until the next one