Frameworks for building AI apps

0:00 >> And for each project, I'll show you three levels of increasing complexity. For levels one and two, with the right prompts, which I'll also show you, you can implement them relatively easily with no code. And for level three, you might need to add a little bit of code to modify things if you're up for it. We'll be using chat tobt to think through what we want to build and to craft the initial prompt. Then we'll be using lovable to implement.

0:22 As per usual, it's not enough for you just to listen to me talk about stuff. So there will be little assessments throughout the video as well. >> Hey Fern, I know we're going to do today. All right. So before we dive into the nitty-gritty of each of these projects, I do want to do a crash course of two frameworks that are extremely helpful for building apps using any type of AI assisted coding. The first framework is called the tiny ferrets carry dangerous code framework.

0:43 And it's dangerous because you could potentially mess up, reveal sensitive information, accidentally expose your API keys, lose over your work because you don't understand version control, etc., etc. So pay attention. Tiny ferrets carry dangerous code. Stands for thinking frameworks, checkpoints, debugging, and context. Thinking as his name suggests means thoroughly thinking through what it is that you actually want to be building. And the best way of doing this is coming with a PRD, a product requirements document.

1:06 Or actually what is more fashionable these days, we call it a PRP, which is a product requirements prompt, which you'll be inputting into your AI assisted coding tool. Anyways, doesn't really matter. And what goes into your PRP includes the target audience of the app you're building. What's the customer experience supposed to be like? What are the core features? Potentially a couple mock-ups. What's the vibe you're going for? What's the text stack? Basically, the more effort that you spend thinking through what you want the app to feel like for your target audience, the clearer it is that you can communicate this with your AI and get better results.

1:28 And step number two is frameworks. Chances are, whatever it is that you want to build, some variation of it has already been built before. And there already exists very efficient and robust packages and frameworks that have been developed to build these things, which by the way, your AI coding tool has been trained on as well. So instead of forcing the AI to come up with something like completely from scratch, it's actually much better if you can point the AI towards the appropriate packages and frameworks for it to build whatever it is that you want to build.

2:12 For example, React for front end, Tailwind for styling, and 3.js for 3D animations and graphics. Don't worry if you don't actually know what the frameworks are. The prompts I'm going to be showing you later also walks you through these steps. But let's finish the rest of these steps first. Step number three is checkpoints. Always use version control. Some apps already have version control built in, but again, GitHub is considered the gold standard. Then there's debugging. You'll be spending a lot of time debugging, so be prepared for that.

2:34 You want to be make sure that you're copying the detailed error messages into the AI and be methodical and patient with the fixes. And the last part of the framework is context. When in doubt, always try to add more context. More context, more specific, more desirable results. This includes mock-ups, examples, screenshots. Whenever you have an error, provide the AI with highquality, clear context to get the best results. The second framework I'd like you to realize is that you're ever only in two modes when you're doing AI assisted coding.

2:56 And that's either implementing a feature or debugging. And when you're implementing a feature, you want to be providing context, mentioning frameworks, and doing incremental changes. And when you're debugging errors, you want to be understanding the structure of your codebase, providing error messages, and additional context like screenshots. Got it? Okay. I'm going to put a little assessment on screen now for you to answer. And by the way, don't worry if you don't exactly understand what I mean by all of this because I'm going to be showing you what these frameworks look like in action throughout the rest of this video.

3:18 And if you actually do want a much deeper explanation and more thorough explanation of these framers and a lot more, you can check out the video that I have linked over here that goes into a lot more details. >> Calculations complete. >> The calculator. The calculator.