Build a Full-Stack App with Cursor AI, DeepSeek R1, Sambanova, and Firebase
Other Videos📅 2025-03-31
Transcript
[00:00] we're going to go ahead and build out a full stack application in today's video we're talking about zero lines of code all the way to fullon deployment in this video I'm going to be using the tech stack of samb NOA here as they've just released a pretty cool new feature here of deep seek R1 that we can access through API so I love me some samb NOA so we're going to be checking out s NOA here we're going to be integrating their artificial intelligence we'll be using Firebase as our backend and then today's code editor will be cursor AI does that all sound good let's jump in today's video Welcome Back y'all today's video
[00:30] is sponsored by samb NOA they hit me up and they like Corbin we have the fastest most efficient API endpoint when it comes to deep seek R1 you got to do a video and I'm like all right let me see if it's real it's real so that's what we're going to do today as you know with the style of my types of videos is I don't typically like just chucking you in the middle and you being confused like Corbin how the heck did we get here so this video is going to be very in-depth we're going to do all the way from a new project in cursor AI to the end value point of a web app that accesses artificial intelligence we're going to create something really really cool here I'm going to show you how to
[01:01] laser in this deep seek R1 provided by Sova here in order to ensure consistent outputs at scale for the type of value you want to provide your own consumer we'll also dive into the implications of how to even code this all out using artificial intelligence so if you have little to zero experience in coding don't worry we're definitely in a new age now when it comes to developing and what I like to call logic based coding where in theory you could really code out a full stack application if you just know the underlying logic associated with software AR ecture but that's what we're going to learn today so let's do
[01:32] it in this video we're going to be using cursor AI but in reality we could really use any type of IDE VSS code wind surf everything about the board so the steps and processes you're about to see can apply to any integrated development environment everyone just wants to be special so we'll use cursor because as we know cursor there's a lot of people that love cursor okay they love it so we're going to check it out and we'll use a nice little sound Bova here for that deep seek R1 access this is pretty efficient stuff here it's pretty cool as we know deep seek came out pretty recently here kind of really you know
[02:02] upset at the market when it came to AI so let's use it let's deliver on that deal come down here to your bottom left no problems we're going to go to terminal here and first off we need to essentially create a folder and when I say folder I literally mean folder like when you right click on your desktop new folder that's what I'm talking about here now to do this in code in theory I don't need to do this in code but it's cool for you to understand the commands here we're going to do the command of mkdir in your folder name so that is a command right there and we're going to put in the project name right here don't worry if you're on Windows and Mac just
[02:33] simply take that command S A be like what is the equivalent version of this and you can do that throughout the entire tutorial as well in today's video I'm going to call my project simple script and you might be saying to yourself why are you calling it that it's because the web app I want to create is going to be pretty in-depth and I think the purpose of what I'm trying to show you here today is one how to do it from scratch but on top of that show you how to get consistent outputs for a very specific use case so this use case is going to be creating movie scripts pretty cool boom so now that we've created created that folder we're going to simply just open it so I'm can go ahead and drag this down here and
[03:04] we're going to hit open a folder what I would suggest you do is simply search the folder name here and hit open first stage is down this is where we're going to have everything for entire code repo in here when I say repo I'm talking about repository it's just a fancy way of me saying code folder now that I've opened up the project like this all we need to do now is simply come back down here and anytime we open up a terminal lucky for us it will automatically just ignore that it will automatically be cded or we'll be basically doing terminal commands within that folder so
[03:34] here's going to be our Tex stack for this video if you don't know what a Tex stack is that's basically when we create something if I'm creating a cake you need your eggs you need your butter you need a mixing with that flour you know all the good stuff for software development and web app development iOS development mobile development we call them text TXS it's basically how we're going to create our application and essentially for this video we're going to do a react based front end I say front end that's what you're viewing right now that's your end we're going to do a Firebase backend so when I hit a button it does something communicates
[04:04] with the cloud gives us information and then the major part of this TCH stack that's going to give the value to the end consumer will be us using samb Nova here and specifically the endp point of deep seek R1 as is very efficient and very fast when it comes to latency you're going to be pretty impressed here it's pretty cool so the first question might be is Corbin how the heck do we create a react based front end what even is react don't worry it's just like one of our packages when it comes to creating cool looking UI user interface what I'm going to do is I'm going to put like a little Google doc in the description you're going to be able to get like a bunch of commands that you may need to run if you're completely
[04:36] fresh decoding but for now for me to effectively run this I'm just going to do the command of MPX create react app dot there is a couple possibilities here you could run this command and it could give you an error saying no JS doesn't exist doesn't recognize command Etc check out that Google doc you can also leverage cursor's little AI integration here to chat with it and see what the heck's going on for now though let's create a react app enter it's going to ask do I need to install these packages I'm going to hit why enter using react
[05:07] as your front end is completely free this is open source it allows us to create really cool web apps and softwares on this framework I think that's one thing you learn when it comes to web app and software development is that a lot of your Tech stack can be based on open- Source packages which is pretty cool so here we go we got a react Bas app if you don't know how to even handle a react Bas app let me just show you how to render it first when I say render basically for us to visually see it on a website like when I search it up like where is this code where does it exist which is like probably one of the most frustrating things in any YouTube
[05:37] video is you kind of just jump in it and you're like wait wait wait how' you even do that let me show you how I did that so right now when we actually render our application it's going to be in our appjs so for example here just you know this might be look a little crazy to you but learn reacts we should see that in our rendering so in order for us to render the command is npm start now I'm not just pulling these out of my brain like where you getting these commands are you you making them up you can simply just talk to chbt AI any type of AI model and it'll give you a bunch of commands that you can leverage for now we're going to do mpm start this is going to launch a specific type of link
[06:09] that you're probably familiar with and that specific type of Link here is going to be our Local Host 3000 and as you can clearly see edit your app.js save and reload to get changes reflected so for example I come back here learn react Okay add that little okay and boom it's right here as well instantaneous changes this doesn't exist anywhere this only exists on your local machine therefore if you are like yo I got a cool app you send this in your group chat with your friends they're not going to see it they're going to see nothing our front end's done and before I even entertain
[06:40] creating out the front end to make it look good let's connect your back end today we'll be creating our back end with Firebase now the reason I'm using Firebase here is that it's a pretty full flesh toolkit here and it gives your web application if you want to take this to the next level a ton of functionality for now though create Firebase project we're going to enter in our project name here I'm going to do simp script here and continue for me I'm not going to enable Google analytics but that's up to your discretion create project I'll also point out that if you decide not to enable it now you can always enable it
[07:11] in the future it's just easily you can add it to the code we are creating a Firebase project I'll also point out that the actual name of the Firebase project it doesn't have to be the same name as your local folder of simple script I just chose that hey continue let's go ahead and just set up our web app so we're going to do web app here web app name for the app Nick nickname I'll do simple scripts I'll also set up the Firebase hosting because you might as well Register App when I see Firebase hosting that's what allows us to then put this on a live website link that you can send to your friends in that group chat and they'll be like yo Corbin this
[07:41] is cool or Timmy or Jimmy Samantha whatever your name is if I got your name let me know in the comments Tom from here though let's go install our back end so first thing we want to do here is we're just going to command copy this npm install Firebase so coming over to our little terminal window here we're going to create a new terminal window which is simply just hitting this little add button right here and we're going to do that command mpm install Firebase all right perfect we have installed Firebase here the next step of what we're going to do here is we're going to go ahead and create a new file
[08:12] here in our source we're going to right click here new file firebase.com that you might be like Corbin then why do I see it don't worry this is this this will be deleted you won't be able to get access to it you can try come back there rb. JS we're going to paste it over and save all right here we go next finally we need to install the
[08:42] underlying tools now each tool may have its separate little command situation here which you'll see pretty soon here for us we're going to care about the initialization on hosting this going to allow us to give us a live website link that anyone in the world can access come back over here same little terminal window same little Comm oh not there right there MBM install DG Firebase tools hit enter so once that's done we're going to hit next year and this is where we get to the final stage here as with any web app what we'll do first is we're just going to deploy the hosting let's just see if we can get a live
[09:13] website link here because I want to leave Local Host 3000 okay no more Local Host I don't like the Local Host we want the live website link here what's nice about Firebase here is that we get a free little web app link that we can use just right away Out of the Box Etc so for me because I'm probably logged into one of my other accounts what I typically like doing and what I suggest you to do in any type of development environment EG let's say you're working out on Monday you leave and then like you come back Thursday always just start with Firebase log out and then as identified by the documentation we'll start with Firebase login what is this doing this is basically making it so
[09:45] that within our local repo right here we know we have access and connection to this Firebase app we'll then be asked this little question here hit why so once you hit why you're going to get prompted for which Google account you want to proceed with choose the Google account that you s set up in Firebase don't choose a different one so I set that up with contact at webcafe ai.com I'm going hit continue you'll then be prompted with this message hit allow and to confirm that it's successfully connected and you have access to your project within your local repo you'll get a message like this now that we've done that let's go ahead and initialize
[10:16] everything we need in our app so we're going to do the next command here of Firebase init and it might Shimp in the babby sh on the bab what you'll notice is you get a little file here of Firebase debug.log we like that the next thing we're going to get asked here is a bunch bunch of different questions so we're going to use our up and down on the Arrow key and this is how we're going to initialize different features within Firebase so the one that we care about in this video is going to be hosting so we're go to hosting here I'm going to hit space hit enter we're going to use an existing project because we set that all up already we are then going to use Simple script which is our
[10:48] project we created perfect enter again what do you want to use as your public directory public fine configure a single app Y is fine and for now we're going to hit no for GitHub and then it's going to ask public SL index.html already exists over right I'm going to hit no and then after this we just do Firebase deploy enter sometimes when you run the Firebase deploy command you're going to get a white screen you be like what's going on Corbin did everything you just showed me typically what that means is that first off make sure you run the command of mpm run build mpm run build here is what's going to compile and
[11:19] create our react front end just compile all that code ready to go from here though we got to make sure we change one line line number three public change this to build once this is build and you do Firebase deploy you're going to see your nice little live website ready to go coming back to our Firebase project if we go to hosting found in build here we are then able to see all of our deployments associated with every time we do Firebase deploy for hosting this is useful as that if we do multiple deployments it's actually very fast how much we can roll back from a previous
[11:51] deployment so essentially what I'm saying here is that let's say we deploy we're like whoa this has broke the website we can come here and just roll back pretty fast so now with us fully deployed and being able to access a live website link let's start building out this front end here then we're going to connect our ability to Access samb Nova for those cool little AI outputs first off let's just make this look good so in this kind of workflow what I suggest you to do is have one tab open for Local Host 3000 and then the other tab will be just for the actual code itself we'll go ahead and do all of our logic within the
[12:22] app Dodge in theory we could create separate files here but I really want to show you the ability to connect and access that deep seek R1 so what I like to do is command a copy and this can work with any type of AI model but here is our prompt I'm going to say here is our code my pter app.js and then we also should be pasting in our CSS as this is visually what makes it look good and typically what I like to do is before I really dive deep into the code I will just start off with giving the relevant code that I care about and then the next thing I'll say is ready to see what I want to do
[12:55] question mark enter because sometimes if you're just loading code the AI model will just start rambling and we don't want that we don't like that so let's make sure we don't do that so here is Phase One let's just get some code let's get a direction we need to update this code to match our product we had in mind it should be a modern UI that allows us to use to put in a prompt and get an output our app will be for creating scripts in called Simple script please give me all the code entire JS and CSS file that last line is very important enter these are typically not one shots and done the code I'm about to get right
[13:26] now I'm going to have to give little tweaks so I'm going to show you how to tweak it as well for now let's just get this entire code and paste over so what will happen is especially with dealing with front end development is that it will just set fixed variables because it doesn't really know what to access yet so we'll do things like what is the prompt what is the output everything of that nature but I'm going to go and copy this code here come back to my Js and just command a paste over save same with the CSS scroll all the way down copy come over to our CSS command a command V
[13:56] save so with that saved here is application so far so what you'll notice here is that you just learned a very fundamental skill when it comes to logic based coding it's very much get an output here paste it over here do you like how it looks so for this example let's say we're like you know what this looks good but in theory I want to change the color of this button so here is our next prompt I want you to notice two major things you can ask for very specific changes I like this but for the color of the button can we do it dark but you can also ask for very ambiguous changes also can you add a nav bar and make this page look even more awesome
[14:28] what does even more awesome even mean who really knows we let the AI interpret that and see what our code looks like enter we got our JS paste over and we got our CSS here we go this is what we have not bad we got a nice little darker UI button add a little kniv bar here and we got welcome to simple script so one last thing I want to do so we can give a little context to the user when using our web app here is example prompts so what I have right here okay add a new section above the prompt input for example prompts and have them change every 10 seconds use an example prompt write a cinematic scene in proper
[14:59] screenplay format a grizzled detective interrogates a malfunctioning robot in a rain soaked Alleyway etc etc I'm going to hit enter idea being that whatever your vision is you have to communicate that through text and you can get some really cool outputs here I'm probably going to increase that 10 seconds to like 30 seconds so it isn't always just looping like crazy but you'll see what it looks like so we're getting all our code here you can see the example prompts right here we have the ability to change the underlying 10 seconds right here and we're getting all the JS here we go so now the user when they come to simples scrip.com can be able to
[15:32] get more context before they even put a prompt they can see what example prompts look like and it just changed pretty cool pretty cool so just as a test here to see what the output will look like we can put anything so we could do hello as it is not connected to S NOA yet there we go our generated script is hello no good let's connect s NOA first thing we're going to do is that we want to connect this securely so how do we do that Corbin we're going to make an EMV file new file. envv is where we put highrisk variables an example of a high-risk variable which you're probably very familiar with is an
[16:04] API key as if anyone accesses your API key they can charge you too and you don't like that we don't like that so we're going to create an API key or we're going to create an EMV secret variable for our API key coming over to samb NOA here we're going to select our model of deep seek R1 what is also really cool about s Nova is that we have the ability to actually just use their playground to interact with the model to see if that is best fit our use case they have a ton of other options as well which is pretty cool they also have a whole section dedicated to AI starter kits that help you build a lot faster such as a pre-built Financial assistant
[16:35] you can hit the demo check it out and a lot more but I really wanted to check out deep seek today as a lot of people be talking about it so let's see if it's any good we're going to generate a new API key I'm going to hit confirm and I'm going to delete this key so you can go to take it if you want and make sure to copy save that in your notes somewhere and let's get going here so the way I'm going to do this I'm going to call this through the front end and we're going to do it through a curl command so for you to best understand how to do this I'm going to create new chat real quick since CSS is not important in this context when we're making commands like this we're going to Simply do our app.js and fill that into a chat course you can
[17:07] use the cursor version of this as well if you choose to do so what I'm going to do is this here is our landing page same situation ready to see what we want to do enter and this next prompt here is I'm going to fill it all out we're going to have everything we ever needed ever for this web app first thing I'm going to do is I'm going to go to curl here I'm just grab all this information command C or just copy the code so here we go I went ahead and pasted that over so we say okay we want to create an EMV file to handle my secret key for all the relevant API code this is a react based app want to give more context have it so
[17:38] when I click and then I gave the exact code of generate script just the button within the button here I call this endpoint and I want the response display here and then I just gave the code for the output how did I know that was the output because it said output so I'm going hit enter first thing he's going to do is identify how we're going to reference our API key so we're going do react app secret key come in over to our EMV I'm G paste that perfect so once we got that we're going to scroll down here and we will have a handle generate function that's going to incur here best part about using AI to code and logic
[18:08] based coding is I like to just simply copy this code and let's just see if it even works don't have to read it don't have to touch it let's just see if it works command a paste over save you notice is that the specific part that's going to handle this code is going to be the handle generates we're going to be posting to the endpoint that's provided by sound button over there we're going to be refering seeing our secret key through env. reacta secret key that we've identified here and what this allows us to do is essentially you know access samb NOA with their API key so
[18:40] they know who to charge on a user based basis from here we're going to do our deeps R1 but let's let's just see if it works let's just see if it works so in theory I'm going to put in a prompt here asking what is the capital of Texas actually before we test that let's go ah and just deploy this to that live website link so all we need to do is firebeast deploy with that done you can look right up there that is a live website link let's check it out let's see if we get any errors here typically we could expect an air as this is a one shot go let's try it generate script we got an air the air we're getting is 401 unauthorized that essentially means that
[19:11] it's not reading our API key correctly from our EMV no biggie and actually when looking at the code here the reason I was getting thrown that error was because of the fact that the EMV file I had accidentally created within the source for that kind of file we don't put in the source folder we actually take it on the upper level of this entire directory so it knows it can actually ACC access that data and reference that data in a call like this so as you can see right here if I close the source folder it's right outside so with that done let's see if it works capital of Texas also I want to point out because I might have rushed through
[19:42] it a little bit fast here for you to see console loged when it time you do a console log in the front end right click inspect and you'll be able to see it with these little arrows console is nice for debugging so when you run into errors you know how to solve them generate script well let's just see if it works so it looks like it works but we need to obviously format this output so let's do that so when dealing with formatting and understanding the best way to get outputs with any type of API it's always nice to look at the API documentation so I'll leave the samb Nova API documentation in the description down below specifically what we're doing in this video is we're
[20:12] looking at their completions endpoint this includes very important stuff for us to understand and for the AI model that's creating the code to understand when it comes to different parameters we can pass so typically what I like to do is just copy the whole thing everything Corin everything so just copy this entire page each once you copy everything You' load that into a chat and then request specific Nuance features you'd want within that payload so for our situation we were getting like a Json type of output what we care about is we want a plain text type of output and make sure we avoid all the
[20:44] Nuance of thinking that typically occurs with high reasoning models like deep seek R1 so for us we're going to add a parameter here of stream equals false as referenced in the API documentation what we then have here is that we have either the users's prompt or if no prompt is provided it just defaults to the capital of Texas then we're doing our post here which is pretty nice and our payload is going to be what we just identified up here we're going to pass our authorization which is going to be a bearer secret key which we created earlier which is that secret key that is then found in that EMV file that's
[21:14] outside the source file or Source folder up here once we pass that we'll add a little bit of a console a here so if some situation happens that we need to figure out that is if no response occurs that's going to be like exclamation mark response. okay it's not okay then finally we're going to wait for the message to be received and passed back to us from samb NOA what's great about the Deep seek R1 model is that it is extremely fast like very fast so when I hit that little button you'll notice our answers come in basically instantaneously one thing that I personally removed is going to be the
[21:46] thinking logic from that payload so what do I mean by that is that this little line right here what you notice is that without this line it's going to add the thinking context before gave an output so just for me to show you what I mean if I just do final output equals final output I can go back to deploying this reloading the page here and simply do like what is an apple click the button and the reason I wanted to show this is that for whatever your application use case is this could actually be pretty valuable so the idea is that we get all the thinking the AI model typically does
[22:17] in a response given to us and then the response to the question itself okay the user asked what is an apple let me start by breaking it down etc etc and then typically what we see in an actual model respon response is this right here an apple is an edible fruit of males domestica I probably completely butchered how you say that idea though is that it's also giving it in markdown so we're going to see about rendering it correctly in markdown but for now we're going to go so I'm going to go ahead and remove that think part right there if you want to keep that go ahead it's simply just removing the text within the
[22:48] think tags so one thing you'll notice though is that with the current way that deep seek is rendering is coming in markdown text when I say markdown that's why you see asri Aster nutritional value asri ashter we can actually leverage this and create a pretty cool UI in a front end so let's do that therefore I'm going to go and give context okay our outputs are coming in markdown gave an example output and I'm going to say therefore let's have it so we can render this and mark down to do this we're going to Simply grab our JS file and CSS file in our app and paste over here and what this is going to do for us is that it's going to ask me to probably import
[23:19] a very specific package which I'm aware of there we go the react markdown package and watch this first off let's install the package copy coming over to a terminal here I'm going to paste that exact line npm install react markdown all right there we go let's paste our entire new Js file paste over and it seems like possibly we may not need to update the CSS but as you'll notice now with this new import of react markdown if I come down here it is going to wrap our output so it reflects correctly bold heading bullet points everything deploy
[23:49] again mpm run build Firebase deploy so we ask the same exact question here what is an apple I shouldn't expect a thinking block and I should expect to see some bold I want to see bold bold there we go that actually is pretty awesome so with react markdown we got like the nice little bold going on here and this just you know looks way more official for our type APPL we're looking for here pretty nice but let's go ahead and create our web app value which is simple script where we provide a prompt and we get a full-blown script so to do this we are going to come back up to our
[24:20] samb NOA API here and we are going to add some system instructions here so let's go ahead and do some prompt engineering 101 what is this system what is the user system in this context is how we're going to give the underlying model here being deep seek R1 it's sop standard ordering operating procedure basically every time a information comes in how should it output the generic one is typically you are a helpful assistant this is just so it covers all bases math English everything although I went and
[24:52] created one for our specific use case here and these can get pretty lengthy y'all so check this out this means that every time a prompt comes in from the user is going to reference this system instructions here so let's walk through this and I think this will give you enough context of what you can possibly do with your system instructions keep in mind this is formatting outputs this is words you want to use in every single output everything of this nature you are a screen writing assistant all output should follow standard screenplay format screen headings all caps egx forest-
[25:23] Knight we're given examples within the system instruction action lines present tense describe setting and movement character names centered and in all caps dialogue under the character name properly indented and finally include camera directions emotional tone and visual details when relevant this is supposed to be your one siiz fit all this is our version of fine-tuning the model so we get consistent outputs at scale so then becomes the next idea here of the actual prompt itself obviously this is up to people's Discretions so
[25:55] therefore in theory The Prompt could be anything like like uh what's the weather today everything of this nature but the idea is that since the web app is designed and showcases like hey this is for script making provide a script-like prompt so if we come back over here that's why we give example prompts to give the user the idea that oh this is the correct way to format a prompt to get the best kind of output let's see if this works this is going to be awesome all right here we go we have some promps here I'm going to choose one of the example ones here all right let's try this one create a fantasy scene in a
[26:26] screenplay format a ro in a cursed night argue besides a glowing portal you seen heads Vivid action lines character names and stylized dialogue include emotional beats and cinematic description generate script all right here we go this is awesome this is super cool y'all all right so obviously I think one fundamental thing that you can take away is use markdown right markdown is a very powerful package that allows us to get this nice little bold heading uh you know all this little like little Nuance
[26:57] stuff that makes the output just look better in the front end let's read a little bit of this script though let's get an idea of this little web app of simple script they should they should hire me to be a narrator okay I got to start narrating the sky bleeds Violet and gold a crumbling Stone Archway etched with forgotten runes hums with a energy a glowing portal swirls at its Center a mous storm of emerald and sapphire Light Shadows cling to the ruins like smoke lra a little elf with ash gray hair and a scar Crosser cheek
[27:27] pastes is like a caged wolf her dagger glint in the portals Eerie glow across from her sir grick a huling knight in black and Blade armor stands rigid his visor is cracked revealing one glowing blue eye in a jawline rotted by a creeping curse okay Thea voice sharp as a blade you rather R here and then face what's beyond typical she gestures W I know a little crazy okay she gestures wildly at the portal it postes
[27:58] casting Jagged Shadows over the runes cigar rasping metallic all right let me try this you think it's you think this is rot clenches a gauntlet I've seen what lies through the gates like these slow and bitter it's not salvation it's a shop of Hell lra steps closer her eyes blazing the camera trickles tracks in that's cool it got the camera situation like if we actually want to shoot this catching the faint Tremor and Garrick's sword hand
[28:30] scoffs spoken like a man who's already dead leans in vinous leaning in your curse is are we has this video turned into theater uh your curse isn't Magic it's cowardness okay I can keep going on here but you get the idea pretty cool right leveraging samb Nova's deep seek API here we're able to get pretty fast results here we're able to leverage a react frontend and get the whole sheam therefore we just learned how to buil out a full stack application with complete artificial intelligence using
[29:02] Firebase samb Nova's deep seek API and as we already know cursor AI the user can simply come to your live website link actually use the tools on the website which is awesome and in this video we went over and created that simple script which creates movie scripts that we can use that just about does today's video I'll leave all the resources in the description down below you can go to sign up to samb NOA for free it should be one of the first links down there let me know what you think did you like the script did you like my narration should I be in movies should I should I do theater maybe maybe not I'll
[29:33] see you in the next video deep seek R1 Samba Nova two random videos that's my face I'll see you in the next video