Windsurf Masterclass: How to Build & Deploy AI Apps | STEP-BY-STEP

I have spent over 60 hours building AI applications using wind Surf and I can tell you now it is the best AI coder there is in this video I'll explain exactly why that is and show you different examples of applications that I have built going through step by step of how I buil them and how to deploy them first time with a very simple invoice analyzer so we allow users to upload documents and then select all the Different elements that they want to extract from the invoice and then have the option to download the extracted

information as Json or CSV files and then we'll be taking it up a notch building a Content repurposing micras application fully complete with user authentication super base integration tokens usage and tracking and also stripe Integrations for payments and not only that we'll also be looking at how we can actually deploy these Applications so that they're live for users to actually interact with and finally I'll also be showcasing an MVP application that are built for a client and this is a real-time translation messenger again fully complete with user authentication searching and adding of contacts and real-time

messaging and translations of every message and finally I'll also be covering 10 of the best practi practices and tips that I've learned along the way from working with Win for the past few weeks and if you're new to the channel hi my name is Ahmed I was a machine learning engineer now I'm a generative AI engineer and founder of agenic AI where we help businesses Implement these generative AI Solutions and automations I also have a school Community where I share all the different resources the templates and the code for every solution that I share with

you guys we also have a weekly Q&A sessions where people hop on and ask Different questions and share different insights so if that sounds like something that you might be interested in it'll be the first link down in the description below so with that being said let's get started with the master class so I've created this document here with over 50 different pages of step-by-step instructions all the different codes and prompts that I've used to build out these different applications it goes through everything Not just how to use wi but also setting up of super

Bas setting up of stripe and also for the first application how we can set up Azure document intelligence for the extraction of the different fields from the invoice and if you want access to this it'll also be in the school community and I'll leave a link to that down below so like I mentioned before these are the things that I'll be covering in this video with start off by looking at wi surve how it works why we Should use it and why is the best especially if you're an agency owner building different gen solutions for

customers we'll be looking at all the different features of wind surf the concepts and capabilities and what differentiates it from all the other AI coders out there and then we'll cover the step-by-step instructions of how to build applications the invoice analyzer the content repurposing application and then we'll be deploying and hosting one Of these applications and then I'll be giving an overview of the client application that I built the realtime translation messenger and finally I'll be covering the best practices and different tips and unique insights that I've learned from using wind surf in the past

few weeks so what is this new IDE that's taking over the space revolutionizing how we work with AI and build full stack applications so the company behind it is called codium and They've been around for a while now so they actually started off as a simple code completions extension that you can add onto your vs code for example and it just helps developers code faster however now they've released wind surf which is essentially the first AI agenic IDE and they've built this on top of the VSS code because VSS code is open source so so

it looks very similar to cursor and vs code but the back end is powered by agents and co-pilots and so they work And collaborate with each other and this is why windar is unique so they've released Cascade which combines the deep understanding of the code base from their original context awareness engine and given Advanced tools and realtime awareness of the different actions so that we can have a seamless powerful collaborative flow and this is some of the features that it has that makes it really unique it really does create an experience where it's almost like

Working alongside a developer collaborating on a project maintains continuous understanding of your actions so every time you do an update it actually gets updated so it keeps track of everything that you do it has the deep understanding of the entire code base again using the contextual awareness engine that they had before they've got an llm based code search so it's three times more accurate and at the bottom here we've got some of the Benefits for the developer experience and on the right we have the different tools and Integrations that it has access to so up

until recently wi didn't actually have the ability to upload images like cursor does but now with the latest update they've actually released this to so now we have the ability to add images and tell it to tweak the UI for example or build whole new applications based on images of different uis that you like and another Cool update is the one from anthropic where they introducing a model context protocol essentially it's a a new standard for connecting AI systems to different content repositories business tools and development environments and this should improve the output of the

models especially when it comes to code generation and I've actually partnered up with Winder so we should start to see the improvements real soon so first up we have the doc analyzer the invoice Anal izer and let's first actually see an action show you guys a demo before we jump in and understand how to actually build it step by step so starting off we have a very simple application here and we're essentially just able to upload PDF files of a invoice so here I've got a sample invoice we upload this so we have a PDF

viewer we're able to scroll and look at the invoice that we've uploaded and then on the right hand side here we have to define the different Fields that we want to extract so here I'm just going to extract three different variables we have the customer name the vendor's name the subtotal and we'll see if it does this okay and in the back end it's essentially using azure's document intelligence which analyzes the PDF file and then extracts all the entities here so we can see the customer name is test business which is correct uh vendor's name

is slic invoices which is also correct and then The subtotal it's $85 which is all correct and then we're able to download the data as Json file or a CSV file and then we just simply click save and now gets saved into our files as you can see it's very simple however something like this will take actually weeks to build if we're doing it from scratch whereas using something like wind Sur we're able to create something like this within hours right so now let's see how we got to this stage and look through all the

Different steps that we took to build out the application so what I want to start off with is the steps to creating the Azure account which is what we'll be using to extract the data from our PDF files and it's actually quite simple and doesn't require too much work so what we have to do is start off by creating a an account so we go to the link of portal. azure.com and create an account and for all the new users that sign up you actually get a $200 credit to use for All the different services

that they offer I one cover the actual creation of a new account but it's fairly simple and straightforward to set up but once you have that completed you'll see a page like this so this is the dashboard of the Microsoft aure you have all the different services that they offer the only one we're concerned about is the document intelligence service and to create this you might not see this at the top here so you just have to create On create new resource and then just do a search for document intelligence and the one that we

want is the form recognizer um so yeah this is the one that we want click on it and then we're able to create a new service and this is the page that it should direct you to we select the default subscription and then for the resource Group which is essentially just a group of different services that you want to keep together for one organization you have to create A new one but I have one set up for my agency the region you have all the different areas where the service could be hosted from and it's

just good to pick one that's closer to you so I'm going to do UK South for the one that I want and then we have to give it a name I'm just going to call it DOC analyzer demo and then for the price in here you should be able to see another option for a free tier if you created a new account however for me I have to select the Standard pricing tier and if we want to quickly look at the different prices so for the free one you should be able to do up to

500 pages free per month and then the cheapest PID here is $150 for 1,000 Pages for up to a million pages and then if it's above that it drops down to 60 cents per thousand Pages which is not too bad and next we don't have to worry about all the different settings here we can just jump straight to review and create and then finally You just click on Create and I will deploy the service however I'm not going to do that because I have a demo here set up already so once that finishes deployment you'll

see a page like this however if you don't you can go down to Resource Management keys and endpoint and this is essentially where we'll be getting the API key so we can just copy the first key here and also we need the endpoint URL and these are the two variables that we need later on to Connect our application with the Azure service and that's what there is to it so like I mentioned is very simple um once we have that set up we're now basically at the stage of creating the application so first we have

to create the nextjs application and you can do this by a simple command here and you run this in your terminal just copy and paste and this creates all the folders and files that we need as a starting point when building these applications We also have to install the library for Azure and we do so using this command here so copy and paste both of these paste them into your terminal and that should basically set up the basic structure and folders that we can then open up using wind Surf and start building our application to

speed things up I've created a wind surf prompt writer this is a custom GPT within um open custom gpts and essentially all we have to do is paste in the overview of The application that we're trying to build so let me copy that paste into here and essentially all we're saying here just giving a very high level overview of what the application does how the users interact with the application so they're able to upload their PDFs and then they specify the fields that they wish to extract from the invoice and run the execution we then

specify that it should also use Azure document intelligence service to Analyze the PDF and extract the data and then the extracted data is shown to the user on the right hand sidebar so we're giv it the basic layout as well here and then users are able also have the option to download the extracted data at the end we just want to mention the text stack that we want to use so here we're using nextjs 15 tailwind and Lucid icons so we send that through and then what it goes and does is create this instructions file

so this instruction File is basically going to be very key and we'll always be referring back to it when we're building an application so it creates a markdown file of the overview of the project all the different core functionalities and features that we want and it does this in a way that it builds up on each other which helps us break up the application so that we build one feature at a time test it make sure it works before moving on and adding more so for every feature it has The description and it has very

detailed steps of what it needs to do how the layout looks what the actions the users are able to take and then the text tack it needs for that specific feature and then at the bottom we also have the documents section so this custom GPT doesn't actually include the different Snippets what I'd like to do is actually paste in the Snippets of the documentations inside of the instructions file and I'll show you guys That in a second this will really improve the outcome of the generations from wind surf at the end we also have some

important implementation notes that it needs to follow so what we have to do is copy this file here this markdown file and then we open up wind Surf and open up the folder so just go to file open folder and then select the folder that we just created using the terminal and you should see a basic folder structure similar to this with a basic Application next year's application um and the first step that we have to do is create a new file in a root directory here call it instructions. MD and then we just paste

in the file that we copied um of course here I've actually pasted in the final one because what you have to do is the output from the custom GPT won't be perfect and I'd highly advise you to spend as much time as you can on this document here because this is what the model will essentially use we'll be Referring back to this document when building out the application so you want to spend as much time as you can here making sure all the features are correct all of the different steps are laid out in a

way that you want and some things you might want to take out or add in some new things and new elements it's very important to get this absolutely perfect before we even start building out the application and once you do that you also want to make sure by the bottom Here I've added Snippets of the documentations from the different services that we're using so the first one is for the Azure document intelligence so I just past it in a bit of information of what it is what it does and paste it in exact code that

they have on their documentations page and this will really improve the output from the model and we just trying to minimize the errors that we get and just increase our chances of success without Having to go back and forth error handling and troubleshooting and as you can see here I've also included a schema for the pre-built invoice which is the model that we use with the Azure document intelligence so essentially how it works is that the model has predefined list of fields that it's able to accept and these are the different fields that it will

extract from the do doucment so what we want to make sure is that the names are correct the data Types are correct and the best way is to just paste in the exact schema that the documentation gives us so that we don't run into any errors when building this out so specified all the different fields pasted that in and this is actually what we use for the drop down menu to allow the user to select the different fields that they want to extract from the documents and you might be thinking that this document is huge

with over 450 lines but essentially we Just want to keep everything in one place and we'll only be implementing specific sections at time when building out the applications so once we have that all done and ready to go we may finally go ahead and start building out the application so the first thing we want to do is copy the first prompt here um so we've done everything here and what we want to do is just copy this and this is how we start so we start by chatting with Cascade using the right Hand side bar

here and if you can't see this you just press command l or contrl l and that should bring it up what I'm doing here is basically just saying I want to build up an xjs application for analyzing PDF invoices to extract data users can upload invoice files specify different fields for extraction view the extracted data and the app also leverages Azure document intelligence what I'm basically doing is just copying parts of the overview here just to Really home in what we're trying to do and then I tell it to read and strictly follow the instructions

based on the instructions. MD file and then we're actually able to link that and make sure it goes and fetches the document and then finally I like to say I've set up the next JS project already the doc analyze folder um this is the original so for this one it will be the doc analyze demo folder um now let's build the first feature and then I just Specify the name of the exact name of the first core feature that we want to build out and then we just enter so it goes off does its magic

um as you can see it first analyzes the instructions file and let's just let this run for a little bit and then I'll come back so one of the cool Parts is that it has a tool that runs terminal commands so we don't copy and paste it into our terminal we can just do it everything from inside of cascade chat here and Even though it had errors it's able to just read the errors automatically go back and forth within itself without me having to do anything and it already suggested that we need to use Legacy

paer dependencies so we just have to click accept and it really does feel like just collaborating with a developer for example just you know going back and forth telling a developer to do this task it comes back says these are the errors sometimes it just figures out Errors and solves the problem by itself and it really shows everything that it's doing all the different steps that it's taken it's very intuitive so what I like to do is actually open up the application and test it make sure all the new generated content is accurate and it's

running correctly before coming back and accepting or rejecting the code that Cascade generated so to do this we just run this command on our in our terminal npm run Dev so this just runs Our application locally so we can test it and we just have to go to Local Host 3000 for this one which I've got opened up here amazing so the first core feature of the application was just a simple drag and drop of PDF files to upload them onto our app and then be able to view them as well so let's open up

the sample invoice and we have our first error so which is good let's go do some error handling so what we have to do is copy the error simply come back Into Cascade paste that in you notice I've still haven't accepted the changes um I'm just letting it know that there was an error and let's see what it comes back with I see the issue PDF is not properly except just do your thing man I'm just here to observe so it seems to be an issue with the libraries that it installed and the PDF worker

right so a l back and forth and just you know copy and P in the errors back into the prompt asking it to fix this essentially the Error was with the PDF worker it wasn't set up correctly um and it also changed the look of the application which is fine for now because we're not really worried about the UI at this stage but finally we have it working so we're able to upload a PDF and also view it so yep it's all good and this is very basic if it had multiple Pages we can go

next or previous so we have the basic functionality for the first core feature honestly there wasn't much that I was Doing it was just a bunch of copy and pasting of the errors exactly how they shown on the screen paste it into here and then it fixes the issues and then at the end of all of that once I was happy I accepted the changes and now we can see we have a bunch of new files and configurations that we've set up and I think we're at this stage we're ready to start the next feature

but before doing so what I like to do is you know once everything's tested and saved and we Know that the first feature is good to go it's always good practice to commit the changes so on this tab we have the source control and this is where we able to connect with GitHub and commit the changes so we upload all of our code onto GitHub and think about it like a checkpoint so we can save the current work that we've done upload it onto GitHub that way if we really mess up the code we have

a save point that we can refer back to and then try again so what We have to do is just give it so we just give it a message and hit commit the first time you do this you would have to publish the branch so actually the first time you do this you have to connect it with GitHub so it come up with a popup where you log into to GitHub and then essentially the first time you upload a new project we have to publish the repository so we can either publish it as public or

private and then we just give it a name and then hit publish this Will go ahead and upload all of our files into the repository so you can see here we have the first commit and we are at good point now everything's safe you can see there are no more changes shown on the folders and the files and we can now go and copy the second prompt for our second feature so another tip is that we have to always make sure we start a new chat whenever chat window gets too long this because the context

window gets filled up with all of this Rish all the errors which we don't really want and it can start to affect the performance of the model and you probably have noticed this like at a start it be really good by generating code but then the bigger the context window gets the worse the performance is so at every step we want to create a new chat paste in the second part of the prompt which is basically I'm just saying continue building my nextjs application um very brief description And then always always referring back again to

the instruction file saying then this is the instruction file make sure it's connected and then we implemented the first feature now continue and implement the second feature given it the name and this is a really key Point as well please don't mess up the existing functionality cuz what it really likes to do is just regenerate the whole code sometimes so we just want to make sure it doesn't do That every time we start a new feature so we hit send and now we wait and let it do its magic so the second feature was the

field definition interface and he just finished creating the field definitions file which has all the pre redefined fills that we want and we can see here that it's not actually correct so it needs a bit more prompting sometimes so what I'm going to do is paste in this command could you add all the predefined acceptable fills that the Model allows you can find a complete list in the instructions file so really making it very clear that it needs to use the instruction file specifically for this section and make sure to include all the fields exactly

as they're written with their correct field types so this should hopefully prompt it even more to really check the documentation section at the bottom where it the schema for the predefined fields amazing so we can see that it Went and actually did a good job of taking all the different fields with their right type and descriptions which is cool so I think that was the only thing we wanted for the second feature and it looks like we also wanted to implement the drop down menu so let's see if he actually did that let me just

refresh so as you can see it works it did it did the job we have all the different fields exactly we can add them and it shows it down below it's is a Very horrible UI usually I wouldn't really worry about this too much however because this is so bad we want to improve it before moving forward because once we start adding multiple features it might get a little too messy so I'll actually improve the UI before we move forward first I just also just want to make sure that the upload feature still works we

always want to test everything at every step you know just so we make sure that we haven't introduced any new Errors and everything that we previously done still works so yep that's all good that's all fine it's just about the UI at the moment so what I can actually just simply do is now that we have the image upload feature we can just upload this so we add image go to the botom add this one so we add the screenshot in I'm just going to say so I'm not saying much I'm just saying that the

UI is terrible fix it also make sure not to touch any of the Functionality and simply update the UI to be more user friendly let's see what that does right and while it's doing that we can also just really check the ones that is completed make sure it's only so this part here where it says return everything down here is like the UI um everything above is all the functionality so we just want to make sure quick skim and make sure it's only you know modified the UI part of the code and similarly here for

the second One this just added a new function to get the color and yep it looks okay has it finished um oh wow yes much better so we can see we have the upload here the viewer at the bottom and then we can add things here cool nice touch all right so we can actually move on and accept all the changes and we can start on the third feature data extraction with Edo document intelligence so let's copy The Prompt new chat I've already went ahead and did the commit before updating the UI so I'm not

going to bother to do that again so this part is good to go it's the same prompt again where this time we're just saying we've done the first two features now continue and do the third feature so it goes ahead does this thing analyzes the instructions analyzes the page and for this this one we want to set up the API to talk with Azure we want to see the extraction results um we want to include a button to run the executions loading spinner for the Progress and then here we have all the steps that it

needs to take um set up aure make a API route use the environment variables map the user defined fi to the schema Implement error handling so nice well-rounded feature that we want to implement here let's see what it does right so we created all of the different files that we need for this feature asks us to create the end file so let's just do that quickly and it's where we store all of our Environment keys and secrets so we copy this or just insert it and like I mentioned earlier this is what we'll be using

to connect our application with document intelligence service so we just need the endpoint and our key here which I showed you guys where to get that from and just let me go ahead and do that real quick cool so that's in there now and it also ask us to install some new libraries here just let it do that so we can save that because in this section The only UI component is the Run extraction so let's just check okay yeah we have that so we have the extract data button here um it's disabled because we

don't have data so let's add data on there add a few these and then we can hit extract data amazing oh it looks like we're actually also shown the data extraction so it looks like we've actually implemented the fourth um feature as well into the third feature which is fine but what I like to do is Just actually make sure that he actually done this correctly so I've got this prompt here and essentially it's the same thing again continue um with our application I've already implemented the first three features continue with the fourth one and

then at the end I I told you that most of this is already been implemented just make sure there's nothing missing and I won't bother starting a new chat or committing changes because this is essentially the Same the same feature here we just want to make sure we've implemented everything there's nothing missing test it and then we'll do the commit to GitHub right so it looks like the um a couple features that it wants to add let's see what it looks like let's add a file want to make sure this is all works before moving

on and another one strike the data nice looks oh and we can collapse the data as well perfect accept all changes now let's check this error That we have here so what I like to do is just copy this section whole section into the chat then hover over where the error is copy everything and paste that as well I don't even need to say anything like it just already knows this where the error is and this is the error he knows we're looking at the route. TS because this is what's actually highlighted at the moment

so it's able to fix that automatically sometimes if you make changes to a file and you Haven't saved it you wouldn't be able to actually go ahead and implement the changes so I just saved the file and come off it and just asked it to continue because it can't edit a file that hasn't been saved yet so make sure it's always saved right so you made a bunch of different changes so let's test it make sure it's still working and we have messed up anything oh that's nice so even got a little information icon invoice

ID that's working amazing right So we fixed all the errors we can actually go ahead and just accept all of the changes that it made accept all and just make sure we've implemented everything for this stage so yep we have everything here it's all working we can finally commit the changes so this is the third feature which was display of extracted data Sy the change changes now we can go on to CH believe the final instructions. MD enter and because this was in a really long chat window We're able to just you know add this

very small feature at the bottom here in the same chat so the final feature is the ability to download the data both in CSV and Json formats um we can have the download button convert the data into the chosen format then we're using blob and URL create object URL for the download functionality and that will essentially be the final feature that we have to build and then it's just about you know customizing the UI making sure It looks how we want it maybe add in a logo and add in a style that we like right

it seems like it's completed everything let's run our application upload a file sample invoice add a couple field customer name invoice date vendor name I really like this it's even better than the one I created initially extract the data I like how you know you can hover over the information icon and it gives you a bit of um information about the data extract data invoice Details invoice date other customer name even splits into different you know groups of data which is really cool um let's download Json file save that and then download the CSV file

as well just to quickly see what that looks like and what I'm just going to do is open them up inside of here actually so customer name test invoice date and then the vendor name and for the Jason we can drag this onto here as well very nicely put customer name invoice date and Vendor name so that's basically the whole application so you can see how quickly we've actually span this up um of course now we just have to worry about the UI of how it looks and actually what I want to do I want

to try this let's see if this works um I'm just going to paste in the UI that I created I'll just take a screenshot of this and I'm going to add it here let press accept all the changes and there's no errors So please update the UI to look like the reference image and make sure to not touch any of the existing functionality only update the UI let's see if we can get it to look like the one that I've created right so I finished updating all of the pages pretty much every single component here

um and it told us exactly what it did and the colors that it used so let's see it Moment of Truth oh wow that's very close super close to what I had let's just make sure it all works Just going to extract the customer name see see what it comes back with but it really does look very similar to what I had before oh there we go amazing so when it comes to the deployment um essentially we'll have to do mpm run build and make sure the app compiles and builds with no errors before we

can save and commit to the repo and then it'll be ready for deployment I'm not going to go through this for this application I probably will do that for the second one Which I'll go over in just a second here I've also included the final instructions prompt um which you can just copy and paste and this is the instructions. MD file that we cre earlier and this is in the document right then so next up we have the social scribe which is a Content repurposing application U made to generate articles and social media posts for

LinkedIn and x and this one is a step up from the previous application because it has a Lot more complexity and the features are a bit more involved especially when it comes to integrating with super base the stripe integration making sure we're tracking all of the tokens and making sure we're limiting users so that if they don't have enough tokens we don't allow them to actually generate anything until they top up so let's first start by showing you guys a demo and then I'll explain how I've built this application right so here we've got the

signin page And we can either log in or we can create an account if we're a new user so let's create an account and then we just hit create an account so as soon as we create a new account we have to go through an onboarding process and this is where we capture all the details about the person's company their brand voice their target audience and the content preferences so I'm going to quickly fill out out all the different fields with airbnb's company in mind for The sake of the demo right so I just finished

completing the form with all the different information about Airbnb so next we have the brand voice this is to set the primary tone the secondary tone some voice characteristics and we also have the target audience so here we set the primary audience the demographics the psycho graphics and we can also add the secondary audience but we don't need to at the moment and finally we've got the content Preferences and this is how we want the content to sound like so the post type the post style the writing style some key topics content pillars unique value

proposition and key differentiators so once we complete everything we can click create profile and that should save our Persona so you can see the alert messages as well and it takes us inside of the application so we have a few tabs here the first one is the Persona Tab and this is where we can modify Everything that we've just entered and make some changes and save the changes next we have the article page and this is where we input the content that we want to repurpose into our own so we can have a topic name

and then we can put an article link a YouTube link or just paste in plain text if you just have an idea you can just type it in here and let's try an example here I have this random video about how to make money on Airbnb so I'm going to copy this for the Title and then copy the link and then we have to set this to YouTube link and we can click generate article so we we have the loading screen and this lets the users know something is actually happening we're generating an article um

and this is just good practice for any UI design so let's just give it a second right so I want you to pay attention to the success message here and it shows us how many tokens we've actually used to generate this article and we can get rid Of that so we have the article here you can see it's really good it's huge um I'm not going to read it but essentially it has everything that we want and basically the idea here is that we don't actually care about article I mean we can if you want

to put the article in like a Blog for example if you want to create a blog for the website you can use this article but essentially we want to use the articles for the social media posts so here we have a drop down menu From all the different articles that we generated and this gets pulled in from superbase so as soon as we generate an article that gets saved into our super base database and then this drop down menu pulls in all the different articles that we generated we select an article and here we Define

the type of post that we want to create so we can have something like for this one we can do tips and tricks the style of the post it could be problem solving showcase the Writing style let's do educational so first let's see Twitter so it's generating cool we have a Content here that we can just copy um let's try a LinkedIn post and at the bottom again you can see the tokens that we've used to generate it and here we have the LinkedIn one so this the post that it generated for the LinkedIn and

of course these are just for the sake of the demo and the project and this can be improved by a lot um I just didn't really have The time to do so so finally we have the settings page and this is where the magic really happens so here we can see all of the different Tokens The Available tokens that we have left so when a new user joins they get 10,000 free tokens and we've used up 5,000 um we can see how many we've purchased and once we purchase tokens we can see the bar showing

us how much we've used in comparison to the amount of tokens that we've purchased and here at the bottom We have the different packages so we start it starts off at $5 for $50,000 tokens we've got $15 for 250,000 then $40 for 2 million tokens and we can click on purchase and this should take us to the stripe page cool so we're in the strip page now and here we have the test mode for obvious reasons right so we've entered our information here and then we can just click pay let it process amazing and now

we should redirect this back onto our settings Page so we can see here payment successful your tokens have been added to your account and we have a total of 54,000 tokens now um we can also try the ultra just for the sake of the demo there we have it now we've got 2 million tokens cool so we also just have a log out button um you guys can't see that so on the left hand side here we have the logout button and now just takes us back to the sign-in page now you have an idea

of what the app does and the capability Let's actually dive into how we actually got to this stage and go through the different steps for this one because it's a bit more complex I won't actually be building it from scratch but I'll take you through all the different steps that I had to do to build it out so we started off with the wind Sur promp writer as usual so I gave it a prompt this time it was a bit more fledged out prompt because I really wanted to make sure we capture all the Different

details for especially when it comes to the onboarding form and then I told it about the different tabs that we have so we've got a persona page article page social media page and then the settings page and then at the end I just said use this text stack make sure it's a modern responsive UI so this was the prompt that entered onto wind serve and then it came back with the instructions prompt which I can show you guys and here we have the final instructions file And you can see how I've split this up into

all the different features and I'll go through that in just a second so similar to the other application at the start we have the overview so this is the overview of the app and what we trying to do make sure to use anthropics for the llm model super base integration onboarding form for the company setting up of the company Persona and then generating article social media post and also token based generations and will'll Be managed and tracked and strip payment integration and this is the text tag that we wanted to use and let's go through

and explain all the different features and how I've broken it down and because we're using super base for not just the authentication but also storage of the data and the personas and the different content that we generate we really need to make sure that this is all fleshed out from the start so that when it comes to building the rest of The features everything is set in place all the tables are there and it's set out correctly so as you can see we have the four tables here so we have the profiles table and this

has the users details we've got the personas and this is where we keep company Persona and a Content style and then we have the content itself so every article we generate every social media post we generate we save it into the database and finally we have the tokens table to Track the usage for each user and I can show you what this looks like inside of super base and so here I've got my super base set up so inside of the table editor we have the four different tables so let's start off with the personas

and this is where we keep all of the information about our Persona the first one was just basically a test for my agency and the second one is the one we just did for Airbnb and then we also have the profiles I've got my one just As a test email and then John sow and then we got to created that and updated that columns and then we have the content table and this is where we store all of the content that we generate so you can see a bunch of data here and the content type

is LinkedIn or Twitter and also we can have the article so it's all saved into one table and finally we have the tokens so for each user they have the available tokens and they have the total tokens that they purchased and Then the usage and what they're own and then the last purchase date so to actually get started and set up super base we have to go and set up a project at superb.com we basically just create a new project give it a name give it a password and a region and then you'll be given

the project URL and the anonymous key from superbase dashboard you just have to copy that into your env. local file and that's how we connect our application with superbase and what we Have to do is that once we tell wind surf to start with the first feature and implement the first feature after it goes and builds all the different files we actually generate this schema file for your database and this will be located under super base migrations and then it's the it'll be called initial schema so it look something like this and this is basically

SQL code to create all the different tables and all the different fields and columns and some Policies and functions so what we have to do is basically copy this whole code here and go into your SQL dashboard there's two ways to do this you can either do it through the CLI command line interface or you can do it through the dashboard so you can just go into super base and then under SQL editor you create a new snippet and this is basically where you paste in your SQL code and you can have SQL queries here

and you click run at The bottom right once you click run this script will basically build out the whole super based database and we don't have to worry about it so the second one is just a simple sidebar navigation with all of the different tabs that we want to have the Persona article social media post and then the settings tab and this was a very simple feature that we just added and yeah there's not really much more to it the third feature is where we actually implement the Persona tab so This is where we showcase

the Persona that the user entered from the onboarding process where they can modify their pre-fill data and it's connected with superbase so it'll pull in everything that they've entered and then give them the option to modify different parts and save it back to the database again this wasn't a a hassle to create it was a quite simple one just telling it to build out this feature and then just if there's any errors copy and Paste the errors and you'll be able to finish this part the fourth is where it gets a bit more interesting so

this is where we actually create the article tab um for the generations of the Articles so we're telling it to create a new article page and all of the different inputs and the drop down menus making sure that we use entropic clawed API to generate the inputs and here you can see how I've sort of referenced the document section so it will know to go down to The documentation for entropic API data and this is worth pasted in an example of an article generation prompt um giving it the prompt and then passing it all the

different variables that we want it to use to generate the article once it created that it was still not capturing the tokens so added this prompt here basically asking it to handle the response correctly and make sure we capture the token usage and I've given it also another example inside of The prompt itself that I've taken from the documentations of an Tropics clae website and this basically fixed the issue so now we're able to actually see the response with the tokens we used for the generation and then we capture everything to be able to pass

it back to the database and then we were on to the fifth feature where we do the social media post generation this is very similar to the article one so it creates a social media page um fetches the Previously generated articles from a drop down menu and then allows users to select an article Define the post preferences and then click generate to generate the post and this one was also quite simple and straightforward it didn't cause too many errors and then we built out the tokens management feature to track the token usage and show the

balance of the user inside of the settings page and for this one I'm pretty sure I just said uh yes so I Asked it to create the feature and then I think most of the stuff were pretty much completed so I just asked it to add the settings page to view the token balance and also only allow users to generate articles or post if they have enough balance and this was a modification because initially it set the default token to be 100,000 so I dropped that down to 10,000 I told it to keep in mind

that the users purchase more tokens so the limit may change Because it thought it was a a hard limit so I told it this is something that's coming up in the future we haven't actually implemented this yet and it managed to fix that problem and for the final feature it was the stripe integration so this one is where we allow the users to purchase additional tokens via stripe and the key here is that basically I just pasted a bunch of the Snippets from the documentation for using stripe and this really helped her A lot and

it made the whole process a lot more smoother when it came to generating the code so when it comes to stripe side of things we need to obviously have an account so what we basically have to do is create a new product and then give it a name and description and for that same product you can just have three different price is and make sure they're just all one off not recurring prices and for every price you're able to click on that price And copy the ID of that price and that's what we'll be using

to connect with the application so I'll show you guys how that looks like in just a second but essentially I've just told Cascade this is the different packages that I have so make sure to update all the areas where the packages are displayed because he made some default values which I didn't want to use and I wanted to make sure it uses the one that I've actually created inside of stripe so if we go to our end File so we have the example file here first we had the super base and this is the the

URL the anonymous key and then the service roll key and for entr Tropics we've got our entr Tropics API key and then when it comes to stripe so we have a few different Keys here so we have the secret key the web hook key and this is the web hook that we set up to redirect back onto our application and this is usually a public URL however I'll show you how to set this up for Local host testing and this is what was referring to here of all the different packages and the price IDs for

each package so to set up our web hook endpoint inside of stripe you have to go to Stripes dashboard and basically inside of your stripe account we make sure you're in the test mode because you want to make sure it all works first before copying it over to the live version so once inside test mode go to developers web Hooks and this is where We add an endpoint so click on ADD endpoint and you give it a name so this has to be a public URL for it to work so this is basically your applications

URL once you deploy it um so we can just say social scribe do agenic doai we don't need to give an example that's fine and then we select the event so the event that we want to listen to is checkout checkout session completed so make sure you check this one here and this basically listens for when the checkout Has been completed make sure the version matches the one that you're using so I'm using the latest one so I'm going to pick that one and then we just click on ADD Endo I'm not going to actually

do that because I already have that set up and that will give you the web hook secret key and we paste that onto our end file and then when it comes to local development what we have to do is actually install stripe CLI um command line interface so if you're on Mac you Just use Brew install stripe and then we authenticate by using this command here into our command line and this will take you to Stripes web page to just log in and then that's how we authenticate so what we have to do is actually

forward the web hook because it's not actually live yet so we forward the web hook that we've created onto our Local Host URL and this is how we do that via this command here so we have to keep this running every time we're running the Application um so as you can see in my terminal here so I've got two different terminals one's for running the application this is the node here and the second one is the stripe and this is running the stripe web hook URL forwarding and make sure you stick it in because I'll

also be showing how we can minimize the different errors that we get and make sure we get wind surf to actually listen to the instructions and speed up the process process of Development so the final thing I did was just final UI improvements so I used this prompt to you know just have it look a bit nicer and then added a loading UI animation for when articles were being generated and then of course as always we have to test it save it and then commit to the repo and then to prepare for deployment we have

to run this command here so let's just do that now let's close off the server we start it by running this command and what this Does is just go through and build the whole application and ensures there are no errors when we're building it for the production environment and the first time you do this you're bound to get a bunch of different errors and most of the time they're very simple typescript errors and all you have to do is just copy it paste it onto Cascade and just say please fix this and you can actually

I've actually tested this by pasting three or four different errors because You're going to get a bunch of different errors so you can copy a bunch um about three or four Max I would say and then ask it to fix it here I've only just got because I've gone through this process a few times um but yeah you're most likely going to find a bunch of different errors cool so all it did was modify one little line so let's just check it out it's just an apostrophe we had to basically Escape it accept all changes

and let's run that command again mpm run Build just make sure there are no errors at all all right so this time we finished with no errors you can see everything is all good it built out all the different pages and at this stage we just want to save this checkpoint and commit all the different changes um I'm just going to say ready to deploy which this is the second time I'm doing this um you can see it down here as well and then there's a bunch of fixing of errors but it's always really good

practice to Commit as often as possible whenever the application is is a good state where everything's been tested and it's working sync changes and we're basically ready to deploy so uh just quickly we have the complete prompt here so this will also be added to the masterclass file now we're ready to deploy our application so you have a few different options that you can choose I like Railway is very simple very cheap you can also use like stuff like versel or Render Railway just for me uh it's really good and they also have a really

cheap hobby plan of just $5 a month um for small simple projects and this is basically the one that we're going to use today so we start off by going to railway doapp so it's just simple Railway the app and we click on deploy a new project so you want to log in with your GitHub account so that it's all synced in so what we want to do is deploy from GitHub repo so select this And here we select the repository of our application so mine was called social scribe click that and we want to

add the variables because this is important so all of the environment variables that we had in our local file we want to copy and paste those onto here and a simple way to do this is just using the raw editor so click on Raw editor and we just copy and paste everything that we have inside of our local n file just copy and paste past it into the raw Editor so let me just quickly do that with my real data and once youve done that correctly you should see something like this all the different variables

and the API Keys all hidden and go back to deployment so we can see that deployment is in progress so at the moment is doing the build that we basically did locally when we did mpm run build is doing this here and making sure it compiles the whole application and then it will deploy it so we can see That there was actually an error and this is good because we can troubleshoot together and see what the problem was so literally what I'm going to do is copy everything up until where it was working cuz the

error is somewhere here then go back to our wind serve start a new chat and say I got this error when building the application in production please analyze the the code base and find the root cause of this and then I'll just reference the whole source code and Let's see what it comes up with all right so it's saying the stripe secret key is not set in the environment variables so let me quickly check so it's saying the stripe secret key is not here but it might be because we might have taken a little bit

longer to put all the variables before it managed to build the application so what I'm just going to do is retry I'm not even going to change anything so I'm just going to do so I've actually not changed anything I'm just going to redeploy it because I have a feeling it was just because the variables weren't set before it managed to reach the point of checking the environment variables when it's doing the build so let's just give it another run I'm pretty sure it should be okay it's looking good built successfully amazing let's close this

so it's just deploying just give it a second deployment successful so let's see if we go to settings this is where we can Connect our custom domain or generate a domain and now we have a public domain so if we click this uh we you look at that the application is now public and if we scroll to the bottom you also have some variables that you can change like the region of where you want the service to be hosted you can limit the amount of CPU and memory that the application uses and there's a bunch

of stuff here that you can sort of mess around with but we don't really need to worry about any of That the application is running it's live and everything's good to go you also have the metrix tab and this is like to keep track of the CPU and the memory of your application so if we go to the 1 hour obviously this is just recently deployed so we're not going to see much going on here very simple very easy way to deploy our application and that's all we have to do and finally we have the

Lang link application so this was a real-time translation messenger And it was a project for a client who wanted to build out a quick MVP to test the idea out so let's show you guys a quick demo I've got my test account here so you have a profile page where you have your name your email and this is where you set your preferred language so I want to talk in English and receive the translations in English um we can also toggle the theme of light and and dark um I quite like the dark theme then

we also have the contacts so this is Where we can search users by name um Sorry by email so for example we can do like Jack search and we can see Jack here then we can add him as a friend we can see the pending invites so we have the list of order contacts that we have and then we can start chats with them and finally we've got the messaging Tab and this all very Dynamic and mobile friendly because the idea here is that it needs to be used for mobile as well so it's very

Mobile friendly and basically the idea here is that we're able to chat with the different contacts so we send the message our message is sent in both the language that we set and also the translation oh yeah so Jack previously had this language set as English and then I changed it to Spanish um so he sends this message and this is what I receive in English and it's able to send out the messages in both my language and the other users language so we can Quickly type in a message um this video is very long

and you see how fast that was so it sends the message and it translates it so yeah really nice app the guy really loved it and let's actually show you guys How I build this using wind Sur and go through the instructions file right so we have the instructions file here for the Lang link application and as you can see it always follows the same format so we start with the project overview to you want to Build out a web application to facilitate real-time translation messages between users user authentication responsive um it has a contacts

list Real Time Communication updates Technologies used nextjs development super base for the back end open AI chat model for the translation functionality I could have used like Google API for the translation but I just wanted to keep it simple for this MVP so I went ahead and just used open a Chat model for translation and it worked really well and it even handles like the Emojis which is great so if for example if you send an emoji it's able to pass that on after the translation so it actually worked in our forever so for the

functionalities and how I split up all the different features I started with the user authentication as always so I told it what the users are able to do so they want to sign up log in and manage their profile profile management Page for managing the profile language and the profile settings and yeah just use super base to implement everything next we had the message interface and this was basically the chunk of the application so we wanted to make sure it looks it looks nice it looks presentable and also the functionality needs to work really well

and the main idea here is that we want to use super BAS real time messaging capabilities and this is how you see that it was really fast when it Comes to sending the messages the user will also receive the messages instantly and this was very key obviously because it's a messaging platform for the UI we really needed to make sure it's uh mobile friendly um clear separation between a sent messages and receive messages it needs to be very clean so spend a lot of time you know making sure the UI is consistent across the platform

and here at the bottom again I've reference the documentation section so It goes and checks the documentation where pasted in a snippet of the documentation just to show an example of how this can look like and this is basically the system prompt that I used I said you're a translator specializing in translating from the the users's language to the other users language translate the following text only return the translation and nothing else and thisly worked really well and then came the contact list so we have the page Where users can search like I showed you

they can search for users and then add them send a request accept the request and also initiate chats with them and again this was very simple and straightforward um using Tailwind for the UI Fetch and display registered users from superbase and Implement search functionality and chat initiation so this was also a very straightforward feature and then came the translation service so this is Actually sending of the messages to openi model and returning the response and at bottom again I've reference the chat model documentation and you notice that most of these were basically created in a

previous feature however we always want to build up on it and make sure it's done in the right way and by asking it to refer back to the instructions file and actually double check and make sure everything has been done um is a good way to go about it and Here's also a good example so the realtime communication I'm pretty sure that it was done the first time around but making sure you know we check in again and making sure it's actually using real time messaging and updates and it's using super base just to make

sure we're actually implementing the functionality that we want and finally at the end we just really optimize for mobile and making sure like I mentioned earlier the UI really adjusts seamlessly Between the various different screens and it's very consistent throughout the whole application and that was pretty much it for this application so you can see it really doesn't take that much and this was really fun project to do so now let's look at the best practices and tips because if you spend any time with building applications in wind or cursor or bolt on new or

any of the other applications there's always bound to be errors and what I'm going to share with You guys here is a few different concepts and things that sort of stumbled across while building applications with wiv and spending so many hours building these appliations and some might be straightforward or you might think they might not be necessary but they do really make a difference and some of these are obviously covered while building out the application earlier in the video however we're just going to go through everything so Starting off we just want to really make

sure that we have a well- defined clear instructions file and making sure that we keep referring back to it constantly throughout the building of the project so that the model is aware of the context of the project because if the chat window gets too loud it starts forgetting what the project is about starts to hallucinate and messes up the code so next we have the split of the features so like I've shown you guys in The different instructions file we want to really split up the different features in a way that they build up on

each other so that we can build one task at a time one feature at a time test it make sure it works before moving on to the next one the third tip is adding documentation Snippets into the instructions file because this really does help improve the accuracy and especially when we have different versions of documentations and we really Want to pick a specific one so this is always good practice to paste that into the instructions file making sure we know exactly which version of a library we're actually building the fourth one is breaking up the

chat window making sure we always start new conversations re explaining the instructions so referring back to the instructions file for every new chat that we create because every time we start a new window wi won't have memory of what the project Is so we want to make sure we re-reference the instructions file and number five is keeping the app running so the way that wind works is that it actually implements the code for you so it actually makes the changes and updates the code so so every time we make an update to the code we

can have the application actually running and test out the features that you just added make sure they all work before we actually go back into inser and accept The changes and number six is straightforward it's just using the image upload feature that was just released for debugging purposes and I shown you guys a demo of this earlier and we can ask it for improvements of the UI or when we starting a new project we can showcase a UI that we like and asking it to build something that's similar to it number seven is accepting parts

of the generated code and re in others so we don't have to accept all The changes and it's always good practice to review the changes that the model did and make sure that it's not messing up the code so if it starts to touch parts of the code that it shouldn't have you can just reject those parts and then accept everything else and that saved a lot of time for me so for number eight for any minor updates to the code we want to add this at the end of The Prompt and this really helped

make sure other parts of the code are Not changed so just by adding a simple sentence at the end make sure to check the files before building anything do not mess up any of the existing functionality especially when we starting a new chat this seems to minimize the hallucinations and number nine and I've spoken about this is after every feature we complete it and test it and make sure that it's okay making sure that we actually commit the changes to get Hub to our repo and this acts like a Save checkpoint so that if we

mess up the code completely we can always have something to go back to a safe state of the application that we can roll back to and then try again and finally when facing errors from hell and you're bashing your head against the wall asking wi surve to fix errors back and forth and it doesn't seem to actually fix the problem I've always referred back to chat BT's 01 model and basically just giving it the code saying this is My code this is what I'm trying to do and these are the errors that I'm getting it's

a very simple prompt and I just send that and every time we manage to actually fix the problem so just keep that in mind and that will be the end of the wind masterclass I hope you guys found this helpful it's a really exciting time to be in the AI space right now and especially if you're an AI agency owner you can see the power of this you can start building out Applications for your client you can start having something that's a bit more tangible instead of just automations and workflow that are all in the

back end you can have something in the front end that looks nice and present it to your clients and I'm excited to use wind Sur more and Carry On Building so if you have any ideas drop them down in the comments below and if you're a business owner or you have an idea that you'd like to build and you want to work with Us I'll put the link to my calendar down below feel free to reach out and we can hop on a call and discuss how we can help you if you want access to

the masterclass document or the complete code I'll be putting that inside of my school community so I'll link that down in the description below and if if you found this helpful please hit that like And subscribe button with that being said thank you very much and I'll see you in the next one