Build a FULL web app using AI | No Code Needed | Blog Writer…

I show you how to build a complete blog writer website with AI in just one day! The ONLY tutorial that covers creating an actual …

Ready to captivate your audience? Let me craft your next article or post!

✔️Here i show you a top rated social service: Click Here.

✔️And Here i show you more writers.

Recommendation Moved to Firefox to see if nCORS issue was associated with Chrome Flags I was right. nCORS wasn’t the root cause 1. Try to code alongnn2. Install tools as you gonn3. Pause the video, write your promptsnn4. Share any issues you face in the comments alright so today I will start off with a very basic product idea and by the end of this video we will have a working Web application for that product built entirely using AI I will not be writing a single line of code and I just need you to remember that the idea that I take is just to take something as an example your core focus throughout the video should be on the process and the learnings so you can repeat the same thing for any idea that you might have and this video is for two category of people so the first one is the non technical people people who have a non technical background maybe from sales marketing so on and so forth who want to build software products using AI maybe you have an idea that you want to convert into a product so this is for you and the second category is the people who do have a technical background software engineers computer scientists and so on so forth who want to learn how to use AI to build products faster or to do their daily work faster for example so my personal experience with this has been that I built about three different products using AI completely so I’m going to share with you the workflow for that I generally follow so if you’re either of these just stick around till the end and I promise you that you will learn something valuable by the end of it and I will also cover how to use AI to create like a go to market strategy along with Marketing Collateral to advertise your product of course I do that in my in my newsletter as well you can subscribe to that if you want and all of that would of course be done using AI uh but that would likely be maybe in another video I’ll just add there’s link in the description or in the pin comments something like that um or yeah or you can just subscribe to the channel and turn on the notifications for so whenever that video is uploaded you can just quickly watch that too so before we start just a few housekeeping items uh this video is going to be long as you would have anticipated or have seen the um the length at the bottom or something so just go ahead and bookmark it or click the there’s a there’s this save button under the videos in YouTube you can just click on that too so you can get back to it later maybe on a weekend or whenever you have some free time to watch like all of it in one go or something like that and the second thing is that some parts might not be relevant to you of course so just have a look at the chapters I will add those and you can skip the ones which are not relevant to you and the last thing is that I might divide divide this into multiple videos because I can anticipate this taking I don’t know about 3 to 4 hours or something like that and some parts of it I might be they might be a bit slow so just like turn it to 1.25 or 1.5 x speed if you want and yeah so just move the ones the next one if any of it doesn’t seem relevant to you so that said let’s start with the quick flow chart that we will modify throughout the video let me minimize my face and let’s get started over here okay so I’m going to use WHIMSICAL you can use anyone that you want for yourself because the first thing that you need is basically sort of like a worklfow that you’re going to follow so the very first thing that you need is the idea for the product right and uh in this video um we will build a blog writer that creates SEO optimized articles and I’m actually going to be using that for my own company my own products as well because you need the blog page you need to have a lot of articles and I want to optimize that process for our own product so that’s exactly what I’m going to build and will be using uh myself as well so yeah that’s basically the idea so I’ll just uh note that down over here for myself blog writer uh needs to be as the optimizer just leave that over here and the second thing we need is the list of tools that are going to help us build this product so I’m going to be using uh Claude’s Web app you can see that open over here uh the second thing I’m going to use is Cursor this is basically an IDE for development um yeah so that’s the second thing that we’re going to use and at the back end we’re going to use Claude 3.5 Sonnet and o1-Mini as the preferred models I like to switch between the two depending on the kind of thing that I’m trying to get done with AI the third thing we’re going to use is ideogram because in articles you ideally should have some sort of images as well and I want to automate that part as well so we don’t have to go to Canva or Figma or something else of that sort of create design collateral uh east time for the article I’m not sure if I would be integrating that within this video but um either way I will be adding that in one video of the playlist or something of that so depending on um how this video goes so this is basically the software that I or the tool that I generally use to create images using text prompts uh let me give you a few examples over here okay these are actually bad examples that are appearing over here on their um uh home screen actually none are appearing right now anyways let’s get back to this so the second thing was basically tools right so I would say just list the tools that you’re going to use so in our case it’s going to be Claude, Cursor ideogram and the third fourth thing that we’re going to use is Claude’s API if you’re not familiar with this it’s going to be the engine behind the articles basically so we will give it a prompt we’ll tell it okay we want articles this is the set of instructions that the basically need to follow these kind of things and then um this is the one that will be generating the offer for us this is our core AI cursor is basically going to be used for the development recording part right so we’ll get back to this one later on but let’s start let’s get started with this part so the third thing is um right now we just have an idea right this is like a one line description of what the what the priorit is going to look like or what the prior is going to cover the next thing we are going to need after this is let me connect these two is the detailed product description right so a document which lists like the core features of the product and the the workflow what the workflow of the product is going to look like so for that in other case in this case I do have I have done a little bit of brainstorming on paper so let me just pull up that image and I’m going to feed that into chlord if it accepts HEIC okay does not so this is an image taken from my iPhone lets me let me just convert image oh you can’t see that okay so I’m going to turn that into a JPEG let’s do that so now I have a JPEG of the image can you please cross credit this for me actually in the tooling side I’m going to add a fifth tool which is AudioAI this is a Chrome extension you can download that over here it’s got like 30 minutes free per month that you can use and the main thing for this is that I can just uh you know speak my instructions to Claude and it will just convert that to text so when you want to like give a detailed instructions set to Claude um just comes in handy okay so these are the notes that we basically have um so let me just give you a quick walk through of it in any software you basically need to have like inputs that it will receive these are going to come from the user and then in the middle you have some sort of processing that you want to do based on that input and the last thing that you have to do is that the software actually do is to basically sort of user input do their do their processing and then give you an output which aligns with the with the instructions that you basically have provided in the middle so that’s exactly more or less what I added in the in the image let me actually just show you the image quickly so just like very rough notes article lead writer or article writer whatever you wanna call it call that and this is what the note say so imports that’s going to the keywords that I want to rank the article for so for example if I’m creating a a tool or a product for for social media managers for example so I’m going to have to do some sort of keyword research to sort of identify the things that they search for on Google or YouTube or etcetera for example so I’ll have those list of keywords and then I will be providing the list of um articles that I want the AI to generate so for example I might give it and give it a title like uh 5 Top Tools for LinkedIn for creators or something of that sort so you have to provide the title of the article the keywords that you want to focus on in the article and then any info that can help with writing the new article so this will be like a custom set of instructions so for instance this could be regarding the wording regarding um the headings that you might want anything that you want to provide from your own site so any sort of customization that you might want to provide or it could simply be like another article or the set of articles that you read and you want to copy paste some of like the paragraphs or informational I don’t know key points that you want the article to contain stuff like that and then there’s supposed to be some idol should allow me to do some sort of customizations like okay how many words do I want in the article what should the tone be like uh should there be any images or if there should be how many images should the article contain these kind of things and the last part is uh do I want the article to link to any other resources so for example if I’m writing the article where I want to plug in my YouTube video for example dedicated on the topic I can copy the link to that YouTube video in the import that okay I want this video to be included in the article or it could be some other blog that I’ve created or some LinkedIn post or some Twitter tweet or or could be a product that I built and I want that plug into the article to sort of get traffic to that or course that I’ve created anything else of that sort so you can add these kind of things in the input so that the AI knows that these are the kind of things that I want the article to have then comes the middle part which is what does the AI do with the input that I provided that provided to it so this is like the core or the engine so it has to be really really really extremely strong um one thing that I can think of which it should have is copywriting guidelines so when it comes to article there’s not just that okay someone searches the article and someone searches the topic so for example someone searches how to write a post on LinkedIn for example and let’s say your article is at the top because you’ve done a great job from the SEO perspective now they open the article and they read the first two or three lines and they just it just does not capture their attention so they’re not going to read the rest of the article so the whole point of uh writing their article is pretty much lost so it needs to follow some sort of copywriting guidelines to make it interesting the first part needs to capture their interest talk about their talk about their uh core problems the reason or the the reason which basically lead them to that article or to make that search on Google for example um just like this video for example when I started there was like this set of things that I said to capture your attention I hope I have captured um so yeah something of that sort and then the other thing is su best practices of course the AI knows those things but it’s just a good idea if you can put that in like a bullet release start okay the keywords that I mentioned that I want to rank for in the input they should be try to like for example include them in the H1 tags issue tags um these kind of things like the what the density should look like or etcetera you can just basically read any SEO practices article on the internet and just copy some of the key information that you can find over there and feed that into the prompt that we will light for this uh don’t worry I’m actually going to do this part later on the video so if you don’t get any of this information just don’t worry about that and the third is that you have you have to be considered about how to use the import so all these things are free feeding that they should be actually variables in the prompt because they’re going to change like sometimes the title might be ABC sometimes it might be XYZ or something of dark sort so the prompt needs to be able to accommodate to that and then this one is optional for now which is adding iaginated images or suggestions which is currently marked as optional for now so when I talk about images I know you might have used DALL.E or something else of that sort which instantly sort of basically give the idea that okay this is an eagenetered image and it looks really bad and the texture is always messed up in these kind of things but this tool is actually pretty good at that so I’m going to just give you like a quick demonstration of it um create uh funny meme on uh okay what topic should we use on messy fans for example I am a messi fan by the way so wait 28 seconds starts a long wait am I signed in it usually does not require this long but okay we’ll come back to that uh so images starts the next thing and then the output so the output that the AI generates right so for example if I go to Claude or well we have this chat over here you can see I also do this and then it get it goes on like I’ll transcribe the hand and nose on this image blah blah blah and then the structure is like whatever it decided was the best whereas in our case since there’s a software it should have a static set of inputs and as and like a set format for the output it should always generate the same format of output so that you can incorporate that into the goal right you can automate that so for instance it should only give the final article and then maybe have a slash or some sort of a differentiator to tell me that okay um this should be the title this should be the in the matter description this should be X y Z this should be the image so that the code that we write is able to sort of uh pass that output data generates so that’s what we’re going to need the other thing that we’re going to need is well this is something that I want which is once the AI generates the output there should be another AI which looks at the article and sort of ranks or rates its output that okay is that going to really help from the SEO perspective or not so that’s another AI that we’re going to have which is basically just going to be a prompt which gives me like a rating of 7 or 10 8 out of 10 or something else of dark sort and in the future I’m going to create sort of like a loop so if an article is jointed until it gets a rating of 9 or 10 from the SEO perspective from the SEO ranker it keeps on regionating that and the last thing is variants of the article this is um well if you I’m not sure if I will have this or not but this is more for from the distribution perspective so usually what I do is when I write an article so I usually distribute that through my newsletter so that goes to here newsletter.etiquette.com you can see those over here the other the next thing that I do is from the distribution perspective is I also create a LinkedIn article for that and then I also create a blog on medium.com for that and that that’s just for distribution right so if you’ve written a great piece of content it’s a good idea to sort of distribute that in as many places as you possibly can so you get more eyeballs basically because each distribution medium has its own set of audience that you can capitalize on so the variants would likely help from their perspective you write the same thing it like the core ID and everything else is the same but the verbage or the structure these kind of things that would be like some small variations which allow you to just put different additions or different copies of that into different places and then there’s miscellaneous items um this could have a lot of different things uh so first one is ban words you should actually have like a static list of words that you know EI uses quite a lot so for example Game Changer is like a word which AI abuses quite a bit or in the more than eight hours these kind of uh you know starting lines uh whatever gives of it it’s actually ear generator because Google Microsoft being they all penalize that kind of uh content it has to be human-generated and they prefer that at least for now maybe one year longer and if you’re watching this video it might not be true but for the timing it is so just add a static list of ban words that the EA should not use in the final article and the last thing is to maybe feed it example articles to sort of convey to it what kind of tone or structure do you personally like which you think looks good capture retention and provides value in these kind of things so you can provide examples of articles as well these are things that I had in mind for my product right and now I want to convert this into a structured document so like a a features list if you may so that we can then move towards the next part which is designing the feature set for the product alright so let me right so what you can see above is a rough brainstorming rough brainstorming notes for a product that I’m planning to build I want you to convert this into uh a proper one pager document which describes the features in a bit more detail so that I can gradually build each of the components um into my product right that was like a really bad prawn but let’s see what it does for me uh so this is audio ear by the way uh this is something that we built in my company and the purpose is to basically we can speak to Claude ChatGPT works on v0.dev as well Perplexity so on and so forth and it just converts out to text okay so we’ve got a document to start with yeah so as the optimization it already just generated the best practices folder which is good right so now that we have the feature list so this is done right this is done too this is done as well so the next part is to actually code the application so where do we start with I’m going to create a separate tree for that we’re not going to have a learning place first we’re going to build the capabilities first right so let’s let’s list that down first thing we’re going to need is basically an interface WebUI which uh which basically allow the user to interact with the applicational to provide the inputs and to be able to see the outputs for the product so here’s what I’m going to do I’m going to copy all of this and uh one thing that you can do is basically simply go to uh this uh cursor AI by the way if you don’t have it installed you can just go to cursor.sh or cursor.com I think they have shifter to yeah you can just download that and use this the process is fairly simple to install that once you have done that they give you like a 14 days trial for okay so let’s create a folder desktop code and going to create article writer open and there we go so we have this and I’m going to do Control L and then go to composer so what composer does is that you can feed it the idea for your product and it’s going to create all the files for you so once it has created like a basic application for you you can then use the chart feature to make individual modifications or improving the features and so on and so forth but for a starting point you can simply just go to composer and type in stuff like um I want you to build the cord for a product I have a pasted below the feature document folder which highlights the different things that it will do and then over here you can also mention the texture that you basically want to use so what I would recommend is to use uh use next years for the fronting and use uh use flask button for the back and so this is like a very simple one and for the database uh you can actually use uh escalate if you’re just building locally but if you really want to create a power for other people as well than in the darkest just go with the I don’t know um we don’t need uh database at this point so just keep this I don’t know real time or something of that sort so there we go of course in the future you want to be able to destroy things you’ve gonna want to integrate user hendication and these kind of things security may use all of that but that’s for later first you want to build the core functionality to basically sort of validate that if the ID that you actually have is that even doable by software can AI actually create really good su optimized articles or not so for that you don’t really need to store the information into the database you can just view that on your fronting uh see if you like it and uh yeah go from there and the other thing is that uh for the EI PR we are going to use Glord 3.5 sonnet model uh proven from AWS Bedrock um yeah so this is basically by the way uh this part Clarje API did I mention you can use Clarje API directly in my case um since I have a to be discouraged I’m going to use aerialist bedrock which hosts Claude’s API or Claude’s model basically so I’m going to be quailing them directly I want AI to integrate with them instead of Claude’s direct API because the implementation the core for that is different and I know what client they use so I’m just going to use mention that use Portal 3 library for the connection let’s just call it that okay so I provided it enough information let’s see what it generates so right now it’s needing the product structure project structure and then it’s creating the abdorp profile which is going in the back and folder pretty good yeah it’s fine this is not fine I think supposed to say dash 5 dash or something but yeah we can modify that correct that and so and so forth but it’s straight in the prompt as well a very basic prompt I know we have to optimize the prompt we will do that in one of the parts of the video and then I create the front end folder as well where it has a single page it has imported these things so on and so forth blah blah blah okay so it’s pretty much done this is the basic structure to get your starter really like when you can deal with the implementation of the form components keywords and puts on and so forth except all yes please continue so this is like a fast word so this is like a faster way to cord this right using composers because it creates the whole structure for you and everything um and then once you have the application at a good enough level at that point you can then use the chart feature that they have over here to sort of work on specific components specific features specific changes that you want and we will be using that later down the lane so while explaining that one thing I like to quickly mention over here is uh this the rules for AI so over here you can see the key principles naming conventions you are installing so this is like according best practices of guidelines that I want the AI score to follow and for that you can actually go to cursor rules um or this I think I had it somewhere where did I have that try to find it so yeah this one so I just open that here so this is dark cursor rules.com so over here you can see what technologies you wanted to use and just just copy paste the guidelines for that so we are using next year’s react with typescript as you can see over here the in the front end uh the pages are ending with TSX which is uh the short for typescript if you’re using Larable for example you can use Dart you can see whichever framework you’re using and just copy the rules for that into the rules for E I part so in my case I’m just going to leave this as it currently is because I use that for other projects as well and then just save that okay so it’s done a few other things I don’t know what that is I’m just going to accept that because I don’t like to micromanage AI would you like me to continue with the remaining components or would you like to focus on uh please continue so until it’s done like the basic structure and just going to ask it to keep on continuing until it’s done enough and then we will have a look at what it has generated and then go from there uh if you want you can skip this part just or just you know keep hitting the right arrow to fast forward something else of Dark Sword so you would have noticed that up until this point I have not written a single line of chord so far and I will keep it that way even if I know some commands I’m not going to just randomly type them in the terminal I’ll uh keep the first category which is people with a non technical background in mind completely so that you don’t get lost at any point uh this is good um is there anything else that is not yet implemented yes we need to fix a few more things yeah please go ahead do that um one more thing is that what we have over here what I wrote is like a very bad brainstroming uh Norse that I have created basically if I was doing it properly like with the plan or something this document would actually look a lot better I actually did not get the chance to even review the document where I would recommend is that when uh you get a document like that from your best something notes actually have a look at that and then maybe make improvements in it add some description take some things out so on and so forth in this case I was doing it for the video and an improvement so I basically want to make I’m just going to do them afterwards anyways so yeah doesn’t matter uh go ahead and implement whatever is left on the initial part and the code that it has dented I would expect that it would have some sort of errors as well that is completely expected and perfectly fine as well because we will be sort of troubleshooting through those and uh we will cover that part in the video as well if there would be errors which they very likely would be I think there’s a lot of development the next thing I’m going to ask it to ask it is to just tell me what I need to do to sort of view what it has developed on my on my system all right let’s take a pause tell me the set of commands that I need to run to see the applications front and and functionality on my local system please remember that I am not software engineer I actually am by the way and do not have any coding experience this is also not true I don’t know why this is timing out this much today make directory series we’ve already done that this is also done too see different and this is to get into the our particular folder okay so if you do LS that is to list the folders that you have within this folder article lighter and it’s asking me to go into which is change directory to front end so let’s do that and then we have to run this command let’s copy this start over here let me make this bigger okay not that big I think this is enough so when promptly would you like to use stripe script okay it hasn’t okay to proceed yes okay to proceed it hasn’t asked me anything but it has given me the answers to these questions as well uh the directory funding grenades files that could conflict either try using a new directory name or remove the files listed above yeah not gonna do that so let’s just copy this I’m just going to jump to the next part if there will be errors I guess we’ll find out okay so you can skip through this part if you want this might take a little while to install the dependencies right so just realise I can also pause the video recording so I did that and okay so the dependencies have been installed the next thing is to set at the back end so it wants us to move to the back and folder done now we’re going to create a virtual environment come on Python or phone what hmm well let’s see Python 3 I believe that’s the one that I have in store yeah if you haven’t if you don’t have Python install just watch a YouTube video for that I will if I still remember this by the time I’ve uploaded the video I’ll just add a link to some video on the top right otherwise just so start on YouTube I’m sure you can do that part okay so the virtual number is created it’s the fold of V E N v if I do LS I should see that okay there it is and then on Windows you need to run this command I’m on Max I’m going to go ahead and run this command and then we need to install a few things so now you can see we are in the virtual environment because we activated that and now we’re going to install the dependencies you don’t need to know what that means if you’re from a non technical background just swallow it like a monkey I that’s really what I do so it works going to pause the video now right so the dependencies have been stalled as well is there anything else happening to do copy all the files we created in to their respective folders make sure the files are to matches for pre discussed set up adoles credentials this you already have created door in the file in the back and folder with your adoles credentials so this is the back and folder we have a Dort EME file and it’s asking me to add my alias access access key ID the region and the secret access key now I’m going to add those over here but I’m not going to share that with you in this video uh in your case if you’re using chlort API it’s likely in your scenario it would have asked you to copy paste the clouds API key over here that’s what the variables it would have generated and in that case you would have gone to I think it’s consoled or antropic yeah so if you’re using this okay so I have to sign in let’s forget that but yeah you would have asked you to generate the app key you can actually ask it how to find those things and then just copy paste them over here same goes to the airbis keys so all you need is to create an Airbis account once you’ve done that you can actually go back to clod so like over here and ask it that okay I’ve created an Airbis account how can I find the access key ID and the secret access key ID for my account so it will just guide you through the whole process and you can follow that once you’ve done that you can just paste your keys over here so let me pause the video add the keys and then close this file alright so I have added the keys and by the way for those of you who don’t know what this is this is basically um sort of like to connect to the service provider for your AI model basically and like I said in my case I’m going to I was going to use Airless bedrock for that so that parts done now it wants me to move to this the front and folder oops see the door door slash fronting so more as the same command so we currently in the back end and the we are currently in the back and folder so you want to go back from the folder slash and then go to the front and folder done and then npm run def so this is the command that’s written over here which I told me to learn and now I can go to http local host 3,000 hopefully should be some errors so we get to debug a few things are there so not so far wow okay anyway so while this runs and game run dev that’s happening it’s getting compiled in another terminal window for back and okay so this is the friend and the other thing we need is nor this I need another terminal window so we’ll go over here and we’ll go to the back and folder because we want the back end to run as well to service our requests from the fronting so as we are okay we’re going to activate the legend environment and then run the abort by file so back and would run as well it’s running on port 5,000 all good and now we can go to this in the browser there you go okay so I can add the keywords over here and article title whatever I want that to be how to cord an application using AI I can set the tone professional conversational technical what the length is going to be and what the target audience is going to be is a technical business so on and so forth then I can write and generate article um I don’t think it should work straight out the bad actually why are there no errors but let’s see yeah there we go got one error which is good so haters response haters question haters I’ll explain what I’m doing but let me just quickly first find what the issue is just giving the courses I think course actually might be a side quest the actual issue might be different yeah I think it’s exactly what I thought which is cause issues are like a side thing the main issue is in some sort of a cold which is supposedly forbidden preview response nothing uh options forbidden and these kind of things okay so there’s some so uh yeah let me just pause the video over here and have a look at the code I don’t want to do I don’t want to bore you with the hard part okay so I think I might have found the issue so in the back end when the epic 1 was running so this is by the way the terminal over here right so this one is running the front end like this and over here we had the back end running and it was giving this error which was on keyword land and so on and so forth so copy pasted dart into cursor I told her that this okay this is the good and there that I’m getting and please fix that so it’s went ahead and done something I don’t know what that is but let’s try this again oh there you go so just to quickly show you there’s basically nothing else that I’ve done this was the last Commander V car for the Mac to run that and then the error was basically something to do with the land here so it was nested in the style um dictionary or something else of the answer and we were just extracting there from data and style directly and this time the yeah the basis call was successful so there we go we have our article as an Seu optimized article based on the given parameters Linden content repurposing so this is the title that we give and also the keywords I just pasted dart randomly hey the content creators are tired of constantly coming up with blah blah blah why should you repurpose content for London how to repurpose content so on and so forth so you wanted it short it is short so let’s try something which is medium make it business oriented keywords would be content creation London posts and maybe how to go viral on London so there we go let’s see what it generates now it’s going to take a sweet time because the output length is like quite long and in this case we changed it from short to medium okay so length is more or less the same because like I said short medium and long is like subjective it should idly be like a static limit that okay it should be somewhere between thousand to 12 words for example and so on and so forth so what I’m going to do at this point is that I’m going to take a big I don’t know an hour long break or something so I’m going to pause the video come back and then what we’re going to do next is improve the user interface of this I’ll show you what I do to basically improve the user interface so you can follow that for your own product as well we’re going to add like a navigation bar at the top and the other thing we’re going to work on which is likely going to be the very first thing that we do once I’m back and the second second attration goes is improve the prompt right so right now it’s like this fine it’s not bad but I haven’t had a look at this we want to add some sort of you know those things that I mentioned over here in the very initial part where did Dart go by the way we don’t need this yeah this one okay so Dart was um as your best practices and copyrighting guidelines I think as your best practices yeah in the prompt it’s not mentioned because if I go here uh our prompt is basically this generated as you optimize article based on the following parameters keywords titled assist giving the input and doesn’t do anything beyond that point but is like a really bad prompt a good prompt looks something like this let me quickly show you another one that I’ve written for another application so back and uh what do we have over here prompt folder there we go and so just to give an example here seems like a very long prompt lot of examples in these kind of things so that’s what really generates like a really good artwork so we’re going to build a prompt which does that for us so I’m going to pause the video and come back alright so I’m back and where were we let me just close these extra tabs not this one this we can close this we will need okay so first thing we’re going to do is uh try to improve the user interface a little bit and I just realised that we can actually ask Claude our initial um in our initial chat work application the AI has for us we can just feed our screenshot over to this chat and then ask it what kind of additional items we can add in the user interface so how we can basically make it better so I’m just going to paste the screenshot over here and then tell it that this is a screen this is a screenshot of the initial user interface that my front and engineer has coded for us and I want to improve that can you give me some recommendations in terms of what more can be added to it or to basically make it better and I also think that there should be a navigation bar at the top um to be honest I don’t really know what would be contained in that navigation bar if it even makes sense to have a navigation bar for such a small scale application but yeah think about it what more could be added or how it can be made um better so right now is good for internal users but I also want to basically make a product out of it and sell it to other people so yeah make some recommendations for that so let’s see what the AI tells us in terms of the additional things that we can do for this and then we can take it from the yeah so as you can see future enhancements these kind of things uh because this has like the overall um perspective of what we wanted the application to sort of do whereas what we have over here is like a downtown version of the initiality that we basically had so let’s just ask it to give us the rest of it so it’s using the artifact feature to sort of write the code and then it will show us what the component should look like and at that point we can just like take a screenshot of that feed that to cursor over here and cursor will take care of the rest so in the meantime one thing that I wanted to mention was that for the prompting part 1 thing that you can do is go to the newsletter that I have newsletter or Attica com I’ll try out if I remember I just drop the link to that in the description of the comments as well and the very initial ones that I wrote uh where are they yeah I think in this one and then uh there was another one where I basically talked about prompting so you can basically sort of use that to come up with prompts so for this one I will just ask AI to write like a good detailed prompt but uh because I want to keep it low effort I don’t want to focus too much on the prompting part in this particular video this is about coding or the prompting part but you can basically use that yeah I think this one and there was another one you can try to find it I’ll just skip there for now I can uh use that information that knowledge to sort of ride the prawn for your own products as well get me uh because this one of course would be very focused on umbrella thing okay so this is good this is a settings thing there’s an history item or something yeah plagiarism checker guitars nice multiple lighting styles grammar and rebuild its scores so on and so forth pro tip are multiple electric key version of Sio yeah like that okay so get suggestions for keywords so how is it going to come up okay plus I can for adding keywords and multiple ones earlier it’s just like you add one keyword and you have tried a coma but in this case there’s like you are multiple keywords and they get added to the repostries something like that article title put tone is fine length okay I like this approximately 500 word in these kind of things uh good good good good good good this is not bad would you like me to elaborate on any of these features no I think that’s fine um okay let’s have a lead in terms of wart etrode brand identity logo plus name so if you create something through Canva you can use Canva for sort of like creating a logo if you want and have that over here for now I think this is fine then quick access to new article my articles temperatures these kind of things they can appear in the navigation by utility icons for history settings and user profiles record those covered then yeah okay Hansen Protection but so these are the changes improvements that it basically has made for us already dark more I don’t see that over here but anyways I think this is good enough to sort of do something with it I want to have like a full version of it so I can take a screenshot actually I think this part just this part should be fine let’s feed that to cursor uh can you improve the UI have a look at the attached screenshot for inspiration also make these adjustments and then I’m going to give it a list number one uh length they should be objective with number of words options right card and then uh what else was there um do you want icons right okay so add some add icons where icons where applicable all right and then there was another thing which was add a navigation bar as you can see in the attached image as well for what else we want uh add more options in each of the drop downs to cover more scenarios okay so let’s see what it does and then we will sort of see what changes the UI gets based on that so I’m going to just have them here in it’s memorize this a little bit just making the changes starts gonna happen and by the one more thing if you if you think that this video is useful um please give it a like or dislike if you don’t like it and drop a comment this specifically sort of signals to the YouTube algorithm that this is valuable content or something of that sort so yeah it will just push it to more people so that’s one way you can support me by the way um and the other is that yeah subscribe to the channel so you get more videos like that in the future couldn’t hurt okay so icons it added those keywords parted did that too article history settings profile it has added those icons but there’s no functionality behind that and yeah I think this is good this is good but it forgot the download option right so there’s no save draft or these kind of things edit yeah save draft in your article the pro tip copy download and okay so let’s take a screenshot of this and base that also improve this area in our application we should have a download and copy to clipboard Clipboard option in our UI as well so basically at this point when you’re making changes like these I usually shift to the chat more because uh then you want to be a bit more focus on particular areas and then composer could make changes which break other things uh in your application so at this point I think the core base is like very very very small so there’s like low chances of uh the EI messing anything up but as the core base grows uh the chances of a breaking something while adding something new just basically keep on increasing because there’s doing these things and yeah those notifications these kind of things are currently missing so for example if I click on tonight article right now if there’s an error there’s like no indication that there’s an error so we warned that those notifications are basically things that appear at the bottom for example so for instance if I go to legal this is an application that I develop completely with the eye as well you’ve got about 250 users you can check it out as well but if I record this whenever I take any action why is it detecting Spanish anyways so go here by the way no still going okay come on accept all so those changes are done so if I do anything so for example if I go to teams go to brawl scenes libraries like this team um yeah so got a notification that are getting very successfully there was an error it would basically mention that part as well so right now in our application we don’t have anything of that sort there’s another thing that we basically have to add so now it has module not found okay so one thing that you can do when you get others like this you can just copy and paste that over here but in my case I do know what the issue is which is that this library that it is now using is not installed in my application so actually basically told me that right so it said land and beam install which I have not done so I’ll just expand this a little bit and so this is where we have the front end part I’ll just run this first okay let me actually expand that a little bit so the installation is done now if I do npm learn dev the error will be gone hopefully because it actually did tell me that instruction I was just not looking at it because you know I’m creating a video right now but in use now you should always read what the AI basically suggest over here third person yes no area anymore we got the download button button copy button and all these things let’s also ask you to implement the chart history and settings and profile icon uh can you also add the implementation for the backends of the burdens in the navigation bar because this is currently missing they actually don’t do anything at all there should be some sort of implementation at the back end normally when I would be doing this I would actually give very detailed instruction in terms of what Dart features should have but this is just to give you an idea that you can basically just be very um hardware put this uh shallow at certain points because this is kind of obvious that more sort of things should go behind each of these burdens and yeah I can give you um enough implementations for each of those things and then you can improve as you go so over here what I’m going to do is I will just go to I think it’s blog if I’m not wrong yeah I’ll just take one blog let’s go with the this one and I’ll copy the title over here so that’s the article title the tone oh this is not loading anymore lent is also not loading so it basically messed something up as well will ask it to fix it previously it was working there been testing Firefox okay so it’s loading in Firefox there’s not loading in Chrome that’s kind of weird well let’s just try over here so content calendar is a keyword I want to add then uh lingdon is a keyword that I want to add for example London uh posting lingdon content strategy alright so very dark and then click on Generate Article Search it goes to generating and then we’ll see the article over here in the meantime let me just uh let’s not do that because the background will go off and this will not be generators let’s just wait for this to complete and then I’ll accept those changes okay so this is better it’s now I don’t know what this is doing it’s not a it’s not a hyperlink is it no it’s not okay so today the article here the academic folks let’s be real managing your solar band words that I usually would not want in my article and I wanted it I asked her to keep it brief so did keep it brief if I click on download let’s see what happens article text oh that’s nice so give me an HTML copy of the of the articles we’ve got the h 3 tags h 2 tags h 1 tags and so on that’s good and if I copy that and yes so both of these functions are working these don’t I can remove these as well that’s kind of neat and actually did generate these yeah so copied article copied clipboard those notification is also appealing so I’ll just cross that out for now and let’s accept these changes the back end is giving an error Morty Lord found can’t resolve this okay so and team install again this is kind of annoying done and now we run the front and again and the other will be gone so each time it’s importing like a new library for the implementation of something so in this case it’s like a scroll area that’s being implemented you have to install that library so seems like uh there’s still something which has not been imported correctly so I’ll just copy this completely um and just tell it is all there for me and this will likely need to be closed I’ll clear this as well because the chart history has gotten quite long let’s see what it says by the way for those of you who do not know how this is going to get deployed on ATWs or anything else of the absurd I will be covering that in one of the next videos so I just decided that I think it’s better if I convert this into a playlist or maybe create like a really long video so I will cover that how you can connect this to a domain deploy there at all those different things so at the values I will give you links to other videos which are doing their process so you can just take it from there but the very first part the important part is to basically after adding these lines to this yeah let’s do that the important part is to actually have this working in the local environment to verify that okay what you’ve built is actually something valuable so the first goal should be that it is something that actually provides value to you or the people around you for example from their perspective did I not do oh yeah sorry forgot to run this so NPM Learned dev what it does is to is it simply loads the application in your on your local machine basically so it’s not accessible of course to the general public because local horses like a local IP address of your machine uh it won’t be available publicly of course all right so there’s done was supposed to implement these things so they’re still not implemented I suppose oh no it is generation history so it has nothing settings team dog don’t conversational but yeah there’s no talking implemented so this is just like saving the preferences but not doing anything with it does this have anything nope so did nothing for this part but you can target each of these individually if you want for the time being uh target audience let’s go with the beginners and the title not this sorry oops article title and then keywords like Lexus art lingdon and content calendar for dart murder and stone should be persuasive okay actually go with the comprehensive one see if it actually generates like a really long article for us or not so that was one part I think this is good for a basic application but at the same time this does not allow me to add some examples of the articles that I like or the kind of writing style I like or to basically give information for a title so I might have this and uh this might be a block post that I liked night and I might want to for example copy this this this this part and sort of feed that as an information so that like a refresh version of that is also included in the actual article yeah so this is a long one because of me selecting comprehensive 15 words so this is like a long article that it has actually generated now as you can see it’s still saying here’s an se optimized article based on the given parameters ideally it should not contain anything of that sort it should return the title and then there should be some sort of like a uh divider could be just like a vertical what circle or vertical line of a sword I’m talking about uh this basically these lines uh some sort of divider and then another thing which basically tells me about um it was one of the thing which I I think I forgotten uh but never mind the other thing was uh let me just read the chart because I defined that over there sorry about that yeah external links that I might want to sort of uh rank for or encourage within the article that AI basically sort of writes so here’s what I’m going to do I think the next thing that we should work on is the prompt itself so I’m going to go back to cursor and try to find where the prompt is so should be in the back end which is in the in this folder you can see back end and then add our pie so this is where we’ve got our functions and yeah there’s our prompt so I’m going to copy this and paste that over here and I’ll call this prompt like this and then close this so this is a prompt and then let me just copy that and now I’m going to ask AI to improve this prompt let me just show you right so I’m sharing the prompt that I’m using for this application for generating the articles below I want you to make it more elaborate so that it really properly highlights the uh the keywords that I want to rank for so the su optimization should be done for those keywords and at the same time I want it to have additional fields like we discussion initially which is that if I see another article where I see some valuable content I should be able to feed that and sort of like a text field to provide sort of an inspiration to the to the EI to include that information or to you know talk about their particular perspective as well within the article and the other part is copywriting guidelines so the to make the article engaging it should at least start with sort of like a hook or the pain points of the customer or the person reading the article which basically lead them to search for their article so find the best practices for copywriting and incorporate them in the processes part of the prompt so that the final article that is generated it’s like interesting for people to read I think that’s good enough so we’ll take that and for else variants of the article yeah I’ll add that too and then the format to the final or performer like I said it should not be um is Firefox it should not be like this these kind of things should not be there we should strictly mention that the author should only contain the article and nothing else and maybe even the title should be presented separately what is this oh never mind uh wait I think we generated something over here though and it was telling us that you have to wait for 39 seconds or something so where did dad go gone creations yeah when you see Messi in the flesh when Messi fancy a player with a similar playing style to Messi that’s not funny Messi is God Messi is my husband if it London okay so these memes were bad but I do see one of the previous tests that I did with the service so this one was about London being full of EI generated content or something of that service is related to a product that we built the one that I mentioned initially an London where every post and comment is here generated here generated content creator I don’t mind this is funny London is filled with the agents generate post and comments e as alternating generating this meme so that’s good so I like the service I mean it does not mess up the wording at least Delhi or how you would you pronounce it does that quite a bit alright so I’m going to ask E I to improve the prompt let’s see what it does the okay so these are the fields are the basically need okay so now we need to figure out a way to tell composer this is by the require okay you already can see the name actually never mind but let’s first update the prompt so there’s nothing else here right yeah okay so from prompt till here I think we can just copy and paste and all good alright yeah no worries okay all good perfect so we want to tell composer or cursor to sort of incorporate these additional input fields which are now needed based on the updated prompt so I’m going to tell it that I have updated the prompt that is used to generate the uh article you can see that in the accurate app dot by file which is this one but we should get comfortable with the kind of structure that you basically have and what is contained in each of the folders in each of the files you should get familiar with that because that would help you to be more targeted with the kind of changes that you want to see in your application and you can also tag that so now aggart pie is added to the context so I’ve told it you can see that in the aggart profile and based on the new prompt we are going to need to collect more information in the import section from the users please update the front and cord accordingly for your reference these are all the input field start the prompt requires as an invert so just like describe it to the best of your abilities what kind of change it is that you basically want accept our see what breaks if it if something breaks and then just fix that uh this is particularly important for those with a non technical background if you do have a technical background just be very um laser focus in terms of the kind of change that you want to see especially if you’re dealing with a large core base and if you’re dealing with a large core base do not use composer use chart open a specific file tell it exactly what you need change or added okay so it’s doing something I’m going to do this and I think it still wasn’t working over here right oh no okay so it’s working to some exchange over here internet article does something happen yes I think in Chrome it still isn’t working so I’m just going to close that and we are struggling to use Firefox don’t know the reason don’t care about the reason so I won’t really spend much time on that right now the changes are made I’ll just accept all they’ve been saved back and is updated refresh um wait what yes so it was a question that it had asked or it had not completed all the changes yet in the meantime uh what was it that visa located for us is there anything else that we need to take from here no I think we did everything except for this part the dark mode and by the way it actually generates the code for you as well so I could actually just copy this code give it to cursor ask it to incorporate our end of the application but I’m not going to do that at least not for the timing would you like me to explain any part in more detail so we don’t need explanations I mean please I don’t want them frankly so this is no more advanced okay so primary keyword is going to be LinkedIn contact comma or contact plus so just have to contain calendar manually at that second Ricky words uh I don’t know posting bail in public for example just writing random things original keywords this is like primary secondary in trestry keywords that have worn incorporated in the article so international school with the comments on link then engaging on Lingdon getting clients through Lingdon well this is me just randomly adding some details of this sort um in your case ideally when you’re writing an article what is this oh okay I don’t think that post actual title but doesn’t matter anyways so you should actually do keyword research to sort of find the relevant searches or keywords that people basically search for when they are looking for that kind of a topic that you want to write in your block post reference content okay this is good let’s go over here and yeah let’s just I don’t know copy this key points okay this is too much work but let’s go with this for a moment let’s actually do this so we can properly one then I want to add this as a key point create your content bank yeah I think this is enough to get something going technically grammar casual persuasive informative informative standard guilt target audience professionals and then section length should be medium so 2 3 paragraphs is enough yeah now let’s read the article did we cover everything yeah I think so generating okay shouldn’t take that long do we see any error on the back end I don’t think so 2 4 that might be an old 1:53 national this is recent so does it not get generator to work what kind of response is that console has no errors network tab won’t show me the oh shit why did I click on that I’m gonna have to do all of that again so primary key word London secondary key word uh content calendar how to get clients on London and then article title is this by the way just to give a reference this is an article that is written completely by AI as well so I want to be able to do it at scale so the goal is to have 100 block post on this and currently there’s like five so after I made this video check back in like 30 days and you will see a lot more articles over there so anyways uh reference content okay so let’s take this just going to copy a lot of it over here because I’m not looking for a good article this one to test how well the prompt that little does normally right prompts from scratch see how they do and then sort of gradually improve them to cover edge cases and these kind of things but anyways or now it is going to harder let’s go with that like that professionals where they must find generate article 2 0 4 fetch no content what’s happening I think something got broken along the way or something because the API request has completed but nothing is showing and the back and I don’t see any errors I’m getting this in the API response and snow article is oh I think the article has been gendered now because it got a 200 quest or 200 response score so there we go we do have an article H 1 Linden content calendar blah blah blah H 2 this and this is not readable at all for download what does it do this is better so this is basically a herding H1 contact lens the Community Guide assistant posting hook I struggling to maintain a consistent presence on London you’re not alone many professions find it challenging to keep up with the regular posting even when there’s no exclusion of building the person brand blah blah blah but fear not creating a well planned limit learn content learn can be the game changer you need see er in content so we need bad words in our prompt in this comprehensive guy will unlock the secret I don’t like this word EI indicator bless yourself to a world of why consistency medicine Linden consistency is key to this and blah blah blah to streamline your Linden posting process consider using scheduling and automation tools okay consistency is key again key takeaways f a use f a use is a nice touch because that helps from the s U perspective and by following the steps okay so this is pretty good a nice article but one thing that is not good is the format so now we’re going to fix exactly that I’m going to tell the prompt over here so now I’m going to move towards the chart feature right so via an Abert pie I’m going to ask it to have a look at the plant and add the formatting guidelines for the Alpert it should Alpert the uh the output should be in valid HTML tags the reason is that each one alone is not a valid HTML tag it should be like this and then it would be rendered properly for viewing purposes so this and uh and have spacing where applicable so that it is lendered properly by the front end alright what else do we need um I’ll put this part title done and it should not mention stuff like uh here’s the hook or here’s the title oh oops here’s the title or here’s your um Su optimized article etcetera it should just be the article that is sent as the output because I would be directly posting that on my blog don’t leave any placeholders that I would need to manually take out okay so let’s see what it does with the prompt it’s going to improve that hopefully yeah so usually what I’m doing is that I have these tags let me actually implement this first so I click on apply changes cooperating framework nothing changed so yeah this is the only thing that you basically edit other than that everything is more less the same usually when I write a prompt it goes something like this so I have sections so for example this might be the import section and then as soon as the import for example this is done I add this closing tag for the import this defines that okay this is what goes in the import and then there’s another one which is usually for processing or stuff like that and then the last one which is for output or output format for example and then there’s a closing tag for there so everything that is related to our performer comes in between there so that’s like to give a clean instruction so it knows exactly what it is that it needs to do so I’m going to generate dialect again let’s see what we get so it’s generating right now expected to take some time because there’s like 1 thousand words okay so there we go it fixed that issue which was there previously consistently posting high quality content on London can seem daunting which is a customer problem or the retailer’s problem especially if you don’t have a strategy in place but what if I told you that you don’t need to be super organised or have a complex content cleaners to succeed and start focus on a simple practical approach close strategies yeah the third blah blah blah so the formatting is good all there’s nice only thing that’s missing is the images for which we can use ideogram yeah this is well structured putting it all together Faqs is good next steps now that you have a solar industry in the world to create this so on and so forth okay so that’s neat but this is generally the way through which you can gradually improve your application so for example if you don’t like how glitter this whole input section is and maybe you want to implement something which takes input like die form does for example or you want to add Page Nation so you add the user gives input for these three fields first and then the next one just describe that to the AI and it will implement that for you just give it a try and I’m also going to upload the code for this on get up I will try to uh post uh paste the link to that in the in the description or in the comments so if you want you can disclude that depositry try to play around with wherever the project is at that moment and try to build something of your own and I’m going to stop here um close the video out at this point is the video even recording what’s happening here I don’t know there might be a limit to how much can be recorded with the with loom I’m using that but anyways if it’s still recording then in that case I’m going to drop those in that information in the comments or in the in the description if you like the video or think anyone else might find it useful just share it with them and I would highly appreciate that if you more to get updates like this if you’re interested in the AI field then all my journey as a founder of an air first business subscribe to my news later so that you can get updates on a weekly basis straight to your inbox one quick gave your tears that uh you’re going to get an email to confirm your subscription first so just have a look on that uh check your inbox and also your spam if it lands over there and then just confirm your subscription and after that point you will start getting updates in your inbox every week so that’s pretty much it for this video if you would like to see any additional things implemented in this particular item or any particular area that you would like for me to explore just let me know in the comments and I will try to include that in the next video but just to give you a rough idea in the next one I will be talking about how you can create a go to market strategy which is basically a marketing strategy for a product that you might build so we build something which writes as you optimize articles for users and now I want to sell that to people for example right um how can I create a strategy for that and how can I create the content which aligns with that strategy using AI so I don’t have to do all those things manually um I will be covering that in the in one of the next videos within this playlist hopefully fingers crossed so that’s all for the today um see you in the next one cheers bye

Need compelling content? Get in touch for expertly written articles and posts:
✔️Here i show you a top rated social service: Click Here.

✔️More writers.