WEBVTT 00:00.120 --> 00:06.640 So today is a yellow day, and if you've been following my color scheme system, you will know that 00:06.640 --> 00:09.200 a yellow day means integration's day. 00:09.240 --> 00:14.640 And if you dread all things integration, you needn't, because today is going to be a great integration 00:14.680 --> 00:15.000 day. 00:15.040 --> 00:20.640 There's one tricky integration and several easy peasy, fun integrations. 00:20.680 --> 00:23.080 Welcome to week three, day two. 00:23.280 --> 00:25.680 Welcome to our next integration today. 00:25.680 --> 00:29.240 And I've called it here in the Timeline Advanced Integrations. 00:29.240 --> 00:32.360 Because this is the Pro week and we're getting advanced. 00:32.360 --> 00:34.440 And of course there's a fork in the road. 00:34.480 --> 00:39.720 As I said last time, that that most of you, I imagine, like me, will be now going back to the cloud, 00:39.760 --> 00:45.520 to cloud, because we're focused primarily on building commercial functionality this week. 00:45.520 --> 00:51.520 But some of you may wish to stay running local, uh, in which case, uh, I very much encourage that. 00:51.520 --> 00:57.320 But you will need to fend for yourself in a couple of places, like, like using, uh, ngrok for webhooks 00:57.320 --> 00:58.640 and things like that. 00:58.640 --> 00:59.600 But you've got this. 00:59.600 --> 01:03.310 But otherwise, come with me back to Nate and Cloud. 01:03.310 --> 01:06.950 But just before we do that, a couple of of refreshes and recaps. 01:06.990 --> 01:12.550 You know, I like to do them because sometimes the best way to reinforce is to be a little bit repetitive. 01:12.830 --> 01:14.070 Let's quickly review. 01:14.070 --> 01:18.710 And there are of course the three styles of authentication of credentials. 01:18.750 --> 01:20.190 There's the simple ones. 01:20.190 --> 01:21.470 Just an API key. 01:21.510 --> 01:22.910 You're just connecting to OpenAI. 01:22.990 --> 01:23.550 You got a key. 01:23.590 --> 01:28.350 You paste it in, you're careful as you paste it in, you get the green and we're set. 01:28.550 --> 01:29.950 That's the easy ones. 01:30.470 --> 01:37.190 Then with OAuth two we've already experienced what what I'm calling here one click, which is when we're 01:37.190 --> 01:43.230 working in cloud say and it's already got an OAuth client configured. 01:43.390 --> 01:47.430 Nan is already kind of connected to Google say. 01:47.630 --> 01:49.550 So we can go through the OAuth two flow. 01:49.550 --> 01:53.870 And it's actually pretty straightforward to integrate with Google Sheets and Gmail. 01:54.030 --> 02:01.950 It was easy, but there are some other Google APIs and a bunch of other Google APIs when you have to 02:01.990 --> 02:08.550 jump through more hoops, and this is the harder OAuth two strategy when you have to actually set up 02:08.550 --> 02:10.750 an oath to client yourself. 02:10.750 --> 02:14.190 And that's what we're going to do today is our first integration. 02:14.190 --> 02:15.870 It's the only hard integration. 02:16.030 --> 02:20.190 And as I say there's there's there's some shenanigans that you should get ready for. 02:20.350 --> 02:26.310 And if you're using Na and locally, then you kind of have to do this for many of your OAuth two integrations. 02:26.310 --> 02:28.750 So you would get somewhat used to it. 02:28.750 --> 02:33.710 And there's one step in it where you have to be careful with a URL that you have to copy and paste, 02:33.710 --> 02:37.110 and you have to get it right otherwise otherwise trouble. 02:37.110 --> 02:38.190 So get it right. 02:38.350 --> 02:39.630 Uh, so we'll do that together. 02:39.630 --> 02:43.510 And I'll tell you the part that that you have to pay close attention to. 02:43.790 --> 02:47.670 Um, but otherwise once you've done it a couple of times, it becomes second nature. 02:47.670 --> 02:48.950 So it's a great thing to do. 02:49.150 --> 02:50.310 And we'll be doing it today. 02:50.350 --> 02:50.990 Okay. 02:51.030 --> 02:53.950 And the other refresher is this, this old chestnut. 02:53.950 --> 02:54.670 Remember this? 02:54.870 --> 02:57.950 Uh, I think this is going to be the last time we review this. 02:57.990 --> 02:59.310 You're like, okay, we get this. 02:59.550 --> 03:00.190 All right. 03:00.390 --> 03:05.670 Calling an API is basically when you're talking about the web, it's talking about making a web request 03:05.780 --> 03:12.020 using HTTP, and when you call that URL, the URL itself is known as an endpoint. 03:12.060 --> 03:15.100 That web address is the endpoint that you're calling to. 03:15.140 --> 03:19.060 And so the language you might use is hey, I'm making an API call. 03:19.060 --> 03:26.900 I'm calling an API by making an HTTP request to an endpoint that is calling an API. 03:27.020 --> 03:33.820 And the reverse of it, perhaps you might say like a, like a reverse API is if you're on the receiving 03:33.820 --> 03:39.700 end, you're the one providing the API that someone is calling you, and they're calling you particularly 03:39.700 --> 03:42.300 to notify you of like a real time event. 03:42.300 --> 03:44.860 Something has happened and you need to be notified. 03:45.060 --> 03:51.020 And when you think of it that way, that that endpoint, that URL you call a webhook, it's something 03:51.020 --> 03:53.820 that gets called to tell you about something. 03:53.860 --> 03:57.060 So for someone else, they think of it as they're calling an API for you. 03:57.060 --> 03:58.660 It's like an event coming in. 03:58.660 --> 04:02.620 And the language you would use to describe it is, hey, I've set up a webhook. 04:02.660 --> 04:09.770 Please make an HTTP request to this endpoint to notify me that something has happened or, hey, can 04:09.770 --> 04:13.530 you tell me your webhook so that I can notify you when something happens? 04:13.730 --> 04:15.250 That is webhooks. 04:15.290 --> 04:16.250 Basically the same. 04:16.290 --> 04:19.130 The same concept, but from the thought of from the other side. 04:19.130 --> 04:23.930 And you'll remember the technicality about these HTTP requests is that there's different flavors known 04:23.930 --> 04:28.530 as the method, the HTTP method and get and post are the most common. 04:28.650 --> 04:35.130 Get is usually used to get some information that comes back in the form of a JSON document, and post 04:35.170 --> 04:40.810 is normally used to send some information, and the information you're sending normally goes in a section 04:40.810 --> 04:47.290 that's called the body of the HTTP post, which in traditional internet, when you submit a form, it's 04:47.330 --> 04:53.090 like doing a post to a URL, and the contents of that form is what goes in JSON in the body. 04:53.130 --> 04:57.290 Not that you need to know that, but that's that's that's what HTTP post is. 04:57.530 --> 05:04.770 And of course we used that ourselves when we had 11 labs calling in to N810 in week two. 05:05.050 --> 05:05.930 All right. 05:05.970 --> 05:08.210 That is the deeper terminology and APIs. 05:08.330 --> 05:12.210 And of course you can relate this to some of natans nodes. 05:12.450 --> 05:14.450 Natans nodes that are triggers. 05:14.450 --> 05:17.370 Very often those triggers are actually webhooks. 05:17.370 --> 05:22.490 So when there's things like the slack trigger you remember that that we could get a different URL for 05:22.490 --> 05:23.690 test environment or prod. 05:23.730 --> 05:25.530 Those are webhooks that get called. 05:25.530 --> 05:30.530 And similarly when we were when we were using 11 labs, we actually set one up in that was that was 05:30.530 --> 05:31.210 a webhook. 05:31.250 --> 05:37.770 We used the generic webhook one, just a generic node that allows you to, to specify to, to, to, 05:37.810 --> 05:43.170 to collect a URL and that webhook gets called and that triggers a particular workflow. 05:43.410 --> 05:46.810 So so triggers and can often be webhooks. 05:47.130 --> 05:53.010 And the, the actual action nodes in Nan, when they are integrating with things they are often making 05:53.050 --> 05:54.930 HTTP requests to endpoints. 05:54.930 --> 05:56.770 That's what they're often actually doing. 05:56.930 --> 05:58.850 Uh, which is probably obvious to you. 05:58.890 --> 06:03.530 Like uh, and whether they are actions or whether they are tools that we're equipping an agent with. 06:03.530 --> 06:10.760 So if you think of the pushover one, that pushover node we used once as a tool and once as just an 06:10.760 --> 06:13.600 action on the workflow, just as a node. 06:13.880 --> 06:18.560 When you use that, it's it's making an HTTP request to an endpoint for pushover. 06:18.560 --> 06:20.440 And that's, that's all it's doing. 06:20.440 --> 06:22.200 It is making a request. 06:22.400 --> 06:29.040 And in fact, and I think I mentioned this before, there is also a generic node called the HTTP request, 06:29.040 --> 06:34.920 which is completely configurable and allows you to make any HTTP requests to the internet. 06:34.920 --> 06:40.360 So you can either use one of the Pre-baked ones, like the pushover one, or you can use the generic 06:40.400 --> 06:42.640 HTTP request one and make your own. 06:43.000 --> 06:48.920 Just like for the triggers, you can either use a Pre-baked one like the slack one, or you can make 06:48.920 --> 06:51.360 your own, as we did for 11 labs. 06:52.080 --> 06:53.240 That all rings true. 06:53.360 --> 06:54.680 That's all connecting for you. 06:54.960 --> 06:58.280 And if not, you'll see a little bit more of that in a second. 06:58.320 --> 07:00.480 And with all of this, it's time. 07:00.520 --> 07:01.520 That's enough talk. 07:01.560 --> 07:02.960 Let's get back to action. 07:02.960 --> 07:04.760 Let's get back to cloud. 07:04.760 --> 07:06.240 Have you missed it I have. 07:06.280 --> 07:07.080 Let's go there now. 07:07.080 --> 07:13.750 And so here we are back at Nano by pressing the sign in button coming in here. 07:13.750 --> 07:14.790 Remember this screen? 07:14.790 --> 07:15.750 The dashboard. 07:15.790 --> 07:17.950 Now opening up my instance. 07:17.950 --> 07:18.910 Here it comes. 07:19.390 --> 07:20.150 Okay. 07:20.430 --> 07:24.550 So what we're now going to do is press create workflow. 07:24.590 --> 07:27.830 Get rid of that I'm still on my trial press create workflow. 07:27.830 --> 07:28.630 Here we are. 07:28.670 --> 07:31.910 We know this screen so well add a first step. 07:31.910 --> 07:33.590 Let's have the chat message. 07:33.590 --> 07:36.030 Why not click and escape. 07:36.270 --> 07:39.510 Press the plus button AI AI agent. 07:39.510 --> 07:40.830 It's like second nature to you. 07:40.870 --> 07:42.990 You've got such such muscle memory for this. 07:43.310 --> 07:46.590 Uh, and uh, let's add a chat model. 07:46.670 --> 07:49.990 Let's use open router, open router, chat model. 07:50.030 --> 07:50.910 Here it is. 07:50.910 --> 07:52.190 It has a credential already. 07:52.190 --> 07:53.670 The open router account. 07:53.750 --> 07:55.350 Let's go with deep seek. 07:55.390 --> 08:03.390 Let's let's find a deep seek AI deep seek AI deep seek 3.2 here we go. 08:03.750 --> 08:05.310 Click and escape. 08:05.710 --> 08:08.830 And we will give it some standard memory. 08:08.870 --> 08:10.070 Simple memory. 08:10.070 --> 08:11.390 All sounds good. 08:11.630 --> 08:15.900 And now we will open a chat and say hi there. 08:16.420 --> 08:21.660 And make sure that we haven't forgotten how to use and cloud that everything works. 08:21.660 --> 08:22.300 There it goes. 08:22.300 --> 08:24.380 Hello, how can I help you today? 08:24.380 --> 08:25.260 So far so good. 08:25.260 --> 08:29.340 And since we're in Pro week, let me just show you a couple of extra features so that you get comfortable 08:29.340 --> 08:30.740 with some of the bells and whistles. 08:30.740 --> 08:36.180 And then over here is projects list where you can see I've got like my project. 08:36.220 --> 08:39.980 You get projects by pressing the plus button here and selecting project. 08:40.020 --> 08:46.740 Now unfortunately on this free trial period, I'm only allowed one project and I already press the plus 08:46.740 --> 08:46.940 button. 08:46.940 --> 08:48.260 You probably don't have my project. 08:48.260 --> 08:53.860 I already pressed plus and created my project without realizing that I was already allowed to create 08:53.860 --> 08:54.220 one. 08:54.460 --> 08:58.660 But I will in a minute sign up for the full plan and then I should be able to create more. 08:58.860 --> 09:00.700 But you can of course create them. 09:00.700 --> 09:03.500 And then you can create a workflow as part of this project. 09:03.540 --> 09:07.260 Think of a project just being as a way to organize different workflows. 09:07.420 --> 09:13.020 Um, because as we'll discover later this week, you can have multiple workflows that collaborate together 09:13.020 --> 09:15.540 to achieve some bigger business outcome. 09:15.980 --> 09:21.180 But I've got them all under personal right now, uh, which is, uh, which is where they're all sitting 09:21.180 --> 09:21.620 for the moment. 09:21.660 --> 09:24.780 Although I should go one step deeper and say that it's actually even more than that. 09:24.780 --> 09:30.620 There are there are projects and there are also folders within each project or even within this, this 09:30.620 --> 09:31.820 personal space here. 09:31.820 --> 09:33.580 But let's take so let's take the one we've just created. 09:33.580 --> 09:34.660 Let's give it a name. 09:34.660 --> 09:40.980 Let's just call it, uh, deep seq because it's a little conversation with deep seq. 09:41.020 --> 09:42.340 Go back to personal again. 09:42.340 --> 09:44.140 And there you can see deep SEQ is right here. 09:44.180 --> 09:50.820 I'm going to go to these triple dots over on the right here and go uh move and from move I'm going to 09:50.820 --> 09:56.980 choose to move it to a project which is going to be my project, the only one, uh, that I've got, 09:57.220 --> 10:03.780 uh, and uh, also share the one credential, the credentials are associated with the project, uh, 10:04.620 --> 10:06.860 not moving any additional sharing. 10:07.860 --> 10:12.020 Select a folder, no folder, project root and then move. 10:12.020 --> 10:12.900 And off it goes. 10:12.900 --> 10:14.260 It's gone from here. 10:14.260 --> 10:19.810 If I now go over to my project, you will see that it's here and the other credentials are associated 10:20.090 --> 10:21.210 with with this. 10:21.450 --> 10:22.330 Um, okay. 10:22.370 --> 10:28.370 So over here, uh, I am now going to be able to create a folder so I can open this, create a folder 10:28.370 --> 10:34.410 in my project, and I'm going to call this folder, um my first folder. 10:35.970 --> 10:37.570 Spell it right create. 10:37.610 --> 10:38.410 There we go. 10:38.410 --> 10:42.890 And now I've created a folder inside my project that's called my project. 10:42.890 --> 10:43.450 Okay. 10:43.530 --> 10:47.050 So the next thing I'm going to do is I'm going to drag and drop deep seek in there. 10:47.090 --> 10:49.050 And now it's gone into my first folder. 10:49.050 --> 10:50.610 There is one workflow. 10:50.730 --> 10:52.410 And I can now click in here. 10:52.410 --> 10:55.370 And now we are inside my first folder. 10:55.370 --> 10:58.370 You can see there we can see my project slash my first folder. 10:58.530 --> 11:01.410 And here is the deep sea workflow. 11:01.690 --> 11:05.210 So uh and you can obviously create another folder in this. 11:05.210 --> 11:10.530 So it's like a normal file system hierarchy situation where you can have multiple folders within folders 11:10.530 --> 11:13.530 and they can all form parts of projects. 11:13.530 --> 11:20.440 So you can imagine you have a number of projects and each project contains some folder hierarchy with 11:20.640 --> 11:24.080 workflows at various points in that, in that hierarchy. 11:24.080 --> 11:29.200 And we've created a project called Myproject with a folder called Myfirst folder that contains deep 11:29.280 --> 11:33.160 seek, which is R1 workflow right here. 11:33.400 --> 11:35.240 Hopefully that all makes sense. 11:35.240 --> 11:38.600 And then there's one more little thing to show you a little bell and whistle. 11:38.640 --> 11:45.960 A feature I'm clicking on chat to bring this down over here are stickies and stickies which is also 11:45.960 --> 11:46.280 shift. 11:46.320 --> 11:47.400 S will give you a sticky note. 11:47.400 --> 11:50.520 We can press this to create a note like this. 11:50.720 --> 11:55.520 And this allows us to uh, to to sort of put some, some framing around things. 11:55.520 --> 11:57.040 Double click to edit me. 11:57.360 --> 12:03.880 Uh, I'm going to I'm a note I'm going to put in markdown here inputs. 12:06.640 --> 12:11.280 This is data flowing in okay. 12:11.280 --> 12:12.560 Let's have a look at that. 12:12.880 --> 12:17.480 So this is one sticky I'm going to get myself another sticky. 12:18.040 --> 12:23.240 And here I'm going to have, like, um, make this a bit bigger. 12:26.480 --> 12:29.600 And call it processing. 12:32.160 --> 12:34.080 This is the business. 12:35.640 --> 12:36.920 And there we go. 12:36.960 --> 12:40.400 And now I'm going to move these in here. 12:41.240 --> 12:46.200 And stickies just give you a way to be a little bit more organized about everything. 12:46.360 --> 12:48.760 Nothing more than nice. 12:48.880 --> 12:50.080 Minimize that again. 12:50.400 --> 12:51.160 There we go. 12:51.200 --> 12:51.720 Look at that. 12:51.760 --> 12:52.840 Doesn't that look nice? 12:52.960 --> 12:59.680 So stickies, it's just purely cosmetic stuff, but it gives you an ability to organize your nodes, 12:59.680 --> 13:02.480 put them into groups, display them, show them. 13:02.640 --> 13:05.520 So you can use a combination of stickies. 13:05.520 --> 13:10.480 And then also grouping things into folders and having those folders within a project as your way to 13:10.480 --> 13:13.200 be super organized about how you build everything. 13:13.200 --> 13:17.920 And since later on this week we're going to be building increasingly sophisticated projects, it makes 13:17.920 --> 13:22.400 sense that we know that the tooling available to us to keep ourselves organized.