WEBVTT 00:00:00.000 --> 00:00:07.360 Today, you and I are gonna build a real feature using Cloud Code instead of all these proof of concepts and fake demos that you see all around YouTube. 00:00:07.440 --> 00:00:16.775 I'm gonna add a new feature to my AI engineering tutor app, and this feature is gonna be about the conversation history. Because if you type a question right now, like, what is AI engineering? 00:00:17.335 --> 00:00:20.615 It's saved in a database for thirty days for abuse purposes, 00:00:20.775 --> 00:00:22.695 but, otherwise, it's automatically deleted. 00:00:22.775 --> 00:00:34.040 But some people like to actually have a chat history like you have in ChatGPT here on the left. But right now, I have not implemented this feature properly, so let's go ahead and see how we can implement it together with Cloud Code. 00:00:34.600 --> 00:00:39.800 So this is the repository, and we've got the front end and back end application of their repository running already. 00:00:40.040 --> 00:00:54.465 I'm gonna go and open up a new terminal here because then we're going to start our Cloud Code session, and I can do that by just typing Claude. There we go. Now this is actually a completely new Claude session. I don't have a Cloud Markdown file or any special instructions. 00:00:55.040 --> 00:01:10.240 What I suggest you to do always with the iCoding is to not just jump into the ask of creating this conversation history feature, but first, the AI agent actually get a better sense of how your repository works. So what I'm going to do is I'm going to ask it to create a CLODE 00:01:11.015 --> 00:01:12.135 in the file 00:01:12.215 --> 00:01:13.335 to describe 00:01:13.335 --> 00:01:14.455 the structure 00:01:14.775 --> 00:01:18.215 of the front end and back end of this 00:01:18.455 --> 00:01:19.175 project, 00:01:19.655 --> 00:01:20.695 specifically 00:01:21.015 --> 00:01:22.455 detailing how 00:01:22.535 --> 00:01:23.655 conversations 00:01:24.055 --> 00:01:26.055 are are not stored 00:01:26.200 --> 00:01:27.400 at the moment. 00:01:27.960 --> 00:01:29.320 The end goal 00:01:29.560 --> 00:01:32.200 is going to be that we will 00:01:32.760 --> 00:01:35.480 implement a new feature 00:01:35.480 --> 00:01:40.120 to show and save conversations 00:01:39.155 --> 00:01:40.195 permanently. 00:01:40.835 --> 00:01:41.875 But for now, 00:01:42.995 --> 00:01:44.275 you learning 00:01:44.275 --> 00:01:46.115 the repository 00:01:47.715 --> 00:01:48.915 is the most 00:01:49.155 --> 00:01:49.955 important 00:01:49.955 --> 00:01:50.515 focus. 00:01:50.850 --> 00:01:55.410 And by doing this, you're really treating cloud as, for example, a junior engineer, 00:01:55.570 --> 00:02:11.955 because a junior engineer, when they join a new team, really just needs to learn how the repository works first before they can add and build new features. So at this moment, you see that it's going to go ahead and search through all of my different files. And this project actually has a couple of folders, so I'll kind of collapse them right now. 00:02:12.515 --> 00:02:14.355 You've got a back end folder, 00:02:14.595 --> 00:02:33.555 a cron service folder, a embedding service folder, and a front end folder. There's some other folders here and there, but those are the actual services that this application relies on. But for this feature, we only have to edit the back end and the front end because these other folders are basically for ingesting my YouTube videos so that the AI system that this application uses 00:02:33.555 --> 00:02:37.235 is actually using all of my content to answer questions properly. 00:02:37.555 --> 00:02:41.395 What you can see now is that cloud is really investigating all of these different 00:02:41.715 --> 00:02:53.310 files in order to find all the references to how conversations are actually saved at the moment. And you can see that it's starting to create that cloud dot markdown file with the detailed project structure documentation. 00:02:53.790 --> 00:03:00.875 Oh, so it actually happened to be done right there. You And can see that it described the architecture with our FastAPI back end, the key components, 00:03:00.875 --> 00:03:01.995 authentication, 00:03:02.075 --> 00:03:07.275 API endpoints. This is important because you can indeed see that we already have an endpoint to retrieve 00:03:07.435 --> 00:03:15.560 a conversation document. So we have sort of a partial implementation already, and it knows how the front end is built with React plus Vite, 00:03:15.720 --> 00:03:34.035 which is very good. And then it's got a nice overview of all of these different services that go along with it as well as the data structure for the conversation history. It's very impressive that it was able to capture all of this in just one minute of time, so that's very good. And you can indeed see what the conversation flow looks like in this application again. 00:03:34.755 --> 00:03:39.715 So that is very cool. Now in a terminal, it asks me, do you want to make this edit to Cloudmarkdown? 00:03:40.360 --> 00:03:46.360 Yes. And I think we'll just gonna say yes and don't ask again so we can make those changes and not have to ask every single time. 00:03:47.320 --> 00:04:03.065 Alright. So it's updating its seduce, and it should tell me that it's ready for new inputs. Yep. There we go. So what I wanted to do now is create a requirements pack for this new conversation history feature, and I'm going to kinda describe what I described to you to Claude so that it's aware of how it's currently being implemented 00:04:03.145 --> 00:04:05.705 and how we want the final implementation to look like. 00:04:06.610 --> 00:04:07.810 Create a 00:04:07.810 --> 00:04:09.810 product requirements 00:04:09.970 --> 00:04:10.770 markdown 00:04:11.010 --> 00:04:12.210 for the new 00:04:12.450 --> 00:04:13.490 conversation 00:04:13.570 --> 00:04:14.530 history 00:04:14.610 --> 00:04:15.410 feature. 00:04:16.610 --> 00:04:19.170 Right now, convos are saved 00:04:19.650 --> 00:04:20.210 for 00:04:20.725 --> 00:04:24.005 thirty days for abuse detection, 00:04:25.045 --> 00:04:27.845 but not visible in the user's 00:04:27.845 --> 00:04:28.485 UI. 00:04:28.965 --> 00:04:30.245 By toggling 00:04:30.885 --> 00:04:32.405 the existing 00:04:32.485 --> 00:04:33.525 but disabled 00:04:35.210 --> 00:04:36.490 history button, 00:04:36.970 --> 00:04:39.290 users should be able to 00:04:40.410 --> 00:04:41.770 save their 00:04:41.930 --> 00:04:42.810 Convos 00:04:44.010 --> 00:04:45.130 permanently 00:04:45.210 --> 00:04:46.730 and retrieve 00:04:46.810 --> 00:04:50.330 them like in other 00:04:49.355 --> 00:04:50.795 AI UIs. 00:04:51.675 --> 00:04:53.515 Note that we need 00:04:53.915 --> 00:04:56.235 to be GDPR compliant, 00:04:56.875 --> 00:04:59.915 so it's good if there is a privacy. 00:05:00.635 --> 00:05:01.995 I suppose 00:05:03.490 --> 00:05:05.890 we can probably call this a privacy 00:05:07.010 --> 00:05:08.530 consent form 00:05:08.770 --> 00:05:11.810 that the user needs to agree with. 00:05:12.770 --> 00:05:15.010 For now, work out the 00:05:15.170 --> 00:05:15.970 requirements. 00:05:17.295 --> 00:05:18.895 Doc, and don't 00:05:19.295 --> 00:05:20.415 code yet. 00:05:20.735 --> 00:05:29.855 So here too, I'm not asking you to code yet. So even though this tool is called Cloud Code, I'm not asking you to code yet. I first wanted to create a proper requirements 00:05:29.855 --> 00:05:30.575 document 00:05:30.700 --> 00:05:35.260 so that from there, it can actually keep track of what it has and has not implemented. 00:05:35.340 --> 00:05:43.580 And even if we quit the session and come back tomorrow, we can actually just continue from where we left off. So that's why you want to have those product requirement documents. 00:05:44.025 --> 00:06:20.905 So I'm gonna go ahead and make some tea, and then I'll be right back with you when it's done. So, actually, Claude is still thinking about this, but I really wanted to share some progress already with you because some of what I'm seeing here is super impressive and shows you why so many people love Cloud Code. So first of all, if we have a look at what it's already doing, it's researched the entire conversation history UI components which already exist together with how the conversations are being stored. But what I really like is that regarding this GDPR compliance requirement, it actually does a web search to figure out if there are some existing examples for this. Now things like GDPR and being compliant with other things like ISO 00:06:20.985 --> 00:06:41.310 are really aspects that you need to verify as a human. You can't rely on AI tools to do everything for you, but by doing a web search here, it's going to at least get 90% of the way there, and I think that is already really great and saves me a lot of headache. So I will have to verify it, but it's a really great start. Oh, and look at that. We actually have a very nice product requirements document. 00:06:41.705 --> 00:06:46.905 And in this product requirements document, there are a lot of aspects of the solution like the success metrics, 00:06:47.145 --> 00:06:50.665 which I like to see apart from just the functional requirements, 00:06:50.665 --> 00:07:04.170 like how we can see here that one of the goals is to have 30% of active users enable the conversation history feature within thirty days. But right now, we're really just concerned with making this work from a functional perspective, so let's have a look at the problem statement. 00:07:04.330 --> 00:07:28.870 The current state is that conversations are deleted after thirty days. That's correct. Users lose conversation context when starting a new session. That's correct. You don't have any conversation management in UI. All of that is completely correct, and it got that from reading all of the code and a little bit of my initial input, of course. And, of course, here you can see the user pain points, like how there's context loss, there's no reference system, they cannot go back to previous conversations, etcetera. 00:07:29.110 --> 00:07:45.465 What I really like about this is that everything is segmented very well. We have core functionalities like the conversation history toggle, the privacy consent flow, etcetera. I mean, this is exactly what you want to see in a PRD. And to be quite honest, this is a better product requirements document 00:07:45.465 --> 00:07:51.305 than I see in a lot of professional use cases at the moment. So, sure, AI is not perfect, 00:07:51.465 --> 00:08:03.400 but I'm just telling you that this is better than an average product requirements document. Is it perfect? No. But this is really extensive, and it goes on for a very long time. And it doesn't just talk about the functionality, 00:08:03.735 --> 00:08:33.485 It talks about the success metrics. It talks about the potential data structures that it needs to implement, and it even has a little consent model design here. I mean, that is very cool. Right? So let's go ahead and actually just implement an MVP of this feature because the consent model is something that I'm gonna work on for sure. It's just that right now, I want to take things step by step, and I just want the ability for users to select their previous conversations simply by ID. It doesn't need to have a fancy name in the left side of the application, 00:08:33.725 --> 00:08:43.725 and then, of course, the saved conversation should persist for more than thirty days. So let's go ahead and ask Claude to implement that. I want us to first implement 00:08:44.285 --> 00:08:46.285 an MVP of this PRD, 00:08:46.850 --> 00:08:51.490 So that's minimum viable product. Right? It's smallest unit of successful 00:08:51.490 --> 00:08:58.930 work that you can create to implement a feature like this. And then we're going to say the idea being that the user can 00:08:59.235 --> 00:09:01.795 select their conversations 00:09:02.355 --> 00:09:04.995 via a list of conversation 00:09:05.235 --> 00:09:07.155 IDs on the left. 00:09:07.475 --> 00:09:09.635 This, of course, implies 00:09:09.875 --> 00:09:11.235 that Convos 00:09:11.395 --> 00:09:13.555 should be persisted 00:09:14.080 --> 00:09:15.520 in the database 00:09:16.000 --> 00:09:17.440 over thirty days. 00:09:17.920 --> 00:09:24.160 Right now, the toggle can just be enabled without the consent form. 00:09:25.280 --> 00:09:26.960 We will implement this 00:09:28.375 --> 00:09:29.175 later. 00:09:29.495 --> 00:09:37.415 And the great part is that you can even ask Claude to then update the PRD and make sure that it ticks off the boxes of the features that it has or has not implemented. 00:09:37.495 --> 00:09:40.135 And, of course, you can also move this PRD to 00:09:40.390 --> 00:09:44.630 your project management tool of choice, like GitHub or money.com, 00:09:44.630 --> 00:10:00.815 whatever you're using. You can definitely export these PRDs to a system like that as well. Alright. So it has a couple of to dos that it's gonna do. It's gonna remove the time to live from conversations container to enable permanent storage, and this is a setting on the Cosmos DB, which is a NoSQL database, 00:10:01.055 --> 00:10:19.290 uh, where the container will automatically remove data that has not been touched for thirty days. So that is exactly why we need to remove it because if you have a conversation stored right now, you wanna make sure that it's stored indefinitely unless a user deletes it. Right? And then, of course, we need a new API endpoint to list all the conversations. 00:10:19.715 --> 00:10:22.835 We need to enable the conversation history toggle in the sidebar. 00:10:22.915 --> 00:10:28.515 We need to create the conversation list UI components, add a conversation selection and switching functionality, 00:10:28.515 --> 00:10:32.755 and then, of course, we need to test end to end conversation persistence and retrieval. 00:10:33.160 --> 00:10:52.305 So all of those singular steps sound great to me, and you can see that it's actually starting to create some code changes. Now this is a terminal based coding app, so you can check out the diffs like so. But what I like to do is just check out what's going on in Visual Studio Code. So I can actually go to my branches here and see that in customers DB p y, 00:10:53.025 --> 00:10:57.505 it's changing a couple of things. It removes that default TTL, 00:10:57.745 --> 00:11:12.320 and then if we scroll down here, you can see that, for example, it's creating a new endpoints or rather function to be able to retrieve all of the conversations for a given user. So let's let it cook, and I'll be right back with you once it's done. 00:11:13.465 --> 00:11:21.705 Alright. So what you see now is that it actually has ticked off most of its to dos, but we do need to test the end to end conversation persistence and retrieval. 00:11:21.865 --> 00:11:33.530 So it seems like it wants to actually run NPM run build just to see if there are any TypeScript errors, so I'm actually gonna say yes to that. That's totally fine. I don't expect there to be a lot of errors, but you never know. 00:11:33.930 --> 00:11:38.090 And you can actually see here that there is an error when it's trying to build the full project, 00:11:38.330 --> 00:11:46.705 so that's totally fine. It's gonna go back into the code and try and fix that up, and then I'm expecting that it's going to just run everything again 00:11:46.945 --> 00:11:56.065 once it's done with fixing this. Now it's gonna build again. Yep. There we go. It's gonna build again, and hopefully we get no errors now. Nope. We do still get an error. Response data is possibly undefined, 00:11:56.390 --> 00:12:05.990 and this is exactly what the actual AI coding process looks like sometimes. It's not gonna get it right in one go, but this is running completely in the background. It's not actually interrupting 00:12:05.990 --> 00:12:21.065 my regular development flow, so I could be doing something else entirely in the background and working basically in parallel to Cloud Code. So, you know, this is totally fine. Sometimes it just needs a couple of iterations to fix stuff, and now you can indeed see, boom, it's actually able to build the entire project. 00:12:21.305 --> 00:12:23.785 We don't wanna build the project in development, 00:12:24.585 --> 00:12:25.145 but 00:12:25.580 --> 00:12:37.420 is good to know that there are no build errors. So now what it's gonna do is it's gonna test the back end. I think that's a good idea, but you know what? We are here anyway, so let's go and just test it ourselves. I'm gonna go ahead and say no. 00:12:38.220 --> 00:12:54.450 And now let's just go ahead and reload our front end and check out what actually happened in practice. So if we check out the other terminals, we have the front end application here and the back end here. So, technically, you know, this all hot reloads and changes, but just to make sure that nothing strange has happened, I'm just gonna reload 00:12:54.450 --> 00:13:35.175 both the front end and the back end just to make sure. Right? And then what we're gonna do is we're gonna go back to my browser and then check if the feature was actually implemented properly. So I'm gonna go to my browser, and then I'm gonna go back to the front end application, and it's gonna give itself a full refresh. And now you can see that this conversation history button has a toggle. At this point, if I ask a question now, it should be saved in that conversation. So I'm gonna go ahead and paste the same question here. And then once it's done with answering this, I do expect that it's gonna show on the left here in the sidebar. So let's let it ramble on about AI engineering, and then there we go. So what I'm going to do now is I'm going to give this page a full refresh, 00:13:36.055 --> 00:13:38.535 and then what we're gonna see is we are 00:13:39.335 --> 00:14:18.130 and then, unfortunately, we see that it doesn't work. So what we need to do is we actually need to go back into Cloud and report that the feature doesn't work, but we need to explain why it doesn't work. So what do we do in a situation like this where the implemented feature doesn't work? You do not want to go back to Claude and just type, uh-oh, the feature doesn't work. Why don't you just do a little bit of investigation work yourself so you can give the AI model the right context so it can actually fix the feature? What do I mean by that? Well, in this case, we can actually have a look at our network tab in our browser to get a better idea of if the conversation is being stored at all. What I mean by that is that I can ask the question, what is AI engineering again? 00:14:18.370 --> 00:14:22.050 And you can see that it creates this request for the message response, 00:14:22.770 --> 00:14:28.930 and that is indeed being streamed in at the moment. Now I'm just curious to see what happens once the message is done generating. 00:14:29.395 --> 00:14:31.075 So the message finishes, 00:14:31.075 --> 00:14:39.955 and there's no extra request. So at the very least, we know now that as far as the initial implementation goes, the front end is not responsible for saving the conversation. 00:14:40.355 --> 00:14:43.315 I suppose then in the message back end API, 00:14:43.790 --> 00:15:02.265 the conversation should have been stored to the database, but that is not happening. So now that we know that context, we can actually formulate the problem in much more detail to cloud, which will improve the chance that it can actually fix the feature. So I'm gonna go back to Visual Studio Code, and then I'm going to type the following. I tested this manually. 00:15:03.065 --> 00:15:06.265 It seems the toggle works quite well, 00:15:06.665 --> 00:15:09.785 and the convo is not saved if the 00:15:10.220 --> 00:15:12.540 toggle is off. However, 00:15:12.780 --> 00:15:14.700 if the toggle is on, 00:15:15.660 --> 00:15:16.860 the conversation 00:15:17.100 --> 00:15:18.780 is also not saved. 00:15:19.820 --> 00:15:21.500 I see the front end 00:15:21.740 --> 00:15:27.065 does not make a new call to the back end after a message is done, 00:15:28.025 --> 00:15:29.305 which makes sense. 00:15:29.945 --> 00:15:31.945 But then I assume 00:15:32.345 --> 00:15:33.785 the message 00:15:33.785 --> 00:15:36.265 back end does not properly 00:15:36.345 --> 00:15:37.865 save the conversation 00:15:39.640 --> 00:15:40.360 or 00:15:40.600 --> 00:15:50.760 something else is amiss. So I don't know exactly what's going wrong. I'm not going to investigate that completely because if I did that, I might as well code the feature myself. 00:15:51.000 --> 00:16:05.145 But I do take the effort to investigate a little bit and to test a little bit further than just seeing that the UI doesn't work. Because if you can give your AI models just a little push towards the right direction, they will figure things out much faster and much more accurately, 00:16:05.560 --> 00:16:19.480 just like how a junior engineer would operate. So that's why you should always give these AI models the right context. But the proof is in the pudding, so let's go ahead and let it search for anything that it wants and reimplement the solution and see if then it all works. 00:16:20.985 --> 00:16:33.065 Looking at our cloud session, it seems to do a couple of things differently now. For example, in the request for the message, it actually seems that we now need to pass a safe conversation flag, which is probably gonna be just a false or true. 00:16:33.560 --> 00:17:01.540 And whether it's false or true depends on what the front end toggle looks like. So if you've enabled the conversation history, safe conversation will, of course, be true. If you've not enabled the conversation history toggle, then the safe conversation value is going to be false. So that makes all the sense because based on that flag, the back end will know whether or not the conversation actually needs to be stored for a longer period of time. So that makes sense to me. Alright. What we're gonna do now is just test this implementation again. So I'm gonna fully refresh the page, 00:17:02.020 --> 00:17:08.820 and then once again, we're going to ask the question, what is AI engineering? Now if we check out that message request again and I check the headers 00:17:08.900 --> 00:17:23.725 or actually rather the payload, you can see here that in the payload, save conversation is set to true. So that's actually a good sign. Now let's let it just generate the entire response, and then we're going to, of course, refresh the page once again. So I'm gonna refresh the page, 00:17:24.445 --> 00:17:32.280 and it still doesn't work. So now I'm actually going to go into the database and see if the conversation itself was stored because that will give us a good sign, 00:17:32.520 --> 00:17:38.680 and we can pass it on to the AI model so that it understands that the data itself might have been stored, but it's not being retrieved properly. 00:17:38.920 --> 00:17:42.280 So in the database, I'm gonna go ahead and refresh my conversations, 00:17:43.005 --> 00:17:55.485 and you should indeed be able to see all of these conversations that I recently created. So it does seem like the conversations are being saved, but they're not being retrieved properly. And I'm actually going to take this and copy the entire object 00:17:55.830 --> 00:18:03.990 because it will give Cloud a good example of how the conversation has been stored. So I'm going to let it know that the conversations 00:18:04.390 --> 00:18:07.430 seem to save in the DB correctly, 00:18:08.165 --> 00:18:10.005 but they are not fetched 00:18:11.205 --> 00:18:12.085 properly. 00:18:12.485 --> 00:18:14.005 Here is an example 00:18:15.205 --> 00:18:16.565 of a stored 00:18:18.405 --> 00:18:19.285 conversation, 00:18:20.485 --> 00:18:22.405 and then it's gonna paste all of that text in. 00:18:23.390 --> 00:18:26.510 There we go. So this is another great recommendation. 00:18:26.590 --> 00:18:30.270 If you are working on a feature where there's some database interactivity, 00:18:30.590 --> 00:18:47.295 you can just go into the database and check whether or not things have been saved correctly. And if they have been saved, you can just let Cloud know. Technically, you could let Cloud connect to your development database directly, but it is very convenient sometimes to help it along yourself and just check out the data and make sure that things are or are not saved. 00:18:47.535 --> 00:19:05.045 Alright. It seems to be done. Here's hoping it did well. So we're gonna go ahead and check out the website again, and oh, it looks like it actually auto refreshed this. So this is great. You can actually see these conversations in here. That's a really good sign, but we have to test a little bit further than that. Right? Let's go ahead and disable the conversation history, 00:19:05.205 --> 00:19:10.485 and now what I'm going to do is type the following. I do not want you to save this. 00:19:11.125 --> 00:19:29.560 It's not like the AI model is actually going to listen to this specific request, but by typing something else, we can actually recognize whether or not this conversation will be saved. So let's see if when we refresh the page, this conversation will show up or not. So I'm gonna go ahead and refresh the page, and then let's go ahead and enable conversation history, 00:19:30.095 --> 00:19:34.575 and it's not in there. Now let's go ahead and do one more test. 00:19:34.815 --> 00:19:36.975 Please save this chat. 00:19:37.215 --> 00:19:42.255 And then we should see this show up on the left side here once the message has been done. Alright? 00:19:43.400 --> 00:20:10.625 So there we go. Yep. There we go. Please save this chat. But funnily enough, there is a little bit of a UI improvement that we need to make that I just realized. So as you can see here, there's only four items that can be shown at once and have to scroll. That's actually not very obvious that there even is a scroll bar, so that's something I'm gonna pick up in the second iteration, but at least the interactivity here does work. Now, of course, the AI response here is that it doesn't have the ability to save the chat conversation. 00:20:11.050 --> 00:21:10.365 Functionality would need to be handled by the platform you're using to access me, but that's exactly what we're doing here. So, of course, the AI model is not completely aware of all of the features that are on my page right now, but that's another thing that I could change. I could improve the system prompt and just tell it that there is an explicit toggle that the user can enable or disable. So clearly, there's still a lot of work to do, and this implementation is also missing the dialogue form, but it's starting to really come together. Now I have one more surprise for you because you got so far into the video, and that is me sharing a secret with you because not that many people actually care about investing in their AI coding skills or getting ahead in their careers. But you clearly do because you watched this video all the way until the end. And I just wanted to share with you that AI can be such a powerful tool to actually accelerate your career. I grew to senior much faster thanks to AI coding, and you can be part of that too. If you check out the link in the description below, you can join my AI native engineering community, where you can learn way more AI coding techniques as well as how to build full, 00:21:10.365 --> 00:21:17.405 real production AI systems like the one that I demoed in the video today. I really hope to see you there because you've got the right potential. 00:21:17.485 --> 00:21:17.965 Bye bye.