1 00:00:00,000 --> 00:00:04,840 Okay, and now I'm going to do a CTRL-C to stop the server from running. 2 00:00:04,840 --> 00:00:05,840 It's no longer running. 3 00:00:05,840 --> 00:00:08,439 I'll clear that screen with clear. 4 00:00:08,439 --> 00:00:12,000 Okay, it's time for us to add some functionality. 5 00:00:12,000 --> 00:00:15,600 We've got another way to prompt our LLM. 6 00:00:15,600 --> 00:00:16,840 We want to do more. 7 00:00:16,840 --> 00:00:18,440 So at this point, I want to mention 8 00:00:18,440 --> 00:00:21,440 that it's important to be taking backups as we go, 9 00:00:21,440 --> 00:00:23,239 to be checkpointing, 10 00:00:23,239 --> 00:00:26,200 because at any point, particularly when you're YOLOing, 11 00:00:26,200 --> 00:00:27,840 you could mess everything up, 12 00:00:27,840 --> 00:00:29,440 or the agent could mess everything up, 13 00:00:29,440 --> 00:00:31,840 and you have to start all over again, which would be a pain. 14 00:00:31,840 --> 00:00:34,000 Now, the right way to do this is using Git 15 00:00:34,000 --> 00:00:37,840 and using features of Git that allow us to commit at various points, 16 00:00:37,840 --> 00:00:39,759 and we will be doing that in the future. 17 00:00:39,759 --> 00:00:42,799 And if you know how to do that already, then for sure, do that. 18 00:00:42,799 --> 00:00:45,439 But otherwise, the simple way to do it, 19 00:00:45,439 --> 00:00:47,439 the poor person's version of Git, 20 00:00:47,439 --> 00:00:49,759 is simply to copy and paste, 21 00:00:49,759 --> 00:00:52,639 to duplicate the entire folder site 22 00:00:52,639 --> 00:00:54,360 and keep a backup of it that way. 23 00:00:54,360 --> 00:00:55,919 That way, you've got a snapshot 24 00:00:55,919 --> 00:00:58,200 that you could always switch back in if you need to. 25 00:00:58,200 --> 00:00:59,599 So make sure you've done that, 26 00:00:59,599 --> 00:01:02,439 just in case what we do next messes everything up, 27 00:01:02,439 --> 00:01:03,560 so you can always recall. 28 00:01:03,560 --> 00:01:06,400 And if you know how to use Git, then of course, just commit. 29 00:01:06,400 --> 00:01:10,360 And be careful of the fact that there's already going to be a Git repo 30 00:01:10,360 --> 00:01:13,559 under the web directory that you'll need to remove 31 00:01:13,559 --> 00:01:15,919 and then just have one Git repo, if you know that. 32 00:01:15,919 --> 00:01:17,559 If you don't, just take a copy. 33 00:01:17,559 --> 00:01:21,080 All right, now time to ask our agent to do more. 34 00:01:21,080 --> 00:01:23,000 Okay, so here we go. 35 00:01:23,000 --> 00:01:25,800 I'm going to paste in here my next instruction. That's great. 36 00:01:25,839 --> 00:01:30,199 Please now add the ability to have an AI chat with a digital twin, 37 00:01:30,199 --> 00:01:32,440 which can answer questions about my career. 38 00:01:32,440 --> 00:01:34,040 Please use OpenRooter. 39 00:01:34,040 --> 00:01:40,040 My OpenRooter API key is in the .emv file in the project root. 40 00:01:40,040 --> 00:01:42,639 Please use the model named. 41 00:01:42,639 --> 00:01:46,199 Okay, and now I just want to bring up OpenRooter itself. 42 00:01:46,199 --> 00:01:47,639 This is OpenRooter. 43 00:01:47,639 --> 00:01:50,839 If you go to the models page in the main navigation, 44 00:01:50,839 --> 00:01:53,720 we can look at all the different models that OpenRooter offers. 45 00:01:53,720 --> 00:01:56,720 If you type free, you get to see all the free ones. 46 00:01:56,720 --> 00:02:00,480 I want to look for ones called GPT-OSS, 47 00:02:00,480 --> 00:02:03,720 which is open source models. 48 00:02:03,720 --> 00:02:05,879 There's a free version and a paid version. 49 00:02:05,879 --> 00:02:08,080 The free version, you can only use it occasionally. 50 00:02:08,080 --> 00:02:09,279 I'm going to pick the paid version. 51 00:02:09,279 --> 00:02:13,119 It's still super cheap, but you can choose to use either. 52 00:02:13,119 --> 00:02:14,279 This is the version. 53 00:02:14,279 --> 00:02:15,240 I need to refresh that. 54 00:02:15,240 --> 00:02:18,679 And then I'm going to copy that model name into the clipboard, 55 00:02:18,679 --> 00:02:23,399 go back to cursor, paste that in here, like so. 56 00:02:23,399 --> 00:02:25,679 That is the name of the model. 57 00:02:25,679 --> 00:02:27,639 That is all I need to do. 58 00:02:27,639 --> 00:02:32,479 Make the changes. Changes. 59 00:02:32,479 --> 00:02:35,479 Make sure it works. 60 00:02:35,479 --> 00:02:41,119 Let me know when ready for me. That's all. 61 00:02:41,119 --> 00:02:42,800 Let's set that going. 62 00:02:42,800 --> 00:02:44,759 Off goes our AI agent. 63 00:02:44,759 --> 00:02:46,960 I will see you back here in a few moments 64 00:02:46,960 --> 00:02:49,039 when the YOLOing is complete. 65 00:02:49,039 --> 00:02:53,240 Okay, well, it tells me that an AI digital twin is wired up and ready. 66 00:02:53,240 --> 00:02:55,520 The site now includes digital twin. 67 00:02:55,520 --> 00:02:57,320 It calls up a router. 68 00:02:57,320 --> 00:02:59,360 It uses the .emv file. 69 00:02:59,360 --> 00:03:01,720 It's given me the instructions. 70 00:03:01,720 --> 00:03:02,559 What do you think? 71 00:03:02,559 --> 00:03:03,399 What's your bet? 72 00:03:03,399 --> 00:03:04,240 Is this going to work? 73 00:03:04,240 --> 00:03:06,080 Is this going to work? Let's see. 74 00:03:06,080 --> 00:03:08,240 We have to be in the web directory, which is where we are. 75 00:03:08,240 --> 00:03:09,440 PWD, there we are. 76 00:03:09,440 --> 00:03:13,160 We do npm run dev. 77 00:03:13,160 --> 00:03:15,320 Well, it hasn't crashed. 78 00:03:15,320 --> 00:03:17,559 Now let's bring up a browser. 79 00:03:17,559 --> 00:03:19,559 Here's a browser tab. Hold on. 80 00:03:19,559 --> 00:03:22,559 Make that a nice size for you. Sorry. 81 00:03:22,559 --> 00:03:23,399 One second, one second. 82 00:03:23,399 --> 00:03:24,759 I know it's exciting. 83 00:03:26,039 --> 00:03:27,639 Okay, here we go. 84 00:03:27,639 --> 00:03:30,000 So after faffing around with that, 85 00:03:30,000 --> 00:03:32,000 we can go to Localhost 3000, 86 00:03:32,000 --> 00:03:34,440 and here comes a website. 87 00:03:34,440 --> 00:03:36,520 It scrawled straight down originally. 88 00:03:36,520 --> 00:03:37,559 I wonder if it meant to do that, 89 00:03:37,559 --> 00:03:41,279 to do digital twin chat with an AI version of Ed 90 00:03:41,279 --> 00:03:43,039 to explore career milestones. 91 00:03:43,039 --> 00:03:44,440 Looks, it's all got the same site. 92 00:03:44,440 --> 00:03:48,039 It is a beautiful site, by the way, I have to say. Here we go. 93 00:03:48,039 --> 00:03:51,559 We scroll down, and here is the digital twin section. 94 00:03:52,399 --> 00:03:53,240 Very interesting. 95 00:03:53,240 --> 00:03:54,080 It doesn't look like a traditional chat, 96 00:03:54,080 --> 00:03:55,880 but it has these buttons and things. 97 00:03:55,880 --> 00:03:58,800 All right, shall we try chatting with the digital twin? 98 00:03:58,800 --> 00:04:01,600 Okay, let's give it a shot. Hi there. 99 00:04:03,639 --> 00:04:04,520 So I said hi there. 100 00:04:04,520 --> 00:04:05,479 It's slightly janky. 101 00:04:05,479 --> 00:04:08,080 It like bounced around a bit, but I said hi there. 102 00:04:08,080 --> 00:04:09,520 Look at how it's showing here. 103 00:04:09,520 --> 00:04:11,479 Hello, I'm the digital twin of Ed Donner. 104 00:04:11,479 --> 00:04:12,800 How can I assist you today? 105 00:04:12,800 --> 00:04:16,079 Perhaps with insights on his work, blah, blah, blah, blah, blah. 106 00:04:16,079 --> 00:04:21,079 What are you most proud of? 107 00:04:22,559 --> 00:04:24,519 Let's see what we get. 108 00:04:24,519 --> 00:04:28,640 What is this guy, Ed, most proud of? Let's see. 109 00:04:28,640 --> 00:04:32,760 I'm most proud of turning a vision into a tangible impact, 110 00:04:32,760 --> 00:04:35,600 building Nebula from the ground up as a fundraiser. Very nice. 111 00:04:35,600 --> 00:04:37,160 What a nice answer. 112 00:04:37,160 --> 00:04:38,799 Watching thousands of professionals 113 00:04:38,799 --> 00:04:40,160 find roles that genuinely fit them. 114 00:04:40,160 --> 00:04:42,440 The clearest proof that technology 115 00:04:42,440 --> 00:04:46,760 can serve a deeper human-focused mission. Nicely put. 116 00:04:46,760 --> 00:04:48,359 So here we have it. 117 00:04:48,359 --> 00:04:50,000 We have a digital twin. 118 00:04:50,040 --> 00:04:52,040 It's interesting the way it's showing it here. 119 00:04:52,040 --> 00:04:53,959 It's actually quite nice. It's different. 120 00:04:53,959 --> 00:04:55,880 I've seen many digital twins 121 00:04:55,880 --> 00:04:57,480 and they don't tend to look this way. 122 00:04:57,480 --> 00:04:58,839 So I do quite like it. 123 00:04:58,839 --> 00:05:03,079 I have to say, even if it's not the traditional approach, but very nice. 124 00:05:03,079 --> 00:05:04,119 It does seem to be working 125 00:05:04,119 --> 00:05:06,079 and presumably it's calling open router. 126 00:05:06,079 --> 00:05:07,839 Well, this is really showing you, 127 00:05:07,839 --> 00:05:12,119 I'd say the good and the rough edges of vibe coding. 128 00:05:12,119 --> 00:05:13,920 This looks pretty good, I have to say, 129 00:05:13,920 --> 00:05:15,640 but there's definitely some weird stuff 130 00:05:15,640 --> 00:05:16,640 like the way when it opens up, 131 00:05:16,640 --> 00:05:19,200 it flips down straight to that section. 132 00:05:19,239 --> 00:05:22,079 I do believe some of this navigation at the top here, 133 00:05:22,079 --> 00:05:22,920 some of it works. 134 00:05:22,920 --> 00:05:24,440 Career journey works nicely. 135 00:05:24,440 --> 00:05:25,279 Does that portfolio work? 136 00:05:25,279 --> 00:05:28,640 Oh, that works as well. Digital twin. Oh, okay. 137 00:05:28,640 --> 00:05:29,920 At one point I think this wasn't working, 138 00:05:29,920 --> 00:05:32,000 but it does seem to be working right now. 139 00:05:32,000 --> 00:05:34,720 So that navigation is working. 140 00:05:34,720 --> 00:05:36,720 But yeah, there's another thing that doesn't work. 141 00:05:36,720 --> 00:05:38,079 These buttons here. 142 00:05:38,079 --> 00:05:40,480 I tried pressing that button and nothing happened. 143 00:05:40,480 --> 00:05:42,320 So there's definitely some things here 144 00:05:42,320 --> 00:05:44,239 that are a bit broken. 145 00:05:44,239 --> 00:05:46,040 And this is where you have to go back 146 00:05:46,040 --> 00:05:48,959 and iterate, iterate, iterate and improve. 147 00:05:49,640 --> 00:05:52,440 And see what can be done by going backwards and forwards. 148 00:05:52,440 --> 00:05:55,000 And it is a good idea to keep backups. 149 00:05:55,000 --> 00:05:56,880 You should really do it using Git, 150 00:05:56,880 --> 00:05:58,640 but make sure you can always go back 151 00:05:58,640 --> 00:06:01,519 if it ever does something that should be reversed. 152 00:06:01,519 --> 00:06:03,640 And of course, the main thing to keep in mind here 153 00:06:03,640 --> 00:06:07,519 is that by genuinely vibe coding with YOLO, 154 00:06:07,519 --> 00:06:09,839 we've sort of broken all of the rules 155 00:06:09,839 --> 00:06:13,359 that I said at the first half of today's session. 156 00:06:13,359 --> 00:06:15,720 We didn't work on an agents.md. 157 00:06:15,720 --> 00:06:18,320 We haven't really been checking as we go. 158 00:06:18,320 --> 00:06:21,440 And that's fine for this kind of MVP 159 00:06:21,440 --> 00:06:23,600 and for experimenting and exploring. 160 00:06:23,600 --> 00:06:25,600 But if we wanted to take this further, 161 00:06:25,600 --> 00:06:28,519 it would now be important to take a moment 162 00:06:28,519 --> 00:06:29,959 and come back through. 163 00:06:29,959 --> 00:06:31,920 First of all, test everything thoroughly 164 00:06:31,920 --> 00:06:34,480 and fix up things that we're not satisfied with. 165 00:06:34,480 --> 00:06:36,480 Iterate on things like the prompts 166 00:06:36,480 --> 00:06:38,320 and look in at the code. 167 00:06:38,320 --> 00:06:41,839 And for example, now let's take a look inside web 168 00:06:41,839 --> 00:06:44,160 and find out what has this actually built 169 00:06:44,160 --> 00:06:45,679 and do we understand it. 170 00:06:45,679 --> 00:06:48,320 And so for example, I can come in into web, 171 00:06:48,320 --> 00:06:52,279 into source SRC and come in here, 172 00:06:52,279 --> 00:06:54,399 look inside app. 173 00:06:54,399 --> 00:06:57,600 And here we could look inside API 174 00:06:57,600 --> 00:07:01,760 and you'll see that there is something called root.ts under API chat. 175 00:07:01,760 --> 00:07:03,119 And if I open this up, 176 00:07:03,119 --> 00:07:05,279 this is where we will see the backend code 177 00:07:05,279 --> 00:07:06,480 that's getting run, 178 00:07:06,480 --> 00:07:11,480 which is where it is going to be able to call open router. 179 00:07:13,519 --> 00:07:15,640 Now let's make this a little bit bigger 180 00:07:16,480 --> 00:07:17,959 and push our agent over to the side 181 00:07:17,959 --> 00:07:20,040 and take a look at what's happening here. 182 00:07:20,040 --> 00:07:21,679 And you can see the code 183 00:07:21,679 --> 00:07:25,839 that is going to make that request to the LLM. 184 00:07:25,839 --> 00:07:27,559 And we can now look through this 185 00:07:27,559 --> 00:07:28,959 and get a sense of what's going on. 186 00:07:28,959 --> 00:07:30,119 And most importantly, 187 00:07:30,119 --> 00:07:32,799 we can see the prompt that's being used 188 00:07:32,799 --> 00:07:34,720 to tell it who I am. 189 00:07:34,720 --> 00:07:38,239 And we may decide, look, this is quite simplistic. 190 00:07:38,239 --> 00:07:40,519 This is just a very basic prompt. 191 00:07:40,519 --> 00:07:43,239 We really wanted the whole LinkedIn profile 192 00:07:43,239 --> 00:07:47,040 with all the information to be sent to the chat bot 193 00:07:47,040 --> 00:07:49,760 so that it could give us the most robust answer.