WEBVTT

1
00:00:00.420 --> 00:00:00.730
Next up,

2
00:00:00.820 --> 00:00:03.040
let's build a todos app in in Elements,

3
00:00:03.140 --> 00:00:05.690
and I know that there's a lot of todos apps out there,

4
00:00:05.800 --> 00:00:06.160
but

5
00:00:06.300 --> 00:00:08.490
it is a bit of a rite of passage to be able to build one.

6
00:00:08.580 --> 00:00:09.620
So that's what we're going to do.

7
00:00:09.780 --> 00:00:12.580
And also it shows off a bunch of different features very quickly.

8
00:00:13.220 --> 00:00:15.290
So we're going to build a todos app that has authentication

9
00:00:15.290 --> 00:00:18.090
so that a user can log in with a username and password,

10
00:00:18.300 --> 00:00:19.460
an email and a password,

11
00:00:19.820 --> 00:00:20.320
and

12
00:00:20.620 --> 00:00:22.490
the todos are going to be real time.

13
00:00:22.580 --> 00:00:24.920
That means that anyone who's connected to the browser

14
00:00:25.430 --> 00:00:29.080
to the to the list will see it update in real time as it changes.

15
00:00:29.610 --> 00:00:31.400
The way we're going to do that is in our chat window,

16
00:00:31.460 --> 00:00:34.870
we just talk normally to the agent and ask it to do various things.

17
00:00:35.090 --> 00:00:35.240
Now,

18
00:00:35.330 --> 00:00:37.720
you might be familiar if you're coming from another vibe coding

19
00:00:37.720 --> 00:00:41.240
platform with having to put together very complicated spec sheets and

20
00:00:41.370 --> 00:00:41.680
all that.

21
00:00:41.730 --> 00:00:43.160
You don't really need to do that with Elements.

22
00:00:43.210 --> 00:00:44.300
You can just start talking.

23
00:00:44.490 --> 00:00:45.130
The agent

24
00:00:45.240 --> 00:00:47.680
will already have a lot of guardrails that are built for it

25
00:00:47.900 --> 00:00:48.840
and architectural

26
00:00:49.020 --> 00:00:51.520
guidelines that are built for it through the Elements

27
00:00:51.700 --> 00:00:52.800
tooling and the framework.

28
00:00:53.030 --> 00:00:54.890
So I would recommend just start typing.

29
00:00:55.140 --> 00:00:57.330
I want to create a todos app with authentication.

30
00:00:57.500 --> 00:00:58.870
It should have email and password,

31
00:00:59.020 --> 00:00:59.760
multiple users,

32
00:00:59.780 --> 00:01:02.480
and anybody can see todos update in real time.

33
00:01:02.660 --> 00:01:03.760
You can talk just

34
00:01:03.870 --> 00:01:05.800
plainly like this and press enter.

35
00:01:07.120 --> 00:01:09.890
The agent will get to work and it will start to

36
00:01:10.280 --> 00:01:11.540
analyze the application,

37
00:01:11.800 --> 00:01:12.590
take a look at Elements,

38
00:01:12.680 --> 00:01:15.100
read some manual pages that it needs to to get started,

39
00:01:15.280 --> 00:01:16.490
and it will start writing code.

40
00:01:16.600 --> 00:01:19.030
It shouldn't take more than a minute or so before

41
00:01:19.030 --> 00:01:21.640
you start seeing the user interface updated in real time

42
00:01:21.800 --> 00:01:23.030
right here in the browser.

43
00:01:24.300 --> 00:01:25.660
If you notice in the lower left,

44
00:01:25.730 --> 00:01:28.090
every once in a while that state will change to error,

45
00:01:28.340 --> 00:01:29.520
and that means that the

46
00:01:29.620 --> 00:01:32.460
agent made a mistake and Elements is correcting it.

47
00:01:32.980 --> 00:01:37.440
The errors are sent to the agent in real time in microseconds as soon as it asks,

48
00:01:37.580 --> 00:01:41.290
and it will begin to correct those errors and you'll see that state go back to OK.

49
00:01:41.380 --> 00:01:42.130
And when it's OK,

50
00:01:42.180 --> 00:01:44.760
it means your application is in an OK state.

51
00:01:48.900 --> 00:01:49.020
Great,

52
00:01:49.090 --> 00:01:51.090
we're back in an OK state and we're starting to

53
00:01:51.090 --> 00:01:53.480
see a user interface come to life in the browser.

54
00:01:53.690 --> 00:01:56.060
The agent is claiming that it's done and it's giving me

55
00:01:56.260 --> 00:01:57.410
an overview of what it's done.

56
00:01:57.470 --> 00:01:59.890
It built a todos app with email and password sign-in.

57
00:02:00.020 --> 00:02:01.710
It's running at localhost:4000,

58
00:02:01.780 --> 00:02:02.940
which we can already see here,

59
00:02:03.110 --> 00:02:06.280
and it gives us a little bit of an overview of the features that it has.

60
00:02:06.300 --> 00:02:08.970
It has accounts with a sign up and sign-in URL.

61
00:02:09.460 --> 00:02:11.170
Todos that everybody can see at once,

62
00:02:11.300 --> 00:02:12.020
permissions.

63
00:02:12.140 --> 00:02:14.330
Only the owner of a todo can check it or star it,

64
00:02:14.380 --> 00:02:15.080
rename it.

65
00:02:15.230 --> 00:02:18.170
It has live updates so everybody sees everything that's changed

66
00:02:18.170 --> 00:02:20.510
all at once and a few extras so you can filter

67
00:02:20.660 --> 00:02:22.730
by looking at all active or done.

68
00:02:23.340 --> 00:02:25.400
There's an awful lot of features baked into this,

69
00:02:25.420 --> 00:02:27.400
and one of the things you should keep in mind is that

70
00:02:27.500 --> 00:02:30.090
it doesn't require any third party services to make this work.

71
00:02:30.140 --> 00:02:30.890
The authentication,

72
00:02:30.940 --> 00:02:31.810
the user tables,

73
00:02:31.900 --> 00:02:35.400
all of that is in your own database running in Postgres.

74
00:02:36.500 --> 00:02:37.440
Now on your own application

75
00:02:37.560 --> 00:02:39.210
you can open this up in a big browser if

76
00:02:39.210 --> 00:02:41.450
you'd like and click around and make sure everything works,

77
00:02:41.660 --> 00:02:42.490
but in the rest of this video,

78
00:02:42.620 --> 00:02:43.930
let me just show you around a couple of

79
00:02:43.930 --> 00:02:46.620
things that the agent did under the hood that you

80
00:02:46.820 --> 00:02:47.650
did not see.

81
00:02:48.180 --> 00:02:50.430
You've seen the OK error state change

82
00:02:50.580 --> 00:02:52.490
that's Elements providing guidance.

83
00:02:52.660 --> 00:02:54.710
If you press Q in this terminal.

84
00:02:55.290 --> 00:02:57.120
There's a couple other commands I'd like to show you.

85
00:02:57.300 --> 00:02:59.480
One is that you have a database that's running locally.

86
00:02:59.650 --> 00:03:01.250
So if you type elements db,

87
00:03:01.490 --> 00:03:03.790
that will drop you into a Postgres shell

88
00:03:03.930 --> 00:03:06.120
where you can take a look at the tables that you have.

89
00:03:06.450 --> 00:03:06.840
For example,

90
00:03:06.970 --> 00:03:08.480
we have a users table here

91
00:03:08.610 --> 00:03:09.830
and you can see that it has.

92
00:03:11.360 --> 00:03:13.300
Let's look at it in a slightly better view here.

93
00:03:13.380 --> 00:03:16.790
You can see that it has fields for an email and a password hash.

94
00:03:17.030 --> 00:03:19.190
Now you don't have to do any of these advanced things,

95
00:03:19.280 --> 00:03:19.750
by the way.

96
00:03:19.920 --> 00:03:22.490
You can just talk to your editor or you can just talk to your agent,

97
00:03:22.510 --> 00:03:24.280
and the agent will do everything for you.

98
00:03:24.440 --> 00:03:25.910
But I want you to know that these exist.

99
00:03:26.010 --> 00:03:28.830
So if you ever want to drop down and work directly with Elements,

100
00:03:28.960 --> 00:03:29.750
get into the database,

101
00:03:29.840 --> 00:03:30.430
look at the tables,

102
00:03:30.480 --> 00:03:31.030
you can do that,

103
00:03:31.080 --> 00:03:33.150
and you don't need a third party service for it.

104
00:03:33.480 --> 00:03:36.210
I'm gonna do a backslash q to get out of

105
00:03:36.640 --> 00:03:39.030
the database and then I want to show you one more thing,

106
00:03:39.110 --> 00:03:40.650
which is elements test.

107
00:03:41.230 --> 00:03:42.500
When the agent wrote your application,

108
00:03:42.550 --> 00:03:43.660
it's going to create tests.

109
00:03:43.710 --> 00:03:44.260
In this case,

110
00:03:44.510 --> 00:03:44.940
not too many.

111
00:03:45.030 --> 00:03:45.890
It looks like there's

112
00:03:46.230 --> 00:03:47.900
345 assertions,

113
00:03:47.990 --> 00:03:48.260
uh,

114
00:03:48.710 --> 00:03:50.180
really three tests here.

115
00:03:50.590 --> 00:03:51.010
Um,

116
00:03:51.230 --> 00:03:55.110
and you'll see a very quick pass fail over on the right-hand side.

117
00:03:55.180 --> 00:03:55.450
And

118
00:03:55.710 --> 00:03:56.820
tests are very,

119
00:03:56.910 --> 00:03:58.020
very fast to query.

120
00:03:58.070 --> 00:03:59.950
And if you look up in the elapsed time here,

121
00:04:00.230 --> 00:04:00.380
uh,

122
00:04:00.560 --> 00:04:02.060
I might get my order of magnitude wrong,

123
00:04:02.110 --> 00:04:04.260
but that looks to me like 26 microseconds

124
00:04:04.430 --> 00:04:06.780
to get a response and see that all the tests are passing.

125
00:04:07.150 --> 00:04:08.010
And as you work

126
00:04:08.110 --> 00:04:08.730
on the application,

127
00:04:08.910 --> 00:04:10.400
you create more and more features,

128
00:04:10.590 --> 00:04:12.890
tests help us to know whether or not the application

129
00:04:13.130 --> 00:04:14.690
has regressed over time.

130
00:04:14.870 --> 00:04:16.860
And an agent needs to be able to check that very,

131
00:04:16.920 --> 00:04:18.399
very quickly so we can see whether

132
00:04:18.550 --> 00:04:19.420
when it built something new,

133
00:04:19.550 --> 00:04:23.100
did it break something that you had built a couple of days ago or weeks or months ago.

134
00:04:23.440 --> 00:04:25.690
So it's much more likely that you're going to get an application

135
00:04:25.690 --> 00:04:29.060
that works and continues to work over time because of these,

136
00:04:29.270 --> 00:04:29.420
uh,

137
00:04:29.550 --> 00:04:30.060
these very,

138
00:04:30.100 --> 00:04:33.190
very fast tests that the agent will absolutely utilize.

139
00:04:33.510 --> 00:04:33.660
All right,

140
00:04:33.750 --> 00:04:36.020
now I'm going to press Q again to exit out of this.

141
00:04:36.510 --> 00:04:37.180
And remember,

142
00:04:37.230 --> 00:04:40.650
when you open up your application after having quit VS Code,

143
00:04:40.790 --> 00:04:41.820
you can just type element

144
00:04:41.950 --> 00:04:42.360
start

145
00:04:42.470 --> 00:04:43.850
and that will boot up your

146
00:04:44.070 --> 00:04:46.050
app server again and then you can click around

147
00:04:46.050 --> 00:04:48.070
and play with the application in the browser.

148
00:04:48.210 --> 00:04:48.300
Now,

149
00:04:48.350 --> 00:04:50.140
if you exit out of Visual Studio Code,

150
00:04:50.190 --> 00:04:51.340
that will close the application

151
00:04:51.530 --> 00:04:51.980
server

152
00:04:52.210 --> 00:04:54.310
and close down your application for the day,

153
00:04:54.490 --> 00:04:57.320
but the project server for your project and Elements will

154
00:04:57.320 --> 00:04:59.450
continue to run in the background for a little while.

155
00:04:59.650 --> 00:05:02.960
And so that way when you go back and you start start up the application again,

156
00:05:02.980 --> 00:05:06.480
it'll be very fast and all the build state will be available immediately.

157
00:05:06.880 --> 00:05:08.520
If you open up Visual Studio Code,

158
00:05:08.680 --> 00:05:11.510
you can open up the folder or open up recent,

159
00:05:11.640 --> 00:05:14.400
and you'll find your project in the recent folder list there.

160
00:05:14.640 --> 00:05:16.790
Or if you want to open up the folder specifically,

161
00:05:16.880 --> 00:05:18.060
just go to Elements,

162
00:05:18.200 --> 00:05:19.680
your home folder, elements, projects,

163
00:05:19.720 --> 00:05:21.790
and then find the name of the project there.

164
00:05:22.000 --> 00:05:23.800
I'll click this in the recent menu.

165
00:05:24.200 --> 00:05:26.210
That will bring up the Visual Studio Code.

166
00:05:26.580 --> 00:05:26.890
Uh,

167
00:05:27.120 --> 00:05:29.070
panels and you'll see a bunch of errors because

168
00:05:29.220 --> 00:05:31.250
we have not started the application yet.

169
00:05:31.620 --> 00:05:32.330
Down in the bottom,

170
00:05:32.420 --> 00:05:33.910
if you don't see this terminal,

171
00:05:34.260 --> 00:05:34.270
uh,

172
00:05:34.300 --> 00:05:35.010
panel open,

173
00:05:35.140 --> 00:05:35.530
you can,

174
00:05:35.580 --> 00:05:37.570
you can press control back tick

175
00:05:37.880 --> 00:05:39.330
on Mac or

176
00:05:39.560 --> 00:05:41.780
use the terminal menu and say new terminal,

177
00:05:41.900 --> 00:05:43.370
and that will bring up a terminal menu.

178
00:05:43.700 --> 00:05:44.360
And then type

179
00:05:44.650 --> 00:05:45.090
elements start.

180
00:05:45.180 --> 00:05:47.410
That's how we always start our application for the day.

181
00:05:48.030 --> 00:05:48.670
And when you do that,

182
00:05:48.690 --> 00:05:51.200
that will bring up the application immediately

183
00:05:51.510 --> 00:05:53.980
in the upper panel in Visual Studio Code.

184
00:05:54.190 --> 00:05:54.910
Over in the right,

185
00:05:55.030 --> 00:05:58.130
even if you're starting with a brand new agent and it's a brand new session,

186
00:05:58.390 --> 00:06:01.690
it will be able to figure out Elements right away and and left off.

187
00:06:01.830 --> 00:06:04.620
It will be able to continue where the last agent left off,

188
00:06:04.710 --> 00:06:05.420
no problem.

189
00:06:05.750 --> 00:06:07.660
So working with an Elements application is really,

190
00:06:07.710 --> 00:06:08.950
really easy and fun,

191
00:06:09.150 --> 00:06:10.340
and over time

192
00:06:10.520 --> 00:06:13.260
you can continue to build really sophisticated applications

193
00:06:13.260 --> 00:06:15.050
without worrying that the old one is,

194
00:06:15.070 --> 00:06:15.900
is breaking.

195
00:06:15.950 --> 00:06:17.070
The main thing to look at.

196
00:06:17.320 --> 00:06:17.780
Is

197
00:06:17.950 --> 00:06:18.580
the state.

198
00:06:18.630 --> 00:06:19.450
If it's OK,

199
00:06:19.770 --> 00:06:20.300
everything is good,

200
00:06:20.320 --> 00:06:21.460
and if it's red air,

201
00:06:21.510 --> 00:06:22.500
it means there's an air,

202
00:06:22.830 --> 00:06:24.870
and there's something for the agent or for you to fix.

203
00:06:25.110 --> 00:06:27.930
And the agent will get those build states automatically,

204
00:06:28.030 --> 00:06:28.220
very,

205
00:06:28.270 --> 00:06:28.770
very quickly,

206
00:06:28.790 --> 00:06:30.940
and it will correct itself as it builds.

207
00:06:31.120 --> 00:06:34.780
So I hope this gave you a quick overview of using Visual Studio Code with Elements.

208
00:06:34.900 --> 00:06:35.060
Again,

209
00:06:35.190 --> 00:06:36.890
Elements can be used with any editor,

210
00:06:37.110 --> 00:06:37.240
uh,

211
00:06:37.350 --> 00:06:39.970
but we have some things that make it nice to to use

212
00:06:40.170 --> 00:06:43.220
some integrations with the Visual Studio Code that make it particularly nice.

213
00:06:43.430 --> 00:06:44.740
I like Visual Studio Code.

214
00:06:44.790 --> 00:06:45.610
I'm an old school,

215
00:06:45.690 --> 00:06:45.990
uh,

216
00:06:46.150 --> 00:06:46.200
uh,

217
00:06:46.360 --> 00:06:46.580
code

218
00:06:46.680 --> 00:06:49.220
editor and I like to be able to open up the file explorer and

219
00:06:49.220 --> 00:06:52.580
see the files there and and edit them myself if I want to.

220
00:06:52.790 --> 00:06:54.130
I think it has a very nice

221
00:06:54.270 --> 00:06:58.570
ability to open up terminal windows and it has the nice chat over here on the right.

222
00:06:58.750 --> 00:07:00.000
And you can also, you can use a

223
00:07:00.000 --> 00:07:04.190
very generous free tier with GitHub Copilot, which is also quite nice.

224
00:07:04.190 --> 00:07:10.230
So I will oscillate in our videos between using Visual Studio Code and using other editors and AI

225
00:07:10.910 --> 00:07:15.900
harnesses like Claude Code Desktop, but I think VS Code is a really good option.