Claude API Crash Course #2 - Sending a Message

So, then we've got the starter project up and running, and the next thing we want to do is send a message to an AI model to get a response. And to do that, we'll need to do two things, right? Install the Anthropic client SDK, and then also get an API key to make requests with. So, we're going to install the client SDK first, and then we'll grab an API key. And I'm on the Claude API docs on the client SDK page, and I'm just going to choose the TypeScript option right here since we're using TypeScript to build the next app. And then on the next page, we should see an install command for the SDK, which we can copy, and then just head back to the code to install it. All right, so I'm back in VS Code, and I'm just going to start up a new terminal, and then I'm going to paste in the command we just copied, and hit enter to install that SDK. All right, so next up we need to get an API key, which we need if we want to start sending messages to an AI model and get responses back. So, you can grab that from your API account, which I showed you how to set up in the previous lesson by coming to platform.claude.com, and you want to click on this get API button right here. Once you've done that, you'll need to give this key a name, which I'm going to call scrap chef key, and then you want to click on the create button down here. Then it's going to show you the key, which you can copy, and make sure you do that now because once you've closed this window, you will not be able to access this key again. So, now we've got the key, we can head back to the code to use it. So, I already created a .env file in the root of this project to store the key in, and I'm just going to make a new variable now called Anthropic, then underscore API underscore key. And I'm going to set that equal to the key that I just copied. And I'm putting the key in a .env file because I don't want to accidentally push this key to get up and expose it because then anyone can use it. Also, I will be deleting this key by the time you watch the video, so no point in trying to type this one out either. Anyway, I'm going to save this file now, and then open up the generate recipe API route file so that we can use this key along with the Anthropic SDK that we installed to start sending messages to an AI model. Okay, so first things first, we need to import the SDK into this file by coming to the top, just saying import, and then Anthropic with an uppercase A. And then that comes from @anthropic -ai and then /sdk. All right. All right, so next we can make a new Anthropic client instance by coming down here and making a new constant which I'm going to call client. And then we set that equal to new, and then Anthropic capital A, which is what we just imported. And then we add parentheses at the end and we pass an object in as an argument. And the reason we do this is so that we can add on the API key property right now. And value of that should be the API key that we just added to the .env file. So, we can access that in Next.js applications in API routes by just saying process.env, and then in square brackets we add the variable name in quotes, which is anthropic_api_key, all in uppercase. All right. So, now we have this client constant, right, which we can use to send messages to AI models and then get responses back from them. Now, we want to do that inside this post handler function, which gets executed when we click on that generate recipe button on our front end. So, at that point we're going to be sending a prompt to the AI model to ask it to a new recipe for us. So, then the way we do that is by first of all making a new constant, which I'm going to call message. And then I'm going to set that equal to await, which I can do because this function is async. And then after that, the client instance that we just made .messages because we're using the messages API to interact with the models, and then on that we're going to use a method called create and invoke it. So, this method is for making a new message, sending it to a model, and as an argument we pass an object which we can then use to customize the message properties. So, the first property I want to add to this object is the model property to specify the AI model that I want to send the message to. So, we can see right here we've got all the Haiku models, uh the Opus models, and the Sonnet models that we can choose from. And as a general rule of thumb, the Haiku models are the most lightweight for simpler tasks, and they're the least expensive. The Opus models are the heavyweight models for more complex tasks, and they're the most expensive. And the Sonnet models just sit somewhere in the middle of those. So, I'm going to choose the Sonnet 4.6 model for this message that we're sending. Okay, so next I'm going to add the max {underscore} tokens property uh to specify the maximum number of tokens that I want the model to use up in its response, right? Because if I didn't add this, then it might use up more tokens and cost more. So, I want to limit this to 1,024 tokens, which is enough for a decent-size response. And I'm using 1024 because it's just a power of two, but we don't have to work in powers of two for AI tokens. This could just be 1,000 or 1,500 or 500 or whatever you want. Anyway, next we've got the um message that we want to send itself. So, we can do that by adding on the messages property, which is an array of objects where each object represents a message in the chat. So, imagine we had a back and forth with the model, then we might include a few objects in this array to represent all the messages between the user on the front end and the model itself, like the message history if you like. In our case, we just want to create a single message, which is to ask the model to generate a recipe. So, there's not going to be any follow-up conversations or anything like that. So, we just need a single object in this array. And then inside this object, we need two properties. The first one is the role property, which basically says who this message is by and that could be a previous message in the conversation by the AI model, in which case we'd put assistant for the role, or it could be the user of the application on the front end and in that case we'd put user right here. So, this message is going to be coming from the person using the application, right? When they hit the button in the browser. So, we're going to put user right here. The second property is going to be the content property and this is where we specify the actual message content that we want to send. So, in this case I'm going to say, "Generate a simple random recipe with clear steps." And I'm not using any of the user's ingredients or filters or anything like that just yet. For now, I just want to send a simple message to make sure everything is working as it should and then later we'll add in those other things. Okay, so now we've created this message and when this code is executed, this create method actually sends this message to the Anthropic server so that an AI model can then respond to it and when we get that response back, it's stored inside this message constant right here on a content property. So, for now let's just log this content to the console down here so that we can see what comes back when we hit that button. I'll say console.log and as an argument I'll pass in message.content. And remember this code all runs on the server, so it's in the terminal over here that we're going to see the output. So, now we can head to the browser and just hit the generate button to trigger this request. So, I'm just going to click on this button right here and when we do that we should see this loader because currently we're sending a request off in the background and hopefully when it comes back we're going to see that recipe then in the console in the terminal. All right, so now in the terminal we can see the response and the value of this content property that we just logged is actually an array with objects inside it. And these objects are referred to as content blocks. Now, in this content block we got back, we can see the type property is text, meaning the type of this content we got is a text response from the model. But also in responses, we could get things like tool use for the type when the model uses a tool, or thinking, I think, for when the model is doing some thinking. And all those content blocks would go into this content array. Now, in our case, we'd just be interested in the block with a type of text, right? Which we can extract from the array by saying const block and then we're going to set that equal to message .contents And then on that, I'm going to use the find method to find the first content block with a type of text. So, we can pass in the callback function to do this, where we get access to each block, and then we want to return the block where the type is text. So, we'll say block.type is equal to text. And this right here now gets us the first content block with a type of text in this array that we get back. Okay. So, we have the block that we need, and now we can update the response down here to be the actual text of this block, because remember, we have a text property which includes the text response. So, for the recipe value, we're going to say block and then after that a question mark, just in case we couldn't find a text block up here. So, we're saying if this exist, then we'll access the text property on it. So, now we're sending the message to the model, then we're getting a response, and we're passing that response back to the front end. And remember, we output that response in the recipe panel components, which you can see if we open that up, and it's right All right, then. So, let's give this one more go. I'm going to click on generate recipes over here. Hopefully then, after a few seconds, we should see the recipe appear here. And there it is. We can see garlic butter pasta, prep time 5 minutes, cook time 15 minutes, serves two, blah blah blah. We've got all the different steps here as well. Awesome. So, that seems to be all working.