Claude API Crash Course #1 - Introduction & Setup

All right, then, my friends. In this series, we're going to be using the Anthropic SDK to make an AI-powered application like this called Scrap Chef, which allows users to add and remove food items to and from the pantry, and then generate recipes only using those items. And you can also apply filters, as well, like using only five items or keeping the recipe vegetarian, etc. And when we submit this, under the hood, we're going to be sending a message to one of Anthropic's AI models using their client SDK and the messages API. And inside that message, we're including all these pantry items, any additional filters, and a prompt for the AI model to generate a recipe using them. Then, after a few seconds, hopefully, we're going to get that recipe back from Anthropic, and we display it right here. Also, notice that it's not just plain text that we're rendering right here. We're rendering a full HTML template with different tags for different parts of the response. And we're able to do that by making a schema using Zod, and then receiving the output of the model as JSON according to that schema, which makes it really easy to inject that response into a template like this. And by the end of the course, you should be comfortable using the Anthropic SDK to add AI features to your own applications. So, then, before you start building anything, you're going to need an Anthropic API account and then set up billing with them, because much like most AI APIs, you have to pay to use it. So, to sign up for an API account, you can head to platform.claude.com, and from there, you can either sign up with your Google account or your email address. Once you've signed up or logged in, you're going to be taken to your dashboard, and from there, you can click on this little credits link at the bottom of the sidebar down here. And then, on this next page, you're able to add a payment method. I've already done that, and I can update my payment method by clicking on this little edit icon right here. But if this is the first time you're adding a payment method, you're going to see probably a different button here somewhere. Anyway, once you've added that payment method, you can click on the buy credits button to add credits to your account. I think $5 is the lowest amount you can add and that's going to be much more than enough for the application that we're building. Also, you can set a monthly usage limit right here, which is going to then notify you as soon as you're approaching it. So, do that if you wish. Then, if you go back to your dashboard, you can also top up your account with additional credits if you run out from here as well. So then, now we've got an API account set up, let's start building the app. Now, to get us started, I've already prepped a Next.js starter application, which we can then add the AI functionality to. And the starter app looks something like this. We've got the header, and the sidebar, and a placeholder on the right for any responses we get back from the AI models. And there's absolutely zero AI features in this starter app at the moment. It's all just basic React components with a tiny bit of interactivity baked in. For example, we can add items to the pantry over here, which is just using component state, and also saving them to local storage, so that if we refresh the page, those items are still going to be there. We can also toggle these filters down here. And if we then click on the generate recipe button, we just get the food items and filters logged to the console for now. Now, I will say, if you want to fully understand how this project works and how we'll be using the Anthropic client SDK within it, it would be beneficial to know a little bit about Next.js because we'll be using a few Next.js features like page components and API routes in this course. So, if you want to learn more about Next, then I've got a whole masterclass about it on the netninja.dev website, and I will leave a link to that down below the video. Anyway, this is the starter project, and you can download it from this GitHub repo right here. It's called ScrapChef, and I will leave this link down below as well. But, you want to make sure that you select the starter project branch from this drop-down. Once you've done that, you can download a zip of the project by coming to the code button right here, and clicking on this option right here. Or, you can clone the repo and just check out the starter branch if you prefer. Okay, so I've downloaded that starter project and I've opened it up in VS Code. And the first thing we need to do is install all the dependencies, which I'm going to do by opening a terminal and then in the root of the project, I'm just going to use the command npm install and hit enter. All right, so now that's done, let's have a little look at this starter application. And I'm not going to delve too deeply into this because I want to keep the focus mainly on integrating the Anthropic SDK into the project to add those AI features. But I do want to quickly run over the main building blocks so you've got a rough idea about how all of this works. So, like I said before, it's a Next.js application using the app router and inside the app folder, we've got an API folder for the API route we're going to use to send a request to Anthropic later. The path for that API route is just the folder name, which is generate-recipe and inside that folder, we've got the route file as well, which we'll come back to and take a look at shortly. Next, we've got a components folder for the different React components that make up the application. And these are all organized into subfolders as well. So, we've got the dashboard folder for a dashboard wrapper component and that renders the sidebar and the main contents. And in fact, we'll come back to this file in a moment. We've also got the recipe folder for the loader component which I've prepped and that's just a custom loader that we're going to show while we generate recipes later. And also the recipe panel components, which is where we'll be outputting the recipes generated by the AI model as well. Then we've got the sidebar folder and inside that, we've got components for the sidebar itself, uh the pantry section where we add ingredients inside the sidebar and then also the filter section where we apply those filters. And in these components, we're just using local state to manage those different things. And finally, we've got the UI folder which just contains a custom button component. Now, if we quickly go back to the dashboard shell component, we should see in here that we create a function called generate recipe. And this function gets passed into the sidebar component as a prop, so that when we click on the generate recipe button in the sidebar, it's going to call this function and it passes the pantry items and the filters as arguments. So then inside this function, we first of all set some local loading and error states, and then we make a post request to the API route. And as the body of that request, we send the pantry items and the filters. When we get a response, we then update the recipe state with the response recipe, and then that recipe gets passed into a recipe provider component that wraps the main content. And that means in the recipe panel later, we can access that recipe data using a use recipe hook, and then render it within the template of this component, which is what we do down here. Now, that context and that hook I already created, and they're inside the context and hooks folders. We don't really need to go into those, it's all pretty standard React stuff. Anyway, when we send that post request to the API endpoint from the dashboard, we can see that if we open the API route file up, that we handle that post request right here, and we extract the pantry items and the filters from the body. And then currently, we just send a dummy response, which is this JSON down here with a recipe property. And at the moment, that recipe is just this dummy string. So throughout this course, we'll mainly be working in this file using the Anthropic SDK to communicate with an AI model like Sonic to generate a recipe using these items and these filters, and then we're going to send that generated recipe back as a response right here. Also, just one more thing, I've made a recipe type in the types folder, and right now that recipe type is just a string, which is what we're currently sending back as a response. But I've also prepped this other version of the type for later, which contains all these different properties, and eventually we'll be sending a response back to the front end that looks something like this instead of just a string. For now though, let's just run the application to make sure it works by coming to the terminal and we want to type npm run dev and then just hit enter. When we do that, it should spin up a dev server at localhost port 3000, which we can then visit in a browser to preview the site in. So then, this is what the application looks like to begin with. We've got the dashboard component wrapping everything, the sidebar on the left, and then the recipe panel on the right. We can delete pantry items by clicking on the crosses and we can add new ones as well by typing in here and then just hitting enter. We can toggle the filters down here and then we can also click on the generate button to send that post request to the API route and when we do that currently, we just get that dummy response back, which we can see right here in the recipe panel. So then, that is the starter project up and running and in the next lesson we'll be using the Anthropic client SDK to send a message to an AI model. By the way, if you want instant early access to this course, you can get it. It's all up on the netninja.dev website. It's just $3 to buy and I will leave a link to the course down below. Or you can sign up for a Net Ninja Pro subscription, which is $9 a month and for that, you get access to my entire course library, which includes a lot of masterclass courses that are much longer and go into much more detail, plus some other pro exclusive courses as well. They're all right here in the library and like I said, it's just $9 a month and you can sign up right here. So, I will leave a link to this page as well. Otherwise guys, enjoy the course and I'll see you in the next video.