WEBVTT 00:00:00.000 --> 00:00:01.900 About 20 minutes later we have our custom 00:00:01.920 --> 00:00:03.780 CRM application that Claude has built 00:00:03.987 --> 00:00:05.327 Sometimes we think, oh, the AI writes 00:00:05.347 --> 00:00:07.367 terrible code, it's all spaghetti and so on, 00:00:07.387 --> 00:00:08.967 but that's not true when it's using 00:00:08.987 --> 00:00:09.827 something like Elements. 00:00:09.907 --> 00:00:11.547 It's going to write quite beautiful code, 00:00:11.667 --> 00:00:12.467 very maintainable. 00:00:12.753 --> 00:00:13.793 So if I type elements build, 00:00:14.173 --> 00:00:16.173 I'm going to get an almost instant build 00:00:16.193 --> 00:00:18.433 result that shows me that the state is okay. 00:00:18.713 --> 00:00:20.413 That completes in about 10 microseconds. 00:00:20.700 --> 00:00:21.980 These tests, when you ask for them, 00:00:22.080 --> 00:00:23.420 come back very, very fast. 00:00:23.853 --> 00:00:25.893 And if you include all of the deployment 00:00:25.913 --> 00:00:27.453 that you would need, it comes out to about 00:00:27.473 --> 00:00:29.773 $55 a month to run this application. 00:00:30.250 --> 00:00:31.410 Hey everybody, in this video we're going to 00:00:31.430 --> 00:00:33.770 build a custom CRM, customer relationship 00:00:33.790 --> 00:00:36.010 management system from scratch using 00:00:36.030 --> 00:00:38.390 Elements built with Claude Code inside 00:00:38.410 --> 00:00:39.410 of Visual Studio Code. 00:00:39.910 --> 00:00:42.290 Now a CRM system is a system 00:00:42.310 --> 00:00:43.990 for managing customer relationships, 00:00:44.490 --> 00:00:46.710 deal flow, keeping track of 00:00:46.730 --> 00:00:48.710 where different deals are in the 00:00:48.730 --> 00:00:50.150 pipeline, what stage they're in, 00:00:50.390 --> 00:00:51.810 managing tasks around that, 00:00:52.210 --> 00:00:52.970 things like that. 00:00:52.990 --> 00:00:54.930 Now there's obviously a lot of SaaS 00:00:54.950 --> 00:00:57.130 companies out there that provide CRM 00:00:57.150 --> 00:00:57.710 systems. 00:00:57.730 --> 00:00:59.530 So why might you want to build one for 00:00:59.550 --> 00:01:00.170 yourself? 00:01:00.190 --> 00:01:02.510 Well, one of the benefits of being able to 00:01:02.530 --> 00:01:03.770 build these days with artificial 00:01:03.790 --> 00:01:05.990 intelligence is that you can really get 00:01:06.010 --> 00:01:07.750 exactly what your business needs, 00:01:07.870 --> 00:01:09.330 exactly the features that you need, 00:01:09.390 --> 00:01:11.190 and you can get it very, very quickly and 00:01:11.210 --> 00:01:12.090 run it fairly cheaply. 00:01:12.110 --> 00:01:13.630 You don't need to have a development team 00:01:13.650 --> 00:01:15.990 like you used to have to have in order 00:01:16.010 --> 00:01:16.910 to build these things. 00:01:17.790 --> 00:01:19.590 The second reason is that oftentimes our 00:01:19.610 --> 00:01:21.130 customers are finding that they want a 00:01:21.150 --> 00:01:23.230 centralized database with 00:01:23.250 --> 00:01:25.370 lots of different parts of their business 00:01:25.390 --> 00:01:27.170 combined into one application. 00:01:27.530 --> 00:01:29.050 So a CRM might be part of that. 00:01:29.290 --> 00:01:31.070 You might also have payments and 00:01:31.090 --> 00:01:32.490 invoices as another. 00:01:32.690 --> 00:01:34.350 You might have a newsletter that goes out 00:01:34.370 --> 00:01:36.350 every Friday as part of your blog and that's 00:01:36.370 --> 00:01:37.270 another part of the system. 00:01:37.290 --> 00:01:39.310 And you start adding more and more and more 00:01:39.330 --> 00:01:41.630 to the business, to a 00:01:41.650 --> 00:01:43.230 central business system that you can run. 00:01:43.950 --> 00:01:45.410 And being able to control all of that from 00:01:45.430 --> 00:01:47.490 your phone or from a Claude Code session on 00:01:47.510 --> 00:01:49.630 your desktop is very, very useful. 00:01:49.830 --> 00:01:51.350 If something goes wrong, you can just fix it 00:01:51.370 --> 00:01:51.910 immediately. 00:01:51.930 --> 00:01:52.830 If you want a new feature, 00:01:52.870 --> 00:01:53.970 you can add it immediately. 00:01:54.590 --> 00:01:56.430 And you have an enormous amount of business 00:01:56.450 --> 00:01:58.810 intelligence at your fingertips because 00:01:58.830 --> 00:02:01.110 it's in one database that you have access 00:02:01.130 --> 00:02:02.130 to and that you control. 00:02:02.650 --> 00:02:04.350 So without further ado, let's build a 00:02:04.370 --> 00:02:06.150 customer relationship management system. 00:02:06.170 --> 00:02:08.110 I'm going to use Visual Studio Code for 00:02:08.130 --> 00:02:09.870 this, and again, just like any other 00:02:09.890 --> 00:02:10.690 Elements application, 00:02:11.630 --> 00:02:13.610 I will give you a little bit of a 00:02:13.630 --> 00:02:15.470 caveat that Visual Studio Code is a 00:02:15.490 --> 00:02:17.110 fantastic environment to use. 00:02:17.290 --> 00:02:18.490 It's what we'll use for our tutorials, 00:02:18.570 --> 00:02:20.590 but if you want to use Claude Code Desktop or 00:02:20.610 --> 00:02:22.530 the terminal directly, you can use any of 00:02:22.550 --> 00:02:23.150 those things. 00:02:23.170 --> 00:02:24.550 Elements doesn't care about your editor 00:02:24.570 --> 00:02:25.370 environment. 00:02:25.430 --> 00:02:26.370 If you're using an editor, 00:02:26.950 --> 00:02:28.210 Visual Studio Code will work really well 00:02:28.230 --> 00:02:28.550 with that. 00:02:28.570 --> 00:02:30.510 We've got LSP integration with Visual Studio 00:02:30.530 --> 00:02:32.790 Code, but you can also do just as well 00:02:32.810 --> 00:02:34.910 with Vim or with Claude Code 00:02:34.930 --> 00:02:36.390 Desktop or something like that. 00:02:36.510 --> 00:02:37.870 Now down in the lower left here I've got 00:02:37.890 --> 00:02:39.730 Claude Code as an extension into Visual 00:02:39.750 --> 00:02:41.690 Studio Code because we our company has a 00:02:41.710 --> 00:02:43.590 Claude Code subscription but again you can 00:02:43.610 --> 00:02:44.990 use any model that you would like. 00:02:45.410 --> 00:02:46.870 Now just like with any Elements application 00:02:46.890 --> 00:02:48.310 the first thing we'll do up in the upper 00:02:48.330 --> 00:02:50.370 left terminal is I'll type elements start and 00:02:50.390 --> 00:02:52.750 that'll boot up the demo application or the 00:02:52.770 --> 00:02:54.230 boilerplate application and you'll see that 00:02:54.250 --> 00:02:55.690 open in the right. 00:02:56.350 --> 00:02:58.490 In the left we'll start with Opus 00:02:58.510 --> 00:03:00.710 5.5 as the model and I'll just prompt 00:03:00.730 --> 00:03:01.770 my way through this. 00:03:02.267 --> 00:03:04.427 I want to build a CRM application 00:03:04.447 --> 00:03:05.907 for a small sales team. 00:03:06.627 --> 00:03:08.847 The team's data is private to the team. 00:03:09.727 --> 00:03:10.807 Two kinds of accounts. 00:03:11.027 --> 00:03:12.307 There's an owner and a rep. 00:03:12.967 --> 00:03:14.747 The owner invites reps by email. 00:03:15.047 --> 00:03:16.207 Everyone sees all the records, 00:03:16.307 --> 00:03:18.487 but only the owner can delete records or 00:03:18.507 --> 00:03:19.307 export. 00:03:19.383 --> 00:03:21.583 I want a pipeline board that has a column 00:03:21.603 --> 00:03:23.863 for each stage with its total value 00:03:23.883 --> 00:03:26.203 and I want to be able to drag a deal to 00:03:26.223 --> 00:03:27.143 change its stage. 00:03:27.617 --> 00:03:28.637 At 8 a.m. 00:03:28.737 --> 00:03:30.837 Each rep gets an email listing 00:03:30.857 --> 00:03:32.837 their tasks that are due that day. 00:03:33.317 --> 00:03:34.677 All right, that was an epic prompt. 00:03:35.197 --> 00:03:37.437 I'll press enter and we'll let Claude get to 00:03:37.457 --> 00:03:38.257 work. 00:03:41.620 --> 00:03:43.860 All right, about 20 minutes later we have 00:03:43.880 --> 00:03:46.080 our custom CRM application that Claude has 00:03:46.100 --> 00:03:48.060 built and it's running over here on the 00:03:48.080 --> 00:03:48.300 right. 00:03:48.320 --> 00:03:50.280 It looks like we have a good 00:03:50.300 --> 00:03:51.420 dashboard going on here. 00:03:51.560 --> 00:03:52.680 We'll walk through that in a second. 00:03:53.020 --> 00:03:55.140 We've got a pipeline board that we can look 00:03:55.160 --> 00:03:56.960 at that has 00:03:56.980 --> 00:03:59.240 I never know whether I'm pronouncing it 00:03:59.260 --> 00:04:01.500 properly, a Kanban board of 00:04:01.520 --> 00:04:03.880 different deals per 00:04:03.900 --> 00:04:04.860 each stage. 00:04:05.880 --> 00:04:07.360 And then we've got different tasks. 00:04:07.840 --> 00:04:09.260 So if I were to click on one of these, 00:04:09.720 --> 00:04:11.800 we can see follow-up tasks 00:04:11.820 --> 00:04:14.160 down here and some various 00:04:14.180 --> 00:04:14.980 information. 00:04:15.120 --> 00:04:17.360 We've got a timeline and some chat that we 00:04:17.380 --> 00:04:19.600 can provide here and all of that 00:04:19.620 --> 00:04:21.860 is built in such a way such that 00:04:21.880 --> 00:04:23.880 everyone who's connected to this 00:04:23.900 --> 00:04:25.900 application, every browser that's connected 00:04:25.920 --> 00:04:26.320 to it. 00:04:26.340 --> 00:04:28.280 We'll see this data updating in real time 00:04:28.300 --> 00:04:30.160 without having to refresh the page. 00:04:31.140 --> 00:04:31.940 We've got a dashboard. 00:04:32.120 --> 00:04:34.500 We can export to CSV and a bunch 00:04:34.520 --> 00:04:36.320 of demo data, and then it talks about how it 00:04:36.340 --> 00:04:36.920 tested it. 00:04:36.940 --> 00:04:37.960 47 tests passed. 00:04:38.140 --> 00:04:39.760 It clicked through the application in the 00:04:39.780 --> 00:04:41.460 browser to make sure everything worked. 00:04:42.100 --> 00:04:43.860 And there's a couple of emails that get sent 00:04:43.880 --> 00:04:45.320 out, and it's telling me here that I can go 00:04:45.340 --> 00:04:47.360 to localhost 4000 dev emails. 00:04:47.780 --> 00:04:49.500 We could do that here to see what they look 00:04:49.520 --> 00:04:50.220 like. 00:04:50.240 --> 00:04:52.600 It's saying dev emails daily 00:04:52.620 --> 00:04:54.940 tasks, and this is what the email is going 00:04:54.960 --> 00:04:57.280 to look like to one of the reps that they 00:04:57.300 --> 00:04:58.740 get every morning at 8 o'clock. 00:05:00.700 --> 00:05:01.980 And then if we want to test sending an 00:05:02.000 --> 00:05:03.580 email, we can go to this particular URL 00:05:03.600 --> 00:05:03.980 here. 00:05:04.000 --> 00:05:05.040 We'll leave all that for now. 00:05:05.660 --> 00:05:07.520 Let's go back and take a look at the 00:05:07.540 --> 00:05:08.340 dashboard. 00:05:08.380 --> 00:05:09.280 Just kind of click around. 00:05:09.720 --> 00:05:12.040 It looks like we've got a nice graph here 00:05:12.060 --> 00:05:13.400 of lead, qualified, proposal, 00:05:13.680 --> 00:05:16.060 negotiation, won and lost with some sums 00:05:16.080 --> 00:05:18.260 of the various deals where they are in 00:05:18.280 --> 00:05:20.460 the pipeline and so 00:05:20.480 --> 00:05:22.400 you can run this yourself and 00:05:22.420 --> 00:05:24.720 click through it either have it 00:05:24.740 --> 00:05:26.020 built from scratch or we actually have a 00:05:26.040 --> 00:05:28.280 demo that has a CRM built 00:05:28.300 --> 00:05:30.280 as well and take a look at the various 00:05:30.300 --> 00:05:32.020 features that are here but I think one of 00:05:32.040 --> 00:05:33.760 the things to highlight here is that this 00:05:33.780 --> 00:05:35.600 was built completely custom per our 00:05:35.620 --> 00:05:37.700 specification and it works perfectly fine so 00:05:37.720 --> 00:05:39.360 even though this was built in 20 to 30 00:05:39.380 --> 00:05:41.680 minutes I fully expect that all of 00:05:41.700 --> 00:05:43.500 the features in here will be completely 00:05:43.520 --> 00:05:45.800 working and you can continue to extend 00:05:45.820 --> 00:05:47.560 this application simply by prompting your 00:05:47.580 --> 00:05:49.500 way through and asking for additional 00:05:49.520 --> 00:05:50.320 features. 00:05:50.460 --> 00:05:52.620 Now before we leave the application let me 00:05:52.640 --> 00:05:53.800 just do a little bit more. 00:05:54.420 --> 00:05:56.300 Let's play with just one other theme. 00:05:56.440 --> 00:05:57.780 I want to see it live right here on the 00:05:57.800 --> 00:05:58.600 application. 00:05:59.540 --> 00:06:01.040 Recommend one of the themes from the 00:06:01.060 --> 00:06:02.640 Elements themes that we can try and then 00:06:02.660 --> 00:06:05.000 we'll revert back once I've seen it. 00:06:05.620 --> 00:06:07.240 Elements ships with Elements UI 00:06:07.260 --> 00:06:09.960 and 00:06:09.980 --> 00:06:12.360 Elements UI has a couple of themes that's 00:06:12.380 --> 00:06:14.180 15 to 20 themes or so that you can pick 00:06:14.200 --> 00:06:16.280 and that will provide you some 00:06:16.300 --> 00:06:18.060 very common types 00:06:18.080 --> 00:06:20.260 of styling that 00:06:20.280 --> 00:06:22.320 people typically want like 00:06:22.340 --> 00:06:24.480 editorial or a 00:06:24.500 --> 00:06:25.300 dashboard, 00:06:25.900 --> 00:06:27.080 it could be playful, 00:06:27.920 --> 00:06:28.480 etc. 00:06:28.500 --> 00:06:30.600 So it kind of mildly changed the theme here. 00:06:31.020 --> 00:06:33.180 So you can use one of those pre-existing 00:06:33.200 --> 00:06:35.040 themes or you can have your agent develop a 00:06:35.060 --> 00:06:36.180 custom style for you. 00:06:36.280 --> 00:06:38.320 You can just tell it what you like and it 00:06:38.340 --> 00:06:39.140 will create one. 00:06:39.560 --> 00:06:40.720 Okay, go ahead and revert back to the 00:06:40.740 --> 00:06:41.700 original theme you had. 00:06:41.820 --> 00:06:42.860 I liked that better than this. 00:06:43.153 --> 00:06:44.653 When style sheets are changed, 00:06:44.833 --> 00:06:46.293 when the theme is changed or code is 00:06:46.313 --> 00:06:48.113 changed, you can see that reflected almost 00:06:48.133 --> 00:06:50.433 instantly in the browser over on 00:06:50.453 --> 00:06:52.153 the right because of hot module reload. 00:06:52.607 --> 00:06:53.847 A common question we get is how much does it 00:06:53.867 --> 00:06:55.387 cost to actually deploy and run this 00:06:55.407 --> 00:06:56.567 application yourself? 00:06:57.127 --> 00:06:59.427 Elements works with any Ubuntu Linux 00:06:59.447 --> 00:07:01.807 deployment machine, and so typically a 00:07:01.827 --> 00:07:04.167 provider of that would be AWS is 00:07:04.187 --> 00:07:06.147 the one we recommend, DigitalOcean is 00:07:06.167 --> 00:07:07.887 another one, Hetzner is a popular one that 00:07:07.907 --> 00:07:08.707 people use. 00:07:09.067 --> 00:07:10.927 The only real requirement is that it's not a 00:07:10.947 --> 00:07:11.927 platform as a service. 00:07:12.067 --> 00:07:14.147 You're going to use the raw virtual hosting 00:07:14.167 --> 00:07:16.287 providers like Amazon or Azure or 00:07:16.307 --> 00:07:17.147 DigitalOcean. 00:07:17.887 --> 00:07:19.427 Once we have that, we can work with any 00:07:19.447 --> 00:07:21.627 Linux box as long as we can SSH into it. 00:07:22.127 --> 00:07:22.927 So is that hard? 00:07:23.487 --> 00:07:24.867 And what's the cost of owning that? 00:07:25.267 --> 00:07:26.307 The answer is it's not hard. 00:07:26.387 --> 00:07:28.067 As long as you have an agent running locally 00:07:28.087 --> 00:07:29.507 like I do here with Claude, 00:07:29.627 --> 00:07:31.127 they will walk you through what is required 00:07:31.147 --> 00:07:33.027 to do it, and it can do the entire setup for 00:07:33.047 --> 00:07:33.847 you. 00:07:33.907 --> 00:07:36.087 Amazon in particular is really well-suited 00:07:36.107 --> 00:07:38.447 for that, and Elements, once it's installed, 00:07:38.667 --> 00:07:40.787 will help your agent along to make the 00:07:40.807 --> 00:07:41.607 proper choices. 00:07:42.067 --> 00:07:43.487 The total cost of ownership if you're on 00:07:43.507 --> 00:07:45.387 Amazon, you can ask your agent, 00:07:45.427 --> 00:07:46.487 I actually asked it earlier, 00:07:46.647 --> 00:07:48.467 what's the total cost here using today's 00:07:48.487 --> 00:07:50.587 prices, and it went and got all the prices 00:07:50.607 --> 00:07:51.927 for us and came up with an estimate. 00:07:52.687 --> 00:07:53.927 As of today, the price can change, 00:07:53.947 --> 00:07:56.067 but the price is $30 a month 00:07:56.087 --> 00:07:58.187 for Elements, which includes a deployment 00:07:58.207 --> 00:07:59.707 license and your local development. 00:07:59.927 --> 00:08:01.627 So that's two licenses for the price of one. 00:08:02.567 --> 00:08:04.607 And if you include all of the deployment 00:08:04.627 --> 00:08:06.167 that you would need, it comes out to about 00:08:06.187 --> 00:08:08.487 $55 a month to run this application. 00:08:08.967 --> 00:08:10.267 And if we walk through that price list, 00:08:10.587 --> 00:08:12.567 about just over $6 for the App Server 00:08:12.587 --> 00:08:14.687 and a couple other 00:08:14.707 --> 00:08:16.947 things you need here, about $12 a 00:08:16.967 --> 00:08:17.867 month for the database, 00:08:18.767 --> 00:08:21.007 plus the email is a couple 00:08:21.027 --> 00:08:21.927 of cents a month. 00:08:21.947 --> 00:08:24.147 And so the total Amazon bill comes 00:08:24.167 --> 00:08:26.347 to about $25, $26, 00:08:26.707 --> 00:08:28.747 and the Elements license for two machines 00:08:28.767 --> 00:08:29.567 will be $30. 00:08:29.947 --> 00:08:32.247 So that ends up being about $55 or 00:08:32.267 --> 00:08:34.647 about $665 per year. 00:08:35.227 --> 00:08:37.107 And if you want to add more machines for 00:08:37.127 --> 00:08:38.967 more redundancy or if you want to have a 00:08:38.987 --> 00:08:39.787 bigger machine, 00:08:40.607 --> 00:08:42.347 you can get a bigger Amazon machine. 00:08:43.367 --> 00:08:45.247 The licenses for Elements will be per 00:08:45.267 --> 00:08:45.867 machine. 00:08:45.887 --> 00:08:47.127 So you get your development license, 00:08:47.267 --> 00:08:49.427 your laptop plus the deployment. 00:08:49.447 --> 00:08:51.247 That's going to be your first purchase will 00:08:51.267 --> 00:08:52.487 get you both of those and then each 00:08:52.507 --> 00:08:54.367 additional machine you have will be an 00:08:54.387 --> 00:08:56.707 additional purchase So overall does 00:08:56.727 --> 00:08:57.567 this make sense? 00:08:57.927 --> 00:08:59.967 I suspect that for a very complicated 00:08:59.987 --> 00:09:02.307 CRM systems This will be far less than what 00:09:02.327 --> 00:09:04.167 your subscription price would be for those 00:09:04.187 --> 00:09:06.527 but I think the real use case is 00:09:06.547 --> 00:09:08.587 for people who want to consolidate a bunch 00:09:08.607 --> 00:09:10.647 of different applications into one business 00:09:10.667 --> 00:09:12.267 application that they run from a central 00:09:12.287 --> 00:09:14.547 database and also if you want to have a 00:09:14.567 --> 00:09:16.907 lot of control over exactly what it looks 00:09:16.927 --> 00:09:17.727 like and 00:09:18.267 --> 00:09:20.427 exactly how it performs, then 00:09:20.447 --> 00:09:22.587 you can do that very well today with 00:09:22.607 --> 00:09:24.627 an AI agent like Claude Code 00:09:24.647 --> 00:09:26.907 combined with Elements, which gives it the 00:09:26.927 --> 00:09:28.687 application framework and the build tool and 00:09:28.707 --> 00:09:30.367 to be able to build something safely like 00:09:30.387 --> 00:09:30.967 this. 00:09:30.987 --> 00:09:32.647 Let's start with the tooling that Elements 00:09:32.667 --> 00:09:33.327 provides. 00:09:33.347 --> 00:09:34.847 One of the reasons that the AI agent can be 00:09:34.867 --> 00:09:36.367 so effective at building something as 00:09:36.387 --> 00:09:37.927 complicated as a CRM system, 00:09:38.247 --> 00:09:39.887 is that Elements is providing it guidance. 00:09:40.087 --> 00:09:41.127 So if I type elements build, 00:09:41.507 --> 00:09:43.507 I'm going to get an almost instant build 00:09:43.527 --> 00:09:45.767 result that shows me that the state is okay. 00:09:46.047 --> 00:09:47.747 That completes in about 10 microseconds. 00:09:48.087 --> 00:09:50.007 And what the agent will use is Elements 00:09:50.027 --> 00:09:52.207 build JSON, or it can use 00:09:52.227 --> 00:09:54.107 the LSP protocol to connect and get 00:09:54.127 --> 00:09:55.487 real-time feedback that way. 00:09:55.807 --> 00:09:57.927 But this is a structured JSON result 00:09:57.947 --> 00:09:59.967 that the agent will get from the Elements 00:09:59.987 --> 00:10:01.687 project server, telling it whether or not 00:10:01.707 --> 00:10:03.747 there's any errors that it needs to fix. 00:10:03.767 --> 00:10:06.087 And it will get that by the time 00:10:06.107 --> 00:10:08.207 the agent asks for it, it gets a result back 00:10:08.227 --> 00:10:10.307 typically in a couple of microseconds and so 00:10:10.327 --> 00:10:11.907 as soon as it makes a mistake it knows 00:10:11.927 --> 00:10:13.827 almost instantly and it can fix that mistake 00:10:13.847 --> 00:10:16.027 and move on and that makes a huge 00:10:16.047 --> 00:10:17.667 difference in being able to build things 00:10:17.687 --> 00:10:18.487 correctly. 00:10:18.527 --> 00:10:20.167 The second thing it does is it creates tests 00:10:20.187 --> 00:10:22.427 and if we type elements test you 00:10:22.447 --> 00:10:24.607 can see all of those tests come back and 00:10:24.627 --> 00:10:25.927 the first thing you notice that the agent 00:10:25.947 --> 00:10:28.287 created quite a few tests and tests 00:10:28.307 --> 00:10:30.107 are very useful for knowing that you've 00:10:30.127 --> 00:10:31.947 created something that's correct but even 00:10:31.967 --> 00:10:33.987 more useful for being able to maintain an 00:10:34.007 --> 00:10:35.547 application over time so that it doesn't 00:10:35.567 --> 00:10:37.727 regress as you pass it on from one agent to 00:10:37.747 --> 00:10:39.307 the next, from one session to the next, 00:10:39.627 --> 00:10:40.747 or even to human teams. 00:10:41.127 --> 00:10:42.807 You'll know if you build something new and 00:10:42.827 --> 00:10:44.327 you broke something that was built months 00:10:44.347 --> 00:10:46.107 ago, you'll have a test that fails. 00:10:46.947 --> 00:10:48.467 The second thing you should note is that 00:10:48.487 --> 00:10:49.787 these tests, when you ask for them, 00:10:49.887 --> 00:10:51.227 come back very, very fast. 00:10:51.647 --> 00:10:53.087 In a couple of microseconds, 00:10:53.107 --> 00:10:55.487 you get the entire state of the test. 00:10:56.067 --> 00:10:57.587 That's because our project server keeps 00:10:57.607 --> 00:10:59.727 these things in memory such that the 00:10:59.747 --> 00:11:01.167 current state of the test is available 00:11:01.187 --> 00:11:01.627 instantly. 00:11:01.647 --> 00:11:03.947 And that's very important for agents to work 00:11:03.967 --> 00:11:04.767 effectively. 00:11:05.127 --> 00:11:06.227 The third thing I want to show you is that 00:11:06.247 --> 00:11:07.107 you have a database. 00:11:07.407 --> 00:11:08.427 And if you type Elements DB, 00:11:08.647 --> 00:11:10.767 you're going to be dropped directly into a 00:11:10.787 --> 00:11:12.927 database shell where you can see the tables 00:11:12.947 --> 00:11:14.147 that were created like users, 00:11:14.247 --> 00:11:15.727 teams, tasks, invites, deals, 00:11:15.867 --> 00:11:16.927 contacts, companies, etc. 00:11:17.367 --> 00:11:19.587 And you can go and actually just run queries 00:11:19.607 --> 00:11:21.747 against that data, select star from 00:11:21.767 --> 00:11:24.047 users, for example, and we'll get back some 00:11:24.067 --> 00:11:26.347 of our three users that were created. 00:11:26.367 --> 00:11:28.347 Having a central database like this, 00:11:28.587 --> 00:11:30.367 if you're a business owner, 00:11:30.467 --> 00:11:31.467 is a superpower. 00:11:31.947 --> 00:11:33.927 You can have an employee or you can have an 00:11:33.947 --> 00:11:35.447 AI agent connect to the database, 00:11:35.667 --> 00:11:37.207 read only, and pull in 00:11:37.227 --> 00:11:39.547 intelligence and information about 00:11:39.567 --> 00:11:40.887 your customers that can help you 00:11:40.907 --> 00:11:41.707 significantly. 00:11:42.007 --> 00:11:43.567 I found that running my own business this 00:11:43.587 --> 00:11:45.707 way is really a fantastic 00:11:45.727 --> 00:11:46.527 way to do it. 00:11:47.047 --> 00:11:49.207 If you have data that's spread out all 00:11:49.227 --> 00:11:50.847 over across various SaaS applications, 00:11:51.007 --> 00:11:53.327 it's much harder to look at that data 00:11:53.347 --> 00:11:55.527 and get intelligent insights 00:11:55.547 --> 00:11:56.347 out of it. 00:11:56.527 --> 00:11:57.807 So having your database that you can just 00:11:57.827 --> 00:12:00.047 log into like this is fantastic and that 00:12:00.067 --> 00:12:02.247 comes with Elements, the database 00:12:02.267 --> 00:12:03.687 cluster comes with Elements when you're 00:12:03.707 --> 00:12:04.327 local. 00:12:04.347 --> 00:12:06.267 If you deploy off to Amazon, 00:12:06.767 --> 00:12:08.887 we recommend that you get RDS or a hosted 00:12:08.907 --> 00:12:10.547 database service that gives you some extra 00:12:10.567 --> 00:12:12.587 services like database backups and things 00:12:12.607 --> 00:12:13.407 like that. 00:12:14.607 --> 00:12:16.427 Okay, that's the tooling for 00:12:16.447 --> 00:12:17.207 Elements. 00:12:17.227 --> 00:12:19.247 Next up, let's take a look at some of the 00:12:19.267 --> 00:12:20.067 code that it wrote. 00:12:20.320 --> 00:12:22.020 In Visual Studio Code, I opened up the 00:12:22.040 --> 00:12:23.840 Explorer view and opened up the app folder 00:12:23.860 --> 00:12:26.140 and pages, and these are all the pages that 00:12:26.160 --> 00:12:26.960 we have in the application. 00:12:27.140 --> 00:12:27.940 There's quite a few of them, 00:12:27.980 --> 00:12:30.100 and I've opened up the pipeline page. 00:12:30.620 --> 00:12:32.860 The template EHTML file, this is our 00:12:32.880 --> 00:12:34.980 HTML file that has the extension 00:12:35.000 --> 00:12:36.880 EHTML for Elements HTML. 00:12:37.420 --> 00:12:39.260 And this is our custom-built 00:12:39.280 --> 00:12:41.380 reactive HTML language that's been 00:12:41.400 --> 00:12:43.260 in the making for over a decade. 00:12:43.680 --> 00:12:44.880 Let me walk through a couple of items in 00:12:44.900 --> 00:12:45.700 this file. 00:12:46.020 --> 00:12:47.400 And the thing to take away from this is that 00:12:47.420 --> 00:12:49.540 the agent is using the application 00:12:49.560 --> 00:12:51.480 framework from Elements to be able to build 00:12:51.500 --> 00:12:52.420 quickly and effectively. 00:12:52.620 --> 00:12:54.040 So it doesn't have to rebuild all of these 00:12:54.060 --> 00:12:55.640 primitives every single time it works on a 00:12:55.660 --> 00:12:56.460 new application. 00:12:56.760 --> 00:12:58.860 We've written tons and tons and tons of code 00:12:58.880 --> 00:13:00.320 that you can think of as kind of an 00:13:00.340 --> 00:13:02.640 operating system for the agent to be able 00:13:02.660 --> 00:13:04.700 to build an application as sophisticated as 00:13:04.720 --> 00:13:06.380 a CRM very quickly. 00:13:06.760 --> 00:13:08.000 So this is one example of that. 00:13:08.100 --> 00:13:09.380 This is the template file. 00:13:09.720 --> 00:13:11.480 It has some code up at the top that doesn't 00:13:11.500 --> 00:13:13.760 look like HTML, but that's the 00:13:13.780 --> 00:13:14.460 way we built it. 00:13:14.480 --> 00:13:15.920 So you can have TypeScript right next to the 00:13:15.940 --> 00:13:16.740 HTML. 00:13:16.880 --> 00:13:18.980 And here's some examples of user 00:13:19.000 --> 00:13:20.520 interface Elements that are being imported 00:13:20.540 --> 00:13:22.700 from the Elements UI package. 00:13:23.160 --> 00:13:23.960 And this is the Kanban. 00:13:24.120 --> 00:13:26.460 This is a sort of complicated user interface 00:13:26.480 --> 00:13:28.540 structure that lets you drag deals 00:13:28.560 --> 00:13:30.580 from one stage of the pipeline to the next. 00:13:31.040 --> 00:13:32.160 And here's a bunch of different user 00:13:32.180 --> 00:13:33.960 interface components that it got out of the 00:13:33.980 --> 00:13:35.820 box from the Elements UI package. 00:13:36.280 --> 00:13:37.720 And then you can see other primitives that 00:13:37.740 --> 00:13:39.920 it pulls from Elements app like Session 00:13:39.940 --> 00:13:42.200 and LiveView, which is what gives us 00:13:42.220 --> 00:13:44.060 real-time publish and subscribe. 00:13:44.600 --> 00:13:46.500 Now if I clear this out and scroll down, 00:13:46.820 --> 00:13:49.200 you'll see the HTML and the 00:13:49.220 --> 00:13:51.340 thing you should notice about HTML is it 00:13:51.360 --> 00:13:52.960 looks just like regular HTML 00:13:52.980 --> 00:13:55.240 and it's written in such a way 00:13:55.260 --> 00:13:57.620 that it's human readable and 00:13:57.640 --> 00:13:59.940 you can hand it off to another agent or you 00:13:59.960 --> 00:14:01.800 can hand it off to a human and it's very, 00:14:01.820 --> 00:14:02.680 very maintainable. 00:14:03.020 --> 00:14:05.260 It's just essentially regular HTML with a 00:14:05.280 --> 00:14:06.660 little bit of syntax extension. 00:14:07.720 --> 00:14:09.280 These right here are constructor attributes 00:14:09.300 --> 00:14:10.720 that give us type checking for 00:14:10.740 --> 00:14:11.960 this template. 00:14:12.680 --> 00:14:13.480 And down here in the body, 00:14:13.500 --> 00:14:15.000 you can see that there's a template 00:14:15.020 --> 00:14:17.100 that's called app layout that's 00:14:17.120 --> 00:14:18.980 used across all of our pages. 00:14:19.500 --> 00:14:21.360 And we provided some properties here, 00:14:21.480 --> 00:14:23.520 but the app layout is something that gives 00:14:23.540 --> 00:14:25.220 our application a consistent look. 00:14:25.660 --> 00:14:27.780 So you can have reusable user interface 00:14:27.800 --> 00:14:29.840 templates that get created if we were 00:14:29.860 --> 00:14:31.720 to jump into this app layout, 00:14:32.280 --> 00:14:33.660 you could see what it looks like. 00:14:34.220 --> 00:14:36.560 And it itself reuses a bunch of templates 00:14:36.580 --> 00:14:38.040 that are created like this. 00:14:38.540 --> 00:14:40.320 And so I don't want to make this into a coding 00:14:40.340 --> 00:14:42.520 tutorial, but the point of this is that 00:14:42.540 --> 00:14:44.560 this is a well-factored code base 00:14:44.580 --> 00:14:46.020 that, despite the fact that it was written 00:14:46.040 --> 00:14:47.300 by AI, sometimes we think, 00:14:47.380 --> 00:14:48.720 oh, the AI writes terrible code, 00:14:48.800 --> 00:14:50.140 it's all spaghetti and so on, 00:14:50.160 --> 00:14:51.740 but that's not true when it's using 00:14:51.760 --> 00:14:52.600 something like Elements. 00:14:52.680 --> 00:14:54.320 It's going to write quite beautiful code, 00:14:54.440 --> 00:14:56.220 very maintainable, and it's going to write 00:14:56.240 --> 00:14:58.000 the user interface Elements in a way that 00:14:58.020 --> 00:14:59.720 you can be easily handed off to either a 00:14:59.740 --> 00:15:01.960 human team or to another agent. 00:15:04.180 --> 00:15:05.460 Next up, let's take a look at the tests. 00:15:06.100 --> 00:15:07.880 We saw the test from the tool perspective. 00:15:08.260 --> 00:15:09.820 This is what the code looks like for the 00:15:09.840 --> 00:15:10.460 test. 00:15:10.480 --> 00:15:12.040 You can see it's very easy for a human to 00:15:12.060 --> 00:15:13.640 read, very easy to hand off to another 00:15:13.660 --> 00:15:15.860 agent, and the agent will really love 00:15:15.880 --> 00:15:17.920 to write tests, and this is something that 00:15:17.940 --> 00:15:19.740 Elements gives it to be able to create an 00:15:19.760 --> 00:15:21.820 application that is maintainable over time. 00:15:23.860 --> 00:15:26.100 The styles for the page is 00:15:26.120 --> 00:15:27.180 not a custom framework. 00:15:27.340 --> 00:15:28.940 We really try and Elements not to abstract 00:15:28.960 --> 00:15:30.960 away standards and languages. 00:15:31.240 --> 00:15:33.400 We just let the agent or the human write CSS 00:15:33.420 --> 00:15:35.740 using the normal CSS language. 00:15:35.940 --> 00:15:38.160 We don't have a custom thing for that you 00:15:38.180 --> 00:15:38.600 plug in. 00:15:38.620 --> 00:15:40.320 You just write regular CSS. 00:15:41.140 --> 00:15:43.000 And routes inside of Elements are just 00:15:43.020 --> 00:15:44.040 functions that you write. 00:15:44.140 --> 00:15:46.220 There's not a special page or a special 00:15:46.240 --> 00:15:47.040 directory path 00:15:47.087 --> 00:15:48.067 You just write a function. 00:15:48.367 --> 00:15:50.087 So it's much more like Express or like using 00:15:50.107 --> 00:15:50.967 regular Node.js. 00:15:51.787 --> 00:15:54.027 And we import the HTML into that route and 00:15:54.047 --> 00:15:55.067 create a new instance of it, 00:15:55.107 --> 00:15:56.787 passing it the data that it needs. 00:15:57.427 --> 00:15:59.647 So all of the pages 00:15:59.667 --> 00:16:01.987 and Elements are server-rendered by default. 00:16:02.287 --> 00:16:03.627 So every page you have is particularly 00:16:03.647 --> 00:16:05.167 important if you're writing a marketing page 00:16:05.187 --> 00:16:06.407 or a blog or something like that. 00:16:06.667 --> 00:16:08.287 You want that to be good with SEO. 00:16:08.567 --> 00:16:10.307 In order to get that, you need server-side 00:16:10.327 --> 00:16:11.127 rendering to work. 00:16:11.647 --> 00:16:12.987 Sometimes with client-side reactive 00:16:13.007 --> 00:16:15.307 user interface libraries you 00:16:15.327 --> 00:16:16.427 will not get that by default, 00:16:16.607 --> 00:16:17.407 so be careful. 00:16:17.467 --> 00:16:19.447 With Elements you definitely do get it. 00:16:24.147 --> 00:16:25.967 Next up, let's go into the emails folder. 00:16:26.327 --> 00:16:28.107 There's a couple of emails that are written, 00:16:28.547 --> 00:16:30.867 that are sent to employees as part of 00:16:30.887 --> 00:16:31.687 this application. 00:16:31.827 --> 00:16:33.227 All of the framework for building, 00:16:33.247 --> 00:16:34.847 writing emails, and sending them is baked 00:16:34.867 --> 00:16:35.667 into Elements. 00:16:36.027 --> 00:16:37.267 You just need the last mile. 00:16:37.447 --> 00:16:38.707 You need some kind of service delivery 00:16:38.727 --> 00:16:41.087 platform like Amazon SES, 00:16:41.547 --> 00:16:43.027 there might be a couple of others out there 00:16:43.047 --> 00:16:44.667 that do this, just find the one that has the 00:16:44.687 --> 00:16:46.907 best price and then you will get the ability 00:16:46.927 --> 00:16:49.047 to deliver the emails to your 00:16:49.067 --> 00:16:50.727 customers or to your employees. 00:16:51.467 --> 00:16:53.547 And emails are just HTML files just like any 00:16:53.567 --> 00:16:55.007 other one, they just have this special build 00:16:55.027 --> 00:16:57.167 tag called at email and that lets us 00:16:57.187 --> 00:16:59.047 link up all the styles and treat this 00:16:59.067 --> 00:17:00.647 specially because email clients can be 00:17:00.667 --> 00:17:02.667 finicky about how this stuff gets displayed 00:17:02.687 --> 00:17:04.427 and so by tagging it with that email, 00:17:04.547 --> 00:17:06.287 we say take all the extra precautions that 00:17:06.307 --> 00:17:07.967 are needed to be able to make sure that this 00:17:07.987 --> 00:17:09.087 gets displayed properly. 00:17:09.987 --> 00:17:11.787 And then finally we have a jobs folder here 00:17:11.807 --> 00:17:13.167 and there's a couple of jobs that get 00:17:13.187 --> 00:17:14.527 created. 00:17:14.767 --> 00:17:15.987 Jobs in Elements are 00:17:16.007 --> 00:17:17.867 a way to 00:17:17.887 --> 00:17:19.867 create a task that 00:17:19.887 --> 00:17:22.187 gets processed 00:17:22.207 --> 00:17:24.027 by a worker off the main 00:17:24.047 --> 00:17:25.527 CPU of your application. 00:17:26.227 --> 00:17:27.867 And if you're building anything complicated, 00:17:28.387 --> 00:17:30.547 you will almost always have some kind of 00:17:30.567 --> 00:17:32.607 jobs or a job queue and oftentimes 00:17:32.627 --> 00:17:34.967 with development platforms as a 00:17:34.987 --> 00:17:37.287 service, you have to pay for that for pay 00:17:37.307 --> 00:17:38.487 for that extra, but in Elements, 00:17:38.607 --> 00:17:39.407 it's just baked in. 00:17:39.587 --> 00:17:40.587 And even when you deploy, 00:17:40.867 --> 00:17:42.347 it's automatically handled as part of your 00:17:42.367 --> 00:17:42.927 deployment. 00:17:42.947 --> 00:17:44.327 So you don't need to do anything special. 00:17:44.467 --> 00:17:46.467 So here's an example of the send 00:17:46.487 --> 00:17:48.647 task digest, I presume this sends 00:17:48.667 --> 00:17:50.927 a digest to the employee with 00:17:50.947 --> 00:17:52.027 their various tasks. 00:17:52.467 --> 00:17:54.787 And this is the code that will do 00:17:54.807 --> 00:17:54.967 that. 00:17:54.987 --> 00:17:57.187 And this will get queued up into a queue and 00:17:57.207 --> 00:17:59.187 processed off of your main application 00:17:59.207 --> 00:18:00.267 automatically. 00:18:00.687 --> 00:18:02.467 Okay, so this is a little bit technical, 00:18:02.487 --> 00:18:04.827 but I wanted to give you some sense of 00:18:04.847 --> 00:18:06.767 the fact that Elements is providing this 00:18:06.787 --> 00:18:08.927 framework code, we call this runtime code or 00:18:08.947 --> 00:18:11.027 runtime packages that allow the 00:18:11.047 --> 00:18:12.967 agent to focus exclusively on the 00:18:12.987 --> 00:18:14.407 application you want to build, 00:18:14.667 --> 00:18:16.767 not reinventing these primitives over and 00:18:16.787 --> 00:18:17.587 over and over again. 00:18:17.887 --> 00:18:19.867 Now if you ask the agent to build something 00:18:19.887 --> 00:18:21.627 from scratch, it will reinvent those 00:18:21.647 --> 00:18:22.447 primitives. 00:18:22.707 --> 00:18:24.507 So it will not do it particularly well, 00:18:24.527 --> 00:18:26.627 but it will try and you will end up with an 00:18:26.647 --> 00:18:28.687 application that is a spaghetti mess and is 00:18:28.707 --> 00:18:30.407 not maintainable beyond a session or two. 00:18:31.367 --> 00:18:33.427 The last thing to note in this is that it's 00:18:33.447 --> 00:18:35.367 all TypeScript, if you haven't picked up on 00:18:35.387 --> 00:18:36.067 that already. 00:18:36.087 --> 00:18:38.187 So all of this is type checked, 00:18:38.887 --> 00:18:40.707 and if you make any kind of type checking 00:18:40.727 --> 00:18:42.707 error, you'll see that instantly 00:18:42.727 --> 00:18:44.347 in the terminal. 00:18:44.607 --> 00:18:46.127 So for example, if we 00:18:46.147 --> 00:18:48.107 type elements build here, 00:18:48.787 --> 00:18:51.407 and 00:18:51.427 --> 00:18:53.687 I call some kind of bogus function, 00:18:54.727 --> 00:18:57.027 I get a 00:18:57.047 --> 00:18:59.387 build error, and it happened 00:18:59.407 --> 00:19:01.687 very quickly and if I get rid of that 00:19:01.707 --> 00:19:04.027 and say if it goes 00:19:04.047 --> 00:19:05.467 away and we're back to a state okay. 00:19:06.087 --> 00:19:07.627 Now you might think that an agent doesn't 00:19:07.647 --> 00:19:09.407 need type checking or doesn't need these 00:19:09.427 --> 00:19:11.427 types of errors and I strongly disagree with 00:19:11.447 --> 00:19:12.247 that. 00:19:12.607 --> 00:19:14.407 We've seen empirically that it makes a huge 00:19:14.427 --> 00:19:16.307 difference in the ability to create an 00:19:16.327 --> 00:19:18.467 application to know whether you did it 00:19:18.487 --> 00:19:19.967 correctly the first time without waiting for 00:19:19.987 --> 00:19:22.147 these bugs to show up for your users or at 00:19:22.167 --> 00:19:22.967 runtime. 00:19:23.087 --> 00:19:24.967 Otherwise the agent has to do static text 00:19:24.987 --> 00:19:26.887 analysis which is more difficult and uses 00:19:26.907 --> 00:19:27.707 more tokens. 00:19:28.147 --> 00:19:29.307 So type checking is a really good thing. 00:19:29.967 --> 00:19:31.807 The thing that Elements provides for it is 00:19:31.827 --> 00:19:33.927 the Microsoft TypeScript 00:19:33.947 --> 00:19:36.147 compiler is baked directly into 00:19:36.167 --> 00:19:36.967 the Elements program. 00:19:37.220 --> 00:19:39.220 But it's the Microsoft type checking 00:19:39.240 --> 00:19:41.180 that you would expect if you used the 00:19:41.200 --> 00:19:43.320 TypeScript compiler directly. 00:19:43.500 --> 00:19:45.320 So we have that baked in and we also do it 00:19:45.340 --> 00:19:47.000 for server and browser targets, 00:19:47.020 --> 00:19:48.200 not just for the server. 00:19:48.220 --> 00:19:48.760 Okay. 00:19:48.780 --> 00:19:50.160 That was a very technical deep dive, 00:19:50.240 --> 00:19:52.320 but I wanted you to see that there's a lot 00:19:52.340 --> 00:19:53.940 going on under the hood here that Elements 00:19:53.960 --> 00:19:55.380 provides to your agent. 00:19:55.820 --> 00:19:57.480 All right, I hope you guys had fun building 00:19:57.500 --> 00:19:58.300 this with me. 00:19:58.560 --> 00:20:00.000 Install Elements, try it out, 00:20:00.180 --> 00:20:02.260 and see whether you can build your own CRM 00:20:02.280 --> 00:20:03.980 system that does exactly what you want. 00:20:04.220 --> 00:20:05.460 If you don't feel like doing that and you 00:20:05.480 --> 00:20:07.060 want to start with one as a scaffold, 00:20:07.200 --> 00:20:08.300 you can go over to our website, 00:20:08.420 --> 00:20:10.780 elements.dev, to demos, and the first 00:20:10.800 --> 00:20:12.400 demo is a CRM demo. 00:20:13.260 --> 00:20:14.260 If you scroll down a bit, 00:20:14.620 --> 00:20:16.560 you'll see a run-it-yourself prompt here. 00:20:16.660 --> 00:20:18.420 If you click that and paste it into your 00:20:18.440 --> 00:20:20.280 terminal or into a Visual Studio Code 00:20:20.300 --> 00:20:22.200 terminal, it will create the app from the 00:20:22.220 --> 00:20:23.800 scaffold, start it up, and you can start 00:20:23.820 --> 00:20:25.560 playing with a demo right away. 00:20:25.740 --> 00:20:26.800 Let me know if you have any questions in the 00:20:26.820 --> 00:20:27.620 comments.