Transcription
All right. So, in this video, I'm going to show you how we can use Cloud Code with literally just one prompt to build this WhatsApp AI agent. We've built it for a dental clinic that offers teeth whitening and so on. And with just one prompt, we built the entire WhatsApp agent and also this dashboard that our client can view all of the messages that the AI agent is sending.
If we were to build this on any then there would be no dashboard and the client would not be able to see what the AI agent is doing. Obviously, I can see what the AI agent is doing here from the receiver side. So from the customer side, they will be able to see what the AI agent is doing, but the actual business owner is not able to see what the AI agent is doing because WhatsApp doesn't show you the messages that are being sent. Only the person receiving the messages can see them. So with Cloud Code, we've made it build the actual WhatsApp agent and this dashboard as well. So the business owner can see what the AI agent is doing. So without further ado, let's jump into this demo.
I'm going to say, "Hello, I'm looking for teeth whitening." We're going to send this message over. We should see a popup over here as you can see. Hello, I'm looking for teeth whitening. And then the AI agent responds saying, "Hi there. We offer two types of teeth whitening. Our take-home option is 299 and the inchair whitening is 450." If we jump over here, you can see we have the same message right here. Let's say I'm looking for the inch share option. Again, we should receive the message over here. As you can see, we received a message and the business owner can monitor exactly what the AI agent is doing from this dashboard. And it literally took us absolutely no skill, no coding skill, no coding knowledge to build this. We we just send over one prompt to Claude Code. And I'm going to show you exactly where we get that prompt.
So if we jump back over here now, we should see. Perfect. The intro option is $450. Would you like to book an appointment? Say yes. It should now send me over a booking link. As you can see here, we have the booking link. Can jump over here to WhatsApp. And you can see the booking link where if I click here, it takes me straight to that booking link where I can now book in a slot or an appointment for this for this tea whitening. Also, because we've built the dashboard like this, you can see all of the conversations that the AI is having here with different customers. You can see their phone number, total messages, first contact, we can see last active, and we can even see the intent. The AI is going to generate these little cards so the business owner can see these intents over here. And they can even just press this send booking link. And as you can see now, it sends us a booking link like this. If we jump over here, we now should have a new booking link as you can see right here. So the business owner has everything they need and you can start selling this today. So without further ado, let's jump straight into it.
All right. So before we build anything, you can see I have this document right here. So you can follow along with exactly what we're doing in this video. This document is everything you need. So we have the one prompt that we need to send over to Claude. I've spent hours making this prompt so you able to make your dashboard look like this. So make sure you go down and grab that prompt. and it's best off if you follow along as we're building this. You can see here we have all of the credentials that we need and we're going to go through every single one of these so you know exactly where to get them.
The first thing we need to do is use cloud code. Now for me I'm going to use cloud code on anti-gravity. So to use that you come over here look back to gravity. You can see we have this. Let's click in here and it takes us to this page right here which is just an IDE that anti-gravity or Google has made and we can just press download for Mac OS. I'm going to open anti-gravity now and it's going to bring us to a page like this where we have to open a folder just so we can store everything that we build on this actual computer. So I'm going to press open folder. I'm going to find anywhere on my computer to store. So documents. Let's come down here to my cloud code builds and let's call this new WhatsApp agent. Press create. Press open. And we should see it pop up on the left hand side over here folder that we've just made which is new WhatsApp agent. Let's press yes trust. We have that open here now.
Now, to get Claude Code, we just come down here to where it says extensions. We're going to click in here, look up Claude up here, and press install. So, you can see I already have mine installed as you can see here, but you're going to press install. Then, when you install it, you can click on it right here, and we can open Claude Code from here. So, we're going to open this. We're going to close everything here. H. We can now go back up to the explorer section over here, and we can close this. Now, we just have to put in that one prompt over here. But before we put the prompt in, we're also going to get the credential. So Cloud Code can go ahead and do everything in one go.
So I'm going to come back out here. Let's come back over to our document. And as you can see over here, we need to get a couple of credentials. The first ones being these WhatsApp credentials right here. So let's start with these ones first. In order to get them, we're going to come over here to a place called business.fas.com. So I'm going to come over here to business.fas.com as you can see right here. And for me, as soon as I go to this page, it signs me in. But for you, you're going to have to sign in with either your personal Facebook page or your business account or business email, just like a normal signin page. As soon as you sign in, you're going to come down here to the settings page. Over here on the settings page, we're going to come up here to where it says apps and we're going to press add new app. So, I'm going to press add. Create a new app ID. Now, it's going to take us over to the developer side of things. So, for the app, let's give it a name. Maybe call it agent Claude. Let's click next. Now, for this section, I'm going to I'm going to select this down here, which is connect with customers through WhatsApp. Let's click next. For your business portfolio, you can see it's asking us which one do we want to use. If you don't have one, click create business portfolio. It's just going to ask you what's your business name and so on. If I click here, you can see it's just going to ask me for my business name, my first name, my last name, and my email. And you can create a portfolio like that. We're going to click next. We already have one. We're going to click next again. We have the overview section. Let's press go to dashboard.
All right. So now after we do that, it brings us to a page like this. When it brings us to this page, we're going to come over here to where it says use cases and we're going to select customize over here. So let's select customize on this. And this is where we're going to configure our WhatsApp credentials. So I'm going to press start using API. If you don't see start using API, then you can just click this API setup on the left hand side regardless. Now over here, there's a couple of ways we can go about doing this. Firstly, you can buy a number on Twilio and use it over here. As you can see, I have a number right here. Or if you're setting this up and you want to set this up quickly, you can click in here and go to test number. This is where WhatsApp is going to give you a test number. So you can start going back and forth and testing how it's going to work. Now, because I already have two numbers here, that's the max I can add on my plan. But if I didn't have two numbers, then I would also have a button down here to add a new phone number. Now, if you're going down the route where you're going to use a test number, then you're going to press get new test number. It's going to give you a test number. And down here, you're going to have to put in your actual phone number. So, if your phone number is, I don't know, 1 2 3 4 5, then you're going to put in your phone number right here. You're going to press generate access token. It's going to generate you just a long token right here. And then you're going to press send message down here. So, over here where it says send message, you're going to press send message. And it's going to send a message from the test number that it just created for you to your actual phone number right here. And the reason WhatsApp does that is just to make sure that you're verified and that you're not spamming somebody with a test phone number. So, it's making sure that you actually own that test phone number. Now, with test phone numbers, you can only send messages to yourself. So, you can only send messages to this number right here, which is your personal number. But when you're setting this up for a client, you would come in here and press add new phone number. And then you could go over to Twilio or wherever you want to buy a phone number. I'm pretty sure on Twilio they're like $1 to buy a phone number. Then you would bring the phone number in here and just add in a new phone number by just typing in what the actual number is. And then you can have a phone number here like I do.
Now, the first piece of information we need from here is the phone number ID. So, I'm going to copy this. I'm going to come back over to the docs that we have. So, this Google doc that we have and you can see the first one we have here is a phone number ID. The second one we need is a WhatsApp access token. Now, to get that access token, there's two ways we can go about it. If we want a simple, just generic, easy to use access token. Then, we can press generate access token up here. Now, most videos you watch about WhatsApp connections will tell you to use this access token, but it's wrong because it's going to break in 24 hours. If you're building this for a client, it has to work for as long as they need the product. So, instead of using this access token, we're going to come back over here to where we just were. We're going to click out of this cuz we've already created the app. We're now going to come up here to where it says system users. And in here, we're going to add a new system user. So, in here, you're going to press add system user. Uh, you'll put in a name for the system user. Maybe call it Claude agent. And then you will give it the role as an admin. And press create system user. I already have a system user down here, which is NHM. We're going to use this one for today's instance. Now, after you've created that system user, you're going to come in here, and you're going to assign it an asset. I already have any down here. So, I'm going to come up here, press assign assets, and we're going to give access to that app that we've just made. So, mine is claude agent. We're going to give it full manage access, and we're going to press assign assets. Now, we can generate the full access token. So, I'm going to come up here, press generate token again, choose the app that we've just made. We're going to click next. Over here, we're going to choose never, so the token never expires. Click next and then over here we're going to select permissions. Now over here we want to give access to these three main permissions right here which is WhatsApp manage events, WhatsApp business management and messaging as well. We can press continue. Now after we press continue it's going to bring us to this page or this popup right here which is going to ask you to verify your account. You're going to press verify account. It's going to send an access code to your email address. As you can see here, confirm your email address. Press send email. It's going to send you a confirmation code which you're going to put in here. Press submit. Wait four to 5 seconds and it's going to pop up an access token. After the access token pops up over here. You're going to press copy. Bring it back over to the dock that we were working on, which is this one over here. And we're just going to pop in that access token over here. So, your access token is going to be some long code like this. You're you're going to pop it in here. And now for your WhatsApp web hook verify token. This is just something that you can create. So, for me, let's just say something like pizza 123. We're going to use this later. So remember this code or if you type it in here you'll be fine but you can just put in anything here a general password but we are going to use this later so put something in here that you're going to remember.
Now the next thing we need to do is move on to superbase which is a lot quicker than WhatsApp and on superbase we need these three pieces of information. Now Superbase is really easy to set up if you just follow this. Just come over here look up Superbase and in Superbase it's basically just like Google Sheets but for apps. So, it's going to create a backend for your system. So, we can store all of the messages. So, we're able to view it in a dashboard like this. Over here, all of these messages are being stored on Superbase. So, now the business owner can see them over here. So, over here on Superbase, we're going to click in here. We're going to obviously need to create an account. I already have an account, so I'm going to go to my dashboard as you can see, but yours will be sign up or sign in. Then, you're going to create an organization. I have my organization right here. Now, over here, we're going to have to create a new project. I have my WhatsApp agent storage project over here. But for you, you're going to come up here, press create a new project. You're going to create a new project. You're going to choose this organization that you're in. In this section, all you have to do is give it a name and a password, and then press create new project. After you've created a new project, it's going to bring you to a page like this. Now, all we need over here is the actual credentials. Cloud code is going to do all of the building on this side. So, we just want to straight away come down here to the project settings over here. We're going to look for data API. I'm going to grab this and in here we have the API URL. So I'm going to copy this API URL. I'm going to bring it over to our document that we're working on and I'm going to put in the Superbase URL. We put that in here. We're going to come back over here to Superbase. I'm now going to come up here again into the project settings. And this time we're going to come over here to where it says API keys. We're going to come over to this section which is legacy non-service roles. And you can see here we have the public key which I'm going to copy copy that public key. bring it over here to the dash and drop it in here. So, we have it service roll key. Your public key is basically the service ro key. So, you'll put in your public key here. It's going to be a long string of numbers. You'll put it in here. Then, we're going to copy this service ro secret. We're going to reveal it. Press copy. Bring it over and put it in here as your A9 key.
Now, we are just about done. We only need these last two pieces of information, which is literally just one URL. So, in here, you can see we have open AI key. I'm actually going to change this for Claude because I think Claude is better in these instances for answering humans or for talking in like chat interfaces. So, we're going to get a Claude API key. To get that, we're going to come up here and we're going to look up Claude Platform. Now, Claude platform is not like the one that you would typically talk to when you're just asking Claude a question. This is where we're going to get API key. So, you're going to click in here, obviously, again, sign up if you need to, and then come down here to where it says manage API keys. Over here is where you're going to create an API key. So, you're going to press create API key. Give it a name like maybe claude agent and then press add. It's going to pop up a key which you're going to copy. Bring it back over here and then you're going to drop it in here. Now the last piece of information is just a Calendarly API key. Now this is going to make it extremely simple to manage calendars. It's completely free also. So you're going to come over here to Calendarly and you can set this up for any business owner as you're building it for them and it's going to automatically put whatever bookings that person makes. So over here on Calendarly, you're going to sign in and then up here you can press create a new booking. So it can be a onetoone a one a one-off meeting poll. Most of the time it's going to be one to one. So you'll just press one to one up here. You'll create a new you'll create a new meeting like we have over here where you put in all of the details. So like the duration of the meeting, typically you just put in 1 hour. This is really just to notify the business owner that somebody booked in. So you can put in typically 1 hour. The location you can change this to in person. So up here you can see we have Google meet or it can be on phone call. Once we have that created then we have the booking page. So if we come over here now we can actually go to this booking page to view what it looks like. And now you can see we have a booking page like this. So people can book in to get their appointments straight from the chat. Now we need to get an API key from here. So I'm going to come down here to where it says integration and apps. We're going to scroll down here to where until we find API and web hooks. Click in here and press create a token. For the token we're going to give it a name. maybe just Claude. And in here, we're going to select SE scheduling, user management, and web hooks. We're going to click next. It's going to send a code to your email. You're going to get that code, put it in here, and then it's going to give you an access token, which you're going to bring back over here, and you're just going to drop it in here for your Calendarly API. So, you're going to drop it in here like this, and it's going to be your Calendarly API. And then for your Calendarly event URL, you can just come back over here to your calendar, come up here to scheduling, and we can just copy this URL right here. So, we're going to copy this, bring it over, and now that's all we need to do, and this is going to build the entire system for us.
So, all we had to do was spend a couple of minutes getting these credentials. Now, Cloud Code is going to do all of the heavy lifting for us. So, what we can do now is just copy this entire thing right here. So, just copy this entire document. We have our API keys in there. Come down here to the very end. Copy this. We're going to bring it back over here to Claude. And we can just drop it in this page right here. And that is basically the entire build done. This is going to build out the dashboard, build out the WhatsApp agent, and do everything for us.
Now, I know everybody watching this video may not want to build an a WhatsApp agent for a dental clinic or for the purpose that I've built this for. So, what you would do if you wanted to change that is you would come up here and change the actual purpose. So, in here, you can see we have you're building a WhatsApp agent for an internal dashboard for dental clinic called Bright Smile. You would change that to whatever business type you're working with. Maybe you're working with lawyers, so you would change it to um maybe 123awyers.com. And then down here for the actual treatment and knowledge, you can see all of this. You can just say to claude code, change this prompt for the business that I'm working with and and then tell it about the business that you're working with. And it's going to change the entire prompt so you have it for exactly what you want.
Now in here, we're going to send this off to Claude. And now Claude is going to begin building the project. Firstly, the WhatsApp agent, and then it's going to build the dashboard so we can view the WhatsApp agent. There's only a couple of steps after this, but let's wait for Claude code to finish up building this.
All right. So, you can see now Claude is doing some planning. It has created a list of to-dos and it's going to go through that entire process. When it's done, you can see we have a bunch of thinking. I'm just scrolling through all of the things that it has done. So, it has everything it needs to do over here. All right. So, now you can see Claude code has just finished up and it's given us some things we need to do in order to push this live so a client can actually view this. First thing we need to do is, as you can see here, the code is done. Now, let's get this live. Firstly, we need to set up the Superbase database. So, we're going to go over to Superbase, create a free account, new project. Once created, go to the SQL editor, put in a new query, and paste this. Now, that might seem overwhelming, but we've already done all of that. All we need to do now is copy this and paste it into Superbase. So, I'm going to copy this, come back over here to where we were on Superbase. Now, over here on Superbase, we were currently in the settings. We're going to come over here to where it says SQL editor. Let's click in here, paste in what we just copied from from cloud code, and then we're going to press run. When we put that in, and we press run, it's going to create a table for us, and we're going to have that table over here, which is going to store all of the messages that we create. Now, obviously, I already have messages, so you're going to see this as empty, but this is where we're going to store all of the messages. So, we're able to see them over on the dashboard.
Now, that's the first part done. The second part is we need to push it to GitHub. So it says create a new repo in GitHub. In your project terminal, do all of this. Now, we don't have to actually do all of that. All we have to do is create a new project. So again, we're going to come out here. We're going to come over here and look up GitHub. Now, these steps might be overwhelming or tedious, but just follow these. You only have to do this once. Once you do it the first time, the second time is going to be a lot easier. So come over here to GitHub. Obviously, sign in. You may have no repos over here. I have a couple, but you're just going to press create new. Put in a repository name. Maybe call this just claw agent. Choose the owner as yourself, the person that just signed in, and choose this as private. And you're going to press create repository. When you press create repository, it's going to bring you to a page like this. And all we have to do over here is copy this right here. So, it's going to give us this URL. We're just going to copy this. We're going to bring it down here to Claude and we're going to say here is the GitHub repo. Can you push it? Put in the URL and we're going to send that off to Claude. Now when we give that in there instead of doing all of this claude is basically going to push it to GitHub for us. So you can see here it's checking the git status doing the recent commands and once that pushes this to GitHub we are on the last step. So you can see now done everything is pushed to GitHub all commits are live on the main. That just means everything worked.
The very last step that we need to do is deploy it to Verscell. And this is a very very easy step. So it says up here go to Verscell add a new project import the project that we made on GitHub and that's basically all we need to do. So we need to go over to Verscell and we need to create create a new project. Again for cell is completely free. So we're going to jump over here. We're going to look up for cell. Now when you come over to Verscell you're going to be empty if it's your first time using it. You're going to press add new up here and press add new project. Now over here you're going to have to sign into GitHub. So the previous thing that we were just on, you can see here we created this project 1 minute ago. So whatever we just made on GitHub, we're going to import that. So we're going to click import. Now over here, before we import, we have to add in some environment variables because we previously used a WhatsApp token, a Superbase token, all of these tokens that we collected at the start of this video, which was all of these right here. If you scroll back up to the top, all of these is basically what we have to put in. So what we can do is literally just copy and paste this. Grab this entire table just press copy bring it over to versel and in here you can just paste it in here and as you can see it will automatically put in all of them tokens. So in here just put in the tokens copy and paste it from the doc and then you can press deploy. When you press deploy it's going to bring you to a page like this where your project is now live. So it's on an actual real URL that you can give to a client or you can give to a business owner or whoever you're working for. you can give them this URL. If we click to this URL, you can see it brings us directly to the page where our WhatsApp agent is set up on.
Now, the last thing we need to do is when we're over here, obviously, when you're over here, it's probably going to be no messages because it's your first time using it, but we're going to grab this URL right here. We're going to come back over here to Claude and I'm going to say, here is the versel URL. Can you tell me what I have to put into WhatsApp? We're going to put in that URL and we literally just have to do one very very last thing. So you can see over here it says the callback URL that we have to put in WhatsApp is this right here. So is this right here. So this is the very last thing. We're going to copy this and remember the token that we made on Google Docs. Claude also has it. So it says remember to put this in as a verified token and subscribe to messages. So this is the very very last step. We're going to come out here now on this page that we were initially on over here where we press create apps. Again, you just have to come over here to where it says use cases. Click into use cases and then you will have this page here. Again, what we need to do over here is we need to come over here to where it says come down here to where it says web hooks. We're going to configure web hooks. And as the last step, we just need to put in that web hook over here that that we just got from cloud code and then put in the password that it gave us. So, it was this one right here, which is pizza 123. Let's copy this. Let's drop it in here and press verify and save. Now, when it has saved that, you can see when we come down here, we have a bunch of options. We just have to come down here to the one that says messages. We're going to subscribe to this. So, we're just going to turn this on. And now, that is everything completely done. We should be able to send messages over. It should store them in Superbase and respond back to us on WhatsApp.
So, to test it out, let's come back over here to the dashboard. This is the one on Verscell. We already have it open over here. So, we have the full dashboard here. Let's send a message over and see if it's able to save the message. So, let's say hi there. Send that over. I just said, "Hi there." And you can see we received that message over here. And the AI agent says, "Hi there. How can I help you today?" So, the entire build is done. We can do a bunch of different stuff over here. For example, if I wanted to add in a section where the business owner could take over from the AI, I could just come back over here to Cloud Code and say, "Hey, I want to add a feature where the business owner is able to take over from the AI." It pauses the AI responses and the business owner can just continue to talk like it's a normal WhatsApp conversation. There's a bunch of different things you can do. We can ask it to change the UI. We can ask it to update the prompt for the AI agent to be a lot better. We can do a bunch of different things by just telling Claude Code what to do. And if you've gotten this far, then you've handled all of the hard work. Everything before, like the configuration, getting the credentials, that is all of the hard part. When you get past all of that, then the only thing you have to do is is chat with Cloud Code over here and tell it what you want to do. If you want to change the prompt, you can do it here. If you want to change the UI, how it looks, then you can do it here, and it's automatically going to change over here for your client on their URL.
So, that's going to be it for this video. If you liked what you seen here, click the first link below where I teach you how to scale your AI agency to over 100K per month like I've done with my agency. If you want to get the resources that I was talking about in this video, then click the second link below.