WEBVTT 00:00.140 --> 00:00.770 Hey there. 00:00.800 --> 00:01.400 Eden here. 00:01.400 --> 00:09.050 And in this video I want to talk to you about user experience and user interface in generative AI applications. 00:09.050 --> 00:14.540 So building the back ends of our generative AI applications is one challenge. 00:14.540 --> 00:20.930 And we can spend a lot of time in the back end building our agent and building our rack system and making 00:20.930 --> 00:28.070 sure that the output that we give the user is the correct output, that it's trustworthy, and a quality 00:28.070 --> 00:28.910 output. 00:28.940 --> 00:31.940 However, this is just one piece of the puzzle. 00:31.940 --> 00:39.290 In order to have our application complete, we need to create a beautiful user interface and a very 00:39.290 --> 00:41.870 natural user experience for our users. 00:41.870 --> 00:49.610 To be able to trust our application and trust between users and generative AI applications is something 00:49.610 --> 00:57.230 that we need to work for, because users know that generative applications are, let's just say, flaky 00:57.230 --> 01:00.560 and they not always yielding the correct responses. 01:00.560 --> 01:02.720 And they can fail sometimes. 01:02.720 --> 01:05.390 And there is a huge challenge of doing this correctly. 01:05.390 --> 01:11.840 And in this video I will be featuring copilot kit and copilot kit is an amazing open source which helps 01:11.840 --> 01:19.990 us bridge this gap of creating beautiful interfaces, but more importantly, more natural user experiences 01:19.990 --> 01:22.180 in our generative AI applications. 01:22.180 --> 01:27.850 And I think Copilot Kit offers us today the best building blocks for building a beautiful generative 01:27.880 --> 01:28.330 UI. 01:28.330 --> 01:34.420 And when I talk about generative UI, I mean, in general, the user interface of our generative AI 01:34.420 --> 01:37.660 application, which is based on Dlrm. 01:38.290 --> 01:44.950 And I think that in order to create this trust between the user and our system, then we need to be 01:44.950 --> 01:45.850 transparent. 01:45.850 --> 01:50.560 So the user needs to know where does the answer come from. 01:50.560 --> 01:57.220 And for example, if we're building an agent then we need to be transparent on which tools does the 01:57.220 --> 02:01.810 agent have and which tools the agent is using to generate the answer. 02:01.810 --> 02:03.370 Why did he chose that tool? 02:03.370 --> 02:10.300 So the reasoning behind the agent may be some intermediate calculations until we get the final answer. 02:10.300 --> 02:13.630 So we can see how the final answer is being curated. 02:13.960 --> 02:20.500 And even in a Rag application, we need to be transparent and to show the user which documents did we 02:20.500 --> 02:24.730 use to generate the answer so it will know where it's grounded from. 02:24.730 --> 02:31.460 And all of this is going to create better trust between the user and our generative AI application. 02:31.490 --> 02:32.270 All right. 02:32.270 --> 02:34.190 Let's talk now about copilot Kit. 02:34.190 --> 02:40.640 And by the way, all of the demos you saw in this video are taken from the copilot kit documentation. 02:40.970 --> 02:42.140 They're open source. 02:42.140 --> 02:49.370 And in my opinion, they're pioneering right now the landscape of generative UI and generative UX. 02:49.370 --> 02:56.660 So in their repository you can skim around and you can find some starter kits to help you implement 02:56.660 --> 03:00.860 beautiful front ends for your back end generative AI applications. 03:00.860 --> 03:06.110 So this is not a full stack course, so I won't be going into that deeply. 03:06.110 --> 03:12.770 I'm simply introducing now the topics, but overall they simply introduce a bunch of components and 03:12.800 --> 03:20.840 hooks that we can use in our front ends, which makes it super easy to build generative UI and to build 03:20.840 --> 03:27.590 very good user experience on top of our generative AI applications, which is powered with link chain 03:27.590 --> 03:29.690 or with land graph, etc.. 03:29.720 --> 03:36.080 I want to elaborate on the support for link chain and link graph applications, and they introduce co 03:36.080 --> 03:40.810 agents which seamlessly integrates with lane graph backends. 03:40.810 --> 03:48.130 And I think the video here by Ariel from copilot Kit, which I will link in this video, is demonstrating 03:48.130 --> 03:49.510 this beautifully. 03:50.110 --> 03:56.980 And when we have a lane graph application, so a lot of things and a lot of moving parts are happening. 03:56.980 --> 03:59.440 We have the state which is constantly changing. 03:59.440 --> 04:02.440 We have intermediate results in that state. 04:02.470 --> 04:07.270 We have nodes that are executing, maybe nodes that are executing in parallel. 04:07.270 --> 04:13.390 We also have human in the loop where we stop the execution of the graph and we go to take the user input. 04:13.390 --> 04:16.210 And then we want to resume the execution of the graph. 04:16.210 --> 04:18.250 So a lot of moving parts here. 04:18.250 --> 04:20.290 And to build a frontend for this. 04:20.290 --> 04:22.420 To be honest it sounds like a nightmare. 04:22.420 --> 04:30.280 But copilot kit did a very good job to implement components for all of that I discussed all built on 04:30.280 --> 04:37.540 top of lane graph applications, which I think is super important and it's super easy to integrate both 04:37.540 --> 04:39.970 lane graph with copilot kit. 04:39.970 --> 04:43.690 I just want to be clear, I don't have any affiliation with copilot kit. 04:43.690 --> 04:48.970 I genuinely believe this is a good project, and I think they're doing an amazing job in the field of 04:48.970 --> 04:50.140 generative UI.