WEBVTT

1
00:00:00.710 --> 00:00:00.980
Hey guys,

2
00:00:01.030 --> 00:00:01.500
in this series,

3
00:00:01.550 --> 00:00:04.270
I'm gonna get you set up with Visual Studio Code and Elements.

4
00:00:04.430 --> 00:00:04.490
Uh,

5
00:00:04.590 --> 00:00:06.400
Visual Studio Code is a coding editor

6
00:00:06.400 --> 00:00:08.770
that also works with artificial intelligence agents,

7
00:00:08.990 --> 00:00:10.220
and it can plug you into a number

8
00:00:10.220 --> 00:00:13.930
of uh backend models which includes Microsoft's own Copilot

9
00:00:14.070 --> 00:00:15.690
and also a bunch of other models,

10
00:00:15.710 --> 00:00:15.860
uh,

11
00:00:16.030 --> 00:00:17.050
like Claude Code

12
00:00:17.190 --> 00:00:19.780
or ChatGPT and a bunch of others that are available.

13
00:00:19.870 --> 00:00:22.720
It also has a pretty generous free free plan so you can get started

14
00:00:22.870 --> 00:00:23.980
and play around for free.

15
00:00:24.440 --> 00:00:25.360
If you're

16
00:00:25.610 --> 00:00:28.210
looking to examine the code files that are produced or

17
00:00:28.210 --> 00:00:29.840
you want to write some of the code yourself,

18
00:00:29.980 --> 00:00:31.570
Visual Studio Code I believe is a very,

19
00:00:31.630 --> 00:00:32.770
very good editor to use.

20
00:00:32.860 --> 00:00:34.210
I've used it a lot myself

21
00:00:34.380 --> 00:00:35.570
when I'm not using Vim.

22
00:00:36.020 --> 00:00:36.850
So let's get set up.

23
00:00:36.940 --> 00:00:38.730
Elements will work with any of these editors.

24
00:00:38.800 --> 00:00:41.070
It works particularly well with Visual Studio Code.

25
00:00:41.180 --> 00:00:43.770
It also works well with Claude Code Desktop or if you just want to

26
00:00:43.770 --> 00:00:46.410
use the agent directly in the terminal with Vim or something like that,

27
00:00:46.500 --> 00:00:47.420
it's fine as well.

28
00:00:47.850 --> 00:00:52.010
So go ahead and go over to code.visualstudio.com/download

29
00:00:52.210 --> 00:00:55.600
and click the download button for whatever operating system you have.

30
00:00:55.810 --> 00:00:58.080
That will start the download automatically in Mac on

31
00:00:58.080 --> 00:01:00.130
the upper right hand corner of the Chrome browser,

32
00:01:00.260 --> 00:01:02.070
you'll see it finish downloading

33
00:01:02.330 --> 00:01:04.080
and I can click that and click the

34
00:01:05.300 --> 00:01:09.840
Installer when it's done and drag Visual Studio Code over into Applications.

35
00:01:10.100 --> 00:01:10.530
On Mac,

36
00:01:10.580 --> 00:01:12.310
you can use command space

37
00:01:12.620 --> 00:01:14.040
and type code,

38
00:01:14.220 --> 00:01:17.090
and Visual Studio Code should be the first option that comes up.

39
00:01:17.220 --> 00:01:18.010
If you're on Windows,

40
00:01:18.060 --> 00:01:21.410
you can use the Windows key and search from that menu instead.

41
00:01:23.570 --> 00:01:25.870
If it's the first time you're using Visual Studio Code,

42
00:01:26.090 --> 00:01:30.000
you'll get a prompt that asks you whether you want to sign in to use GitHub Copilot,

43
00:01:30.170 --> 00:01:31.680
and you can do that with GitHub.

44
00:01:31.770 --> 00:01:31.830
Now,

45
00:01:31.850 --> 00:01:33.280
if you're going to use artificial intelligence,

46
00:01:33.370 --> 00:01:34.990
which we do in all of our videos,

47
00:01:35.130 --> 00:01:37.040
you're going to want to sign in with GitHub here.

48
00:01:37.130 --> 00:01:38.960
If for some reason you want to do this all by hand,

49
00:01:39.010 --> 00:01:40.790
you can continue without signing in.

50
00:01:41.090 --> 00:01:42.840
I'll click the continue with GitHub button,

51
00:01:43.090 --> 00:01:44.400
and that will bring me over to GitHub.

52
00:01:44.530 --> 00:01:46.160
If you don't have an account with GitHub yet,

53
00:01:46.210 --> 00:01:47.490
you'll have to create one.

54
00:01:47.850 --> 00:01:49.240
And if you do have an account,

55
00:01:49.330 --> 00:01:50.570
you can go ahead and continue

56
00:01:50.730 --> 00:01:52.360
and sign in as your user account.

57
00:01:53.630 --> 00:01:55.750
That will redirect me back to Visual Studio

58
00:01:56.010 --> 00:01:57.820
and it will ask me to pick my theme.

59
00:01:57.870 --> 00:02:00.140
I'm going to pick the Dark 2026 option which

60
00:02:00.140 --> 00:02:02.100
is the default and click the get started button.

61
00:02:03.490 --> 00:02:05.240
That will drop me into the welcome screen.

62
00:02:05.370 --> 00:02:06.280
You can read this yourself,

63
00:02:06.330 --> 00:02:07.440
but I'm going to close it,

64
00:02:07.630 --> 00:02:08.650
open up the chat window,

65
00:02:08.770 --> 00:02:10.080
make it a little bit bigger,

66
00:02:10.330 --> 00:02:12.270
and walk you through quickly this chat window.

67
00:02:12.370 --> 00:02:14.710
This is where we're going to chat with artificial intelligence,

68
00:02:14.930 --> 00:02:17.480
and if you click on the auto button down here,

69
00:02:17.530 --> 00:02:18.960
you'll see that there's a bunch of different models.

70
00:02:19.100 --> 00:02:20.820
That we can select by hand

71
00:02:20.940 --> 00:02:24.310
or we can select the auto button here and then Copilot will decide

72
00:02:24.310 --> 00:02:27.690
for us and route automatically to whatever the best backend model is.

73
00:02:27.780 --> 00:02:28.860
So we're going to leave auto

74
00:02:28.980 --> 00:02:29.650
selected

75
00:02:29.780 --> 00:02:32.760
and the other thing I'm going to do before we install Elements is

76
00:02:32.870 --> 00:02:34.410
click over to auto.

77
00:02:34.840 --> 00:02:35.150
I'm sorry,

78
00:02:35.280 --> 00:02:36.550
to uh the agent button.

79
00:02:37.950 --> 00:02:38.030
Oh,

80
00:02:38.110 --> 00:02:38.980
I'm clicking the wrong thing.

81
00:02:39.110 --> 00:02:40.490
The default permissions.

82
00:02:40.920 --> 00:02:41.540
And right now,

83
00:02:41.590 --> 00:02:42.580
the default permissions are,

84
00:02:42.750 --> 00:02:43.750
it's going to ask you

85
00:02:43.900 --> 00:02:46.330
whether it can do every little thing that it wants to do.

86
00:02:46.510 --> 00:02:47.580
To make that things easier,

87
00:02:47.740 --> 00:02:48.860
especially during the install,

88
00:02:48.990 --> 00:02:50.320
select allow all,

89
00:02:50.510 --> 00:02:52.110
and that is perfectly fine,

90
00:02:52.350 --> 00:02:52.460
uh,

91
00:02:52.550 --> 00:02:52.850
for,

92
00:02:52.870 --> 00:02:53.820
for what we're going to be doing,

93
00:02:53.870 --> 00:02:54.660
you don't need to worry.

94
00:02:54.870 --> 00:02:57.540
So click uh don't show again and then the enable button.

95
00:02:57.710 --> 00:02:57.780
Now,

96
00:02:57.830 --> 00:02:58.700
if you're not comfortable with that,

97
00:02:58.750 --> 00:02:59.980
you can leave the default setting,

98
00:03:00.190 --> 00:03:00.210
uh,

99
00:03:00.350 --> 00:03:02.500
but you'll have to acknowledge your way through a number

100
00:03:02.500 --> 00:03:04.660
of different uh things that the tool wants to do.

101
00:03:05.080 --> 00:03:05.110
Alright,

102
00:03:05.240 --> 00:03:05.470
next up,

103
00:03:05.550 --> 00:03:07.580
let's go grab the install script for Elements

104
00:03:07.600 --> 00:03:09.720
and install it through the chat window.

105
00:03:09.960 --> 00:03:12.680
Head over to elements.dev/install.

106
00:03:12.840 --> 00:03:13.910
If you're not already signed up,

107
00:03:13.960 --> 00:03:16.260
you'll first have to create a user account with Elements,

108
00:03:16.400 --> 00:03:16.830
and to do that,

109
00:03:17.000 --> 00:03:17.830
pick a username.

110
00:03:17.960 --> 00:03:18.790
If you have one already,

111
00:03:18.840 --> 00:03:20.670
you can use that or click the generate button

112
00:03:20.670 --> 00:03:22.640
and one will be created for you automatically.

113
00:03:22.800 --> 00:03:23.580
This will be public,

114
00:03:23.920 --> 00:03:25.430
but your email will be private.

115
00:03:27.640 --> 00:03:29.150
Pick an email address and a password,

116
00:03:29.400 --> 00:03:30.700
accept the legal agreements,

117
00:03:30.720 --> 00:03:32.720
and click next to verify your email.

118
00:03:33.240 --> 00:03:34.970
You'll get an email from us that has a code.

119
00:03:35.080 --> 00:03:36.210
Go ahead and select that code,

120
00:03:36.360 --> 00:03:36.980
copy it,

121
00:03:37.160 --> 00:03:40.380
head back to the install page and paste that into the text box.

122
00:03:40.600 --> 00:03:42.630
Click the get the install script button.

123
00:03:45.230 --> 00:03:48.690
That's going to drop you into a welcome thread where you'll see a letter from me

124
00:03:48.910 --> 00:03:50.960
and an agent prompt that you can use,

125
00:03:50.990 --> 00:03:52.100
and if you click this box,

126
00:03:52.190 --> 00:03:54.940
it will copy this script or this agent prompt to your

127
00:03:54.940 --> 00:03:57.140
clipboard and you can paste it into the chat window.

128
00:03:57.550 --> 00:03:58.380
Before we leave this page,

129
00:03:58.550 --> 00:04:01.100
there's a comment box here and what I'd like you to do is to tell

130
00:04:01.320 --> 00:04:03.200
Me a little bit about what you're trying to achieve here.

131
00:04:03.400 --> 00:04:06.600
Or if you run into any problems with installation or getting started,

132
00:04:06.760 --> 00:04:08.790
you can leave a comment here and I will get back

133
00:04:08.790 --> 00:04:10.860
to you and I will make sure that you are successful.

134
00:04:11.160 --> 00:04:13.590
So go ahead and click the agent prompt button to copy it,

135
00:04:13.920 --> 00:04:15.940
paste it into the chat window of the agent,

136
00:04:16.200 --> 00:04:17.149
and press enter.

137
00:04:17.579 --> 00:04:19.630
The chat agent will begin to install Elements.

138
00:04:19.680 --> 00:04:21.630
It might do some security checks first to make

139
00:04:21.630 --> 00:04:23.790
sure that it knows what it's actually installing.

140
00:04:24.000 --> 00:04:25.830
When it's done 20 or 30 seconds later,

141
00:04:25.960 --> 00:04:27.310
it should give you some success

142
00:04:27.720 --> 00:04:29.830
that says that it's installed Elements successfully

143
00:04:29.830 --> 00:04:31.690
with the version that was installed.

144
00:04:32.280 --> 00:04:33.470
Once Elements is installed,

145
00:04:33.530 --> 00:04:37.650
you can create a new Elements project by using Command Shift P

146
00:04:37.920 --> 00:04:39.070
in Visual Studio Code.

147
00:04:39.160 --> 00:04:41.480
That's going to open up something called the command palette.

148
00:04:41.640 --> 00:04:42.540
It looks like this,

149
00:04:42.560 --> 00:04:42.930
and

150
00:04:43.110 --> 00:04:45.390
it's symbolized with this caret icon.

151
00:04:45.440 --> 00:04:46.780
If you delete that by accident,

152
00:04:46.840 --> 00:04:48.060
it actually changes the menu.

153
00:04:48.410 --> 00:04:48.780
So

154
00:04:48.920 --> 00:04:49.470
if you do that,

155
00:04:49.560 --> 00:04:50.910
just put it back like that.

156
00:04:50.960 --> 00:04:53.350
It's the greater than symbol or the caret symbol.

157
00:04:53.820 --> 00:04:55.690
And what you'll type is new app,

158
00:04:55.860 --> 00:04:58.780
and that should bring up the Elements New App command.

159
00:04:58.870 --> 00:05:00.930
You're going to click that or press the enter key.

160
00:05:01.700 --> 00:05:04.250
And next it will ask you to name your application.

161
00:05:04.740 --> 00:05:05.930
You can either leave this blank,

162
00:05:05.980 --> 00:05:08.290
in which case it will be named automatically,

163
00:05:08.500 --> 00:05:10.490
or you can give the application a name.

164
00:05:10.650 --> 00:05:12.410
I'll call it myapp and press Enter.

165
00:05:13.960 --> 00:05:15.830
You're going to get a prompt that asks you whether

166
00:05:15.830 --> 00:05:18.590
you trust the authors of the files in this folder.

167
00:05:18.760 --> 00:05:19.630
It looks a little scary,

168
00:05:19.680 --> 00:05:20.610
but don't worry.

169
00:05:20.760 --> 00:05:22.950
What I want you to do is to click this checkbox that

170
00:05:22.950 --> 00:05:26.430
says trust the authors of all files in the parent folder projects,

171
00:05:26.520 --> 00:05:28.950
and what that means is that all Elements projects by

172
00:05:28.950 --> 00:05:30.790
default are going to go into your home folder.

173
00:05:31.340 --> 00:05:31.920
Elements,

174
00:05:32.080 --> 00:05:32.560
projects,

175
00:05:32.580 --> 00:05:35.030
and then the name of your project and it's saying

176
00:05:35.320 --> 00:05:37.740
to trust all projects in this projects folder

177
00:05:37.920 --> 00:05:38.790
and if you check this box,

178
00:05:38.840 --> 00:05:40.860
it means you won't have to do this every time you create a new

179
00:05:41.020 --> 00:05:41.460
project

180
00:05:41.680 --> 00:05:45.290
and then down click the the big blue button yes I trust the authors

181
00:05:45.400 --> 00:05:47.830
and I don't think you'll have to do this again on new projects.

182
00:05:49.440 --> 00:05:50.960
Let me show you around the layout.

183
00:05:51.560 --> 00:05:52.190
Automatically,

184
00:05:52.220 --> 00:05:54.700
a terminal panel was opened up on the bottom.

185
00:05:54.840 --> 00:05:56.960
We still have our agent chat over on the right

186
00:05:57.080 --> 00:05:57.630
and on the left,

187
00:05:57.720 --> 00:06:01.190
if you click this button up here in the top that kind of looks like a bunch of files,

188
00:06:01.240 --> 00:06:02.540
it's called the Explorer,

189
00:06:02.770 --> 00:06:04.940
and that will open up your project folder

190
00:06:05.040 --> 00:06:07.430
and you can navigate through and see the different files that are there.

191
00:06:07.640 --> 00:06:09.990
Most of the files in an application are in the app folder.

192
00:06:10.040 --> 00:06:12.140
You can see the pages that have been created and so on.

193
00:06:12.240 --> 00:06:13.510
We're going to close this because we're going to

194
00:06:13.510 --> 00:06:15.900
work directly with the AI agent to build things.

195
00:06:16.000 --> 00:06:18.830
The main thing you're going to do when you start a new Elements application

196
00:06:18.830 --> 00:06:22.200
or when you open up Visual Studio again after having closed it for the day

197
00:06:22.360 --> 00:06:24.780
is type elements start,

198
00:06:24.980 --> 00:06:27.250
and that's going to start up the application server

199
00:06:27.360 --> 00:06:29.150
and you should see a confetti-like

200
00:06:29.360 --> 00:06:31.390
new page if you're starting a new application or if

201
00:06:31.390 --> 00:06:33.230
you've been working on an application for a while,

202
00:06:33.280 --> 00:06:35.700
you'll see the browser open inside a Visual Studio

203
00:06:35.700 --> 00:06:37.900
code with your application running inside of it.

204
00:06:39.110 --> 00:06:44.100
You can also open up a regular browser and go to localhost:4000 by default.

205
00:06:44.150 --> 00:06:44.770
That's the port.

206
00:06:44.900 --> 00:06:48.020
Press enter and you will see the application in your normal browser.

207
00:06:48.310 --> 00:06:50.940
I find it useful to work on the application inside of the editor,

208
00:06:51.030 --> 00:06:54.380
but if you want to see what the end users are going to see or if you need a bigger screen,

209
00:06:54.430 --> 00:06:57.860
you can just go to a regular Chrome or Safari or whatever browser you're using,

210
00:06:58.030 --> 00:07:00.390
go to localhost:4000 and look at it there.

211
00:07:01.410 --> 00:07:04.620
Back in Visual Studio Code in the terminal panel down on the bottom,

212
00:07:04.760 --> 00:07:05.730
if you press Q,

213
00:07:06.040 --> 00:07:08.260
that's going to exit out of this program.

214
00:07:08.400 --> 00:07:09.750
And if you want to start it up again,

215
00:07:09.920 --> 00:07:12.470
just type elements start or use the up arrow which

216
00:07:12.470 --> 00:07:14.670
will bring back the previous command and press Enter,

217
00:07:14.720 --> 00:07:15.820
and that will start up

218
00:07:15.920 --> 00:07:17.750
the application server again.

219
00:07:18.240 --> 00:07:19.110
To build your application,

220
00:07:19.160 --> 00:07:21.110
we're going to go over into the right area here in

221
00:07:21.110 --> 00:07:24.150
the agent and just prompt our way towards building an application.