WEBVTT

1
00:00:00.320 --> 00:00:02.510
I've already showed you how to use Elements in VS Code and

2
00:00:02.510 --> 00:00:04.570
in this video I'm going to show you how to use it with

3
00:00:04.700 --> 00:00:05.290
Claude Code,

4
00:00:05.320 --> 00:00:07.390
the desktop application that runs on your machine.

5
00:00:07.830 --> 00:00:11.660
I think VS Code is better if you want to look at files and edit files yourself,

6
00:00:11.750 --> 00:00:13.420
and it has a little bit more advanced functionality.

7
00:00:13.510 --> 00:00:14.220
So for most users,

8
00:00:14.270 --> 00:00:15.600
it's probably the better choice.

9
00:00:15.910 --> 00:00:18.100
But if you're already using Claude Code or you

10
00:00:18.100 --> 00:00:19.790
want more of a kind of vibe coding experience,

11
00:00:19.870 --> 00:00:22.220
the Claude Code desktop app is actually quite excellent.

12
00:00:22.430 --> 00:00:23.890
I use Claude extensively

13
00:00:24.030 --> 00:00:25.020
for Elements development,

14
00:00:25.110 --> 00:00:26.290
but I use it in the terminal.

15
00:00:26.470 --> 00:00:28.220
But when I do go over to the Claude Code desktop,

16
00:00:28.270 --> 00:00:31.700
I'm always amazed each week at how much better it's getting each time I check it out.

17
00:00:31.790 --> 00:00:32.090
So

18
00:00:32.229 --> 00:00:33.900
let's download it and give it a spin.

19
00:00:34.650 --> 00:00:36.990
I'm going to come over to the claude.com download

20
00:00:37.410 --> 00:00:39.370
link or you can Google search for Claude Code

21
00:00:39.370 --> 00:00:41.790
download and download the version for macOS.

22
00:00:42.050 --> 00:00:42.670
Up in the right,

23
00:00:42.730 --> 00:00:43.450
when that finishes,

24
00:00:43.570 --> 00:00:45.480
just like any other application that downloads,

25
00:00:45.530 --> 00:00:46.070
click it

26
00:00:46.330 --> 00:00:49.120
and drag the application over into your folder.

27
00:00:49.170 --> 00:00:50.040
I already have it installed,

28
00:00:50.090 --> 00:00:51.050
so I'll stop that.

29
00:00:51.260 --> 00:00:51.680
Next up,

30
00:00:51.810 --> 00:00:54.000
if you're on Mac command space to bring up Spotlight,

31
00:00:54.290 --> 00:00:54.890
type Claude,

32
00:00:55.010 --> 00:00:56.520
and that will open up the application.

33
00:00:56.650 --> 00:00:57.320
If you're on Windows,

34
00:00:57.370 --> 00:00:58.160
you can use the Windows.

35
00:00:58.430 --> 00:00:59.100
And do the same.

36
00:00:59.230 --> 00:00:59.540
After that,

37
00:00:59.670 --> 00:01:00.960
go over to the elements.dev

38
00:01:01.100 --> 00:01:02.340
website into the install page,

39
00:01:02.390 --> 00:01:04.610
which you can get to by clicking on the nav bar at the top.

40
00:01:05.030 --> 00:01:08.590
Create an account on Elements and go down and click the install script

41
00:01:09.030 --> 00:01:09.690
terminal box.

42
00:01:09.750 --> 00:01:13.110
That will copy this to the clipboard and you can paste it directly into Claude.

43
00:01:13.280 --> 00:01:16.020
Paste that script right into the prompt and press enter.

44
00:01:16.350 --> 00:01:19.550
Claude shouldn't give you any trouble here and it should just go ahead and install it.

45
00:01:19.650 --> 00:01:21.220
It might tell me that I already have it installed,

46
00:01:21.310 --> 00:01:21.890
we'll see.

47
00:01:22.380 --> 00:01:24.010
If for some reason that doesn't work,

48
00:01:24.100 --> 00:01:25.800
you can open up the terminal

49
00:01:25.980 --> 00:01:28.050
over here by pressing command J on a Mac or

50
00:01:28.050 --> 00:01:30.280
by clicking this icon in the upper right hand corner,

51
00:01:30.460 --> 00:01:33.040
and you can paste the script directly into the terminal.

52
00:01:33.260 --> 00:01:36.530
It looks like the Elements installer is running and Claude's going to do this for us,

53
00:01:36.620 --> 00:01:38.000
so we'll wait for that to complete.

54
00:01:38.240 --> 00:01:40.770
Claude successfully installed Elements and now it's asking

55
00:01:40.770 --> 00:01:42.050
me if I want to create an app.

56
00:01:43.400 --> 00:01:44.120
I don't have to name it.

57
00:01:44.160 --> 00:01:46.660
I can just tell it to create an app using regular language.

58
00:01:46.960 --> 00:01:50.660
Claude will use the Elements program to create the application,

59
00:01:50.840 --> 00:01:53.580
and then it gives me instructions on what I should do to get it started.

60
00:01:53.760 --> 00:01:56.060
The instructions tell me to go over to this terminal

61
00:01:56.200 --> 00:01:57.870
and type elements start.

62
00:02:01.340 --> 00:02:01.850
When you do that,

63
00:02:01.900 --> 00:02:03.440
it connects to the Elements server

64
00:02:03.620 --> 00:02:06.070
and starts up an HTTP server where your browser,

65
00:02:06.180 --> 00:02:07.820
where your app will be running in the browser.

66
00:02:08.030 --> 00:02:10.820
Now I can open up localhost in my Chrome browser or I

67
00:02:10.820 --> 00:02:13.480
can click this link and it will open it up in the

68
00:02:13.780 --> 00:02:14.890
Claude desktop app itself,

69
00:02:14.940 --> 00:02:16.090
and that's what I'd recommend you do.

70
00:02:16.170 --> 00:02:17.290
Click the OK button

71
00:02:17.540 --> 00:02:19.690
that will open this up and you should see a confetti

72
00:02:20.060 --> 00:02:22.320
welcome page for your Elements application.

73
00:02:23.020 --> 00:02:23.690
Over on the left,

74
00:02:23.780 --> 00:02:24.930
it gives me a suggestion.

75
00:02:25.380 --> 00:02:27.320
It says that we should build a todos app because

76
00:02:27.340 --> 00:02:29.970
that is a rite of passage for any serious developer,

77
00:02:30.030 --> 00:02:30.890
as we all know.

78
00:02:31.340 --> 00:02:32.600
So we can go ahead and do that

79
00:02:33.340 --> 00:02:37.390
I'll just say OK and I will have it build me a todos app and we'll see how it does.

80
00:02:38.690 --> 00:02:40.310
Here we have the first signs of the todos app.

81
00:02:40.330 --> 00:02:41.660
It's already looking quite good,

82
00:02:41.920 --> 00:02:44.500
and Claude is driving the development of this application

83
00:02:44.500 --> 00:02:48.270
using the Elements project server and application framework.

84
00:02:48.600 --> 00:02:51.270
And it's able to build the application incredibly quickly because

85
00:02:51.270 --> 00:02:53.280
Elements is kind of like a guard rail that's,

86
00:02:53.360 --> 00:02:54.180
that's keeping it.

87
00:02:54.920 --> 00:02:56.260
Correctly writing the program.

88
00:02:56.360 --> 00:02:58.080
So anytime it runs into a mistake,

89
00:02:58.240 --> 00:03:00.830
you might see the upper right here turn to red,

90
00:03:01.200 --> 00:03:02.310
which means that there's an error,

91
00:03:02.400 --> 00:03:04.890
and then Elements will correct Claude to correct that,

92
00:03:05.000 --> 00:03:05.850
to fix that error,

93
00:03:05.960 --> 00:03:07.430
and it gets back on its way again.

94
00:03:08.250 --> 00:03:09.720
Now it's testing the application

95
00:03:09.970 --> 00:03:10.650
in mobile,

96
00:03:10.730 --> 00:03:11.800
in regular desktop,

97
00:03:11.890 --> 00:03:12.350
it's

98
00:03:12.570 --> 00:03:13.750
creating new todos,

99
00:03:14.020 --> 00:03:14.030
uh,

100
00:03:14.210 --> 00:03:16.350
testing out the various user interface states,

101
00:03:16.610 --> 00:03:18.520
and so it should be done momentarily.

102
00:03:18.690 --> 00:03:19.690
Let's see if it works.

103
00:03:21.290 --> 00:03:21.760
Perfect.

104
00:03:22.930 --> 00:03:25.720
Let me show you a little bit around the panels here so that when you close desktop,

105
00:03:25.770 --> 00:03:26.990
the desktop app and you come back,

106
00:03:27.050 --> 00:03:28.320
you can get back to where you started.

107
00:03:28.460 --> 00:03:29.800
Up here in the toolbar area,

108
00:03:30.010 --> 00:03:30.890
this is the

109
00:03:31.170 --> 00:03:31.920
terminal icon.

110
00:03:31.970 --> 00:03:32.560
If you press that,

111
00:03:32.610 --> 00:03:34.200
that opens up the terminal on the right.

112
00:03:34.430 --> 00:03:37.450
If you show up here and it's empty and nothing is running,

113
00:03:37.530 --> 00:03:38.850
you just type elements start.

114
00:03:39.050 --> 00:03:40.920
So when you start up Claude Code for the day,

115
00:03:41.090 --> 00:03:43.680
you'll do elements start that will start up the project

116
00:03:43.680 --> 00:03:45.280
server and also allow you to see the state.

117
00:03:45.370 --> 00:03:46.000
So when it's green,

118
00:03:46.050 --> 00:03:47.240
it means everything's OK.

119
00:03:47.410 --> 00:03:48.320
And if there's an error,

120
00:03:48.410 --> 00:03:49.240
it will show up red.

121
00:03:49.310 --> 00:03:50.490
I'll show you that in a second.

122
00:03:51.120 --> 00:03:52.550
If the browser is not open for some reason,

123
00:03:52.600 --> 00:03:54.620
you can click the localhost link here,

124
00:03:54.830 --> 00:03:56.390
or you can go up here to the toolbar and

125
00:03:56.390 --> 00:03:58.920
press this globe icon that will also bring it up.

126
00:03:59.380 --> 00:03:59.470
Now,

127
00:03:59.640 --> 00:04:00.980
before we quit for the day,

128
00:04:01.120 --> 00:04:02.430
let me show you over in Claude Code.

129
00:04:02.480 --> 00:04:04.620
I'm going to ask it to introduce a TypeScript error.

130
00:04:12.370 --> 00:04:14.640
And it just made a TypeScript error and you could see

131
00:04:14.640 --> 00:04:17.430
that the terminal over in the upper right updates immediately,

132
00:04:17.649 --> 00:04:18.890
and it shows the error.

133
00:04:19.120 --> 00:04:19.240
Now,

134
00:04:19.290 --> 00:04:20.350
we can see this

135
00:04:20.769 --> 00:04:24.080
because we're connected to the same project server that Claude is connected to.

136
00:04:24.250 --> 00:04:25.720
Both of us are looking at the same thing.

137
00:04:25.770 --> 00:04:27.310
We're not running separate builds.

138
00:04:27.530 --> 00:04:29.550
And if I tell it to fix it,

139
00:04:31.910 --> 00:04:35.810
It will fix it and we will see the state revert back to state OK green.

140
00:04:36.230 --> 00:04:37.620
When Claude's working on its own,

141
00:04:37.710 --> 00:04:38.560
it will check

142
00:04:38.870 --> 00:04:39.630
after each work,

143
00:04:39.800 --> 00:04:40.820
each piece of work that it does,

144
00:04:40.910 --> 00:04:42.820
it will ask Elements whether it made any mistakes

145
00:04:42.820 --> 00:04:44.670
and Elements will correct it if it does.

146
00:04:44.870 --> 00:04:46.900
Now sometimes it can do it without making any mistakes,

147
00:04:46.950 --> 00:04:48.330
but oftentimes you will see

148
00:04:48.430 --> 00:04:50.540
the state change to error as it tries to work through,

149
00:04:50.710 --> 00:04:52.250
especially more complicated features.

150
00:04:52.890 --> 00:04:53.080
OK,

151
00:04:53.170 --> 00:04:55.000
so I really like the Claude desktop app.

152
00:04:55.020 --> 00:04:55.880
It's actually quite wonderful.

153
00:04:56.010 --> 00:04:56.990
I use Claude

154
00:04:57.310 --> 00:04:58.440
all the time for Elements.

155
00:04:58.490 --> 00:04:59.510
I might be one of their

156
00:04:59.650 --> 00:05:01.340
biggest individual customers actually,

157
00:05:01.590 --> 00:05:01.990
but

158
00:05:02.210 --> 00:05:03.920
uh I use it in the terminal typically.

159
00:05:04.360 --> 00:05:05.030
I do though,

160
00:05:05.160 --> 00:05:08.030
when I switch over and and try out the Claude Code desktop app,

161
00:05:08.050 --> 00:05:11.280
I'm always pleasantly surprised at how wonderful the uh the experience is.

162
00:05:11.390 --> 00:05:11.700
So,

163
00:05:11.920 --> 00:05:15.380
if you're already using it or you're used to using a vibe coding platform

164
00:05:16.080 --> 00:05:16.350
online,

165
00:05:16.480 --> 00:05:17.980
uh you might feel totally at home

166
00:05:18.120 --> 00:05:19.750
using the Claude desktop app.

167
00:05:20.040 --> 00:05:23.270
If you want to edit files or look at code files at all,

168
00:05:23.510 --> 00:05:23.590
uh,

169
00:05:23.640 --> 00:05:24.030
VS Code.

170
00:05:24.080 --> 00:05:26.710
It's probably gonna be a little bit better of an experience for you.

171
00:05:26.910 --> 00:05:28.980
And if you want to have more direct control

172
00:05:28.980 --> 00:05:30.580
over the terminal layouts and things like that,

173
00:05:30.670 --> 00:05:32.870
I think VS Code is a bit better for that as well.

174
00:05:33.190 --> 00:05:33.300
Uh,

175
00:05:33.440 --> 00:05:35.860
but Claude Code desktop is perfectly fine and I

176
00:05:35.860 --> 00:05:38.290
think a great environment to build applications with Elements.

177
00:05:38.550 --> 00:05:39.890
Elements is a totally agnostic,

178
00:05:39.910 --> 00:05:42.240
you can use whatever you feel the most comfortable with.

179
00:05:42.350 --> 00:05:42.540
All right,

180
00:05:42.630 --> 00:05:42.820
thanks.

181
00:05:42.910 --> 00:05:43.820
Have fun building guys.