WEBVTT

1
00:00:00.000 --> 00:00:04.293
To create a new Elements application in
Visual Studio Code, press Command, Shift,

2
00:00:04.333 --> 00:00:08.373
and P all together, and that's going to bring
up a menu called the Command Palette.

3
00:00:08.413 --> 00:00:11.093
It looks like this with
the greater than or caret symbol.

4
00:00:11.133 --> 00:00:14.113
If you accidentally press
Delete and that caret goes away,

5
00:00:14.153 --> 00:00:15.433
you're now in a different menu.

6
00:00:15.473 --> 00:00:18.093
So if that happens,
bring it back by typing it again.

7
00:00:18.133 --> 00:00:23.213
And now you're in the Command Palette.
Once this palette is open, type new app,

8
00:00:23.253 --> 00:00:25.813
and that should show Elements: New App.

9
00:00:25.853 --> 00:00:28.463
You can select that with your
mouse or press the Enter key.

10
00:00:28.713 --> 00:00:31.263
Next, it'll ask you what you
want to name your application.

11
00:00:31.313 --> 00:00:33.773
Typically, by convention,
we'll use lowercase letters

12
00:00:33.813 --> 00:00:39.803
and underscores to attach together
multiple words in the name.

13
00:00:39.913 --> 00:00:42.993
If you don't know an application name
or you don't care, just press Enter

14
00:00:43.033 --> 00:00:46.183
and it will pick a default for you.
And that's what I'm going to do now.

15
00:00:46.853 --> 00:00:49.833
Next, you're going to get a dialog
box the first time you do this asking

16
00:00:49.873 --> 00:00:53.033
you whether you trust the authors
of the files in this folder.

17
00:00:53.073 --> 00:00:54.633
And that's asking, do you trust me?

18
00:00:54.673 --> 00:00:56.943
And I suggest that you do trust me.

19
00:00:57.013 --> 00:00:58.553
So down here, select this checkbox

20
00:00:58.593 --> 00:01:02.113
that says Trust the authors of all
files in the parent folder 'projects'.

21
00:01:02.153 --> 00:01:04.793
That way you won't have to do this every
single time you create a new project

22
00:01:04.833 --> 00:01:06.293
and click the blue button,

23
00:01:06.333 --> 00:01:07.723
Yes, I trust the authors.

24
00:01:08.733 --> 00:01:12.513
That's going to create the project
and open it up in Visual Studio Code.

25
00:01:12.553 --> 00:01:15.043
Let me walk you around what's
happened with these panels.

26
00:01:15.153 --> 00:01:18.023
There's a terminal window open
at the bottom automatically,

27
00:01:18.113 --> 00:01:20.013
and we're going to use
that to start up Elements.

28
00:01:20.053 --> 00:01:24.533
The thing you want to understand now
is if you type pwd to get the present

29
00:01:24.573 --> 00:01:29.193
working directory, we are now in
the directory of our project, myapp.

30
00:01:29.233 --> 00:01:30.653
This is the name of the application,

31
00:01:30.693 --> 00:01:33.713
and it's inside of the Elements
projects directory.

32
00:01:33.753 --> 00:01:36.683
I can press Control-L
to clear out this screen.

33
00:01:37.073 --> 00:01:39.453
Over on the right,
we still have our AI chat window,

34
00:01:39.493 --> 00:01:41.993
which we'll use if we need any help.
If you run into problems,

35
00:01:42.033 --> 00:01:45.683
you can ask the chat to help you.
And we'll also use it to build the application.

36
00:01:46.033 --> 00:01:48.153
Over on the left bar at the very top,

37
00:01:48.193 --> 00:01:51.743
this button that kind of looks
like files, it's called Explorer.

38
00:01:52.073 --> 00:01:55.893
And if you click that, this is going to be
all of the source code for your project.

39
00:01:55.933 --> 00:01:59.373
And most of it in an Elements application
is going to be in the app folder.

40
00:01:59.413 --> 00:02:00.353
So, for example,

41
00:02:00.393 --> 00:02:04.383
you can see all the pages that come with
the default boilerplate application here.

42
00:02:04.533 --> 00:02:07.233
We're mostly going to use artificial
intelligence to write the code,

43
00:02:07.273 --> 00:02:10.113
so I'll close this. But if you
ever want to go and look at a file,

44
00:02:10.153 --> 00:02:11.613
this is where you can find them.

45
00:02:11.653 --> 00:02:15.663
Next up, put your cursor back into
the terminal and type elements start.

46
00:02:16.693 --> 00:02:20.773
You're going to type elements start
whenever you create a new application

47
00:02:20.813 --> 00:02:25.313
for the first time or if you're bringing
up the Visual Studio Code application again

48
00:02:25.353 --> 00:02:28.693
after you've closed it for the day and
you're coming back to work the next day.

49
00:02:28.733 --> 00:02:30.153
When the terminal opens,

50
00:02:30.193 --> 00:02:33.463
you'll type elements start and
that will boot up the application.

51
00:02:33.713 --> 00:02:37.053
So the project server that Elements is
running is going to be running always

52
00:02:37.093 --> 00:02:40.533
in the background, but elements start
will start your application server,

53
00:02:40.573 --> 00:02:44.473
which is what lets you go into a browser
and bounce around the application.

54
00:02:44.513 --> 00:02:48.953
Now notice that the site has opened up inside
the Visual Studio Code editor, and I like

55
00:02:48.993 --> 00:02:53.843
to have it here while we're building so
that you can see the changes coming to life.

56
00:02:54.193 --> 00:02:58.353
But if you want to type
localhost:4000 into a regular browser,

57
00:02:58.393 --> 00:03:01.953
you can do that as well. And that will
show you more of what your users will see.

58
00:03:01.993 --> 00:03:04.033
And it will also give you
a bigger screen that you can

59
00:03:04.073 --> 00:03:07.093
look at and test out
various sizes and so on.

60
00:03:07.133 --> 00:03:08.993
But when we start building
for the first time,

61
00:03:09.033 --> 00:03:11.923
I like to just keep it right
here inside of the editor itself.

62
00:03:12.013 --> 00:03:16.433
Next, let's build an actual application by
prompting it into the chat window on the right.

63
00:03:16.473 --> 00:03:20.983
I'm going to build a todos
app with authentication,

64
00:03:21.193 --> 00:03:24.793
email and password. Yes,
there are many todos apps out there,

65
00:03:24.833 --> 00:03:26.913
but it demonstrates a lot
of the features of Elements,

66
00:03:26.953 --> 00:03:28.593
and it's also fairly quick to do.

67
00:03:28.633 --> 00:03:30.933
It's also a rite of passage
if you want to be a developer.

68
00:03:30.973 --> 00:03:33.753
You need to build at least one todos app,
so that's what we're going to do.

69
00:03:33.793 --> 00:03:36.273
You can feel free to add some
new features to this if you want,

70
00:03:36.313 --> 00:03:38.453
but one thing to keep in
mind is with Elements,

71
00:03:38.493 --> 00:03:41.633
you don't have to worry so much about
coming up with a big spec sheet up front.

72
00:03:41.673 --> 00:03:42.713
Just start talking.

73
00:03:42.753 --> 00:03:44.613
Elements will provide
the correct guardrails

74
00:03:44.653 --> 00:03:49.983
and keep the agent on task towards
building something that makes sense.

75
00:03:50.253 --> 00:03:53.673
Sometimes if you're used to vibe coding,
you might be used to having to come

76
00:03:53.713 --> 00:03:56.653
up with these big giant spec sheets
up front in order to build something.

77
00:03:56.693 --> 00:03:59.223
I would not worry about that
getting started with Elements.

78
00:04:00.033 --> 00:04:01.343
Next, I'll press Enter.

79
00:04:01.673 --> 00:04:03.253
The agent will take the task,

80
00:04:03.293 --> 00:04:06.113
start learning a little bit about
Elements by reading some of the manual,

81
00:04:06.153 --> 00:04:07.353
and get to work.

82
00:04:08.273 --> 00:04:11.773
Every once in a while, you'll see
the state in the lower left turn to Error,

83
00:04:11.813 --> 00:04:13.653
and that means that
the agent made a mistake.

84
00:04:13.693 --> 00:04:16.993
It might be a type checking error
or a database migration error,

85
00:04:17.033 --> 00:04:18.673
and Elements is correcting it.

86
00:04:18.713 --> 00:04:22.133
It will give the agent real-time
feedback on what the error

87
00:04:22.173 --> 00:04:26.753
is and how to correct it. The agent will
be able to fix it much more quickly,

88
00:04:26.793 --> 00:04:30.903
and then you'll see that error state
eventually turn back to green OK,

89
00:04:31.013 --> 00:04:33.333
which means that everything
is back on track.

90
00:04:33.373 --> 00:04:36.853
I think this best illustrates visually
the relationship between Elements

91
00:04:36.893 --> 00:04:38.703
and any agent that you're using.

92
00:04:38.993 --> 00:04:42.133
Elements is a project server that's
providing guidance to the agent

93
00:04:42.173 --> 00:04:45.793
to keep it correct and make sure that
your application is going to work.

94
00:04:45.833 --> 00:04:49.993
And it's especially valuable as your
application gets bigger and bigger over time.

95
00:04:50.033 --> 00:04:53.833
You can make sure that you
don't break old features

96
00:04:53.873 --> 00:04:56.243
that you already built
by adding new features.

97
00:04:56.473 --> 00:04:59.463
Okay, great. It looks like the agent
has completed the todos application,

98
00:04:59.573 --> 00:05:01.533
and we're sitting here at a sign-in page.

99
00:05:01.573 --> 00:05:05.453
In the lower left, the state is green OK,
which means the application is okay.

100
00:05:05.493 --> 00:05:08.413
So we can go ahead and test it
out before we try to deploy it.

101
00:05:08.453 --> 00:05:11.083
I'll click the Sign up button,
create an account,

102
00:05:11.133 --> 00:05:15.403
add a password, and click Create account.

103
00:05:16.133 --> 00:05:20.513
I can create a task and it
appears in the list immediately.

104
00:05:20.553 --> 00:05:22.153
Great, everything appears to be working.

105
00:05:22.193 --> 00:05:25.343
And next up, let's see if we can
get this deployed to the internet.