Transcription
Hello everyone, welcome back to our channel and this amazing video. I'm Aditya. First of all, I want to apologize because I ran a poll on the community tab and I asked for what video you want to see next in an e-commerce for an e-commerce platform. And most of you voted for Lara Live Wire. Oh, so sorry, because of certain reasons, I am unable to create that video at this moment, but I will create the video further down the line, definitely. So I have another video with Lara and Livewire. Hope you'll like this.
So, this one is a chatbot. So here I have a chatbot completely with Livewire and Alpine, of course, and Laravel, Tailwind CSS, CLA AI, and DCUI. So here I can write a message and say, "Hey, how are you?" "Sorry, hey, what is this about?" Something like this. Because bots, they may not have feelings, so they will say, "I don't have feelings." Something like that. But you can customize it. It provides details about various items, categories, and gives you counts of items, whatnot, whatnot. So this is a very specific one. You can always customize it. Here I'm going to tell it, "Okay, what items do you have in the electronics category?" Okay. And then it will think a bit, then come back with to me with some answer, hopefully. Let's see. There you go. I have tried some results. I got laptop, smartphone, tablets. These are a few items. And this is coming from the database, guys. This is not something that I have hardcoded. It runs the database query, feeds back results to the cloud, and then continues the flow. So let's see how can we have this amazing chatbot done. So without any further ado, let's begin.
To begin with, I have a Laravel project with Breeze starter kit. If you're new to this, I would definitely recommend you to check out my another video of project management using N and Laravel. There I have used Breeze starter kit, but for API. This one is Breeze starter kit, but for UI with Livewire and B as functional components. So here I got the starter kit. I have connected the same database that I use for the project management app. Just add it to extra tables, items and categories. I'll tell you why for the magic. And then here we got the chatbot button. So this is like the basic you have that I've created. So here I have created a Livewire component which is chatbot.blade.php and it's a simple I component. So here if I go to this, it maps on this chatbot over here. And also I have these two SVG icons taken from Hero Icons, right? So this UI here is pretty much as a basic starting point. I have just done it to save some time. Now let's get started from here.
Now, this itself is a Livewire component. This chatbot.blade.php. So here, what I'm going to do is I'll convert this div to form and here I'm going to have wire:submit and here I'm going to have sendMessage. Now, what I'm going to do is I'm going to go to this. Just going to close these things first. I've seeded some data as well. I'll show you in a moment. So I'm going to go to this class, live component class, and here I will have that function. Public function sendMessage. And this here will have the logic to generate the messages and something like that. So here I will have a property. So that's going to be a public property, dollarmessages, and that's going to be an empty array by default. And what I'm going to do is I'm going to use this. I'm going to call something else because I believe Laravel has this messages or dollar message as a special reserved variable used in many ways. So I'm just going to call it chatMessages to keep it simple. And here I'm just going to re-iterate through them and just show them over here.
Now, next, we will need the message text. So here I'm going to use validator. I think it's something like this. Hashtag validator. Let me just double check with Livewire documentation. So here, validation, validate attributes. And we got validate. Actually, not validator, it's the other way around. So you have something like this. These are attributes, validate. And then here I'm going to import this from Livewire attributes validate. And here I'm going to put some attributes. So here we can put the typical Laravel rules like these. Or if you want more, you can use or you want more complex rules, then you can use a function which is rules. And then you can write your validation rules in that.
Now, if you're new to Livewire, how does this work? Is you got the UI over here. This is your HTML component or like a basic component. And that connects with some backend. In this case, a PHP class. And whenever, like Livewire makes you write this code, like you don't need to know most of the JavaScript or you need to know like least minimum JavaScript, you could say. And it handles that. It has its own JavaScript for it. It handles the communication between front-end and back-end. And whenever the UI changes, it gets the new UI from the server, the updated UI, and then just updates the page as it is or updates the component.
Now, here, this we will have some rules. So I'm going to write this field is required. Then this is string. And here we should have minimum three characters in the messages. And this would be public textMessage. By default, it's going to be blank. Okay. I'm going to bind this on this input. This is the Breeze component that comes with Breeze starter kit, actually. So wire:model message. You can also debounce the input if you like, but by default it's debounced, I guess. So you can debounce it by using the modifier debounce or so on. So if you're coming from Vue, you might see v-model, that's very similar to this. If you're coming from React, you have onInput and then value binded with it. So you have states used with React. So Livewire automatically will update this for us. I have to bind it to this textMessage variable over here. That's textMessage. And also here, if I want to run the validation, I just have to say this validate. Like typical Laravel thing, nothing fancy.
Now, what we need to do is we need to add some validation validators here. So I'm going to use the validate attribute that comes with Livewire. So Livewire attributes validate. And here we write the rules. So I'm going to say this is required. It should be minimum of three characters and it's a string. Okay. So I'm just putting multiple validations. So that's why I'm using the pipe symbol or the standing line. And then here I want to customize the error message. So I'm going to pass the error message thing here. I'm going to say, "Please enter something." So let's see what happens. If I go back over here, we got this. Oh, I also need to display the message here first before I move forward. So here I'm going to display the message somewhere here. I'm going to say, P tag, just going to put class text-red maybe 400, 500, some padding. And then just going to have BG black so it can blend with this window over here. Here we will have our messages in a moment. Then here I'm going to say, add error. Then what error we are referring to, textMessage error, if it's there, show the error message. And that's the end of this directive. Okay, let's give it a try. So if I go back over here, the text message. Oh, okay, wait. It should give the custom message. Let's see why it's not giving it. All right, I need to give it as an array because I'm using multiple rules, of course. So I have to do something like this. If it's a required rule, then, okay, let's give this a try. So if I go back over here, "Please enter something." Perfect. So this works great.
Now let's take forward from here. What I'm going to do is I'm going to create a service class. So you can use Laravel and commands to create classes or action classes or some normal classes. But all I'm going to do is I'm just going to use like simple PHP approach. So in the app folder, I'm going to create a service folder or I'm just going to create a new class. Call it service. I'm going to call it AI bot.blade. Sorry, not blade.php. Sorry. Perfect. Then this is going to be a PHP class or PHP file, actually. Then I'm going to use the namespace of app service. Oh, sorry, it should be this for slash service. And then I'm going to say, class AI bot. And then all I need is the logic here to communicate with Cloud AI. So what's going to happen is the message will be sent. Once it's great, we add it to the message array, we get the response from Cloud, and we keep on adding it over there. So let's do this.
So we go back to Cloud AI. We need the API key. So I have already got the API key. I have put that API key in my .env file as CLOUD_API_KEY. And that's what I'm going to use. So here they got the tooling method. So what tooling does is you can run a function. So what's going to happen is you have your defined functions. Let's say I have a function to register, I have a function to run a database query, I have a function to do some random logic, some sensible random logic. Now, what Cloud is going to do is you pass those functions to it, like just the name, not the function code, but just the name, the description of it, and what details it expects. And what Cloud is going to do is or this model is going to do is it's just going to, based on the user's response or the user's input, it's going to tell you whether to run the function or not. And then it's up to you. You can run the function. You can just pass that. Like here, if you notice, it gives the stop reason, it gives the tool use, and then it also gives in the response, okay, what function it's asking for. So this get weather. And we can run through this. Great.
What I'm going to do is I'm going to use. So they got the Python library, but we are using PHP. So I'm going to use this go method. So here I'm going to have a constructor to create a client. So public construct. Sorry, function construct. Now, what this constructor is going to do is it's going to create a client. So I'm going to call here public Cloud client. Just going to do this. Client Cloud client HTTP. That's going to be the facade with headers. So here I will have the base headers. So here, what headers I need? Okay, so first I need this one, X-API-Key. So I'm just going to copy it as it is. And the value for that would be env. So environment variable file. From here, I'm going to pick up this CLOUD_API_KEY. Perfect. What other headers we need? We need Anthropic-Version. So let's get that. And what's the value for it? I'm just going to use the value from here, this one over here. Okay. Then what else do we need? We need the content type. So grab that as well. Content-Type. Okay, application/json. That's pretty basic, right?
Now, here I'm going to have public function send. Now, you can keep this as is. If you notice, I have given it a name of AI bot. So if you want to make it flexible, you can add OpenAI APIs as well, like GPT APIs. And then depending upon the sendMessage, you can decide, okay, whether you want to send the Cloud client or do you want to like use the OpenAI client. So that you can make it flexible. So it's kind of like make it a little bit flexible. Of course, you can use SOLID programming principles, make it more structured. But I'm just going to keep it basic over here, right? So what do we need here? So we need model. So I'm just going to use the Sonnet model. That's I think the basic one. So just to give you an overview, like this is how the pricing looks. You got the Sonnet model. That's the pricing. I think Opus is the powerful one, the most powerful one. And Haiku is the most cheapest one. Sonnet is like a midpoint of Opus and Haiku. Okay. So I'm going to go with Sonnet over here. So go back, just close this, just copy the model over here. And that I'm going to put in my here like this. So dollar. Okay, here we'll have the message. Then here we will have dollar model. And that's going to be by default this. You can then we can customize the model if needed. Right.
Now, here I will have dollar response. And here I will have this Cloud client going to make a post request. I believe this is the post request URL is this one over here. We can also keep it as a base URL. And then we need the data. So data will be model, max_tokens, what tools we are using, and so on and so on. So what I'm going to do is actually passing it as a message. I'm going to pass the array data. So I'm going to keep it like this, array. And maybe we can also pass. Actually, we can pass everything. Like I'll just keep it string model over here. That's fine. So here I'm going to have model will be model, dollar model. And then whatever data I have passed that follows the structure for Cloud. Okay. Then we just return the JSON response.
Now, what I'm going to do is I'm just going to have a test here. And then we can connect it with our UI. So what we need to do is dollar response or actually I'm going to call it, let's call it data. That's going to come from AI bot. So new AI bot, send. Okay, what we need to send? We will be sending the prompt. And all other things like these are the messages. There's also something known as system thing that you put to just give it a role. So if we see an example over here in the API reference, text completions, that sends a response to message. No, sorry, messages actually. So message over here that says, just over here. So we got the curl one, the post request. And there we have something known as system. There we go. It just used to define the role for it. So here I'm going to give it something like this. System, you are an AI virtual assistant, assistant chatbot. And make sure to answer what you know and not what you don't know. So just to give it kind of like an idea that, okay, don't hallucinate. It will still, you can always put guardrails with prompt engineering. Let me know if you need a video on prompt engineering. Happy to create one where we can see how we can put some guardrails and avoid unnecessary hallucinations. Right. Then here we have. So the system variable that goes over there. Then we will need actual messages. Like messages over here. So we got role and content. So what I'm going to do is, so I'm going to give messages like this. It's going to be an array. So in our case, we will have role. It's going to be either system, sorry, assistant, or user. So assistant is going to give me the answer. So I'm going to start straight with the user. So here I'm going to say role user. And then we got content, I believe, yeah. And that's the message entered by the user. Also, we want to send the previous chat messages. So these things over here. So what I'm going to do is I'm just going to put those chat messages over here. This chat messages. Like the spread operator is very handy. I like that. It just helps to merge two arrays. Now, here I have to start with something. So here I'm just going to start the chat message with some value saying that role is, um, assistant. And I'm over chatbot. And make sure to answer. Okay, that's I'll go with this defined message. Let's throw on some error. So that's for the messages. And here we will have so far something to work with. I think I'm missing something here. So you got this, this, this. Okay, all good. Tools and so on. So if we go back to documentation over here, sorry, just go to tools, function call. So here we have the tools. So I'm going to write the functions in a moment. But just for now, let's keep it till this point. Okay. So we'll get the data. Let's just item the data and see what do we get. Okay, right.
So let's give this a try. Just read out of page, just for like that. Okay, "Hi, I'm new to this site." Okay, we get error. Okay, what's the error? "Invalid message. First message must use user role." Oh, sorry. So the first message should be the user role. By a user saying something. So what I'm going to do is I'm going to put here something like this. And just going to say that, okay, uh, wait, something is wrong here. Yeah, like this. And just going to say that, okay, this is not the message. I'm just going to give it a prompt that I need some help. You can customize this, of course. "Please help me with your best knowledge." Right. So now let's give this a try. So we go over here. "Hi, I'm new here." We still getting the error. "Max token field required." Okay, we didn't pass the max token field. So we need to pass that as well. So I'm going to put the max token as not 100, maybe a little bit more, maybe 200. So tokens are roughly 100 tokens make 75 words. So the max token is number of in, like the total length of the message. So you can do the math, roughly around 150 to 170 words in an on an average. It will give it as a max message, which is fine. So here, "Hi, I'm new here." I'm just typing the same message. Something is happening. Okay, we get the message. So it says, "stop reason" and "turn." That's great. We got the content. And here we got the message. Okay, the type is text. "Hello and welcome. It's great to have you here as a virtual assistant. I'm here to answer." Perfect.
Now, all we have to do is focus on the content thing. Whatever array we get, the first message, it's going to be of type text. So that's going to be, sorry, role assistant. And from the content, we are interested in this text. So here we just need to see what's the stop reason. If the stop reason is tool, we need to do separate logic. Otherwise, we just proceed. So what I'm going to do here is I'm going to say, if dollar data, stop, that's an array, I believe. That's why I'm using the array syntax. Yeah, it's an array. So the stop reason is maybe end_turn or max_tokens. Anything that is not tool, because that's what we are expecting here. Um, this one over here. So here, if there's stop reason, then we should [Music] see the JSON that, oh, where is this? Sorry, it should be in the do. It's mentioned somewhere here. Sorry, yeah, tool_use. So if this is not the stop reason, we just add it to the message. We just need to be careful as well. We don't want to tell them, "Hey, you have exited token." So also need to handle that. So if it's end_turn, actually, let's make it safe. If it's end_turn, we just add it to the messages. So here I'm going to say, this chatMessages, that's going to be whatever the chat messages were. And then we just add our message. So here it's going to be role, that's of assistant. And content will be dollar data. So from the data, we want the content zero. Content zero. And from there, we are expecting the text, right? So this is our chat message. And also, what we want to be sure, like if you want to pass additional prompts, you can pass the prompt over here. Or you can pass it in the system. Or you can like, either system or user, you can put the prompt like how you expect it to do, what additional details you want to pass in the prompts. So on and so on. So you can customize the prompt. It's totally fine with that.
Now, next bit is, we want to render these messages in the. So here I'm just going to do, remove the titem. So we want to enter this messages in the our chatbot window over here. Okay, so I'm going to create, I'm going to use DCUI. And you create the bubble. So it's chat bubble. So if I go back over here in the DC DCUI. So here we got chat bubble somewhere. Can I search it? Yeah, there you go. That's easier. Chat bubble. There you go. So we can use the simple chat bubble like this, customize it. Or we can just, uh, use the other ones that they got over here. Going to go with the simple one, this one over here. So the HTML for this. So this is the start. And this is the end. So the end one, if we notice, that's for the user input. And the start one, it's for the bot answer. Okay. So depending upon who is answering, we're going to put that logic over here, right?
So let's create a chat bubble component over here. In the components, let's create inside custom. So the outside ones are the Breeze ones. So here, chat-bubble.blade.php. Right. Now, here I'm just going to copy the UI from here, like this, as it is. Paste it over here. Perfect. Now, what I'm going to do is going to keep just one component over here. And this I'm going to change depending upon whether it's a user or bot. Okay. So I will have some props here. Dollarprops. It's going to be like, is user. That's going to be true by default. So that's the boolean value, right? What I'm going to do is I'm going to have dollarattributes. So this is all Laravel blade components merge. So whatever base attributes I want to give on this HTML element and then merge with additional attributes that's comes on the component element. For this one, this will be an array. So I will have class. Then here I'm going to say, we have the class of chat. And now here we want to determine whether to use is chat, whether it's chat-end or chat-start. Okay. So how it's going to work is, we can do it like this. I think we use double thing. We can straight up we use PHP logic. So here I'm going to say dollaris user. If it's there, then that's going to be chat-end. Otherwise, that's going to be chat-start. Okay, it should work. If not, we'll fix it. Right.
So let's take this here. And this would be chat-bubble. And here I will put slot. So we can just put message is within this. Perfect. Right. Comes over here. I'm going to have for each dollarchatMessages as dollarchatMessage or just dollarchat. Yeah, just chatMessage. What am I doing? And for each, right? Then here I'm going to have X-custom-chat-bubble. Right. And auto to complete. Here I'm going to put the chat content. So it's going not going to be the message, it's going to be content. Because if we go back over here, uh, let's put this component here. So if we go back over here, we are having role and content. So I'm interested in the content. And, uh, what else? Yes, we want to make sure that it's user. So is user. That will be determined based on whether it say like who is who is what's the role. So here I'm going to say dollarchatMessage role. If that is equal to equal to assistant, so that would be the true or false. So you can just put this one. So sorry, it's not equal to assistant. Or I can do is equal to equal to user, then it's a user. Otherwise, it's the assistant. Okay, let's see if this works. Go back over here. Okay, so we have a problem. It says this can't be used. Okay, that's fine. So we can go back over here. Maybe I can create these classes. No, let's, let's see how we can fix this. You went with a slightly different approach. I just use normal PHP operator, string concatenation. I think I'm doing something wrong in the template syntax. That's fine. Okay, is user chat. And otherwise chat start. Okay, I'm pretty much sure there's a better way to do this. Okay, let's go over here. Uh, we have this "Hello, I'm a virtual assistant. I need help." So we also need to make this disable or add some animation here when it's continuing. If I enter the message, this is not going here. Okay, something is going wrong here, definitely. So let's get back to this one. Let's add some, first of all, let's add padding to the window. So chatbot to the window over here. I'm just going to add PX of two, some normal padding. And I'm going to see. Oh, P off two, actually. Let's keep adding from all sides. And I'm just going to see why this message is not coming here. Okay, so we got chatMessage, chatMessages as chatMessage. That's great. We got over here. We validate it, send it, see the stop reason. underscore reason equal equal to enter. Then we should go here. That's the problem. And what I mean was that, okay, let me tell you. So here we have this chatMessages. Whatever the chatMessages were. So dollar dollar dollar this chatMessages. And that should ideally work. So we got the previous messages, then the latest message user entered. We send all of those as it is. When we get the new message messages, we got the previous messages along with the user. And then we got the assistant one. Okay, let's give this a try. I'm going to go here, type something. Wait, I have removed all DD statements, right? I need to remove this one over here, right? Let's give this a try. "Hi, I'm new here." Uh, stop reason undefined. IR key. Okay, sorry, I did something wrong here. So what we need to do is when we send to Cloud, we need to remove these greeting messages. Like remove the first message. So what I'm going to do is here, I'm also going to say is set this thing over here. So we can avoid these errors. And then this thing equals to end_turn. Then only go here. Otherwise, we're just going to add error message. That's fine. And next thing we need to do is this thing we want to splice it. So the chatMessages, they all go here. But what we need to do is unset this do chatMessages, the zero one, before we send it to Cloud over here. So the first message always going to go. So what I'm going to do is I'm going to do something like this. Dollar firstMessage. It's going to be this one. And when we get the message, when we send it to the cloud, that's great. So we send it over there. And here I'm going to say, this chatMessages. Um, I think there is array_shift or something in PHP. Let me check. Or I can just use the spread operator. That's easier, actually. So this chatMessages, then dollar firstMessage. And then whatever are the other messages. Then the thing continues. So we send it over here. Or we can just send it by removing the first message and then sending it forward. Moving forward, we just go here and so on and so on and so on. Okay, let's give this a try. Yeah, "I'm new here." Send it. Now, somehow this is not going here. Now, okay, this is little bit weird. Like this. What I did is I just used this PHP attribute. And I'm doing running the class, like creating it in separate variable and adding it over here, rather than doing straight string concatenation, because that's kind of messing it up right now. Let's try and add a user message. "New here." So what I need to do is I need to add the message, the user message here. Okay, "I'm new here." What's happening? Why did it refresh?
Okay, so what I need to do is, if you see, it's coming because what's happening is when Livewire sends a request over here, it has to wait till it finishes and then update the thing. So what I'm going to do is I'm going to first send the message, come back, or need to do some logic here, and then do this real-time update. So let's see how we can do that. To solve this problem, what we need to do, we need to add the message over here, the user message, and then dispatch an event to the components to itself. So how does it work is, we first send the user input to the backend, adds to our actual message array, and then we can dispatch an event to the components to itself, or the component can dispatch it to some other component, that's fine. And once that's done, so we go back over here, and this logic will work. So this is the event, and this is we can can use the on attribute. So when this event happens, run this function. So now let's give this a try and see if it works. So what I've done, I just added the logic of running the AI thing. Okay, so let's go back over here. "Hi, I'm new here." Send a message. Now this should come up with the new messages once it's completed. If everything goes well, let's see. Something is wrong here. Let's see what's wrong. Let's put the data here. I think it's going back again to the same logic. Let's see what's in the data. "Hello, let's start a simple message." Okay, we're getting error, and it should be a valid list. Okay, something is wrong here again. So let's see what's inside our chat messages. This chat messages. I think it was a valid list. And let me see what's wrong here. "Hello." All right, I think it has to do with this one over here, starting from zero. So I have to do something like this. Array values. So it will reset the index. Lead us to somewhere. Dollar data. Let's see if it's still giving the error. But perfect. Now it's going well. So now we are on the right track. So let's go back here. Let's say, "Hello." And then we should see the message. Great. Perfect.
Now let's add the logic of function calling and handle that logic as well. Right. Now here I'm going to write. I've created a service class, functions. Now here I'm going to write the methods. So the first method is, pli function, let's say getItems. So here it expects, okay, do you want items from a category, or you want all items? So here I'm going to say dollar category. I'm just going to put blank here by default. Then here I'm going to have return dollar items. I'm just going to pick like two or three items. We don't want to send all the items. So items, item. That's the model. And here I'm going to say where. So here I'm going to use when. First, if the category is given, need to add a relationship for that. So here I'm going to say public function. It belongs to a category. I'm going to have kept it like one to one. Sorry, one to many relationship. So one category has many products. Very basic one. Return this belongs to. This belongs to the category model. Oh, okay. Why is it not C category? Okay, let's get this class. Um, why is it not importing that? It should be category. Okay, let's import by ourself. Use App\Models\Category. This one over here. Pretty weird. I'm not sure why it didn't import it automatically. That's fine. So category. And, uh, foreign key is category_id, just in case if it cannot find it. Right now, that's here. I'm going to say, when the category is given, I will have a function, dollar query. I want to get all the C, uh, I want to get the category where the name is like whatever it is. So here I'm going to say, dollar Q where has C category. And then a function again. Dollar Q. I'm going to call this query this time. I'm going to say, let's put this on a new line to be honest. Let's make it a little readable. I'm going to say, dollar query where name like. And here we just put that, whatever name it's looking for or word. You can we can go for the literal word or we can just use the pattern match. So where has these categories, we use it. Now, when, and we get maybe we can take just one limit. I'm just going to say maybe five. So we just send five items max. No more than that. And also I want to select just the name and category_id. Like this. I just want to say, okay, these are the items in this category. Something like this. I'm just going to send this as it is. Okay. Then here I'm going to say, public function. Um, okay, what can I get the count of the items that we got? Get total items. Or actually, this will return. Okay, let's just say get total items. And here I'm just going to pass the category if it has. And simply the same query. Actually, I'm running the same query again. Just going to give this time the count. Like this. So this is going to give me the total items for this under this category. Okay, let's write these two functions. And then we can add n number of functions like this if we need. Okay.
So here I need to create a function map in this AI logic. If I go back to the API, how it works is that we have the tools. It's an array. Each array element is again an array with key-value pair. Name of the function, what it does, the properties it needs, and so on and so on. Okay, let's go step by step. So, okay, what I will do is I'll write the tools here. Public function getTools. Okay. And return. So this is going to return the array itself. So I'm just going to skip this tools. I'm going to start straight from here. Right. So the first array here will be the name. This is what's the name of the function. So here they are calling get_weather. In my case, I'm calling it getItems. So it has to match with this one over here. getItems. Okay. What's the description? Best. It's match. If it's not, that's fine as well. Because again, we are going to use a statement or match or some kind of some kind of logic. Okay, next, great. What's next? So here we are going to say, okay, get the top, sorry, the the five items from the database. If the categories provided for a category. If the category is provided for the category, otherwise, we just give as much description as we like. If the categories provided for that category, otherwise, just five items. We actually just choose the first five. We can randomly select five or something like that. That's fine. Now, next, here we got the input schema. Input schema. That's again an array. So what does it have? It's the type of object. Oops, it's an array actually again. So it's object. Okay, what properties does it need? So properties. Okay, what are those? We got the category, which is of type category. That's of type string. And description: category. We can also tell them like, we can get make a database query here, get all the categories that we got, just the names, and just tell, okay, these are the categories that we accept. Something like this. So the bot will tell, okay, at these are the categories we have. But one, I'm just just going to keep it open. The category of the item. And then at the end, we have required for this function. I think it is. So this bracket is for properties. This one over here, within the input schema. What is required? So over here, this one, this still under input schema. So required is nothing. Thing. So empty, something like this, right? Um, just need a semicolon. Right. Then we have another function as well. So I'm just going to copy this schema here. Put it over here. This function is called get_total_items. So what this function does is, gets the count of item from the database. Gets the count of items from the database. If the category is provided for that category, otherwise, just all items count. Perfect. Then we got same logic. Nothing is required. We can, if the, if the category is required, we just put the category here. It's that simple. Right.
Now here we got the tools. So we just say, okay, the tools are this getTools. So just run this function. It's going to return me all the tools that it uses. Right. Now the next step is, okay, I got the tools. And then it will tell me, okay, what function to run. So here I'm going to say, DD dollar data. Now purposely going to ask it, okay, give me the list of the items. Or just give me what items you got. Something like that. So here I'm going to say, "What items do you have?" Something is happening. Just going to go here. Tool use. That's the stop reason. In the content, to answer your question about what I, I'll need to retrieve that information from our database. Let me check for you. Here it just gives that message. We can hide this message. And then here we have the answer. So we need to put this tool use. Like this thing there. So that it knows that, okay, a tool was used. Something like that. Right.
Next step, we need to do is, we run a function and then use that answer to create a message. Now, if we check the API, what it is doing is, to help Cloud answer based on the function. So we get this from the assistant. Okay, it says tool use. This the tool use. These were the inputs. Great. The next step is, we get the answer. Running the function. Okay, 65 degrees. So that's the answer. And we have to send it as an array. So that it knows that, okay, this is referring to an array. It's referring from a tool result. It's not a text. It's referring from the function. And then it will give us the message later. Okay, so let's try this out. So what I'm going to do is, the content will be type text. And type tool_use. Tool ID. So it's something related to this entire array that goes in the content. So here I'm going to do something like this. So, okay, so we come over here. Now, we keep these things. Actually, we can do it here. Like here, like this. So whatever the chat messages. Okay, right. So here I'm going to say, else if. And here I'm going to say, if is_set, stop_reason is that stop_reason. And then stop_reason. Data, stop_reason is not max_tokens, but it's something like tool_use. Okay. Now, here I need to get, I need to modify this little bit differently. Okay. So what I need to do is, I'm going to wrap this in a function because I will be reusing this again. So what I'm going to do is, this, I'm going to say, uh, sendResponse. Like this. Okay, let me tell you what I'm doing here. Another function. Public function sendDataToCloud. That's what I'm going to do. Whatever this is the return value. So that goes over here. This sendDataToCloud. Keep this as it is for now. Okay, need to remove it actually. And here what I'm going to do is, okay, so what was the tool? Which tool was used? So first, I'm going to add the content as it is for the assistant role. Okay. So here I'm going to say, this chatMessages as it is. And here I'm going to refer to dollar data content as it is. Perfect. Right. Next, okay, now run the function. Okay, how to run the function? So we need to pick which function it is asking for. So if we go back over here, it tells me from the array here, what function I'm referring to. So if I focus on the first index, it's going to tell me what function I'm referring to. So here I'm going to say, dollar function is equal to dollar data content, the first index. So this one over here. Right. And we know the name of it. So here I'm going to say, dollar service or AI function. Equal to new AI functions. And then what function to run? So that would be dollar response or dollar result. I'm going to call it. I'm going to say, dollar AI function. And as it's a like a dynamic name, I'm going to call it dollar functionName or dollar function over there. And if it has any, uh, content to send. So that would be within here. I'm going to say, okay, that's the name of the function. And, uh, like the name of the function, getItems. And the input, whatever input it is. So dollar functionInput. Now, this I need to use a spread operator because that's going to be an array. Hopefully, it should work. Let's see. There you go. String to add to string conversion. Yes, because this thing doesn't really work like that. Ideally, from what I know is that you do something like this. But that's again going to cause a problem because this has a key-value pair. Easiest way to do is use the built-in PHP call_user_func_array. I think there's something like that. Call_user_func_array. Yeah, this one. So here I'm going to pass the object. This one over here. Then the function name, dollar functionName. And then, so that's the array. And then the input, like this. So it will automatically pick up. So this is very equivalent of calling, let's say, if it's get, um, total items or getItems. So if the function name is getItems, it will be this. And the category will be category. And whatever the categories, something like this. Great. It's still going to not like it might work this time. So what I'm going to do is I'm going to go for the straight next method. So here I'm going to say, this. Okay, so now, okay, I know that what the user ID is and all those things. So going back to the document over here. So role of user. And the content should be in this format. So this chatMessages. Then what do I need? I need to say, role of user. And the content is an array. Okay, so there. Sorry, here I'm going to say, the type is tool_result. Tool_result. Right. So the type is tool_result. The tool_use_id is that's the tool_use_id. So this would be from dollar functionID. I think that's what's in the response. If I am right. So ID. Yes, this ID over here. So the name of the this variable. Yeah, ID. And then the content is whatever is the result. This is an array. Sorry, content is whatever is the result from the our function call. Right. So this and this. Right. This should be it. Okay, great. Now I'm going to make dollar data again. SendDataToCloud. That's why I wrapped it in a function. So that I, because I need to tell Cloud, okay, here is the result from Tool. Now send me a new message. Great. Now, what's going to happen is, it's going to send me a new message. And then here, all I need to do is, um, I can, I can use the same logic. I have an event. So that I can update the UI, telling it, "Hey, I'm just running a function." And then run this logic. So I can re, like literally rerun the logic that I have here. Like dispatching the event. And then running. Instead of this runAI logic, there will be something else. Like run the tool logic or something like that. That's fine.
Okay, now I have two options. I can show the messages as it is. Like this is an array. So I can show it. Otherwise, I can just skip it. So to skip it, all I have to do, I have to remove the second last and the third last element from the array. That's a little bit unnecessary. Like we want to keep it. So that Cloud knows that, okay, the tools were used. Like this. And it might refer to that answer if it has to. So what I'm going to do here is, I'm going to say, if this thing over here, this chatMessage content, is of type string, then only show it. Otherwise, don't run it. So here I'm going to say, if not is_array, if this, um, this thing over here, if it's not an array, then you display it. Otherwise, just skip it. Okay, so it won't run an error saying that, "Hey, string to array conversion." And all. Hopefully, it won't. But this is how it should be. Right. Now, let's give this all a try. Great. Um, I
Something went wrong here. End for each. So we got end for H. Oh, this should be end if, right? Okay. Any DDS and all those things here? No. Okay, great. Let's see how does this look like? I'm new here. Need to clean this up. Whenever I say a message, and also need to show the pending state. Okay, next, what items you got? Just typing it as it is so that it gives me something. Electronics category. So I need to show here. Okay, I'm running a function. So it's the same thing like running an event and all those things. And let's see how it guys. Okay, there we go. Property not supported in live for property handled request capture. Okay, something went wrong here. It says data chat messages components. Uh, right. Okay, so I think it has to do with Live Wire array to string. Like the properties are changing the type. Okay, the first mistake is this is an array, like array inside an array. So this should be like this. [Music] Um, thing. I'm just die dumping the chat messages to see. So the content is an array. So array inside an array. So array inside an array. Okay. Uh, this one over here as well. So you got array inside an array. So this is fine. Okay, let's see now how it goes from this point onwards. Does it goes to the data thing? Because it was giving me error. So how many, what I need to do is over here. I need to convert the answer to string. So if it's an array, convert it to string. Like just create a string format. So what I need to do is where is that thing? All. So what I'm going to do is this returns me, uh, object. This returns me [Music] integer. Right now, depending upon what it is, I need to work out. So this is the result. So what I'm going to do is I'm going to say if dollar is object result, then all I have to do is JSON decode. Sorry, encode. I think I need to also use get over here. I forgot get. That's another reason why it was messing a little bit. Then, um, just decode encode dollar result. Else if is int, so you can convert it to string if it's an array, or you can also do is array, then just convert it to the string format. Right? Let's see what do we have from this point. So diom data. Let's see how many items in electronics. Okay, now it's getting somewhere. So token usages. And here it tells me that I bed this and based on the get function, get tot there. Okay, it shouldn't give me the function name based on the result from the get total items. Is there anything else? Okay, U what I should tell it that don't use function name in the response here. Maybe that might help in the system message. Where is the system message? It's here. Just have to tell it that do not use use function name in the response message. Let's see if this works. And then, um, like the typical object then would be once I get the data added to the messages. So I just need to remove the tiem from here. Okay, so that means like the same logic over here what I was doing. So whatever is it data content text, something like that. So if it's a string, show it. Otherwise, don't show it. Something like that. Right? Let's try this out. How many items in electronics? I'm asking this question so many times. Okay, let's see if this time what Live Wire has to do. Perfect. Based on the information I have retrieve, there are three items in electronic. There's something else you like wrong database category. So I have other data tables, sorry, categories as well. So if I just show you what categories I got, so I got electronics and then I have clothing, then I have got books. And just keep on asking it for items. And that's it. Like there we have it. So last thing is just add the pending thing. So let's do that. Right. So here I will have dollar sorry, public dollar pending equal to false. Right? So what I'm going to do here is that I'm going to start the pending thing over here. So this pending equal to true. And then when it reaches till the end here, I'm going to say this bending equal to false. Right? And then I can also do wire loading. So targeting the function here. If this function runs, then do wire loading. Like this one over here. Um, wire loading this one over here. So this is useful if you want to target or target specific actions here. Like wire loading and the function is referring to the remove function, something like that. So you can do this one or you can use the pending variable. Just using the like typical JavaScript way of doing things. So because here I'm kind of imitating that like using the events. So let's see. So here I can show an animation like bouncy animation or something like that. And what I could do here is I need to disable this. So, um, disabled. This would be disabled if it's dollar pending. Right? So disabled it if it's pending. And, uh, or I can also do wire disabled or something. Is there something wire disabled? Let me see. Uh, no, there is no wire disabled. Okay, that's fine. U, just disable it when it's pending. And, uh, what else here? I want to show this chat from the user saying that if dollar pending and if so, definitely this is not a user. So I'm going to go straight with false. And here I'm going to say like simple thinking. You can add some fancy bouncy animation or what not. Just going to see thinking like this. Okay, let's get this a try. Hi, how are you? This won't make sense to think because it has to think to. Oh, it's by default disabled. Uh, I think because if I inspect this part, I'm using the typical JavaScript approach. I shouldn't actually because it's disabled because it has some value. So what I need to do is I think there's I can use Alpine logic over here. So here I just need to say, um, something like this. X bind or colon disable. That will refer to Alpine disable. And here I have to say entangle with pending. Entangle because Live Wire by default come with Alpine pending. Okay, so that's fine. Pending. Okay, let's give this a try. Oh, it's still pen. It's still disabled. Oh, this one over here. Yeah, let's see what's wrong. Okay, little silly mistake. So I have to take an Alpine state and then entangle it with Live Wire value. So it will automatically look for it and then assign it to the attribute here. Okay, great. Okay, so it's now working. Let's say Hi, how are you? So thinking. Okay, thinking is coming twice. Don't know why. Maybe just got added over there. Right? Then here I want to say how many items you have in your clothing category or what items you have in clothing category. This should have taken. Not sure why thinking things is coming so many times. Ah, it's in the forage. That's why. I'll tell you why is it since that thing, it's in the forage. I have to keep it outside of the forage. Silly mistake again. Sorry for that. It should be here. Hi, how are you? There you go. Then it's thinking. I need to clean this up. So let's do that as well. Chatbot here. I have to say this text message is blank. Hi, how are you? There you go. Perfect. Okay, I don't have feelings. Okay, that's fine, dude. Now, what items you have in clothing? Just need to make sure it's C capital. Just added thinking. You can say anything like, so I got t-shirt, jeans, t-shirt, jeans, sweater. And also it has this weird thing. I have to put auto overflow auto over here. Uh, where is that? This one over here. I have to say or flow auto. So that how many items in clothing? One items including. You can also use that Lara's ask AI DB thing where I can just use simple English statements and it will run a query for me. What items in clothing? I don't. I think I clicked outside. That's why I went something there. Make sure I cannot. Don't have to click outside. So t-shirt, jeans, sweater. I can use the markup thing as well and ask it to give it in a markup and make it more fancy. But yeah, that's all I think in this video. Thanks a lot. There you go. You got good scroll as well. Great. Then. Right guys, that's all in this video. Hope you enjoy this video. If you like this video, please hit the thumbs up button. If you feel this video is worth sharing with your network, please do share with your network. And if you haven't subscribed to our channel, please do subscribe to our channel. So see you in the next video. Till the next time, goodbye.