Transcription
I'm going to show you guys a prompt engineering tip by breaking down this prompt and showing you exactly how I made it. I'm also going to give you a few tips and tricks that I've learned recently over the last few days while I'm building these websites.
One of the first things I want to talk about is this step-by-step prompt. A lot of these tools, Bolt, DIY, Klein, Cursor, all of them pretty much, if you're not using Anthropic Claude, Sonic 3.5, or something, to be honest with you, literally just that model there, you're going to struggle. The reason is that these prompts, right, the prompts used are so complicated, it's insane.
Sorry, the prompts, as in the system prompt, so what it is that's actually making it do this, do that, do the other. Let me give you an example: GPT-4 Mini will hallucinate constantly. There's something about this model that makes it change one little letter out of 100 for no reason. I don't know if people have noticed this, but same with Deep Seek. It just doesn't quite have the backing to create an entire project similar to how Bolt, DIY, or Cursor, or any of these actually will do, right?
So one of the things that I found to counteract that is, well, there's two things here. Okay, first of all, it's the step-by-step process, right? So step one: set up the project with SEO, routing, etc., in mind. Ensure all pages are unique, have structured URLs, programmatically are their own URLs, and not just filtered URLs, etc.
Then step two: set up the caching or caching, set up a MongoDB connection, as well as preparing the Pixel Bay API. Set up the data for SEO API assurance by sending test requests, receiving test responses, then changing your design to fit the API response. Set up the homepage and the index and subindex pages. Set up the individual business pages.
Step six: do the robots.txt, sitemap, meta titles, meta descriptions, or programmatically generated. Use a recurring random list of five meta title types, meta title descriptions, short descriptions, and programmatically added elements to each. For example, "best X in Y," "find a Y in X," right?
So this is one that I found really, really helps when you're trying to build something using, you know, Klein plus Deep Seek or Cursor plus GPT-4 Mini, effectively trying to limit costs by doing this. Now I've got other things to talk about very, very soon on the channel where I've actually moved away from Bolt, DIY, and Cursor, and all of these different things. I've actually just been using Claude, the front end of Claude, to generate these projects for me.
So I'm going to make a video about that very, very soon, but I just think there's something special about Sonic 3.5 for coding. However, you can still get Bolt, DIY, as long as you do this step-by-step process. I'm going to show you a few other tips as well now, but you just have to be very, very careful because it's just not going to work as well as something like Anthropic.
Now, a few other tips is, at the very top, just tell it exactly what you want. Give it the URL of the website. Yeah, at the very top, you just want a very high level, "This is what I want you to do," and then you want to make sure that it knows that you want it to do it in step-by-step order.
Then I'm going to give you a few recommendations here as well. The first one is to use a specific Next.js version. If you just say "create Next.js app at latest" or whatever the command is, right, it's going to use 15.0. I don't know what version it's on now, but let's say it's 15.1.0. The issue with that, okay, is that GPT-4 Mini, sorry, Claude, Deep Seek, etc., their training is up to, I think the latest one is April 2024, if I'm not mistaken. Next.js 15 was only released like two months ago.
Okay, so let's just check that. Next.js 15 was released, yeah, on October 2024, right? None of these LLMs have any knowledge on how Next.js 15 works. So if you are creating an application on Next.js and you say "create Next.js app latest," which, by the way, if you go to Cursor now, this isn't an issue with Bolt, DIY, or anything, but it's an issue with Bolt, DIY. If you say Control K, "create me a Next.js app," 99% of the time it will use this command here, "create next app latest."
This is wrong because the LLMs that you're then going to use to code are 100 or 50 versions behind this version. Another thing is, Next.js 15 has something called breaking changes. What breaking means is that the code difference between 15 and the previous version—you cannot just upgrade to Next.js 15 without changing your code because these two things do not work the same way in Next.js 15 as they did in Next.js 14.99 or, you know, whatever the last version before 15 was.
Therefore, okay, if you are coding using GPT-4 Mini, Claude, Sonic, Deep Seek, whatever, without giving it this updated information, it is going to be coding at a disadvantage because it does not know what the hell Next.js 15 is. Okay, so be extremely careful with that. Make sure that you're using something like 14.2.2, right?
So you can just literally say, let's just say, "use Next.js 14.2.2." There we go. So now when you create this application, okay, I'm going to give you a few more tips here as well. The way I like to do this is I like to create an application, if I'm using Cursor, for example, and then start to code within that application.
So let's just press enter here. Now, another tip I'm going to give you: yes, I want to use TypeScript. Yes, I want to use ESNext. Yes, I want to use Tailwind. No, I do not want to use a source directory. Okay, most likely your LLM will not be expecting you to use an SRC directory, so say no here. Would you like to use the app router? Yes. Would you like to customize the? Sure. Oh, sorry, no.
Oh, whatever. So another thing I would recommend, right, is giving it your settings. Okay, so if I copy this and say these were my install settings, right, and then paste this, it will then know that it has to do certain things, right? Like the import alias here, I believe it can then code with that in mind, right?
So what do you do from this point here? Okay, so we've set up the project, we've got Cursor open. What do I like to actually do from here? So what I like to do is I like to add here a roadmap.md and then paste the entire prompt. If your prompt is over 1,000 lines, you're probably going to have a problem.
Okay, and you know, even with 1,000 lines, because this is using, we're going to be using GPT-4 Mini, for example, it's still going to struggle. Okay, because these models are not intelligent enough really to do this. Now, you could just use Anthropic here, and this will absolutely nail this, and this setup is perfect for Anthropic. But again, it's kind of up to you guys.
So the last tip that I'm going to give you guys, once you've done this, so I can get rid of this because you can just choose not to use your SRC directory, and then give me the entire folder and file structure as you see at the beginning. Then give me the entire commands to create all the folders and files. I'm on Windows. I'm going to delete this. This is optional.
Okay, this will make a lot more sense in coming videos. Okay, these are all optional because basically this is if you're using Claude on the front end to code instead of using something like Cursor. So then we save that and then Control L to open up Composer.
So one really cool thing about this is this is completely free. Okay, now I'm not going to go into too much detail with this. However, GPT-4 Mini is a cheap model, and Cursor allows you to use it for free without even putting your API key. You can download Cursor today, use GPT-4 Mini without putting an API key, without putting a payment method, without any of that, and you can literally just code from there, which is really, really exciting.
The final thing I want to talk about is these here, which are XML tags. This is very, very important if you're trying to use this to create something very, very complicated. Okay, so what you can do is you can reference something like Pixel documentation, and then if I Control C this and then go down, you'll see that all I have in Pixel Bay documentation is just all of the documentation for Pixel Bay, right?
And then the same thing: example response. Right, this is an example response from Data for SEO, which I was using for this project. So you can see if I do Control F example, so you can use example response to understand what the response will be. You can design an individual business page around this response and cache the response in MongoDB for six months.
So I'm referring to example response, which is all the way down here, and what this allows me to do is it allows me to prime ChatGPT-4 Mini or Anthropic or whatever I'm using to code with the required code to send a request and also the response.
Right, and you need to think about this logically. If you are trying to design an application, right, and you only have the request code, so how to make a request, so you give AI, like, yeah, you give AI the code to create a request, but it doesn't know how to then display the response using code because you haven't given it the response code. It doesn't know what the response, like, what the answer from the API is.
Okay, so if you take an example like "find a tradesperson in Ireland," it needs to know what the name of the business is on the API response. It needs to know what the address, like the JSON name of the address. Let me just explain what that actually means. Let me just log in here.
If I go to Playground, so let's say "solar panels SLO Ireland," and then request, it needs to know each individual name of each individual part of the response in order to then display that on your website, right? So let me show you what that looks like. It needs to know, for example, that, you know, text type user review text, "the installation was professional, tidy, quick, and efficient."
It needs to know how to display that on the front end and in what context, right? Same here: type map search domain. So it needs to know the domain. So if you want to give people's websites on your directory, it needs to know that it can find that information in the domain. It needs to know this is the title of the business, URL, contact URL, contributor URL, you know, where it is.
So now it knows that address or snippet can be used for the address of the business, you know, etc., etc. So yeah, that's pretty much it, guys. I just wanted to go through this prompt, explain how I engineered it. We, I do actually have a live video of me making this entire prompt. If people want to see that, then leave a comment in the description and let me know that you want to see that.
I'll leave the video there, guys. Thank you so much for watching. If you're watching all the way to the end of this video, you're an absolute legend, and I'll see you very, very soon. We see more content. Peace out.
In this video, I'm going to give you a completely free way to give unlimited knowledge to your LLMs.