Part 2: AI Agent Code Walkthrough

genai.mentor · Intermediate ·🌐 Frontend Engineering ·4mo ago

Key Takeaways

This video provides a comprehensive walkthrough of the codebase for a fully working AI Personal Assistant, covering topics such as agent architecture, prompt engineering, and tool integration, using tools like React, TypeScript, and Firebase.

Full Transcript

Heat. Heat. Heat. Heat. Heat. Heat. N. Heat. Heat. Heat. Heat. What if I told you that in next 30 minutes you'll understand exactly how to build an AI assistant that reads your email, manages your calendar and remembers your preferences all by writing uh code you can actually follow >> and the best part you don't need a PhD in machine learning if you know the basic TypeScript you are good to go welcome back to AI agents demystified I'm Shria I'm Rafi and if you watched episode 1 you already know what a agent is and how autonomy works uh the idea that a agent can observe, think and act on its own. >> Right? And in episode one, we talked a lot about theory. What does it actually look like in code? We are going to explore in this episode. >> That's exactly what we are going to do today. We are going to open up a real project, a personal assistant that I built and I walk through every layer line by line. So by the end of this episode, if someone pauses the video and opens their code later, they could actually start building something like this, right? >> Absolutely. Absolutely. All the code is on Jai Mentor GitHub repo. Uh so you can also refer that code by checking out by yourself. Most importantly, you will understand the patterns because uh once you know how it works, you can build any kind of agent, a customer support agent, a research research assistant agent. Uh the architecture is the same. >> That's amazing. So where do we start? >> Uh let me explain a big picture uh so that uh you can get that context uh yourself and then we can walk through the journey. Let me tell you a story, a quick story. Uh I'm all here. So every morning I wake up, I check my email, uh look at my calendar, uh maybe search for the documents I need to work on or needed for the meeting. So that takes 15 minutes of context between uh switching between apps. I thought if I would have an assistance with an interface where I can type uh few prompts uh what's happening today and I it does everything for me and I get the gist out of it uh with all the necessary documents and email scheduled etc. Uh that may be Andy it can save me 15 minutes. So instead of you going to Gmail and then to Google calendar and then to Google Drive separately is it >> exactly the A agent does it for me. Uh so I talked like a human assistant and it figures out what tools to use behind the scenes. >> That sounds amazing. So how can you just give an overview what is the text track that we need to have that? the architecture view that I just displayed. So it has a few layers. Uh okay. The first layer is the uh user interface which is a chat interface built in uh React front end uh in Typescript which is running in Nex.js JS um which will call the APIs uh the backend APIs which are running which can be run in a serverless functions uh it could be run in Firebase cloud etc. Uh so that will run the agentic core. Uh so in anthropic uh cloud SDK uh which can have an orchestrator personal assistant orchestrator which can call multiple tools whether it is a Gmail or calendar or drive and putting all together uh constructing an Agent and anything needed that need to be persisted that can be stored in the Firebase databases a database layer whether it is a conversation or memory or configuration. Yeah, the layers look clear but can you explain how it orchestrates to make it work? >> Yeah, so that is the core part a orchestration. So that has a specialized tools uh for example um for each capability need to have tools enabled. For example, Gmail uh tools could be enabling a Gmail specialist to read write emails. uh scheduuling specialist can call uh calendar tools and document specialist can read uh the documents from Google drive and uh the recall specialist is a memory that can save and retrieve the memory. So that four three four specialist agents uh specialization uh tools will be available and a orchestrator can decide when to call which specialist to work on and finally get the job done. So the AI model is like the manager and the tools are like the team members is it? >> Exactly. So you are getting the picture now. So the beauty is the cloud uh uh say it doesn't call one tool and stop. Okay. It can call multiple tools as and when it is needed. So that is the orchestrator that I explained. So orchestrator is kind of manager as you told and it can realize and make it happen through the specialist with Gmail specialist scheduleuling specialist or document specialist etc. >> So that does sound like an agent loop that we talked about in episode one. Is it >> exactly? So let's see that in the code. Uh we'll explain one by one here. Before we deep dive into the code, Rafi, can you just walk us through how the project is organized because I think that will help a lot of people to know where to actually look when they look at the code. >> Exactly. Uh let me share my screen. Yeah. Okay. So, I'll explain the project structure first. Uh okay. So, this is the project. Uh personal assistant uh is the project. Okay. So now the project structure I have src folder uh which has app which is the front end code uh which has multiple components login etc and it has a library uh which is having agent uh prompts tools etc and firebase for the database and configuration for storing the configuration memory etc which we'll deep dive one by one and the second component in the codebase is the functions which is the backend code which is going to run in function. So these are the two main components in the codebase and all of this code will be available for you in a GitHub repo which you can find in our Jana mentor web page. I can basically relate to what we saw in the previous episodes diagram right the memory the agent the MCP tools all I can see in this folder structure so actually in this production everything works through this cloud functions is it >> exactly exactly so you love front end and you love back end running in cloud functions >> okay I'm I may be biased but I'm very more interested in the brain component that we saw in the last episode right the agent core can you just show me the code that makes this AI agent to think >> yeah so now we gone through the u structure. So let's deep dive now. Okay. Let me open s agents and index. Okay. So let's start with this. So this is about personal assistant agent. So the core part for agent is uh the brain is llm. Okay. Now let's find out where that llm is integrated. Okay. Here. So now for personal assistant I'm saying that you use anthropic and you use this configuration. So anthropic client is used and uh this config uh will will have the models which is nothing but uh your brain. So I'm using two model one for reasoning and one for task. So for reasoning you can use uh good model say opus is a good one for reasoning or if you want to if you're cost conscious you can use sonet etc. And to model you can pick up a model which cost cost lesser than the other models because the reasoning model need to think. So you need to pick up a wise model. Task model you are delegating a particular task. So it can be a model that can be less capable but it is okay to do a task level. These are the LLMs which are configured for the agent uh to use that as a brain. >> So an anthropic configuration and the model configuration that's it. So I was expecting something more much more complicated than this. >> So that is the beauty of building on top of a powerful foundation model. So the intelligence is in claw. So our job is to give the right context and the right tools. So so we don't need to we have to just leverage the large language model brain. >> Yeah that's eases a lot of pain. Now let me show you the chat method which actually does that context engineering uh the basically the core of the agentic core how that the user message gets processed. Okay. So we looked at that brain how it is wired. Now this is the chat. So it takes the user message which is the user prompt and with the conversational ID to correlate and the history of lost 10 messages in the conversation. We'll go the step by step. Okay. what how does it conversation happens in the be in the scene. So it collects the memory which is one of the component in the autonomy of AI. So whether it is short-term memory or long-term memory etc. Second it's built the system prompt. So that is one of the component autonomy. We'll deep dive a little later in this session. Third one is the available tools. what are the available tools that are available for the capability and putting together you need to make a API call. So these are the three things that you need to make it ready before making API call. >> Yeah, I understood the context now. >> So now this context need to be engineered and API call need to happen. >> Got it. So it's not just the user prompt alone to make an AI agent more powerful. You need to engineer all of the components as we spoke in the autonomy of AI agent, right? To work as a personal assistant with the access to all the Gmail and drives and so on. >> So now we make the API call. Okay. So now uh so you've got the context right. So now you need to call the LLM. So you need to give all this context to the brain. So this is the first API call that you make initiate API call. So you're giving which model to use and then what is the maximum token, what is the system prompt, what are the messages and what are the tools and you make the first API call. Okay, we send the system prompt. Yeah. So you make the first API call. >> So how do we know which one the model is choosing? >> Okay. So now you are asking about the tool, right? I'm giving set of tools. Your question is which tool it is using whether to send email or uh or schedule meeting. So this is the first call. Okay. Okay, in the first call it will tell a response and it will stop it will not end up with one user one LLM call. Okay, it will tell you okay I need to use a tool. So that is what will come in a stop reason tool use. So then that will have which tool to use. Okay, then you need to execute the tool and you need to you get the result from the execution and you need to pass that collect all the uh result in the tool result. Then you need to call the llm again. I executed this tool and I got this response and what you want me to do next. >> This sounds like a loop me. >> Yeah, exactly. Exactly. So this while loop uh okay so let me walk through this slowly. You executed one tool, you got the response and giving it uh to the LLM again. Okay. So for example, call Gmail API to get all the emails that are written already. If it uh tells again go to Google Drive to fetch a document. When it gets all the tools executed that are needed, if it gets all the detail to summarize, it will come out of this loop. It will not stop for a reason to for tool use. Then it will come out of this loop. Then you have all the context and tool execution. You can answer by summarizing it. >> Got it? So it first extracts which tools the cloud wants to call. Then it actually executes those tools. It can be Gmail API or calendar API whatever. Then it collects the results and then it sends those results back to cloud as if the user said here are your tool results, right? And then the clot will look at the results and decides again do I need another tool or can I answer now and the loop keeps on going until the clot says okay I have enough information here is my answer. So this is how the loop executes right >> exactly and also one more thing I just want to point out. So when you execute a tool you may end up in some error scenario even if the tool errors out you need to tell okay the tool errored out this is the reason etc. So then you need to give that information also so that it can handle gracefully if tool doesn't work. Okay. It can give you the instructions so that you can manually send email. >> Amazing. That's really elegant. No. So the cloud is genuinely making decisions in every loop. It is not just like a rule based or a scripted workflow. Right. >> Right. That that is the difference between the chatbot and a agent. A agent. The chatbot is just uh is the input prompt and output prompt. But a agent uh thinks and acts reasons well and what to do next executes the tool and then finally summarize it for you. >> That's brilliant. So we saw that the agent calls the tools right. So let's see how these tools are actually defined in the code. >> Yeah. So now we explained that overall agentic core uh of the personal assistance. So now let's deep dive few components. Let's start with the tools. So let me go to the tools. Okay. This is the code tools and custom tools. Okay. So now there are certain tools needed for memory. Okay. So here you see the save memory and recall memory. So these are the two functions which are exposing some tools for saving memory and uh recalling memory. So this is yeah these are the two functions or the tools that are getting exposed. >> Okay. So when I see it it's like literally tell telling claude, hey you have a tool called save memory. Here is what it does and what input it needs. Am I understanding that >> that exactly that that is the key inside. So you need to have a name of the tool and description which is very important. It's like a job description for that particular tool. So save memory tells save important information about the user for future future reference and it also tells uh the schema. Okay, what are the fields that are needed for input? So you need to give some string uh information to remember and what is the type is it preference or fact and what is it required both are required content also required and uh type is also required so it defines uh it's basically the method definition kind of uh it's a tool definition >> got it this does really sound like a job description hey this is what you have to do this is what your things are and that brings me to the next question say when I do the next conversation with it or when the user says schedule a meeting for me. Will the agent be able to recall the preferences and suggest the morning slot if that person is a morning meeting kind of a person? >> Correct. So now this is the definition of tool. Let me go to the execute uh tool call. So so this execute tool call method is here. When you say I prefer morning meeting, it will call save memory and it will put okay since you said prefer it will put it in preference for the user store preference and when you have further conversation it will use recall memory. So it will get all the memories whether it is preference or fact etc. So that uh that memory is used uh in the further conversation. >> So it's basically like a router is it clot says I want to call save memory. Your code looks at the tool name and routes it to the right function. Exactly. Exactly. So we talked about save memory and recall memory and also you see the routing capability if the function names matches to this etc. But you also see the external tool calls uh Gmail calls Gmail send email read email etc. So then it goes to this execute MCP tools. So I'm calling APA based but you can also use MCP and tools execution for external integration. So it's a router as you mentioned. So it decides which tool to use and how to use it uh kind of routes the tool to execute the right uh tool execution. >> Got it. So what you're showing is the MCP tool definitions. In our case it's Google services, right? >> Correct. So in this personal assistant I took Google uh features. One more thing I wanted to tell you when you use tool you need to make sure you are authenticated also. Otherwise if the user is not willing to allow the tool to be used so you need to check okay is it authenticated then you expose the tool >> for the permission for claw to access that correct >> okay okay >> yeah first you check the service is enabled and second check is it authenticated then you register the tools for a to use check or important is it enabled and authenticated >> yeah that's a nice safety feature no and I also remember something like in Gmail send description always confirm with the user before sending. Does claude actually follow that? There are some times when I just try to send an email without even putting a subject or something like that. So can we have a safety feature like that into this one? >> Yes, that's the beauty of system prompt. So eventually it's all English, right? So you need to give the behavioral details for all of that. So I think you rightly mentioned Yeah. So here you see I think you can give that instructions also. I'll show that in system prompt. uh when we go to system prompt so you can give the behavioral uh guidelines for each of that if you want to check before sending email whether it need to write professionally well etc all the guardrail you can give in the system prompt so that it will behave like that. >> Yeah that that is a really great safety guardrail to have it for people like me. Okay, so we understood this one. Let us talk something about memory. Like in episode one, we said that one of the key feature for a truly autonomous agent is that it can remember things across conversations, right? So how does that work here, Rafi? >> Yeah. So the memory system you need to always think a agent with kind of comparing with human. So you need to design a multi- tire retire memory system uh inspired by how human memory actually works. So you need to have short-term memory uh so that you can keep the last 10 conversation in the messages in the conversation in the session so that your next message prompt is keep considering what you asked in last 10 conversation to use that is short-term memory. The second is long-term memory. If you want to remember across the session, you need to persist in a database or some way of long-term memory. So I used as a firebase. So the long-term memory persist that Firebase so that it it could be preference, it could be facts or instruction. You can put it certain retention period say 30 days etc. And third is episodic memory. What does episodic memory means? So you will have conversation. You need to take a gist of the conversation and store it as a summariz summarized chat conversation so that you can use that. Okay, we discussed about autonomy of AI in one conversation. Second, we are also discussing the code detail of how to build agent. So the summary of that should be retained so that in next conversation it will uh use that and contextually will respond well. So these are the three types of memory I would advise anybody to implement as a basic memory function. >> Got it. So this sounds like a simple memory map for me. Short-term memory, long-term memory, and episodic memory. And what about the intent and entities fields Rafi? >> Yeah. So I'll take one example. Okay. Uh let's uh take a prompt, user prompt. Send an email to John about the project update. Okay. So that intent is that key that word you need to kind of uh you need to get that right. Uh what is intent? Intent is nothing but the action that you need to do. Uh in this case send an email to John about project update. The main intent is send email. Okay. Entities are about the object that is connected to the intent. Okay. The recipient is the John. We need to send email to John. So John is the entity and uh about the topic. Okay. It's a project update. So you need to send email is an intent to John entity about the project update. Okay, these are the intent and entity which internally a will detect identify the int intent based on the prompt and identify the entities that it need to work on. >> That's clever. So when the agent loads up memory, it groups it into categories and format. It's like a nice readable list for clause, >> right? So this is the formatted context goes uh straight to the system prompt. So every time I think so let me show that in the code memory. Let me go to long-term memory. So say you talked about um the categorization right? Uh so >> um it groups um it groups uh say everything need to be in system prompt. Okay. So let me take about the memory long-term memory. So long-term memory could be preference or fact or instructions. So you save it in a categorization. Then you pull that from the categorization grouping and in the system prompt you say okay these are the preferences which are saved in the long-term memory and these are the facts which are saved and grouped into the database. These are the instructions so that it gets clearly okay what are the preferences what are the facts and what are the instructions. So grouping and giving to the uh LLM system prompt which always guide the LLM to take the right uh reasoning and decisioning. >> Yeah. Uh this sounds like a cheat uh cheat sheet for me that claude reads before every conversation, right? >> Yeah. Yeah. Exactly. So the similarly for long-term long-term memory episodic memory or everything if you give in a characterized way as a cheat sheet as you mentioned then it can take the right decisioning which will avoid the hallucination basically. >> Yeah. So does it pull out the questions that we asked and which tools we used before because that will really give a quick recap to claude to understand our preferences and context. Right. >> Correct. So now the three memories right. So all of that will be pulled in and it will be stitched. Okay. Now I'll go back to the main agent core. If you see here okay so now we are retrieving all the memories. Okay. Where is that? Yeah. So now uh now we are talking about uh the memories right. So it is pulling all the memories and it uh gives a memory context. So it uh gives the short-term memory and short-term memory is nothing but the current conversation and long-term memory grouped into preferences, facts and instruction and episodic memory is the previous chat conversation gist summary etc. So all of that will be useful when you make a call as a cheat sheet to take the right reasoning and decisioning and action. >> Yeah, that completely makes sense. So as we go through this flow I can completely relate to what we saw in the full picture in the last episode right so we are going towards the tool we explored the memory and now I very keen about uh the system prompt I feel like that's the secret sauce for an agent no can we just look at it how it is built >> yeah this that's my favorite part and also that is the important part of a agent which is the DNA of a agent so let me open the code yeah so this is the code and I'll just Start from the linking. So we talked about yeah memory and that agentic chat flow. So it's calling the build system prompt which is here. So which is coming to this uh prompt builder prompt builder.ts build system prompt. Okay. So now let me explain uh few things. Okay. So now yeah. So this is the detail. Um so basically you need to tell okay what is the role of the agent? You are a helpful professional proactive agent. You need to read and manage email, calendar, documents, etc. Remember important information. Then it exposes the ke. Yeah. >> Literally looks like a job description for AI. >> Exactly. So first you need to get that right. What is the role of the agent? That is the job description of the agent. After that you need to expose the capabilities. Uh okay. So now you need to give the capabilities one by one and you need to make it dynamic. For example, you can keep that something as static which is general behavioral guidelines. You need to be concise what are the tools available emails, calendar documents and something will be dynamic. So you need to give certain rules for uh Gmail specific uh certain rules for calendar specific if calendar feature is enabled give the prompt. Okay. Uh this is where you asked one question. If you want to specify check before sending email, you can specify here. >> The cut right comes here. Okay. Got it. Now >> got it. That's amazing. The system prompt is like a living document that actually adapts to the user setup. Right. So a lot of characteristics, the behavioral and the dynamic changes are all being set here. >> Exactly. At the end, we inject a user memory context and reset conversation history when the clot reads full from. So this is the parts of construction of uh the prompt that you send it to LLM. Then it knows okay who it is based on the role description what it can do by reading the capabilities and tools et using the behavioral guidelines okay whether it is general behavior guidelines or specific behavioral guidelines and what user likes based on the preferences etc and what was discussed recently through episodic memory >> that's really really well thought out I can feel the prompt is basic of basically kind of doing a lot of heavy lifting here that is why it is more important the system prompting right >> correct so in my experience uh of building agents the 80% of agent quality comes from prompt engineering and uh the context engineering the core patterns are important well-crafted system prompt is what separates out a mediocre agent from a great one >> that makes a lot of sense okay so we've been looking at the client side agent code but from my experience in production things work a bit differently right >> we deep dived into the code of uh a agent. Uh looking at different components. So let's talk about how it works in production. In production, there will be two components. Okay, one is the back end. Uh first we'll touch upon the back end. So here if you see the code base, the functions, okay, this is the back end code. uh so that will run as a cloud uh functions in Firebase or whichever cloud that you want to put it which will expose the chat endpoint uh which can be called by uh the front end. So uh this will expose the chat endpoint which will be called by the user interface. So that will take the user prompt and then do all of that that we discussed and it will verify the authentication is it authorized user and then it will load the configuration of that particular user for the memory etc. it will initialize the cloud client and then it will build the tools and then it will build the system prompt and execute the as we discussed uh >> so the pattern is kind of same right but now it's kind of wrapped in an authentication and database persistence is it >> exactly so now uh yeah in the production you need to check user is authenticated uh database persistence exactly and uh also you need to uh keep some say when we explain First we did not show the limit in the agentic loop right you can also put a limit as a safety loop uh so that you don't run into infinite loop in the agentic loop so if the tools and it's not resolved within 10 times of iteration then you come out of it uh and summarize it uh so ideally 10 is a good number uh most of the uh action can be resolved within the 10 iteration of agent IC loop that's a so you need to have certain checks in the production >> definitely that is an important check to have rather than letting the agent to get into an infinite loop right so what about the actual Google API calls how does the agent actually read uh >> yeah let me show you that okay so all of that is here okay so I'll pick up one example uh okay list email which is needed for reading if I want to >> check okay what are the conversation is there email from Sria. So then it will call okay the A will decide okay I need to use read email and then it will come to this particular function of the code. It uses uh the Google API call to get the messages and it's all integrated. So it is getting the authorization token and it is sending the token and the API which is uh kind of configured when the user uh starts using this personal assistant and it gets that messages by calling the Google uh API. You can call API directly or you can use MCP server and tools. >> Got it. So it's just a standard rest API calls to Google's API and using an authentication access token. Right. >> Exactly. So this part is nothing magical. The magic happens in the orchestration and the clock decides when to make these calls, what to do with the results and the API calls themselves are straightforward API calls or EMCP and tools if you want to use >> M and how does this authorization token get there in the first place? >> Yeah. So that is a good question. Uh say now uh that is very important also. So when you you cannot let uh read the email without the consent from the user. So in the application you need to have a configuration. So when user click uh Google uh in this case it's a connect to Gmail you need to have a configuration. So when user click connect Gmail in settings page uh it will redirect them to Google W connect screen where user gives a consent and give authorization for read email and write email and that time the authorization tokens will be retrieved from the Google W and it will be securely stored in Firebase database which is retrieved here and used um for authenticating. >> Okay. So everything happens in the back end. >> Good. Yeah. So we spoke a lot about this back end. I want to know a little bit about the user experience. So what does the chat interface will look like? >> Yeah. So let me open the front end code. So the front end code is there in src and app. So that app has a chat component and page. You will have only conversational interface. Nowadays I think many of the a application is starting with a conversational interface. Basically the user will give user prompt only. So it will get that user prompt. Uh okay. And then it will call the API uh in the back end uh which we just talked about uh the chat API and it will send that message. Okay. Now here is the API AP chat and it will post that user message and then what is the conversation ID? What are the recent messages 10 messages and then all the magic happens that agent decor happens in the back end and you will get it will get back the message to display back as a response. So basically the UI is just a wrapper where the user can put the message in and everything happens at the back end and just the interface happens through this UI screen and we have all the capability to change the colors, the format, the the design that we want in this uh area of it. >> Exactly. So it will have login page and other components and configuration setting etc. All of this code is there in the repo. User front end is very light because all that agentic things happen in the back end. Yeah. >> So thank you Rafi. So we've been able to dissect it part by part like tools separately memory system prompt the front end the back end and all. So now let's take a step back. Can you walk me through through what happens end to end when I type something like what meeting do I have tomorrow to the cloud or the agent? >> Yeah. Yeah. Uh okay let's summarize. So when you type say what are the meetings do I have? Uh right in the user interfaces user prompt. So the chat interface in the react uh when you hit enter so the front end takes that uh message and then sends that message to API chat which is the back end endpoint uh the main endpoint with the message which is user prompt and the conversational ID so that it can correlate and lost end messages in the conversation. So now all of that goes to back end. Now cloud function gets kicked in. So it receives that message and verifies that your uh O token okay are you authorized to do action then it loads your config from the Firebase for the memory say your long-term memory episodic memory and then it builds the system prompt okay what you passed is only user prompt so now it need to build the system prompt you remember the role the job description of AI the capabilities the behavior roles your preference that you got from the database uh long-term memory and Episodic memory and reset chat conversation etc. All of that assembled into one prompt. >> So that is main part. Once that is done then it will look at all the tools that are registered. Okay. Am I subscribed to Google calendar, email, what tools to be used all the tool definitions will be passed on. >> Okay. >> After when all of this ready then it will call the first API call to the cloud. That is the first LLM call. Then the first API call will tell okay I stopped now I need to call a tool. So with a stop reason tool use which tool you want it want to call list calendar events because you want to know about meetings. So then it will go into agentic loop. Now it will first execute this tool and it will get the result and then it will pause that results. If you have three meetings tomorrow team stand up at 9 and one to one call with uh one of your team member and a project review later in the afternoon. it will send all these meetings uh and then make another LLM call. So it will keep going in a loop. For example, if you want to have a project review, you need to know project document. Then I tell I want to use another tool uh to retrieve project document from the Google drive. So it will call that tool. The loop will keep going on until it says I am done with calling tools or iteration limit is reached 10 times. Then it will send all the tool response and one more time to summarize it. >> Oh >> that is the final call. So multiple API call will be happening >> whether it is tool call or analyzing the tool result etc. Final summarizations will be done and that will be sent back to the UI which will be seen by the user. >> It's like a lot of steps. Let me just summarize it once more. So initially you're sending it to the front end and the front end back send it back to the cloud function. Then the system prompt gets built. Then the tools are registered. Then the API first claw API call will be done and the loop gets ex executed. Then tool execution happens. The result will be sent back to the claw and the claw generates the response and it flows back to the UI. Right. Exactly. So this will happen in a couple of seconds just like that. >> Yes. Exactly. Exactly. >> That's so acts and it calls some tool to do certain function but uh all of that will get completed in 2 seconds >> and the user will just see a very clean chat message on the screen. They don't even know about what kind of complexity happens at the back end. >> Yep, that's the whole point. The complexity is in the back end. The user experience is simple which is a conversational interface. >> That's so intriguing. All right, Rafi. So, let's look at some of the pro tips what we've learned today. If someone wants to build their own AI agent, what are the essential patterns they should know about? >> Yeah, I would say there are five key patterns. So, number one, it's a agentic loop. So your agent calls the your agent calls the LLM and LLM might request some tools. So you execute the tools sends the result back and loop until you get the final answer that the loop is very important uh the agentic loops. So that makes a huge difference. Uh the number two is a dynamic tool registration. So we know it's a nondeterministic system. So you need to enable all the capabilities to dynamic tools. So eventually say here we exposed maybe handful of tools less than 10 but uh in a production grade you will have thousand tools. So a can decide which tool to use when so you need to enable the integration right and also authentication for the right tool. So you cannot go and read uh some data from some system. So when you enable the tool authorization should be there both forms the integration. Number three is memory uh system. You need to have short-term memory for current conversation, long-term memory for user identity and preference and episodic memory for historical memory. So you need all of them. Uh okay. Number four is dynamic uh system prompts. So uh some of the system prompt can be static and part of the system prompt need to be dynamic. uh so it should be built uh based on the user context and uh what rules behavior rules to apply for Gmail you need to put different behavioral rules Gmail you can say check before sending a calendar you can say okay check the conflicts before a meeting so the prompt is a living document okay the last one which is not the least you need to keep a transparency show the user what tools were used build trust by being transparent So that the adoption of AI agents by the users will be more trust trustable what data is retrieved by using which tool so that they know who has access to what data and when. >> Yeah that makes a lot of sense. So you see this five patterns as an important uh thing right and for the text what would you recommend for someone who's starting out? >> Yes start simple don't make too complex. Uh so Typescript is a good uh language for both front end and back end and anthro there are many agent SDK uh so you go with one I would suggest start with anthropic SDK and uh any database uh for persisting the conversation or preference the memory et so then you can start thinking about deploying into cloud cloud functions etc. Build the agentic loop first and the tool second and add memory third. Then worry about deployment. All the code from today's episode is in our GitHub uh repo. Uh the link is in the description and if you have any question you can put it in the comments. We we are happy to help. >> That really really helps. So I was able to relate to the diagram that we saw in the last episode and to the core structure that we had today. So I can't wait to tell our audience what will be our next episode. >> Yeah. So, so this is the second episode in this series a agents demystified. So, first we looked at what is the autonomy of a agent. Second, in this episode we kind of deep dived into the codebase how does it look like in the code uh right in reality with a practical project which is also shared as a repository. So the next episode say in this episode you may be already wondering do I need to write all of this? In the next episode we are going to bust all of that uh what does it mean? How can I generate whatever I shown today with AI? So instead of writing line by line. So in the next episode we are going to see how can we generate all of this instead of writing manually. >> So we don't have to write all the codes that you show showing in the screen right all the black and that was kind of terrifying for me. So that means we can build AI with AI right that really will help a lot of people in everyone including me to build AI better. And I can't wait to see that magic happen. Thank you so much Rafi for the insights that you have showed today. And thank you viewers for watching our episode. I am hope to see you all in episode 3. >> Yep. Thank you. See you in next episode. Happy build.

Original Description

Episode 2 - AI Agent Code Walkthrough In Episode 1, we covered the theory behind AI agents and autonomy. Now we open up the actual codebase and walk through every layer of a fully working AI Personal Assistant — line by line. By the end of this video, you'll understand exactly how to build an AI agent that reads your emails, manages your calendar, searches your Google Drive, and remembers your preferences — all from a single chat interface. 🔥 What you'll learn: 00:00 - Live Demo 02:00 - Welcome & Intro 05:00 - Architecture Overview (4 Layers) 08:30 - Project Structure Walkthrough 10:00 - The Agent Core: Agentic Loop Pattern 16:30 - Tools: Teaching the Agent New Skills 21:00 - The 3-Tier Memory System 26:30 - System Prompt Engineering 29:40 - Production Backend with Firebase Cloud Functions 34:00 - Frontend Chat Experience 35:30 - End-to-End Flow Walkthrough 39:00 - 5 Essential Patterns & Pro Tips 🧠 5 Key Patterns Covered: 1. The Agentic Loop 2. Dynamic Tool Registration 3. Multi-Tier Memory — short-term, long-term, episodic 4. Dynamic System Prompts — context-aware prompt building 5. Transparency — show users what tools the agent used 🛠️ Tech Stack: - TypeScript + Next.js 15 + Tailwind CSS - Anthropic Claude SDK (Claude AI) - Firebase Cloud Functions + Firestore - Google APIs (Gmail, Calendar, Drive) via OAuth 2.0 📦 Resources: - GitHub Repo: https://github.com/raffimd2/personal-assistant - Episode 1 — What Are AI Agents?: https://www.youtube.com/watch?v=G1k7a2jQgLU - Gen AI Mentor - https://www.genai-mentor.ai/ 👥 Hosts: Raffi & Sreeja 📢 Coming in Episode 3: "Build AI Agents WITH AI" — we'll show how to generate the entire agent codebase using AI instead of writing it manually. Subscribe so you don't miss it!
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

This video teaches how to build an AI Personal Assistant by walking through the codebase and covering topics such as agent architecture, prompt engineering, and tool integration. It provides a comprehensive understanding of how to design and implement an autonomous AI agent.

Key Takeaways
  1. Build a chat interface in React frontend in TypeScript
  2. Configure agent to use powerful foundation model
  3. Make API call to LLM with context and tools
  4. Use episodic memory to store previous chat conversation gist summary
  5. Use long-term memory to store preferences and facts
  6. Build system prompt and available tools
  7. Execute agentic loop with safety checks
  8. Register dynamic tools for authentication and integration
  9. Execute tools and send results back to LLM and UI
💡 The key to building an effective AI Personal Assistant is to design a robust agent architecture, implement a well-structured prompt engineering system, and integrate tools effectively to enable autonomous decision-making and action execution.

Related Reads

Chapters (12)

Live Demo
2:00 Welcome & Intro
5:00 Architecture Overview (4 Layers)
8:30 Project Structure Walkthrough
10:00 The Agent Core: Agentic Loop Pattern
16:30 Tools: Teaching the Agent New Skills
21:00 The 3-Tier Memory System
26:30 System Prompt Engineering
29:40 Production Backend with Firebase Cloud Functions
34:00 Frontend Chat Experience
35:30 End-to-End Flow Walkthrough
39:00 5 Essential Patterns & Pro Tips
Up next
How to Speed Up Your WordPress Website with WP Rocket ⚡Tutorial 2026
Matt Tutorials
Watch →