Build an AI Voice Agent Custom Dashboard WITH AI | Retell AI x Cursor x v0

So what I'm going to be showing you guys In this video I haven't seen anything Like this on YouTube and that is showing You all how I built a modern looking Custom dashboard for voice AI agents to Track and monitor phone calls that are Coming in or that are being made track Your kpis all that sort of stuff and I Did all of this with just minimal effort Um pretty much using AI to generate the UI for me to generate any code that I Needed to connect uh The Voice AI Platform to my dashboard and just using AI to do a lot of the heavy lifting for Me when it came to things like debugging The program and the dashboard that sort Of stuff uh so even if you don't know How to code you could pretty much get up To speed in a week or two just learning How JavaScript Works how to use nodejs And pretty much start building Dashboards just like these in the matter Of you know hours with AI so for the Specific dashboard that I'm going to be Walking through we're going to be using Platforms like retail AI to build a Natural sounding low latency low Response time AI voice agent we're going To be using the v0 service to generate The code for the UI and then also the Cursor code Editor to generate any other Code like connecting retel to our Dashboard and debugging and that sort of Stuff and then super base and and verel

To have a database to store our data in And then also verel to host the Dashboard online so users can actually Go on the the dashboard and visit the Dashboard on the internet and you can Pretty much get started with all of These platforms with 0 I mean all of These have free tiers or free trials so The the barrier to to entry is pretty Much uh very low and you can get started As soon as today right now I buil AI Voice agents for for all types of Businesses including Home Services real Estate medical and dental Industries Just to show you guys how these agents Can save time generate more leads and Generate more Revenue per month so if You're interested in using AI voice Agents inside of your business feel free To book a call Down Below in the Description to see how we can get one uh Built out for you and using them in your Business now first step is going to be To uh create a voice agent going to be Using using retail AI again for uh Building the voice agent you go ahead to The retail homepage should land on the Agent page and hit create an agent and Whatever type of agent you'd like to Build uh it doesn't really matter uh for My youth case I'm going to be building One for Real Estate I'm going to be Using the single prompt agent and then Uh just write up a general prompt set up

The agent and just customize it for use Uh my use case but um again for your use This case you can customize that however You like but just a couple things that Will have to change up now if you take a Look at the agent that I have I've Already written up the general prompt I Have a couple different sections like The role and objective the behavior um The the task and all that sort of stuff So all of that is ready to go I have my Functions Set uh any knowledge base you Can also go ahead and put that in um so Again a lot of this uh like I said it's Going to be customized for your specific Use case what you you do want to make Sure you have set up is first the post Call analysis that's going to be a big One because when it comes to a dashboard There might be specific stats um or Specific metrics specific K kpis that we Want to track from the calls um so we Have to be able to to track them through Something like post call analytics right Because Reta will give us the basic Stuff like the actual recording if you Want to have that on the dashboard the Uh when the call actually started when It ended so you can get the duration um And uh where the phone call was made to What number where it originated from so We have all the basic call information But if you want to record hey uh why did The caller call after you know analyzing

The transcript you want to be able to Have that that variable or what was the Rating of the agent how how well did They performed was an appointment booked Right all of these little questions These little metrics you you can use Post call analytics so post call Analytic can be a type of text it can be A selector it can be a bullan a true or False value or a number um so here I Have call type it was either appointment Uh uh type of call it can be a inquiry About a property or just a general type Of call and then I have rating um from Pretty much uh zero to or 1 to five uh Just how the agent did and whether or Not a appointment was booked to view a Property um so that's I'm keeping it Pretty basic for for my specific use Case but obviously you can have a lot More and track whatever type of Variables you like to track for your Phone calls and then the next sort of Setting that we're going to be uh kind Of working with is the agent level web Hook URL because we'll have to tell Retail where to send all the call data To right because in order to connect Retail to our dashboard retel has to Know where to send all the call Information all the post call analytics Where it should it send it to after the Call is done right and so uh giving it a URL a web hook URL allows us to tell

Retail hey send it to my codebase right Send it to this endpoint so then retel Can just send us all the information and Then we can pretty much take it from There um do any sort of data processing Or um add it to our database and then Once it's in our database on the Dashboard we can display all the data on Our database U so that's all that how That works uh I'll show you how you can Can get this uh link pretty much it It'll be after we deploy the dashboard To versel versel will give us a domain And then we just attach our API uh sort Of route at the end so I have API SL Call analysis um and it'll be pretty Simple but once we deploy that onto Resell we should be able to update this This URL a little bit later now the First step in actually building the Dashboard we need a UI we need to know What the dashboard will look like and v0 Is a service or tool by versel that Allows us to do this pretty much in Minutes um so it's you can think of it As chat gbt but for generating UI so What versel or what VZ allows you to do Is enter in a prompt and say hey Generate me a modern looking dashboard UI and VZ will pretty much come up with A uh UI on the spot and you can just Copy and paste the code into your code Base and start using it immediately so Here's an example run of me going

Through VZ talking to it and iterating On the design so first I asked it for a Nice looking modern looking dashboard For tracking the phone calls um and Customiz it for a real estate agency it Gave me the code and everything um but Eventually I wanted to keep iterating Until I got to to something I liked Right because maybe it was uh putting Random buttons or uh things that I Really didn't really like or maybe the Color scheme right so you keep iterating Get it to where you like it um where You're you're happy with the initial Design and then you can pretty much copy And paste the code but here you see I I Entered my last sort of prompt it came Up with the code this is the the result Pretty much which is not bad right this Only took me like uh you know four or Five minutes to to be able to go from Like maybe the initial prompt to this Final design um because all I did was Just have three prompts and I got to Like not a badl looking dashboard right This is pretty good to to kind of start With and then you can make more changes As you're in the actual uh code editor Um you notice hey I want to switch up The color scheme whatever you can always Make those changes later outside of v0 But v0 is perfect for giving you that First skeleton um so here you see the Code that it's generating to create that

Dashboard UI so we have three main files We have uh a base dashboard. TSX file Typescript file um then we have a call Volume chart uh we have a call data Table and uh we also have some functions On how to format the time so you see Right here this is the overall dashboard Then we have the call volume we have the Call data the kpi cards right over here Are already part of the dashboard file They should be part part of the Dashboard file and now what we can do Pretty much is just copy and paste each One of these files and just take it into Our project we're going to be using uh Nextjs that's the the the framework that I use for my dashboard super easy to to Kind of use and and get used to um so That's what VZ kind of uses as well so We can just copy and paste all of this Code um and get started with building The actual dashboard now one thing Before we actually start building the The dashboard right you can go ahead and Copy those uh copy and paste those files Into a new nextjs project but we also Need a database service right so that's Why I kind of use superbase for this Superbase is really uh kind of Userfriendly um and easy to use so uh What I've gone and done is created a a New super based project go into the seq Editor and you can just pretty much Write a very simple query like this

Where you're creating a new table table Is going to store our data inside the The new project um pretty much acts as a Part of the database right um in this Case we're just going to have one table So this is pretty much going to be our Entire database right so we're going to Have a lot of different columns we're Going to have the ID of the call going To have the summary the transcript the Recording URL uh when the call started When the call ended duration a lot of Other basic information right from Number two number number agent ID and This is some of our post call analytics So whether or not an appointment was Booked the rating of how the agent Performed and the type of call and then This is actually not a post call Analytics um this is uh something that Retail provides whether they determined The the call was successful so you can Also store that um so successful is also A bullion and then also when this record Was created this is just a default Record don't have to really worry about Super base will set it up or set that Value for us um and what you can do is Just pretty much run this sort of Command and it'll create the the table In your superbase project so you can Start working with the table you can Start inserting data and we'll go over That how I do that inside of the

Dashboard so here I am in the actual Code editor I'm using cursor and cursor Allows you to to do all sorts of stuff It's really good for if you want to use AI code generation you can just hit Command L and pretty much do whatever You want right if you want to chat with AI say hey I have a calls table in Superbase please fetch these columns for Me I want you to insert the data into These files right you can use the at to Pretty much tag any part of your code Base um and it will kind of bring up Those files right and another good Really nice part of cursor is that they Have the ability to add documentation Into the code editor so if you go into The cursor settings down in the features Tab in the doc section you can add the Pages of any documentation into cursor Just like this put the link into it It'll ask you a couple questions about What's the name of the documentation so On right and from there you can use the Documentation inside of your prompts Which just makes the AI a lot more Accurate versus if you're using Something like chat jpt and asking it Hey fetch data from super big and do all Of this uh you know the chat GPD might Not be as accurate maybe the superbase Has recently updated or what not right If you have the ability to actually Bring in the documentation as context

Into your prompts that's just going to Make the the output of the AI code Generation a lot more better so if I go Back to this prompt that I had here in The chat if I just replace this Superbase and then say at superbase I Can tag that documentation and now The Prompt is a lot more giving a lot more Context and my output is going to be a Lot more accurate more more likely um so That's kind of how you use a chat the Composer is also very very similar in The fact that chat is more uh a little Bit more manual action you you're just Chatting with it you have to manually Apply the code whereas the composer is a Little bit more agentic you'll notice Here as well they've added a new mode Where you can actually have have the Agent you know prompted to do something And it actually does the actions itself It doesn't you know it might ask you Here and there you know to clarify hey Is this what you meant uh what not but It'll actually be making the changes for You um which is just another level above Uh the type of code generation that we Were doing before so now that I've Covered a little bit about how you can Start using cursor uh I want to go over Some of these files that I copied and Paste it over from vzo so you'll notice This is a dashboard. TSX file I've made Some changes from the code that v0

Generated but I mean a lot of the the Base code that I got from V VZ is still Kind of there right uh so I have the Cards um and I also have different uh Visuals that was that were kind of being Used in in vzer so you have the call Data table also have the bar chart which I've kind of renamed a little bit um but Still idea same type of chart um and We're now just instead of using dummy Data we're actually pulling in the data That I have from my database and that's One thing that you have to be uh mindful Of when you're using VZ is that VZ Doesn't really have access to your Database um at least not when I was kind Of using it right so it was generating Dummy data so right over here you see on The preview you have all these different Stats but if you go on the actual code You'll notice that this is all just Hardcoded dummy data that VZ has gone Ahead and kind of uh put in so you want To be able to actually fetch from your Database from your superbase table to be Able to uh show real call info right you Don't want to be showing dummy data you Want to be showing the the actual data That's happening from your calls so That's something we'll also go over but There are a couple of things that you Have to set up to make sure you can use Superbase correctly so in order to get Started with superbase inside of the

Nextjs the inside of the dashboard right You have to make sure you install the Package super base for JavaScript and Then be able to create some sort of Client the client is what you're going To be using to fetch data right you need To have uh kind of like a point of Contact from superbase which you can use And say super based client. get this Data from this table right you have to Initialize that connection and this is What this function is doing for us it's Creating that connection for us that we Can use in different files Now in this file you'll notice that I Have a bunch of queries where I'm pretty Much just pulling all the data that I Need right so for the cards uh on the Top of my dashboard uh for example I'm Trying to get the number of total calls And display that as a card the number of Appointments book um the average Duration right so this is all you have To do the queries and then do any Manipulation for example the duration Right I'm going to be pulling all the Durations from all the records and then Just doing an average operation on it Right getting the average of those Durations and then return that sort of Number for appointment's book is pretty Straightforward you're just getting the Count so how many records in super base Have a true value for that post call

Analytic so if you remember this was an Actual post anal post call analytic um That we were creating a column for in Start of our super based table so it's Either true or false so we're just Counting the number of times it's true And then returning that number um and Then also total calls is very Straightforward just counting up the the Number of Records um and then we also Have some other sort of uh things that We're doing for example I only want to Do it for the last seven days so when I Am displaying the average call duration The number of appointments book the Number of total calls I only want to do It for the last s days right I don't Want to do it for like the entire History so if this dashboard is viewing The history of uh you know last four or Five years of worth of calls I only want To do it last week right so I'm able to To kind of do that as well um and a Couple other things like getting the Call volume which is important for the Call volume visual at the center of the Dashboard um and then information about Like the recent calls that we'll be Storing in our table so we're only going To have five records in our table so We're getting the uh five most uh sort Of recent records and then putting that Into the table so we're extracting the Total calls uh the appointments booked

The call duration rating all that good Stuff and just returning this uh sort of Data so this file is really good for Doing all that data fetching logic um so Then when we go into the actual chart The dashboard file all we have to do is You know render or display that data so This is the base page of my actual app Where pretty much everything starts so What I'm doing is just revalidating the Path uh path making sure like data is Not still it's good make sure you you're Kind of making sure the the data is uh Most up to date then I'm getting all the Call data I'm executing all those Queries and then displaying it into the Dashboard so I'm passing all those uh Stats metrics that I'm getting and Passing that into the dashboard Component which is inside that dashboard Field or dashboard file so inside of the Dashboard file you'll see that I'm Getting all that data and then I'm doing Whatever I want with it right so I'm Putting it inside the cards I'm putting It inside the actual bar chart putting It inside the table and then uh for These ones it's already being rendered On the card but for the actual visuals I'm just passing those stats in there And then we'll render it inside of those Files so here for the chart I'm using uh Something called Shad CN which provides Goodlook nice looking components like a

Chart like a table like all that sort of Start uh sort of stuff and um pretty Much importing all that those components And then um you know passing in the data That we got from the dashboard file into The bar chart setting up a couple other Stuff like I want a tool tip so whenever I hover over a bar I can uh quickly see The number of calls um and and that sort Of stuff um and you can add in a legend All that sort of stuff a card footer and Um pretty much have it looking very Nice so again here's the table aspect of The dashboard I'm importing I'm using Shad CN and uh you know have the Different columns for the table and then I am displaying the actual data that I Got from the dashboard the to call type The from number uh and also the rating This is a very interesting part so you Have the actual number so if it was a One rating two rating three rating but What I'm doing is I'm I'm pretty much Telling the the code here that if it's One if it's two I'm telling it how many Stars to generate that are yellow and How many stars uh should I generate that Are empty to give it a nice look um to Instead of just displaying the number I'm displaying uh star visuals right um So that's also a nice little aspect for It and uh that is pretty much the call Data table now one last thing I also Want to mention before we actually go

Into how to connect retail with our Dashboard is how you you can start Changing up the theme and and some of The components I'm using right because I Mentioned Shad CN Shad CN again is uh Place where you can use nice looking Components right out of the box instead Of creating your own or you know uh you Know using the default ones you can use Like a nice looking button like this one Um if you want to kind of use a progress Bar uh all that sort of stuff you can Use it and uh just from Shad CN and It'll look nice right out of the box um So that's one option there's all sorts Of different sort of component libraries That you can use but Shaden is one of The the top ones out there and then you Also have themes um so if you want to Actually change up the the color of your Dashboard you can go ahead and customize It right over here can pick a color can Pick a radius so how rounded some of These things are um so that will affect The rounding um it will come with light Or dark mode so this is just for you to Kind of preview what it will look like And then from here you can go ahead into Copy code and then um pretty much copy All of this code and go into your Global. CSS file and uh you'll have this Portion from at layer base all the way Down to this curly brace you can just Delete all that and replace it with your

Copied code next is the process of Connecting retail to our dashboard and What retel does is if you remember the Web hook URL we're supposed to set Retail will send three different events So it will send some data when the call Starts when the call ends and when the Call is analyze and again you can use This for the dashboard they give Examples like you can use it to do Analytics um and update your CRM Whenever the call ends right depending On the outcome that happened right so a Lot of different things you can go and Uh do with their web hooks um so they Provide some pretty good documentation On it how you can actually uh set up the Endpoint which I'm going to show you um They have an example for expressjs we're Using nextjs API route so it's going to Be a little bit different but the Overall logic is is pretty much the same And um they also show you how you can Secure your web hook to make sure that No one else kind of kind of uses it Right um but also one thing I want to Mention is that the uh information or The data you're getting is pretty much The same data that you'd get back from The get call Api request right so if you Want to know what data am I actually Getting back uh for the call analyzed Event which is the the event that we're Going to be monitoring uh we're going to

Be getting all this data we're going to Get the call type uh so this is for a Web call right so if we click on option Two we'll get the call type which is Going to be a phone call every time we Make a phone call it's going to be uh It's giving us the from number two Number all that good stuff um but also What I want to concentrate a lot and so We have transcrip scrip start Timestamp um if you go all the way down You have call analysis so this is where Our post call analytics will be so we'll Have the summary um the sentiment uh Whether the call was successful but the Custom analysis data is where our post Call an analytics will be stored so we Can grab whether or not the appointment Was booked the rating all that sort of Stuff that I'm storing or you're storing You can grab it from this object which I'll show you in the actual uh web hook Endpoint that we build out so here I am In the actual API route that I've Created all I've done is go into the app Folder create an API folder and then Create uh the name of the endpoint that You want to to kind of call it right so I called it call- analysis created a Folder just like that uh with that name And then inside of that folder I have The uh file called route. TS which is a Denoting a route Handler so pretty much We want this file to to be the code

Where we do all the web hook handling Logic handling all that data that retel Gives us um so that's where all that That work is being done inside of this File so what we're doing is we're Creating that connection with superbase To get it ready um because we will be Inserting data into our database and Then what we do is whenever a request Comes to this endpoint um we kind of Make sure hey is the event uh a call Analyzed event and is it a phone call Right if it doesn't have those two sort Of values then we're just going to Return it's going to say it's not a Valid call event that we can kind of add To the dashboard but if it has those two Values what we're going to do is start Um extracting all the data that we need Doing any sort of calculations or Manipulations so you'll see right here Um I'm creating an entire object um I'm Getting the call ID getting the summary Transcript recording URL all that good Stuff um also uh retail gives us the Time stamps I want it to be an actual Date so I create a new date that's an Example of a manipulation that I'm doing Also with the duration I'm just getting The difference between those time stamps That's another manipulation for the from Number and two number you can also do uh Get it from the payload just for the Sake of privacy and uh security I'm just

Hardcoding right hard coding these these Numbers right now um but you could also Get it from the payload and then also so We have the call analytics so again what I just showed you in the get call Api Reference what we're doing is getting The call object then the call analysis Object then that custom analysis data Object which has all of our uh you know Uh all of our fields or analytics that We're trying to track so it's just a Bunch of chaining um so go from one Object to another object and then Finally to the field that we're trying To track and then uh we kind of store That all inside of this huge call data Object again these are just the names of The columns so uh you know when I was Actually creating my super base table um For example the summary retel will send It as callor summary but on my superbase Table it's just titled as summary right So I'm I'm making sure the column names Are aligned uh correctly and then from There I'm just doing something very Simple I'm just making a quick insert Statement so just to insert all that Data into my table and then I look for Any errors if there's an error obviously You want to return an error code or Error message otherwise you're going to Return a successful message and just Return from there and then every time You refresh on the dashboard it will uh

Show the the new data just because our Uh dashboard will kind of revalidate the Cache it will make sure it's getting Refreshed data it will execute all the C Queries again and that way uh we'll have Almost like a a near real time dashboard That is getting call data uh very close To real time right as soon as retail Gets it we're doing everything very Quickly um so that way it's uh very up To date so now that we've gone over Pretty much all that we need to do for The dashboard uh last step is to just uh Deploy it online um and I'm using Versell to do that all you have to do For uh verell is make sure it's Connected to your GitHub account make Sure your code is is on GitHub which is Just pretty much like Google Drive for For code um so you connect your GitHub And versell and then just select the GitHub project or repo and then versel Will deploy it online to uh a domain That they'll create for you or come up For you and uh you have that domain Which you can then copy this entire Domain and then back inside of your Dashboard you can go ahead put that Domain and then put the ending of API SL Call analysis U whatever you name that Route Handler uh folder um and that way Retail will know where to send it and Now this is the final looking dashboard That I have and I'll show you guys how

It also updates in real time um but this Is how just a good idea of what it looks Right now uh what it looks like and it's Um being able to fetch all the data that All the calls that I've kind of made and Uh or all the data that I have in my Database right and um it's updated Everything all the cards in it uh making Sure everything looks good so let's go Ahead and do a demo call so what I'm Going to do is just a quick little demo Call ask a quick question and just hang Up so you guys can see how it updates uh In near real Time hey this is Josh from Pacific realy How can I help hey what time are you Guys open our office is open Monday to Friday from 9:00 a.m. to 6:00 p.m. and On Saturdays from 10:00 a.m. to 4:00 P.m. we're Clos on Sundays Is there something specific I can help You with today that's all Thanks I'm going to go ahead and refresh Now and then here you have uh the calls That uh just showed up so I did make a Call right before this uh demo call so You have that one and then also the one That I just made um so it is pretty much Updating the uh dashboard super quickly It's able to see the duration it was Just an inquiry no appointment booked Also has that rating it's updating the Chart and also the number of calls that Are coming in all the cards um so

Everything is looking good so I hope This gave you guys a good idea of how You can build your own dashboard to do Call tracking call monitoring for your Voice agent so with the dashboard like This this is just a start you can add on So many other features like for example Displaying the ROI return on investment From the phone calls that these uh AI Voice agents are doing and you can track Which calls or where calls are coming From when it comes to your marketing Campaigns seeing what campaigns do well And are converting leads at a high rate That sort of stuff so if you're Interested in learning more about all Things voice AI feel free to watch one Of these videos and if you're a business Owner looking to implement or use AI Voice agents into your business to bring In more monthly Revenue feel free to Book a call to see how we can help build One for you to today