Install VS Code and Elements

In this video we install VS Code, sign in so the AI chat works, and install Elements by pasting one prompt into the chat. Then we create an app and open it in the browser. ## What you need - A Mac or a Windows computer. - A GitHub account. You can create one during sign in. - An email address for your Elements account. ### 1. Download VS Code Go to [code.visualstudio.com](https://code.visualstudio.com) and click the download button for your operating system. On a Mac, the download shows in the upper right corner of Chrome when it finishes. Click it to open the installer, then drag Visual Studio Code into Applications. ### 2. Open VS Code On a Mac, press Command-Space, type `code`, and choose Visual Studio Code. On Windows, press the Windows key and search for it from that menu. ### 3. Sign in with GitHub The first time VS Code opens, it asks you to sign in to use GitHub Copilot. Every video in this series uses the AI chat, so click **Continue with GitHub**. GitHub opens in your browser. Sign in, or create an account if you don't have one, and GitHub sends you back to VS Code. VS Code asks you to pick a theme. We use **Dark 2026**, the default, and click **Get Started**. ### 4. Set up the chat Close the Welcome tab and open the chat window on the right. The model picker at the bottom of the chat says **Auto**. Leave it there, and Copilot routes each request to the model that fits it. You can also pick a model by hand from the same menu. Next to it is the permissions menu, set to **Default Permissions**, where the agent asks before every action. Choose **Allow all**, check **Don't show again**, and click **Enable**. The install runs without stopping to ask. If you prefer to keep the default, you approve each step the agent takes. ### 5. Get your install prompt Go to [elements.dev/install](https://elements.dev/install) and create your Elements account: 1. Pick a username, or click **Generate**. Your username is public and your email stays private. 2. Enter your email address and a password. 3. Accept the legal agreements and click **Next: verify your email**. 4. Copy the code from the email we send you, paste it into the box, and click **Next: get the install script**. You land in a welcome thread with a short letter and an agent prompt. Click the prompt box to copy it. The comment box below the prompt goes straight to us. Tell us what you want to build, or about any problem with the install, and we will help you get it working. ### 6. Install Elements Paste the prompt into the VS Code chat and press Enter. The agent may run a few security checks to confirm what it is installing. In about 20 seconds it reports that Elements installed and names the version. ### 7. Create an app Press Command-Shift-P (Ctrl-Shift-P on Windows) to open the Command Palette. It starts with a `>` character. If you delete it by accident, the menu changes, so type it back. Type `new app` and choose **Elements: New App**. Enter a name, or leave it blank to get a generated one, and press Enter. VS Code asks whether you trust the authors of the files in the folder. Check **Trust the authors of all files in the parent folder 'projects'** and click **Yes, I trust the authors**. Every Elements project goes in `~/elements/projects/<name>`, so you only answer this once. ### 8. Find your way around - **Terminal**, at the bottom. Elements opens it for you. - **Chat**, on the right. This is where you build, by asking the agent. - **Explorer**, the files icon at the top left. It shows your project's files. Most of an app lives in the `app` folder, including its pages. ### 9. Start the app In the terminal, type: ```bash Terminal elements start ``` This starts the app server, and the app opens in a browser tab inside VS Code. A new app shows a "You're running on elements" page. You can also open the app in Chrome, Safari or any other browser at [localhost:4000](http://localhost:4000). That shows what your users will see, on a bigger screen. To stop the server, press `q` in the terminal. To start it again, type `elements start`, or press the up arrow to bring the command back, and press Enter. Run `elements start` each time you open VS Code to work on the app. ## Next Your app is running. Build it by describing what you want in the chat on the right.

Hey guys, in this series, I'm gonna get you set up with Visual Studio Code and Elements. Uh, Visual Studio Code is a coding editor that also works with artificial intelligence agents, and it can plug you into a number of uh backend models which includes Microsoft's own Copilot and also a bunch of other models, uh, like Claude Code or ChatGPT and a bunch of others that are available. It also has a pretty generous free free plan so you can get started and play around for free. If you're looking to examine the code files that are produced or you want to write some of the code yourself, Visual Studio Code I believe is a very, very good editor to use.

I've used it a lot myself when I'm not using Vim. So let's get set up. Elements will work with any of these editors. It works particularly well with Visual Studio Code.

It also works well with Claude Code Desktop or if you just want to use the agent directly in the terminal with Vim or something like that, it's fine as well. So go ahead and go over to code.visualstudio.com/download and click the download button for whatever operating system you have. That will start the download automatically in Mac on the upper right hand corner of the Chrome browser, you'll see it finish downloading and I can click that and click the installer when it's done and drag Visual Studio Code over into Applications. On Mac, you can use command space and type code, and Visual Studio Code should be the first option that comes up.

If you're on Windows, you can use the Windows key and search from that menu instead. If it's the first time you're using Visual Studio Code, you'll get a prompt that asks you whether you want to sign in to use GitHub Copilot, and you can do that with GitHub. Now, if you're going to use artificial intelligence, which we do in all of our videos, you're going to want to sign in with GitHub here. If for some reason you want to do this all by hand, you can continue without signing in.

I'll click the continue with GitHub button, and that will bring me over to GitHub. If you don't have an account with GitHub yet, you'll have to create one. And if you do have an account, you can go ahead and continue and sign in as your user account. That will redirect me back to Visual Studio and it will ask me to pick my theme.

I'm going to pick the Dark 2026 option which is the default and click the get started button. That will drop me into the welcome screen. You can read this yourself, but I'm going to close it, open up the chat window, make it a little bit bigger, and walk you through quickly this chat window. This is where we're going to chat with artificial intelligence, and if you click on the auto button down here, you'll see that there's a bunch of different models.

That we can select by hand or we can select the auto button here and then Copilot will decide for us and route automatically to whatever the best backend model is. So we're going to leave auto selected and the other thing I'm going to do before we install Elements is click over to auto. I'm sorry, to uh the agent button. Oh, I'm clicking the wrong thing.

The default permissions. And right now, the default permissions are, it's going to ask you whether it can do every little thing that it wants to do. To make that things easier, especially during the install, select allow all, and that is perfectly fine, uh, for, for what we're going to be doing, you don't need to worry. So click uh don't show again and then the enable button.

Now, if you're not comfortable with that, you can leave the default setting, uh, but you'll have to acknowledge your way through a number of different uh things that the tool wants to do. Alright, next up, let's go grab the install script for Elements and install it through the chat window. Head over to elements.dev/install. If you're not already signed up, you'll first have to create a user account with Elements, and to do that, pick a username.

If you have one already, you can use that or click the generate button and one will be created for you automatically. This will be public, but your email will be private. Pick an email address and a password, accept the legal agreements, and click next to verify your email. You'll get an email from us that has a code.

Go ahead and select that code, copy it, head back to the install page and paste that into the text box. Click the get the install script button. That's going to drop you into a welcome thread where you'll see a letter from me and an agent prompt that you can use, and if you click this box, it will copy this script or this agent prompt to your clipboard and you can paste it into the chat window. Before we leave this page, there's a comment box here and what I'd like you to do is to tell me a little bit about what you're trying to achieve here.

Or if you run into any problems with installation or getting started, you can leave a comment here and I will get back to you and I will make sure that you are successful. So go ahead and click the agent prompt button to copy it, paste it into the chat window of the agent, and press enter. The chat agent will begin to install Elements. It might do some security checks first to make sure that it knows what it's actually installing.

When it's done 20 or 30 seconds later, it should give you some success that says that it's installed Elements successfully with the version that was installed. Once Elements is installed, you can create a new Elements project by using Command Shift P in Visual Studio Code. That's going to open up something called the command palette.

It looks like this, and it's symbolized with this caret icon. If you delete that by accident, it actually changes the menu. So if you do that, just put it back like that. It's the greater than symbol or the caret symbol.

And what you'll type is new app, and that should bring up the Elements New App command. You're going to click that or press the enter key. And next it will ask you to name your application. You can either leave this blank, in which case it will be named automatically, or you can give the application a name.

I'll call it myapp and press Enter. You're going to get a prompt that asks you whether you trust the authors of the files in this folder. It looks a little scary, but don't worry. What I want you to do is to click this checkbox that says trust the authors of all files in the parent folder projects, and what that means is that all Elements projects by default are going to go into your home folder, elements, projects, and then the name of your project and it's saying to trust all projects in this projects folder and if you check this box, it means you won't have to do this every time you create a new project and then down click the the big blue button yes I trust the authors and I don't think you'll have to do this again on new projects. Let me show you around the layout. Automatically, a terminal panel was opened up on the bottom. We still have our agent chat over on the right and on the left, if you click this button up here in the top that kind of looks like a bunch of files, it's called the Explorer, and that will open up your project folder and you can navigate through and see the different files that are there.

Most of the files in an application are in the app folder. You can see the pages that have been created and so on. We're going to close this because we're going to work directly with the AI agent to build things. The main thing you're going to do when you start a new Elements application or when you open up Visual Studio again after having closed it for the day is type elements start, and that's going to start up the application server and you should see a confetti-like new page if you're starting a new application or if you've been working on an application for a while, you'll see the browser open inside a Visual Studio Code with your application running inside of it.

You can also open up a regular browser and go to localhost:4000 by default. That's the port. Press enter and you will see the application in your normal browser. I find it useful to work on the application inside of the editor, but if you want to see what the end users are going to see or if you need a bigger screen, you can just go to a regular Chrome or Safari or whatever browser you're using, go to localhost:4000 and look at it there.

Back in Visual Studio Code in the terminal panel down on the bottom, if you press Q, that's going to exit out of this program. And if you want to start it up again, just type elements start or use the up arrow which will bring back the previous command and press Enter, and that will start up the application server again. To build your application, we're going to go over into the right area here in the agent and just prompt our way towards building an application.