Get started with Elements in VS Code

In this video we set up VS Code and Elements, create a new app and start it, then ask an AI agent to add sign in to the app.

Hey, how's it going? I'm Chris, nice to meet you. I created Elements and in this video I'm going to show you how to install Elements and get your first app working in the Visual Studio Code editor. Now, before we get started, if you're using a different editor or a, an agent harness, that's totally fine.

Elements is agnostic, we don't uh put ourselves in front of any of the models. You can work with any model, any agent harness. Uh, if you're just getting started, I would recommend that you use Visual Studio Code. I'll link to the Claude Code and Codex examples uh in the post.

OK, so we're gonna start off by installing Visual Studio Code, and to find it, you can just type VS code. Uh, or code, VS code is probably a good search term for it, and it should come up as the first result. If you can't find it that way for some reason, just go directly to the homepage here, code.visualstudio.com. You should see a big button here that tells you to download for whatever operating system you have.

You can click that, and the download should start automatically, and it'll be if you're on a Mac in the upper right-hand corner, you can click this button and watch when it's finally downloaded. Go ahead and click it. That will open up this window here and you just drag the Visual Studio Code into your applications. I already have it installed, so I'll stop this step.

No, we haven't installed Elements yet, we'll do that from within the Visual Studio Code terminal. To open Visual Studio Code, type command space, that's gonna open up Spotlight search, and you can type code which should bring it up in the first result. If you're on Windows, you can use the Windows key and do the same. If you've never used Visual Studio Code before, the first time you launch it, it'll ask you if you want to sign into GitHub to use Copilot, and you should definitely do that.

Click the continue with GitHub, and if you don't have a GitHub account, go ahead and create one, and it will uh let you use uh your email address and password where you can log in with Google and it will create an account for you. I already have an account, so I'll just log in with cmather and continue. That'll bring you back to Visual Studio Code and it will ask you if you would like to customize the theme. You can just leave the default, or if you'd like to change it to light mode, you can pick Light 2026 would be my my recommendation.

Click the get started button and that'll land you into this homepage area. If you haven't logged in or you already have Visual Studio Code, there should be a login button in the upper right, you can find that and click sign in. Don't worry too much about the welcome page here or uh get intimidated by all the things going on. We're gonna close this welcome page and I'll show you how to use Visual Studio Code.

But what you should recognize right off the bat is that there's a chat window over on the right, and we can use that chat window to build applications and prompt our way or vibe code, if you will, the applications. So, this will be very similar to a vibe coding uh kind of platform. Right now, we're on automatic mode, so, uh, Microsoft GitHub, uh, Copilot is going to route us to whatever has the best, uh, deal and the best model for the, uh, task at hand.

If you want to pick a particular model, you can do that as well. Next thing we need to do is to install Elements itself. To do that, we're gonna open up a terminal inside of Visual Studio Code. I find it easier just to keep the terminal inside of the editor that I'm using rather than to open up one completely separately on the Mac.

So I'll click the menu terminal and the first menu item is new terminal. That will open up a terminal down at the bottom. You can use this drag bar to make this a little bit bigger so we can see what's going on. Then head back over to the web browser and go to elements.dev/install or click the install link at the top.

After you've signed up to Elements, I'm sorry that you have to sign up to two different accounts if you didn't have a GitHub account before, but, uh, this is a different account, so you sign up for Elements with an email address and a handle, a username that will be public, uh, but your, your email is private and who you are is private, so in public we'll just see your anonymous user handle. I use my regular name, you're welcome to do that or you can generate one that's completely anonymous, so no one knows who you are. Once you do that and verify your email, uh, you'll, you'll get a a script box down here that you can use to install Elements. So click that, that will copy this script to your clipboard, and then go back over to Visual Studio Code and press command V to paste that into the terminal, and then press enter.

That'll start the installation process, which takes anywhere from 10 to 20 seconds. When that completes, it will say uh state OK, and generally in Elements when something is good, you'll see this green OK, and when it's bad, you'll see a red error. In this case, it took just under 10 seconds. It tells you the version of Elements that's installed, and it will tell you the next steps down here.

There's two ways we can do this. We can press command shift P and run Elements: New App if we're in Visual Studio Code, or if you're in a terminal, you can type these commands by hand. But since we're in Visual Studio Code, we'll do it the easy way. So I'll type command, shift, and P, and that opens up something called the command palette in Visual Studio Code.

If you accidentally delete this caret, it brings you back to a different menu, so make sure that that caret's there, and when you see that caret, it means command palette. For short, I can type new app. And that will bring me to Elements: New App. If for some reason this doesn't show up, you can type Elements first, and then it should definitely show up.

But new app For me, brings it up as the first item. So go ahead and click this first item, and the next thing that's going to happen is it's going to ask you to name your application. Now you can name it whatever you want, unlike in the terminal where you can't use spaces in your name, in this box you can type whatever you want, or you can just leave it empty and it will name it uh something uh like myapp, uh and it will make sure that it doesn't conflict with any projects that you already have. I'll go ahead and just type myapp and press enter.

OK, it's next gonna ask you whether you trust the authors of the file in this folder. It should only ask you to do this once, but what I want you to do is to click this checkbox here that says trust the authors of all files in the parent folder projects. And so all your Elements projects are gonna go into uh your home folder, elements, projects, and then the name of the project that you're working on is, is this right here. So you're gonna say yes to this folder and also to the parent, and then I think it will not ask you again for this.

Elements automatically configures your Visual Studio Code with a couple of panels laid out the way that they should be right up front. Your chat's gonna be over on the right, your terminal's gonna be open down below, and the middle part on top here is gonna be reserved for your browser. So, what we can do is start up our application, and this is going to be your victorious moment. So, type elements start.

And when you do that, you should get a confetti homepage that says you're running on elements. And if you refresh the page by clicking this uh refresh uh uh arrow up here. You will see you're running on elements. So if we say, have you gotten to the confetti page, what we mean is, do you see this page in your editor?

Down below, let me walk you around some of the things you're seeing here and also show you how to bring these windows back in case you get a little confused. So down here in the terminal is where we're gonna interact with uh with Elements and any other commands we're gonna run. And when you're building your application, Elements is gonna show you this state right here. Do you see the green OK?

That means that your application is OK. It's building and everything is fine. When your agent starts to work on the application, you want to keep this panel on the bottom open so you can see whether or not mistakes are being made and, and kind of what the state of the app is. Sometimes it will switch to error and that means that the, the uh agent has made a mistake and Elements is correcting it back towards, uh, the correct code. And if you're editing the code by hand, the same exact build state will come to you. So, uh, whether it's an agent or a human working on files, uses the same Elements server, and you get the same build state. So if it's green, OK, it means everything is OK.

Now, if this closes for some reason, you can click the X if you want to close it. And if you want to bring it back, you can use Ctrl+` as the keyboard shortcut, or you can go up to the menu item, press terminal and open up the terminal this way. This will open up a new terminal, so you have to go back to the previous one on the right here if you, if you want to get back to the elements start. OK, for quitting this, if you want to shut down the server, you don't have to worry about that typically, if you just close Visual Studio Code, it will automatically close, but you can press the q key, and every time you open up Visual Studio Code with your app, you can type elements start to get it going again.

It should start very, very quickly, and you should see the browser open here. Now, if you want to start editing your application, the first thing you can do is to come over and just start chatting like you normally would. Uh, I'd recommend saying something like, add authentication or add auth to the app on the homepage. And I'll leave that for an exercise uh to the reader.

If you can get to this splash page, you've done a really, really good job, you've made it past the, the number one hurdle to getting up and running, and the rest of it is just prompting over here to build your application. One more thing, you can get to this application outside of Visual Studio Code in your regular browser as well. Just open up another tab and go to localhost:4000, that's the port, and when you press enter, You will have your, your application running here. So if you want to have it up in a regular browser and move that over to the side so you can see a bigger version of it, you can do that.

And because Elements updates the browser in real time, extremely quickly, as your agent is building the application, you'll see it coming together live. I, I personally like to work in the editor and just watch it come live here, uh, but you can decide what works best for you. OK, this is a setup and you have Elements installed and working at this point. I'll show you around all the other features of Elements in newer in other videos, but in this one, do me a favor, if anything didn't make sense, uh, or you'd like me to walk through anything in more detail, just leave a comment or say hello, uh, I will get back to you, uh, right away.

So I, I'd love to hear from you, please don't be shy. All right, thanks for installing Elements and have a good time building.