WEBVTT

1
00:00:00.280 --> 00:00:00.390
All right,

2
00:00:00.480 --> 00:00:04.180
this is an amazing demo of an application built with Elements and Claude Code,

3
00:00:04.360 --> 00:00:04.510
uh,

4
00:00:04.560 --> 00:00:06.220
with the Opus 5.5 model.

5
00:00:06.360 --> 00:00:09.590
This is a lawn care app that demos a queuing system

6
00:00:09.590 --> 00:00:11.940
where you would queue jobs up and be able to,

7
00:00:12.120 --> 00:00:12.230
uh,

8
00:00:12.280 --> 00:00:13.670
mark jobs as completed,

9
00:00:13.930 --> 00:00:15.270
send a customer an invoice,

10
00:00:15.400 --> 00:00:16.660
let them pay the invoice,

11
00:00:16.960 --> 00:00:19.060
and chat back and forth with their customers.

12
00:00:19.240 --> 00:00:21.230
I've got two windows open here to demonstrate this.

13
00:00:21.320 --> 00:00:24.470
On the left hand side is going to be the company account.

14
00:00:24.990 --> 00:00:25.260
Um,

15
00:00:25.390 --> 00:00:27.500
so actually on the left hand side I'll do the user.

16
00:00:27.590 --> 00:00:30.620
So we'll log in as maria@example.com

17
00:00:30.870 --> 00:00:32.740
and you can see these accounts down here at the bottom.

18
00:00:32.830 --> 00:00:33.410
That's where

19
00:00:33.750 --> 00:00:36.900
the demo information is and the password will be greenline1

20
00:00:37.190 --> 00:00:38.140
and I'll log in.

21
00:00:38.550 --> 00:00:41.630
Authentication works out of the box as part of Elements,

22
00:00:41.950 --> 00:00:42.750
the Elements framework,

23
00:00:42.780 --> 00:00:43.370
and so

24
00:00:43.550 --> 00:00:46.700
it's built into the database that you have running on your machine.

25
00:00:46.750 --> 00:00:48.590
You don't need to use an external service for it.

26
00:00:48.830 --> 00:00:49.420
Over on the right,

27
00:00:49.470 --> 00:00:53.860
I'm going to log in as crew@greenline.test and same password.

28
00:00:58.900 --> 00:00:59.840
I typed a

29
00:01:00.050 --> 00:01:01.070
text instead of

30
00:01:01.260 --> 00:01:01.530
test,

31
00:01:01.620 --> 00:01:03.700
but you can see that we get good error handling

32
00:01:03.940 --> 00:01:05.200
on the login page.

33
00:01:05.700 --> 00:01:09.330
And now when I log in on the right hand side in the in the company section,

34
00:01:09.380 --> 00:01:10.120
I'm seeing

35
00:01:10.460 --> 00:01:10.930
the queue.

36
00:01:11.060 --> 00:01:13.130
So here's the bookings that I have upcoming,

37
00:01:13.300 --> 00:01:14.290
here's awaiting payment,

38
00:01:14.340 --> 00:01:15.320
and here's collected,

39
00:01:15.420 --> 00:01:18.240
and down below I've got the first queued job here

40
00:01:18.460 --> 00:01:19.210
scheduled for Friday,

41
00:01:19.340 --> 00:01:20.610
September 25th for Maria.

42
00:01:20.770 --> 00:01:21.990
So I'll go ahead and click that

43
00:01:22.290 --> 00:01:24.020
and I can see that the

44
00:01:24.210 --> 00:01:25.480
uh job is still open,

45
00:01:25.530 --> 00:01:26.200
it's scheduled,

46
00:01:26.290 --> 00:01:27.330
it hasn't occurred yet,

47
00:01:27.570 --> 00:01:29.270
and this is keeping track of the progress.

48
00:01:29.490 --> 00:01:29.910
Down below,

49
00:01:29.930 --> 00:01:32.390
I've got the customer details and a comment section.

50
00:01:32.730 --> 00:01:34.390
On the left is Maria's account,

51
00:01:34.450 --> 00:01:35.700
so I'll come over to

52
00:01:36.110 --> 00:01:36.420
Uh,

53
00:01:36.610 --> 00:01:37.190
the mowing one,

54
00:01:37.230 --> 00:01:38.220
I'll make sure it's the right one.

55
00:01:38.300 --> 00:01:38.610
Yup.

56
00:01:38.950 --> 00:01:41.140
And then scroll down and leave a comment.

57
00:01:41.470 --> 00:01:43.530
I'll say something like the gate code is

58
00:01:43.970 --> 00:01:45.790
1234 and

59
00:01:45.940 --> 00:01:46.690
post that.

60
00:01:46.950 --> 00:01:49.660
Note that the comments post immediately and they're

61
00:01:49.790 --> 00:01:52.070
available to all the connected browsers at once.

62
00:01:52.190 --> 00:01:54.850
This is using the LiveTable feature of Elements.

63
00:01:55.080 --> 00:01:55.770
And over on the right,

64
00:01:55.790 --> 00:01:56.460
I can say,

65
00:01:56.710 --> 00:01:57.450
I got it,

66
00:01:57.550 --> 00:01:58.060
thanks.

67
00:01:59.010 --> 00:02:00.840
And the customer will see that right away.

68
00:02:00.970 --> 00:02:02.150
So this is a comment section.

69
00:02:02.210 --> 00:02:05.430
This was built as part of the one shot initial application that

70
00:02:05.690 --> 00:02:06.610
Claude Code built.

71
00:02:06.770 --> 00:02:08.750
It didn't take very long at all to build this.

72
00:02:09.210 --> 00:02:09.520
Next up,

73
00:02:09.610 --> 00:02:11.030
let's go up to the top

74
00:02:11.210 --> 00:02:13.430
and pretend that we've already done this job now,

75
00:02:13.610 --> 00:02:15.080
and I want to mark it as complete.

76
00:02:15.170 --> 00:02:16.280
So I'll click this button,

77
00:02:16.330 --> 00:02:17.260
mark complete,

78
00:02:17.570 --> 00:02:18.990
and as soon as I do that.

79
00:02:20.120 --> 00:02:20.540
I can,

80
00:02:20.640 --> 00:02:20.790
uh,

81
00:02:20.920 --> 00:02:21.030
oh,

82
00:02:21.080 --> 00:02:22.190
I've got one more button to click,

83
00:02:22.320 --> 00:02:22.380
uh,

84
00:02:22.640 --> 00:02:23.310
complete and invoice,

85
00:02:23.390 --> 00:02:24.100
so I'll do that.

86
00:02:24.440 --> 00:02:29.260
Note that the customer's UI changes immediately and it says the amount due is $65.

87
00:02:29.880 --> 00:02:31.530
So I can pay that by the card.

88
00:02:32.530 --> 00:02:33.990
And we'll simulate

89
00:02:34.320 --> 00:02:36.430
filling out a form now.

90
00:02:37.210 --> 00:02:39.870
Adding in Stripe payments is very straightforward.

91
00:02:39.920 --> 00:02:42.070
You can ask Claude to do that as a next step,

92
00:02:42.200 --> 00:02:44.350
and it will do it in just a minute or two.

93
00:02:44.870 --> 00:02:45.950
It's not hard at all.

94
00:02:46.040 --> 00:02:49.720
So we just left it as a simulation so that we could get going pretty quickly.

95
00:02:50.270 --> 00:02:50.380
Uh,

96
00:02:50.470 --> 00:02:52.140
without having to actually create a Stripe account,

97
00:02:52.270 --> 00:02:53.050
but you can do that.

98
00:02:53.070 --> 00:02:53.410
And

99
00:02:53.550 --> 00:02:54.540
if you need help with doing it,

100
00:02:54.590 --> 00:02:56.210
just leave a comment in the sections and

101
00:02:56.360 --> 00:02:58.070
uh I'll explain it or we can do another video.

102
00:02:58.350 --> 00:02:58.540
OK,

103
00:02:58.670 --> 00:03:00.890
now the status is showing paid,

104
00:03:01.190 --> 00:03:04.360
and that walks through the entire progress of,

105
00:03:04.470 --> 00:03:05.780
or the entire workflow for this.

106
00:03:05.870 --> 00:03:08.660
And if I go over to the customer or the uh

107
00:03:08.990 --> 00:03:10.260
the company's page again and I

108
00:03:10.370 --> 00:03:10.970
Queue,

109
00:03:11.350 --> 00:03:14.330
I now have 0 items in the queue and I've got

110
00:03:14.350 --> 00:03:17.630
4 items that have been 4 jobs that have been completed.

111
00:03:17.790 --> 00:03:20.620
So this is really a fully blown working application

112
00:03:20.870 --> 00:03:21.290
that

113
00:03:21.630 --> 00:03:24.330
was built in just a couple of minutes using Claude and Elements.

114
00:03:24.460 --> 00:03:26.250
Now let me show you one thing that you should do

115
00:03:26.750 --> 00:03:28.220
with applications like this.

116
00:03:28.350 --> 00:03:30.360
You want to make sure that after it's built,

117
00:03:30.910 --> 00:03:33.510
you can use Command Option I

118
00:03:33.870 --> 00:03:35.150
if you're on a Mac

119
00:03:35.410 --> 00:03:37.490
and Chrome and go down to Lighthouse

120
00:03:37.630 --> 00:03:39.380
and click the Analyze Page load.

121
00:03:40.260 --> 00:03:41.720
And that'll take a second or two,

122
00:03:41.900 --> 00:03:44.600
and it will give you a score of how well your,

123
00:03:44.620 --> 00:03:44.890
uh,

124
00:03:45.060 --> 00:03:45.800
your page is,

125
00:03:45.860 --> 00:03:48.010
is going to do on SEO on accessibility,

126
00:03:48.180 --> 00:03:48.890
best practices,

127
00:03:48.940 --> 00:03:49.490
and so on.

128
00:03:50.710 --> 00:03:52.450
When you're running a system for a real business,

129
00:03:52.550 --> 00:03:56.020
one of the things that's really helpful for you or for your IT person is to be able

130
00:03:56.020 --> 00:03:59.830
to log into the database and make changes to the data or run queries on the data.

131
00:04:00.150 --> 00:04:03.020
So I've used elements db to log into the local database,

132
00:04:03.110 --> 00:04:03.450
which

133
00:04:03.590 --> 00:04:06.380
you can also do on deployed machines because it's your database,

134
00:04:06.430 --> 00:04:07.100
you control it.

135
00:04:07.430 --> 00:04:08.690
And I'm going to paste in a query

136
00:04:08.830 --> 00:04:12.700
that sets this job's state or progress to invoice sent from paid,

137
00:04:12.750 --> 00:04:13.830
and when I press enter,

138
00:04:14.070 --> 00:04:18.220
the database is updated and note that the user interface update updates instantly,

139
00:04:18.390 --> 00:04:21.579
and that's because the data is published out to the user interface

140
00:04:21.579 --> 00:04:25.790
and the user interface reactively updates using the Elements HTML language.

141
00:04:27.090 --> 00:04:28.000
Once you're done with this video,

142
00:04:28.130 --> 00:04:31.330
scroll down and you can check out the specs that will show the agent,

143
00:04:31.410 --> 00:04:32.870
time to build and cost to build

144
00:04:32.990 --> 00:04:33.880
this particular demo,

145
00:04:33.900 --> 00:04:35.000
and you can click the run it

146
00:04:35.110 --> 00:04:35.810
yourself button.

147
00:04:36.090 --> 00:04:37.010
We've got two modes here.

148
00:04:37.050 --> 00:04:38.530
You can start with the finished app.

149
00:04:38.780 --> 00:04:42.360
This will install Elements and create the application from this scaffold,

150
00:04:42.410 --> 00:04:43.030
so you can

151
00:04:43.360 --> 00:04:45.990
start with this finished app and extend it however you would like,

152
00:04:46.240 --> 00:04:49.800
or you can start from scratch and build it using the prompt that that we use.

153
00:04:50.030 --> 00:04:51.450
To build this app ourselves.

154
00:04:51.630 --> 00:04:52.660
If you scroll down a little bit,

155
00:04:52.720 --> 00:04:54.970
you want to try this prompt out on another service,

156
00:04:55.240 --> 00:04:55.250
uh,

157
00:04:55.390 --> 00:04:55.700
for example,

158
00:04:55.790 --> 00:04:58.140
to see how well your agent does it without Elements,

159
00:04:58.160 --> 00:04:59.800
or if you want to try it on a different platform,

160
00:05:00.150 --> 00:05:01.400
copy the prompt itself,

161
00:05:01.590 --> 00:05:03.330
and you can paste that anywhere you'd like.

162
00:05:03.550 --> 00:05:05.060
If you'd like to see the code for this,

163
00:05:05.310 --> 00:05:05.420
uh,

164
00:05:05.550 --> 00:05:07.980
down at the final area here is the code on GitHub,

165
00:05:08.110 --> 00:05:08.940
and if you click that,

166
00:05:09.030 --> 00:05:11.810
it'll take you over to git_hub and you can explore the code that the

167
00:05:11.910 --> 00:05:13.030
agent generated.

168
00:05:13.710 --> 00:05:13.900
All right,

169
00:05:13.990 --> 00:05:14.430
thanks a lot,

170
00:05:14.470 --> 00:05:16.120
and I hope you guys have a lot of fun building.